/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *



 */
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:"Glyphicons Halflings";src:url(/../fonts/glyphicons-halflings-regular.eot);src:url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"),url(/../fonts/glyphicons-halflings-regular.woff2) format("woff2"),url(/../fonts/glyphicons-halflings-regular.woff) format("woff"),url(/../fonts/glyphicons-halflings-regular.ttf) format("truetype"),url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg")}.glyphicon{position:relative;top:1px;display:inline-block;font-family:"Glyphicons Halflings";font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:"\2014 \00A0"}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:""}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:"\00A0 \2014"}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*=col-]{padding-right:0;padding-left:0}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],.input-group-sm input[type=time],input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm,input[type=time].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],.input-group-lg input[type=time],input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg,input[type=time].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65;-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;background-image:none;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;background-image:none;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;background-image:none;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;background-image:none;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;background-image:none;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;background-image:none;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-right:15px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-right:-15px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);margin-top:8px;margin-bottom:8px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out,-o-transform .3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover>.arrow{border-width:11px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);left:0}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);left:0}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;filter:alpha(opacity=90);opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:"\2039"}.carousel-control .icon-next:before{content:"\203a"}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
.minicolors {
    position: relative;
}

.minicolors-sprite {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2YAAACWCAYAAAC1r5t6AAEuWklEQVR42uz9a8xt25YVhrU+1ner7qseLiEjhERwfkDFeWAEl6dCQcAUCBDCwUSJwg+jRPIzgGVZMcZ2DCKyIycxiSOi2JbMr8hBgFNVGKNAHgKCTBnbUYCYEsHYIoiKKuYW9zzu2XvP0fNjjUfrbfQx5/r23ufWPnX2PvrOWmvOueYc87HmHG201luzv/GzvstvVmG4/3N39H8GAwzAnASHw8zgDpjRdAcOFPz0v/J1mvrm/374h3+48Oevfe1rOh/PnF/xdv+5TvgLf+EvLAv9vJ/38/ATsdzP/bk/l9tZ6c/l/XEyr8/3B9ZT3X07r/1hM/04+U62XW1X2ka/X9Rn63l0e33fHmnLbtvhONOxqiffw9m+9HW4+9h+X87dR5vbv4M+11prHW/mP3/16lU9jqO+fPnSP/nkk/rxxx/XDz74oP7Yj/2Y/8iP/Ej9F/7l/8lLfAXAVwB8mV75L5v26LwvAh8X4EMAHwH40O9//P5Dm58/wn3ZD/pnu7//AMA3APw4gB9ty8GSX++Y9iXAfyqA7wbsOwH/jtYg/vvquiP+ZcC+StO+dJ+GrwDHF+4N+tCBj+3+NxrdduJjzJ3t0z+k6R+01w8B/B0AXwfwX2R3H6AA+J7291UAX4Xjq7DldH0Fjq/A8GV425v7+/s00PRxSnDDJ9TQj0ejDB/D23RrO+Ft+n3+R+F17tQ32s58HUCFHzWen7d9p7Zv0cre6rZ+QnbwJ6AZ9MVnrGMu2t+tX7bvKOnPNnz+0sl96er+9kWEX8ZH9P7Di/f9l6D3q/9ve3/+7zsB/FQA39Xef0f71ev9Sm/U8U4Qpr26xR3Iduijzfv++QO6Z32j3av+Nj3N6N+3Afi72x58B7X4q9JCPkVfkcOfff42AMCLTcO1wWdn7IPkfvW3743/o2/xB/cE4MmAL2D+PXl7tfv78NrmP9F3nxy4GQ5zvALwCoYDwCsAB7y9WpvnOML87LUv4+174/NT+/xLDthX27LffwD/JV0n/+n65zbw1w7Yn2yfv3HA/lzb5qtX67bHfvB613Va2O/dsXA8wfAExxOAG9A+zwP7BThusPYKfAEWTxIcX2jffUuXwk/HJ4DX/S3PLZ9mhMh6z8YNZvZWnwx//s//+bf9pHkHnlzfun+1VrRr8VFAspvn1Ol/k/U8GwwlgITbA26btNN3856zzBusiwYunHsOBsDatPQzvS9t/8PASfbq7n1Zb5/HX1/mOI7Spo1lGhDDcRx49eoVXr165S9fvsSLFy/w4sUL//jjj/HBBx/gx3/8x/G3/tbf8h/5kR95rLeU/HkG7elMO51Zr3rhbQ6uzRejASNr/7PWHitJG4v27qwt2E6LtVcvbXppG7f1z6gxTt+1Ns/ae8fcsOkdSXbGbV3Ozu9i/aKZLbOweAm7baMza2NJH9+6z3VaJ+9zRLVlLD2/c35hrONbDofXdujaOeFu9iP99dNlfF3Q274/H2P4g0N2vj56rnbkdcCNt2vmbQKr1wJZ/bo9+/JunofB3kfPtS/fr3Qtzp/uuJD1D8uPJv6Q9Admj/UoXL6S/Yz7342ac3u4m9c7j7dkB3jndjvzGsPPdvEH2oki72u+B9miu9XuDr8/66J+ZGcgF8kNsNs8O3Z8nrqSX76PVuL77jjafmMjb34RYF+6vy/hmVPGrzBekbW93h/5Tsv572xn5EMAf76dgz8K4McA/F/akORHn4eD/XQfV5VfS+/ZKC0We5qzwzGuewPwN98q8Pna175mb8iQfa6BGTOgz1yWAUJpAxHt8rC3ts0z4IJ9l9Toe/UChNtVm2jesm1337alzSsEVvV54SfgqzSGq7ehgypdDjTNGtgO66O/oy/XAJe5u7XXDsxqm4fjOFBrtfbeXr16Za9evSovX770Fy9e+CeffGLf/OY38eGHH9o3vvEN+/rXv24/+qM/ih/7sR8zz35JHVBhgiG+XVwCNY8Ard7HelB9351Huw110BZm2WwPdn1Wz3p5Gb52mZ5darxTm1uNKyponVjfdfapk+s21+2vdxuzDn7aJ0sOgtOrJ03vc9bT760rzHN17CTrLIn0wufjxNu+ejsvxnvRgLC5w3UPze64tnfPra+HwG77yfK6nbv5xmOTNpFCmN1b5APOTqjHx7kddeNz5+OaXLbL63I0lYrPdVGb5jctXHtm/Vje97t42HRsedj8fVvG5JVbU8vMTYz9Nx6c9fBrsAC6+8CHj9/tvP9mR65dTeZ0PzEB0u1Y+Bxc6Oc4rL8kIxY7sGXJz1e/43t87gkgQ7Jq7bDqwMrTQ7/mpw2oKEmDffcYze9VdoJfrnYo25myh5ZFxsjKCVQ6G5/yizvfeWOxOStlDtZZaeDsJ3038osAfjaA7wfwXwHs1wL2RYN9l4VBuzscm09GC5KhOI9BmY/391cf593hXynwX9GA269og3xftzsp/e8C+MsA/k8A/l+NEv3JCMy+C7B6/sMcd2JbAVlY9u0Ds0/hF/B5ZMweAUV6p/LnAK8N8HkEZIHATxhT6+vsQFAAFOi7fTmTZXwDNHcADFfATJfj7XFb5HvhcwNObmaF2KxKoCoFZg2QIQNpDYDd7pPqYMRqrf3vrmM8Dj+Ow2ut3hiy2l7tOA57+fIl2l/55JNP8PHHH/sHH3yAv/N3/g5+/Md/HF//+tf9gw8+CEM5jgmsLMMw9NkSMLaAMwJmFe2VcElt/TCvE7ghYdX4SnbIIL7vrhJPAFRNgJogSdR7Q8YOtmnmQOWdcfoqIcoOzsJ7BmXc+b1mRjJQtVLMVR6a1s7rBBQV3qZ7W+ZoU/qjtT+OK33LCbx56JjPLncEgsbAFkYsr7ULAksXv19vlad1YC1gbZDZnowYeNjyipEds9PvK4BFwMtzG3RnAN8exzbGaTUaW54jCR0c3XcnwuJ5Mce23MHs/cfhPNDQLruJeH2AngD4x2/Hm5CmL9v2k7oK7tbOu9GPOIP30pfwDjh9gfV92GACQKdDwmebAKj7OMbekLShtvtCO07KkFny2RJEgAQ1IQcndgF7rv60OSck04aWKgnytM10CPjwPclkZ0OeJ0RdETrwtoeWJVnMNntjD+DB65254jIZiLH6oRBr9uonW3fxSwD+mwB+PYBfDdjPLiioA3yZ3NXX1yqMGT8huYNnBNBW9iy+lvuT5rsNjgL/h+rc4n8C4E8A+CEAfxZ3bf1PEmBm38nDZ3l3vJjchHyzrH0WgNR7YLYCsvPBpmsQtrtX+gMMmm9A2hlQ8k27+Dm2kwyeMmEbIHYGzFy27y49DmLTOnM11snAirY/ANYdazqfS+/va63eARsDtVpr6V9qrBg6GOt/r1696sAMx3F4B2QvXryoL168wMuXL8vLly/x0Ucf+QcffIBvfOMb+MY3voEPPvjAP/roI0LPiKUhZ4jAG4hSfFMnGGNpY/UJyjrBUQnP9PkO6m9b7P+5EmGgJ0NKUFnojId7njPwYtAm83ln7ADqrTW2s2QdpNUVhDnp91xqbnB2711/UFcAbf3z8YD0AMYqFTs6jXdmpagd3jHn4QKpnDrWHrvZdc67E1Se7KqFNclNIDkez1ANnM7ziy9Zun09Ab5dIBvwum6pL8v7+Q65zs9Y2mQFvrK+ft7ITTv8ep927dqdFd+dKT8HD0qOnNE02yfcvnUZaDhTTKqU8RyYMZR5RL6oSNOxlfj5BRjDBshmgIx3Kvl3S1b1iKr0SmH6WBcF+ZZNQJkpWHt79UQ/wf++DcAvBPDfAezXGexn3ve0DPjTQdmUJzJL1sGYEdiyFJA5saGRQWP2LANnE6D5+OwowPdW1O8F8NsN/tcA/2MA/g8A/n0ALz/jwOyr8ZdoOx1u6GoDKmH47ACpt7q+d8noI1vuww8/3B6HM5DzpuxaIovc3R3LlRxRwNCWMRO2LZM92hVoOwNmm/cdBBmAgxiwsH7+LBLIgODa50qAC8SIjScJAbPBijUTDzQvjw7SrNZaGJQdxxGAGdeUvXz5Ep988ol/85vfrC9evLAXL17Yhx9+iP738ccf+4sXL6b6zqNsyXFJ06wyRtU6tPoyL+0VAtCYFevLYYK1paNqcewpkDPZVRoka77pyPKONGYMjR1j1sylWK4StbesypNiOpbe9fvu479aXawiShl9/FeI50JjyjLwVsNaLIV3SN531ikyXwtzlgIr2yADEh/aZIOss2BlldY1jiVI5Dy5DuL0uyzQCfXPzTk86AMn6zXWYSt5bwIhWPjY98PhKE3COOZ7Gyjtpd4ygGBc3hVFjunl7jyeOrZTSUcqkkUdw7V+zgpxXjlJYR7PAYg9DW02D4TwfT8jRF94D4vnK4COMzbsTerJNmVyV+Vn9uDfifqPAMXTBZQ52xHbt/xsv0sCZIFznablwOwm+M1OYKTCqOd16Naa2P2ZS+qCTWuPP/PA7O8B8NsB/BrAfrahNCBUiB3jv1mPXNoxqu39TsroWKWMJFcMIE2kjAGU9fkdwFmDg6UByPv0+l8uwD9RUf+JxqT9uwB+P4D//LMJzPAVqSPzeLfTIT7LLnRQjRnetitjWN9bcGX83NeYPQrImAzCXmF/xogtrNIDbVTQ5AlQc3lMVGH/kGyTvzeAUqvdGCDVzALLmEkK5b2Cq/A9BlZmZg04mZkNRqtJNcc8RMnjaB/Vinlr45je5+n74zisyxYbc1ZqrUO+2P7w8uVL60DsxYsX+Pjjj+2jjz6yFy9e+De/+U3rfw28WaV+TyWABsIkdlJDBsItOm1IGQmbBFxjMv2I8kVWBzKZtQU0JqArW9aUDpSdcmq4yhm5SK5mO+OJlJGli1V2Jlzpyy1XuqULZzUfnj64r7tEsT9YPcXLtQGzLmOcnFo8FixzNGLY4pq3IzoJsDxnWMJdwn0eqjqPoYvMjhR+6/PMV04quxX5jqEiBOJB/+crozMesQpqGkvuKzNoXdrosTbNWK64YdVCK8KF4qMd8zqjWj73nKwdk+vmfM4foidSx1G6N/alBnDpY7/8nDtz5VY9NrAkjM4ZUCs4N9zxcyLPHhyVzMimGx41APlCQlGdcU72jJ262AE8uDN8rG/rfZXLz3a+LHYC0kyua7sci39AFFmsbZiZM2phueU789n49/0Afitgv6GgfOcd7qBBISMDpxyYObFl+uoC0KqwY7HGLK0tWySMfZDQhDkrYyDIx+f7q6EA31tQv/eA/zbAfxDAHwTwpz5jjNlXhClrd0JQPRlffLb7CfjnkjF71/+plPFRYw4BOsH840FW7AyQGfZ1XX5iQmJYDT14B5l9S7fBJiMNIAV2q9WpqUlHPQFmvM7Ong3mi4EZyxW77LGfo2Zrv8gc24oK1Yvxd5xYsd6OWwNh3pm04ziGlPHVq1fHcRzWppXEhbEzZvjkk0/w4YcferPMxze/+U28ePHiDvIyXwthyHrJFTyZX3OWbPSlapQy9lqyGvt6iTUmqQGlP+w7m/yAYoQuGexZAsIyCnAsWyc4qzVT/LWdqrNgrsscO02o6DLrFW86B+fWG56aqXRGjBWlnO1QxzipD7FjZt5qtKOeyhiHrcPS9uJ+RkZgsVRHNAnO+pcuRiX500vZO0tHoyLTZcsajKwEPT0DlvxobJYN2vned7BmDAJ1t7PNJJd6IOhS1aDnYwHPHx7cn8WkdvARNWZs+IT8tvtGVo51pp87Q1TAtrjJkjP9CDTKJI2dNTsdV1+0gmfVbRmUOWHQrurLzgCtHtfbHpjdTr5q+0O9Zc4svVAcl1V/1kAZvw6mrESAZp85YParAfunDPb33yWJpd3NI0PGssVu7JHXmOV1ZqusMZc07pwZy6g5W6WMNcgYfXyuAULOPSjw7y6ov/WA/1bA/z0A/3MAf/IzAsy+eg5hgtEH2WWF9++B2WcAmPmGcUqPUQMOx4PATQZ7PXssVuTySce5MYera6LIFzOQZiplTEBVYLS6cUhntjrjVErBcRxWSkGt1XochDgldpnhIWxZqClz91H7lQCxwZi5+43BYJMm9m24uxeWLrLBR8sh6+sqDMxIwuivXr3qWWV2HId1UMbArAOxjz76qH7yySel1aH5y5cv76ALOYnDSj3bIQBmshSwHRNgdSKpNsliNzHobFlkHbA6dVcZb1p+IBmVIA31jdVkeOg3tiwAuP56TIBVM8MPp7bUiCC1/ox/duZSXOfSDVkL3Z1g2XycRQljtOxAUiVWlxoxPqC+HNy5M0ZCSm7j8ET0XSVXNOy4g7FuImHDyy+4J7aLYTCptMXq3VTIA8DzzGLP+jZ7WbsPfsgaOBikU5M2GuZrl9MxhLBFxCkAyWvb3uzAhFPeZJOsujWqMHAFWEZbdumqGqhVzeWyNcTNmjcYc3qWYmTmxYzRstEP2eQ69JaLOtq/gYByg7HmvBkB5J2XNcT1DF/hgnMDw3KCY4CHLQDtBCRcGYIohjwHZjeBNVcwcAfWtiMaj6Cex0Fad/Z/EfcgA2daxmcXOPn53T4x/xh0XQdmBMR6P3jEp3S7/PMKwHcHkOGfMdgvt8YnRSBWgAC+CgGtEhiyCNQQXlfDD9vWmJ2BMn2dIC2TMjKLVgNoK+0+bYNJq7/GUH8N4H8SwL/0rjNoTyhfiUXmqsNV0bjRxHCXiYr198Ds3fiXyeweAFu5M/nKZJ2ZezDQqifrGnc3XQ/Vbu3YNCfWiwFXb9eI1esmG02q2GWL1hmoBNChyQSHu+HGwr4AcF6PAjN67yR1LA2chfqzxnwNEKuSxQa2uvNisMTnurLOmjUpY7fE7+6LvbbMXr58aQ2sBSkjv+8SxlevXpVXr17VWqu5jmyLJ8ZigpdJFp1wTDK9lgbI+tdJFUiGcdHcEBO8YWOjv1BKi6RLUKQx2rz483p3uWUnk278EXSYmAjTFbCJEUgCTKKUMed2qgA1p2ynWVvGn7sI0ZHHzfWHY8U0+dibgOTHiC37l65+vF+d9c1rQDFY6tkI4HQAE1wXfQPCBAFVI9Nin0ctdPp5XR6h1oDAnngWbnLaVA5ZEyZvsm2rX4wtoxPRjdKVIwxmHr5KQxfHEqbFJwCrmGb2oQSCt+3MlsZj5zwQYSuTOL9r0XQkXkBTeskDNWdZZVks35XFIvaEiV10Oq6cGdk34+mUE39KYE2m2TyzxbjwNXxEf3n1WdnKhPMzrBYmWenfI+SlP+voNzBWmtFHlzCmUkZizsbrO/vv+wH7Jw32q0uDLROQFbK5LwvP1M0/dkxZEVOQgsyhESJltADE1Dqfa80mOJtM2Wz5lDJGpsxEfGkE0ipsQNL6qwz1VwH444D/L95VBu0J+BKNCGykELscSEtHmN92jlm4+t9Cjtlb5Z7fJaOPbLmf+TN/pjJLZzb4Z46H6SPppD7syjkxq9EyYcUCaOsyQ0zZYXH3w/uoq7gyErCDvA+DcSwzFEbOxMSjgylm77iubLgyErgKIK4DOAZlCs6ojoyBWVEb/OM4nNi0wiCySRdxHEcl6aJ1R8b2B2LB6nEcpYdKdyOQzpB9/PHH9eXLl3j16tWdhduwYZ5YABr3tTYh0+6IurnuMu9kmV8jCGMHele2zpJ2GXJNV5V5UIt6sr73BEX2HejzOzDrr0PKSH7/AcNYRJwBy1g0AFksMFfgNmOe14QyJ0ARxYZs62HD/EP/Vs/GrMaMoQRb64MsH5C+M2/jr078ls2TVjsbZTZc9I1gRjeKGEBg+s038DLjBmKG2MqUWlvWMZWmDCDv22Mj927VzkxSq91qpiQ1jGFOBqu2Hwrve8g5s3lNkkm9mHKQnb+RlSmxYib1ib5oCi068Te2zQbgkZjTxvC6cbs8wHBjhtOBap6w2BZjU+/2R3c21Jpb58iiq0AAbNbaNY/n/bDX1nYssVRbm/wzaSMuGDWVgCA1YN9ucleWlUtXdtVZZ6LJgtylMev0nYz7ZMjoEXmoADPDuYwx++pVAtu55Db5Vq8nKwBuvYZMZIxql9+ljP5OGoD8PQD+OUP5h6azYkmki4WcFudnFQUym1YDCMtkjcyinWWYxfoydWZUUKaujBZqy7TGrI7PnVlj0FaGSNN/LVB/LYB/HcDvA/CfvVvAzL4cLY2MmbKTgGmeHwvj3zNm79C/Z9SY2QVoKyfM184eP3M/VDt7BUoLOMJqBKL5YUAcXDYNZRagZhvXxPCeAVObXsXWfqyzyQ+HlFGAVmmvNZM50nwnaSRb6aNLFLPg6A7AiDHrLoxgS/wG1soGmOHly5f11atX5cWLF+zS6I1dQ5dB1lpn+VPiuOYEyAJ7tguVrjlz5uQsP9wZyXlxIZ8Q5YzBQ0OxDT/B2T6/GharSQjqWyzzJQ/AfAVmXCTHhXLV84K54PuPyUA4We4bdbyRktkLy7KKEI1U+pHR8QWcNXOGUImWGX9AODggqznLbEpKjUyajxNXhW3y4UpYOXC6ChO2s4Zn4wwjRotzwtXt0GMJIrs0pmwYnw+vi7zQ6buTlPUwxtmBH2pinNGBYaVlnbdP13KN28zMTgJoFmtTF4bOwL8vNg5ZTTgiq8iB4EaB0nX8Jrw5PTr9mJ3zzFyPs5M81RcDlPCEup3QMQXnQckP+rPbA6+6yZ3LfBcrrsDshuuiuUfYss2Y9XNK1XYOl1kGAFGABXf7kiyJDc/YC1yelqSBnYy4dXAmdWWFbfPJLt/ajrx7wOzbAPxjcPsX4eU7ipUFhOUAbfJLuRujETNmQ4RdBuSBhE1HN8Yql8SjUkaWMM5pHurMatpaBmF1QM/SFB4diHaQ5sD/sMJ+C4B/DsAfwDsSTvcE+9LU0Ya7tK3Twkgt1nyzeyfhbfO7bxtIvdP886cFzNRt8EFQlppsMChqTFUAZMRseRIS3X+HnkgXFeA5rYvrv1xZPq4N659l/xRIPReYQQ08ZFkk75kBUzDGn5k9c9zt8J2zypK6MhcgBgJjB08nYFa7C2ObXhoL1oFYB2gcND0A3CeffOKNpQsSxZATRrePusEuUEMQWaZjmlom2ZEK4/L+ZV5rlolzzz4PNk2rrZDoMzEpPjYBqYREfbcDSNgvJCwZyOWiJiDMaIpvhQG2GH9kDo0xoW3ubW3LHGIAklvlS/XUyc3cloEjX4AbwgBiAEc2qVSTGIeBixwbyhSD0VrOCX3ZLV7vwyY+tac34uEGl7ZeZm2bBkc1C5aKRmxbtJPPcWYoHAPXe8XwZ5MA7DBW0am+ujKwca9myLVReQMlfYSRGv5e8J/sTpA0KOxtBIaH9kzdIulqGldYZ9MoygDtmBp8BWRallUexC+WjCnILD/BdI9EpLG7fJf6IQVmTw+CMrtAVifdrKsStTNdYcZKCjC7bdiw8sCxe8TSZHuD70zZjRgzBmGFasqMQFp/9e7O+E78+37A/hV4+a+hltHmYoXkiUWkiwXRfbEkph+lAaQi7FiUMuZh0wzAbMkte46UkUFYXk8Wa8tKqKCrKAQ9p6zRxzEosO+qsP9VBf4HDvyTeAfqz+6ujCYCa0NODi99AK1He8+YvWv/2L79pBbsTL64mzaAV2LOsQVdZGoBRne97ktAZLnPqsuyVFeGVkjmtdZhnS+gzgVgMZC0zPpezT1onwJIo/U71ZQpEHPNMZNA6LGNnlXWjUDo1YUt6+Ct2+GzRX7peWW9xoxcGAfQauDMGjizxpbVly9f+nEcw0q/G4RwXVs9wzRdzefRcMNX7/VocqhlWUdTNyaOjFyGxaVaofsmtWeLoayyZoH6YyYIyKGhFsb1nAA2AhEp49h3tpuU+YttvglrBmx89kJLI6CyRb6IsAdqAsJeLNMc/35GJozb15lVccjTLXuKlmcWO6SWji4g70xSUj/liTff8iYLgd45B7rQrcziZFQstWW3LbqX0ihU3C47Dj5iibj1bZAIAIuFbQE41yjNhOyNY/VtcrbV54EBx8xfU9OckBOoO71Kdd186Y6EIzzMo31ky3HYd2DMdvpBnACKM4CSHPNHQVm5IJkS9Z+MLz/KlNkDO+Pn4CzrOT2KA7mpT3M9Gd93BSfLCTbc/xw8MmVjw8SYWUlqy9jwQ+vLDLCnd6GL978G7B9Bvd1GLZwXwK0Bs0KQJpMyFnFeLKlD47siZazUshLyzGpodf88TUBMuMHaLoPJqxnsv3EA/54D/xqA3/kTC8zKF9vJfADKcCKcLmB9xPit55iF+9JbyDH7zAVPvA3GbAe0TqYHwMZAqPeIhIXLTDyWmjPK7GIzDmd3xA4+GigzMvHoZh0DJPRssLkrk/nq3xVwOMDYBUu2LLcBXtm8fgy6MQgaumRgdrufnmF1z2YhLEvsDNpikd8BGwEvdmLswAwM1F69elVJmjjAWpMzllevXvmLFy/A+Wcd3L18+RLNVMSqb/pUwl7VBtKChBEx5ssoAmzUnB335wvXjw3cws6MZKW/GB2qY1xmJKh3K5YyUj3SliXj4DUjIMbzQo2ZIh8CaBo6rQqF9ReadqoyS3dLzOo5bJq5ryopZd34wwf3U2Xqmn/AAkkPIM2R2E+Ee9EEPDwGeH/GdAOIYQTBxnyDLqOiQTMJhG41SUO+aIv4jscmK9HBo8zLWqSBTUYMWEq1ePPj/jlPjlEdGFXJUYmAu4fAbWcKmOSXo+ZrOC5q6HbMS7eRy9bbOPfB6fp3R3J0JGG6H4t2BAzRGbG6C90nUd+LcUprCw/+pvar8QA7HWsNvr+sgboCGbhAWsmtxE9IJj9hgFTSd8Nd7rf++7YTaHPDuT7zTI94sq87kGa4rtvT+chVpWc5ZnYhedoDNQZlLF9EZMsYoAUARiBtcTP5Cfv3vQD+APz2y1Fbm0ppZjzTUbIYV2N1j0JLGDRDJnFcJY3RnfFKyvhcq/xcyuijbnq1y+8mIBbm9c+VZIsTgvW9tPZkmn8Ge6qw31Fh/3UA/zCAv/oTxJh9+d6okg2eWOwUFAFnOlBY3j4we9fX9y4ZfWTL/Y2/8TfOANjClnUExC6DZuaUk4UWjjymGT3Za60dfJUOMGi9gRnrjFGXIXYQQ2HMxd0rM2icE9amj2WScGfOKuuSQGXJdhLFDJgVrRPjZboRCS3rwpCVLkUU+WLpx5zAZK8z8437Iup95q0Bs9qAVKVlbsdx1JcvX9YuaWzThl3+ixcvagNyt2YUguM4/MWLF/XVq1d9WWusWT2OY+IXJZxcJI3c31KWzKeaqSbDne7RkbHSYPvO1Z7nszGbmsTl1vhyi2CHxjM3xmDNrrQg7UxIxLaYns37wRJG7tS6Wkyqa2PNJA2LE+PkOSzUBKkIEQTK+vSjPTQRYkRzjWrcEsisYuWj+Hv9tmOtZixk0bnLbtvAR73Wqn9vmFVU4oTMUCtgVuG1GVY0IDhMQvoYo0jU7peB3dmYyjJDD8fXQl0jsTa97dVmG6svlYCDGO0mH0OMQsoEYofYo6bXV1kDj1573pmpZ+XAP/fl+j161ox1y/vaK/gofqAD3TubVxdHxHm8WCxLMtyRNeghdWf8lMwD7o3lyTblmG05tONe23L9uN7Pb7/GSk+lvG+3nFBXu97+A3b5Vy77VzlmGUh74lHP8a2nE9YsA1sXdN+O/vMHG7sDdBnSfALwKko1d5wf8EZCzNh3HWV5dgdoIbeMN9J/dAlr1hkpuw4z+BT//SNNuvjlu3Sx/Q2AZujT7VaoziqCtDzHbNrnr5JGBWq4kDLas6zyVynjCsYcM0szt8d3AmIsZzR6X3AD2lKdNQNqe23s2a+ssP+oAr/DgH/zJwCYfZGoWhkRA/Y2stmv4n2N2Tv378ouP5EcZt8L5hsETDzbRgMW9WRZVyZNJIQd0LBrImidXMtViRnkGjMQc5a1YamDk5oyBVUQu3sGW5WW5ZoyF3aNrfd7cHWXKQZpYwdwAG6UTWYaKk1yxm6Jz3b5Y33EkFkHaR1wdSasSReN5oEZsw7E3b2oC6JtFGF+4pw+pI51lTN6yy1zAAcp/tjIsJuBOGGpkEklNWjmiQJgqw64CGBT4KWSRsukjIj0XhVNZgBnyM1AlDFY3UlCfpmJRJEZsg7cMvmiGt9zwLQPKxAn+OYLY7bajOwERzZrl5wgZGd/XAoJh5xNA4nb91suliohezBzNKyQCzeJV6hONhXi7KFyRZcE58VlXkw/+BpyKSPwtj8WDebX2sRRv8ubcYLrvv4mQ/gZr9aJqPLIBNLyMZrAw4CGJ0Ky/MBOt30nl8qllFN+e3z+xlXtzBN7aMu9avepIYB207F6H0jO6Jgr58WNN/surtkvNnEmaxT1H63hCtIoZbXjlB6QL/pJj+wR8w+K/uporBt/aDT2I06MWcbZvtPYGLKb5yHjxVZWrE8b4KyDMa07+5Z3Jb8M4J8Gyr8QAJkX5ABtlTRmtWaZ+UdupW8JQIugrI5BBAuALJcyxvqyWFMGAmMuEsc7lNJgaXZltMGUkVBx7CkGW5axZnSlfRWwf8OBnwbgXwHwzW8dMCtfphGBROLjUkUNMv7wtHr+XQdSnysp4xkwe4RBI7Cj5h/qwmjJOpZA6c4OKXBDdF4MdvmcedYZM/pu4TBmWq4KGFMmbLxm7NnZcgn4sgyY9XUmDotGNWlcb9bnFbLB7wCtyxkr1Z3daq1HB2QNjA3jkMaQlWaRrzlm1mvQ+rxeS8YgrbFyDATv+7Az8UC8E/smj9lJxhhAGc0/nNR/Hj0znGSNmmPGpFOlEiHzhC3LQJqptMrFfvwBKOMuwEyQpNvKpOmfajMD2sgaHvPLJgzY2+TXjeFHTf+mkb4t38yOwwRpnJyGNMJ6gic1tHDyaDfnzjmfn/6pIXhbD5f75Ld8SBynPbxhSggnM3Nn1hwWrOeHa2IHv2IB740GMq0d67wY6+w6w0cB2VH6OBksbv/gPAcrSNPIgKO7Vlrw8W/HkG7PPXDbg+GIzXDpdm5skTn29dN5GcYm87fnYcK8pscaeBDFVvdMo2tYBZZ9eXeL1H3HuuULDYh5Y83K/ebTQVpn0a6YoRNv9rIZyy649sjIXgnHiGX+mfFH5m14LvRbIM1VLRmw97YvF+iq7VQo73Lx36Bb8G6TO55gMYVipmwYfZjIF7M/zi1Lssy+9TlmXwTsj8LLr47SxXJ3iDSL4GwANIM9FZRQa1aSmjI1/yipnJEljVHKON0aHUiDph+pL+OaMk8Cpvf2+C6AzIIByJQ6TlGkhf9Ags44vcJ+b4X9IgC/CcDLbyFjRjVmhXQ/Zmvxdag3MxkmfPtSxq997WthfW8hx+xzZf7RpGdZhlkmY4QabXR5oSxjTc64A2n9dt6ljF1OaE12yOCLm7Y14aCFAoMl4BEJI2ZSG4ekLiyVMipAI9mhkxSRs8ucgFnpbezghuWNmPVl0M/t/eLCSKYfA7Q1KWOlejIA6BLEo4G1W6856w6MXb7YAFp98eJFbXJGa5b41iSQN2Lh7NWrV/dtWuIWx07yZ46MVaz1sfbtGYdAyKbK7IBNK/1ALvE2LGkXq6NOh25c7nHA3l5yYw7i5LXuyopJgdw6VJK3bxkwA7FkylnEsDZP+D89BSuIm+HTIDN9CzHViszzkbApbbQVWnZZHSwYecArpnGhRRt+sgB1cic0i46KdLuA0/lyH4btE8V38WXXUvbtu6XXg1OxFwcy97GmUP9EEssO7ypdpIaOLV3KDrmmykOGGQb/yZlqE7TctectaYyy3txYLjuvuTokgQyCuy19dFVkdmuYhzhdFR5ZSiPwN65YlXY619LRdONQbYs3AnUCdQJ2pSMCAmIDlB3tz5/nzW7724ZdkFA7FiiDWR2GvVyA2RkiOgNjV0YgmxsDTr6SoaRNcJs93XHyE/beK6GFCTewkJm+MpNwAE9+Z8tu4sI4ECCDT2bOINllQDQCsW8lY/bzAfxLqOVX3kFX4xfrbbaPwZjWmtUCK5NTipLFQnJFE6MQO6k3u3JljCL3sn3v29csYPrMHn81+eAcs/v0G26BJVNoNl9BnwHAfl2F/SCA3wXgP/wWMGZfwtBf48E7S/rePy0p43vG7C0wZkkQ9ILLuK4M0YnQmf3pQERYLgZR1pgulQUOEJSAxNF7VGv7zXY6+Dk2mWaLhT2iXb5fGH7wMbEzeSJviwOihSEbbetW9iTDHOtimSNJFwvlmHmttTQXxl5X1k0/vIM0ssuv3YmRHRtbJlmXKZbGktUudezs2atXr0CZaXMf6NdEg9PBIt+wL89i58aMaOlSxurRmRHKktmq/KtJ+VXFGi2V15nRmthcYyttFCmfH+27tHOLlBHR/MOji1yOkizea5c4k9Uy3ynamR+WEGgFWkY5wNnU6cTowoJhMdrP/yJzFnt8HNxMnE8AoAysKh2Gu9xvhow5AQgj7d5gWlqn3pklC515yeZsaKcy4Jvc/pDfuVUChK3GiZnAjrPNwN6RA2Txb8bqGJFWGWNIeqM6t+hYGJm2vmxtoMx7PVhleWKd7PICtWvr0GDESBtdtxyrZ+SaOEw5FiaJrV+IGWX7VGLrxhkM7qm0z+zmyeMQfYHydGfMCu6d1cKSxt757gDtAVnjA2rAK/bsjDnT90/SbYuavBv2scxnlF+5Bp56LM5w3SYlm3FDj//6wtM+WDud5hFLmc/LJPi4qOJLLfEL7sDFkDNlwMaV8YbFmfFbA8x+Gdx+CPX2HfNgdobsdiJlbNd0Y9XMCszWWrNZZcX2GnnA9L7GLANjlmaYecKcqayRWbO6tcXfMWdGe1bps7VfSfzPBZZFeSNGLV5b5vsP4Bc58GsB/LlPnzHrF5ixTXH2np6GkCHvmWP2uTL/eJeMPrLlvvu7v3snW1ymkXEHAxvOIBufWaLI4C8x4dBtmsodhTFTtswTyaPvgBczcB1IdPOPRJaodWSeMGqWgMoBsBJp4+79aCcZqRixZgPEkfNkB3BOWWXdJMQbGKudzaIcM3ZjRA+FJmljPY6jW+ZbA3ZduggGZn2e1JjlakB1RLsgk+rqsB4+e42GhZWkjUMdWFdn+dG/rgi1ZyUUHCG3zXeTnqSLtDFrtDJk5NDY883Gvqkzo0gcF3zDiJR73TWxaV/dCaJa0wO/xUzYrALzU4A2YVpt3z6EY6sngGyBx9RhH7+p0PZl91xkbL4GHXcq10OVVI0YnK3UQ/ZV+6wlUUQNh6gPn8lwg6zTejUtD3Snh75Y7IcEBE9j1aJTaN+GR8rYZB/FIWcp0wIoSNvuIFO/thi7MKMcWfDAhvkaHLBMMWGDez5djYMMcQUurLfnVLD5nTHrPfthANJvCk3WeLsB9qqBs3oOQB4Y+S0nmMZOoBRLGffAjAumdhpCPCAC3BTc2sX7CwyokWDlFkuinr7QWu8TOwVJIwg7YUNmekx6ckXCUFDWLfE9AWStoc7SRQmkhrozfuo5Zr8csB9ELV+NVvhllS1mAM0JpJWS1JqVxPRjdWUszfKpL7UCNQZjbJe/ZphZkCxG1mxXY1aDVUk0/1CmbEoYI1NWRh2zBclivbCbqWOAagC176rAHwfw6wD82U+fMeMR24I4+pQFSiPhkvGeMXvX/vWOzkV9WWaMEcAUMVbOwIa+E1wYQbVftD4eyxwsmTBrLFfMpIuBQRNghqQ2jA1ElD0zAYE7S3wos9bBFM7NP7JwabCNf/tcWwYbyxbZZn+AJQZjZPzR7fAHG0fgzGqtpTFkfhxH6c6LzWVxLNvAm3cgRyCw0DEIxvHsqhi6mZkujjptnjnPi/v8YvCB+Vn7YZ7Vusm40WWgdF9Sd8IvEqqdNJx9Q1Xrzfq+nUgaPcmM5HokF92O57c0D5lSCKALQ7Sn0i8Ek5D4WTPQ6pjawZotoMsFDLnILTngmqqj3FNj9azf3dc0pW4TlbuttWqGjTNncijXTl7Sqh6IjOw7FlwWzx5FtjuVfiEvyxEuVqONuKO+43RG3VxdHv3Pfshy3R72cedh29HSktiwuIbleGUndqklLdLL73+dPTukU/4Ko6rrmUO59uD7Mw+NTMp479CybYadwL7dVgoe4/fk+NoFq8ZRYPTXD2dhVeDTHQPvuD4wI4bIkvHt0abadX+KAnvXFuz92LFBouIKKxMElAW27FOXMn4fqv0Aavnqfbu3SDvaBqCF2rOVRSslZpuZSBhLYJHKhimbtvkqAiwhfPrK+AOSV4YkVBqBHavEktVQXzYN/CfEZKHmDQg2/9r2/TQA8g7fVWF/zD9FcPYEfPt9OMNt78ZYENmzba7Op5JjFtb3FnLMPlc1Zg8AM5U1MkCafdoVZLmwYEGGmAAuXb9mnGVBzxwY3T8fOyljAtI4HJpr1VIjj0eBWa+Vo3WXTY1ZJSCm0kUnJirMo8wyY4kizSttvU6ArNveFwqdPjoQ4xyzzqQ1IMbyRbScM6P5fhwH75e7Ow4e7BZMsozE7ySM5Mo45IvMqNlU/h2IIdMV2IvnEkdGNj5c9EXhaq7J6LF4/Af4QpJFa6nYs8WTMdPGpQ0m0BZSopNstaBciDszK51MYn8ZaNXAlu2dGGOMNJ+BOtwZIWtZDUBUtuj0HZbNHdXJMKLnlBntbqznAurM88Ls3HNm2TwKkqHVD+cw+2BGywjQ9XqsVmvWt1M5FU4Apq3Yesonc+bIuqSSc9eoHS6awJF+ZkZ1bdZvoON6scG+GV0JEJUMBL6T9NV8MQlh634+/gr6zFimGQOjQ4xbYx/J+3/uU+ubGNUD8vfmOEOSWm19/wt10p2kjE46OY9siVlee3YiY7QL0AVcG39kf19oIKYGA32Fb1dej1mCmt4UbQVkLp8Tk5RCqkFrbvSlROKJiZzb7dyJsQggMyRu9n5uEh7AVzHamDowItJ8ULasrNM+zRwzw/fB7Yfg5aur0UfGlN2aRvk2QdgAbrEGzUJNGQO03AxkDZi2jStjXluWWeYX0k+UDTizhTFzMftnMOZDtjgN/jGSytjS47y2DOnAhqfvOzjzTwWc3Rmz8esRuaI9OBQ0RrjeM2afUcZs9zkz9RiW92bWgY1LAHVg4RgkMeumjJ18N4A9coZktozr3LCztQ9Mj9SJyfJ2YnNvCvTUBl9YMGbNwmuTQIKki/dhjenKCMkuqxIqPcCUu3fZYZc8VmLAynEc9dWrVyNgun3m2rUOvlQqWZi9U2DmdO+qiBnMTCCFX1zPYSa1X83t/wZjlqn9mHCC1Jvdr/moFAzgUO9nVQEaXaYMyHYuJQw8erB0R559R2uNNWUHRNroecHcsBasdBAqjeL6jjZYbDUiG8agzANzdSA27/6dSpzY3F8jWSM2eWZRgBa3agtvdDf/6IYUk5qtA9SMvRmAy+J6SDbX66dqcjzudVEe3RUrj0+yVLAGRYkLNcsW/TZGHCzEaBt9p0o1wNicTUuUmdhTm9kJxA9/XjKdMRwBCAHDt+NcWzusW8hP18lZVxbdO9XZY8DPagScbZZIJlQLj+E5yTODPNEVTLr8cI1OB11PNSmzEObYKlCt1ZjdfGrnRpbZMfs7XeLG1TFWALzC4hJk66DOmZ3Gzkk+s4TXZdlp/iVuMDzBZygXcguRnc7whPLCBuXsdgiTGXtqXchbmQwZM2bWdqS/Pt1W1/ri58aPWmu2NCdjzgozZEYAnFEeyxoTdix1Y/zUGLPvQ7UfhHX5YgdbxJL5jUw+qOasTw/AzRZmrRuBIMAcBmjqyFgaoCpDH1E2wGxKGVdAxmzZapevDozqxohmkd/ZsGidP+GmB4BmsGb3sa8tA8kc75WmkS1DsAQxHv78rgr8sfopMGfTlbE7z6gkIou2Zx2BsYTk81dj9q7/E7C0AKYMiCUgzZltGv0eMgvh4OhkXQtrJo6Kah7iiRQx+x5b5ENqwaCgLTP7SGrAsnkM2kabEkniaHuvP2MWLKkrgxiNjJwxZtY0t6wzbWTyMRiv/plkjE5sGJrFfm3vQcuGzDNuW68zC3JMlROKQVyQGgkoqr4Y0wWWzVwUfjV29xi7VEjotOdjRruxpPWziR5LF8gBSEj6DVZ0VcCWx1oxtuobAMwTidlO47bKLG2BQ5llicteeHKqfBjkO5BkloFsKKpY4HMnmlk7xcQWmD6HUzDxVGk4MYo2zB5ATFZ77YYYZiELrSujLfBbGHpcc45aMDIT8XHRutk9nNrLffniwfLTauv/4B7uDHIorIFC64YlfMndGbgByti63vxuHkKRAB3kWO3xCJ2JsnlsGzBlS3t4Z+2auYhHB0/v7h3gEGm55oh98xZNMErSjMjcfu+1eU0PQNbG2azJQbtT5Ki+a+fTKKnF1dwmuDJS9EGHt60mFV6pUw5hy56iSyOk7mjYpb+axiAP1pjthIV+AdqUk2Hb/C8M7my1QZgdTFwIKHc1ZnY+bi0lVzeLoNFsVl2VhNhhzFjKdLAfOKlM8NWJLRCZmam5Lv0l00I+ofogLFqQMUrhHBuuvH27/O8D7Afh9h0DTJ0xZTs2LQCxWwRobjC/oVgEYlUAmQn/dAdKE6D5hnfqdWUrILPBgmXW+Vmo9GTO6sgem0yYD9MPriOblvl17BtCDMB9zkEXszUwBgKaO+7b19fvKrAfqnfm7P/+1oBZtW9HsSLi3QehTRyqRLXPH2P2Lhl9ZMv9xb/4F5/Flp1IHKHMEz+DEnZMpYxBP6HOi7Q+zSDLctF6O2/ufog8EfJ5YbuQ1Jdlhh/0uTCoam0cAKmtTy3xKwGZ0izzS2cxOw3V68jMrPTarnt/pzrLFRPjjw6qnOrUQMzXqCnrZh/dOr/P786MfX5rp27Tj+OoLJ909+GKxwaGjD3S2jJizIbDneSYOWWbDcYMksuMxB7fVyPDMd0TwmzXB2GdZSrFyyzzSYsZ6TAs5h8HMWGVZIzKnlVjxw0JoVZdprJjlgKtaMfhW4gJSirrHb06HpRz3ywIHaNDoxGbOC3164ZdI6Fkr1FlVlZC8qoC7aTAcLlvsbWJi+qt9m1RxhembJK3443BG3w+OQpao489eOXbErA83SFF7wj9Lr0NodVGgxkEkInZ0nFVU8uOvqytAyNZiDSLNb0hWNPvyu8dcn64jWNWB7BOuW3j/ORR1RlrOZhNNzmOhBQGLUPMWTcA6cjSpGDKlH16dR64/ECXKTM6xIkwkeWMji8AeKJKnCjuqoHlMOlkZo1dcxCvhrNDVrTUkxVVgpJBoBHSvN2ip+TNiMwELiwZkm6qyziaZ18gq/wMjC0gTICZgrO3C8x+8d19MWHKUFq5ETNkDNBue4CWGoUYzKKUsQSL/Chn3LsznoVNv76Uka3y7+/LaGWlbDJ+P1taydqk4iZ1ZTUMBEYHxv7+JnVmwFJjRq9AhX23A3/cgV8F4IffCjD7Jt0E9AbLkvZ4Q1x/09Qhep9j9o5JGZ9RX3YmaYSAr3ZvM3ZrXCzkZT4o18zVHbFPVFfGJO8MmfmHgLZl/SKD1PeB7ZL1q5yRpYoj6y1hz1TWyFJGD4HNbXn6rIwZqL7sIDMQZxv8O8aa71mSSDLHLm08GHCR6Ycfx1F7fRsde/YqXNgP86STJvVlSiSlMkYnYGb3oOmDlH8MwpyVgIhlWV4T7KXSRksYs9SNwR8DZ2Ck2Vq92OX7qoRElpK9YfTC8HHdjnxbMi223FKj+1lbBhxN3tghWEkCpjOw5Sn4WnFxlJJ4yFEMJI2JAfCGefBNnzJlcpEg+EdH83zdXjQcyeV1cX3+rGFCG2HL9fERR78Yjcx+IJvj4JYAxt3xT2u+ztq4cVQ8Qzr+jHHXchPP9U7T1OnYd+tmIJVs9GtEGYZmDLI/xlcc1VkG85xexC7fGjCb9WU+Rvk5OHiah9fW0azUeT5nzk7MPzBrx77QJIu3IkYfJGPcGhu2HerALHXb94mhiyX4KjmN2591QMEkfS0ZAEMOxhnoaJ3Zx2+jF25fws1+P6x8FeUm4EvqxnrewCJlPGHQmEVrGWd3+/wi9vkTlJXEobFIzVkGyN5UyqhW+XZqk1+pZVW4Ph9g0xMp4978I0oXLcnJ2AC076zAv+p4+hWO24s3B2bed0QeAA/eIPv1XKc72/sas3dTyujPYMgsW47AE8sZU2ljN7/oQEzBizBtRt/3JMfM1bCDvy82+OOWnDBfDPjAWWYEpNQeH4lF/gCC9LnUWg/6TnH3g5YDZ5V1ZrCDrc6S9eWIFesujFzz1d9Xmu/EiB1ijV/6+poT4wB5nQ3roG1XB9eDqxsTWJiVclX+CW7xiqD/P4sEcyagQHVlBLaCmM4jsRQ6jdKZt6xPu0NuS6B0oFjmipbluNfuK2XX2TAFWy6o1m3Ffqe3r9X1ECEtzJM+7ypnrCHrTO30Z8B0lVQ0u2QX4+vOINNrjUJNI3d4Jykfh+ch+lN4iD7wluM191F9rSoFVEc3i/t5KeM0TUOKYY5hCEycibR38SUcxh09o2s+3J1s8I22yetnrN1NP8zFEbJLEX1Wjblkg/E2gtGIMGtT1NiNNOaIbZdOYgzAYRqf9H3vcSu+AWgNwBml143Q654DR+fP6PcVTDd72zrQNx/rjTo5ljKyXk6zC5UxKfL+1eVQtJ3KG2Pnr1DX8EaSLRZi3VmqJ+ry3kTGuNb7eJNt9arQIwiOH/D/bw3uUsr+N+rCmC2j32xhnEM5yLir6UaUmJqcBJt834Cykg9alMzUaaknwww8C5iU6L1xAVtiAnKLiO/Ne5PfCccfhpevTXt7AlevI2XswdNFTEHMwnfu9vm5O2O00FcgVjaujDspo22t8lXKqO/vy9dtuDSHSM/6MmstRBtKnHx0HiC9M/uAyBtBdyB+wo4n4S85UP4dwH4LgA/eCJh97I4bae+1o5T9bsczkX4I3Qn6U2Ck3jYwq+8ZMz97rwYd7MpoFJ68ADuRObJLo4v5hy7rmlMmtWnKYHkiQXRpn+3YtBMHxstpCsxEuljIIKOyW2PPIwNZ4gNgsHV0wEXLsxGHqxNjB3CUPeYiRez1ZR2MdaYs1J61dXWpY5AxAuiAz/m81AwX1IRMYqDU8MzoSKqJX2L+4XteKvNH3Jra190zdBkk3i3pG+kPo8/c13AwZgexZgc2FpOWMy0MNqqfSs4zv5Mzri8Cs2jr4UGwGKWM7MQYhY+etkA5O2trCUd/uVdlR30tZuRDZh4ZKV/cIOdJbyMpMe/M48YrS+cMwYgCvsppx5qy8+hxH2yK8LAYjLRtMvEU6jiXZWO7Q53hGOOqW3KKoJGcralPjEHcs0HBxHe0mfItzwZvJLKBLf85W27HeHpoGzORXEd4o+Ill55+naDM1AhEa87Ype9F6E6cO8rPTqAPY3HuzkK6uRgyLJb8PbWpTlAmethx/tJ8f1C6UwdqB1a7IG24GfDkzRWyM2UdkIHYMRNikerKBjgr06PidiM1KcgsUVkyj0ANgqX0d2UZc6CgbDgv8jLCILKkNQPp/e/VG3TO7vVuvwe1/KoUdAXw1aWMtwekjBRAvQA3C+u92+eb5JvZImX0E/v8KGFUBu3RgGmtL8NJiLQTCGMDEA+DGJbUlk1JIys19tJFS5iyCMwWgPZrK+yfd5R/+o2A2SdCB4cHnNxE2S3fRP1h9qkxZu860PvJBswWkCbMVVZXNuzjsa8NCyIfMsdwAXDdZt5ovWemHmypr/b6ocZM6ssCkNuBtc74neSTOdeSiUNjYMX6MZrRZMMEhGu4+ufOXFVxZhwyR5Y3aj0Y1ZiBcstATBtLJhcXRq6Do2M0ATHfK3ZoaFPExFJGU0zDwKxI7rIl0V9IjAxp/mQXNoST7YbxLQlc29VGaRZAYj1ZaYSVacBqMQeAqYB6gizrKghkdi+PFp71YhvCkpiyKGms9ODE4NUmuqynNWSRWVPuzqjNtdZA/JCKWaRypknG4ZyxfUU396gbJq6S//zMU9vD3cFAeQR8JrI/9xVTQ1g/Y4rPGkx1ogGBod/t2w3GIcngwrT3V5MdclMgMw4gxogZeyYGa36bph6urAuGy6OHaAcPB9xMQJe4UPbrwU96AZZtg82HjBhU3rkQNuwxaLgQY1Yo48w4LP6YerzRmf8EGl4+u/eF0p1KMFSwYOJdiCGbLBkGILMGygzePjmJHyNrNmWOlRiA2wBrXaI8Qdqho9VtR25Aq2i7uy7e2iV505wyBWSIrvOBaCSsUPA8h8qrurNF3JAuaHmN2RIiXc4Z07cBzAr+YVj5xy+ZMduYeyxM2SZouu5qzrgaK0oaLbXQz+zzo0tjbddxBGQmUsZoANIDpvuV7ImUMYopK0Vf1xAwnRl+cB2ZXkUVbPbBYC2CMGHGzoAZHPidjvJXAPs334AxW40/PQ5SpSMTi3bdxwPgrQKfH/7hHw7rews5Zm9VyvguGX1kyz0IzE5rzbiejGtAtPaL82241iwBZmDZowAvT2SY2AReg4BbAHH6PZmWyRXBoK0Dw+6CyLI+YcwYlNVdsPTOPp9cFbucceSa9XPH2WVSF9ZryI7u5kiyxA7ImIUbksgeLq1mH622rLsx+ob+mIyZP04qjcFsrTsDgTSWNR4zx4x8FoITY7WVLBgyxooQ+3WpABReZfqO72R5NWovDdP/n3fMXTSZBMCEaVhQZXYGFlOM1egiAjQkIsasKsxG6CfXoMWH00GiRn4sOdhS/Ty7zJa2jLXUKZI0I7aF1IbWr8Aul+NM2EbF1m4H3002nDPG5sqMHB8NbSC5d/6DVNIo84wz0ppaqLFE04aepHycLGfzOqtO5vgeawKHDf6QPUocgE9Wa/x/ANDmXFnvYGkQfc3l0KmbUo2gEYMlbx0jM5KHdit+J8/GmTHgVc4tOzZXTGt9vpf3Npn0qAPmpmNobVRiSB1t5tAJPg965lHU5FPOCDIAMXk/nBoR0Ucz1L6vt2/oBdhk28d4/S0wY2id312NSxF3uwkBmDVj641pAALqwmLIyWxMr8Rk1NYyh+PVAGho7xtLBuALzJQ5SRfbMe7vGYyF2jJIBBgZgXRXxoK1XuwUoFnCoqnENwNigR1zLIYfCyMqYMw2QQfHa9MNPwcof2AwYrVxorsas/CqeWVqk3+7MP/gjLMbSjHc5BryNOMsC5qOgdMzYHoFZFPKmBuA2Ka2rG7qywrJGQs5M97GkNNjtWUQWWb2+aS2LKgN2+/vCcC/UWF/DrC//NrArDB1raMOu06NjNK5fTrmH++ljG/2T9gjKHOlgIdlgvKewZQlcsbSC8oyKSNiNhmE8eIaNbsAYqe5ZGw8koRUd/CExmb1mrDxnow/TC3iVcrIDo3kzsgZZIFVo7yy4fRIrJkRUwVh0IbrYmfD2vub1JkNi/xuf+/u3QykunvpwKvXl7m7dTaNgGJvF+9XqPOrGeNkp2TJUPyZ1pPVSTaxd0Ylw0IgD5NmcqNi7w7nZ3y8n1B97ok4sFIHkqaF5GzekbrKFY8MqHmkBSHzzXN6RmgFIyGaXShNJ1GpXopTxniQWNE2zJjTY9jTqrWzmjOVMrqcu1ij5Doi6Ht4auJcGAFtYnZ0RN7RR51YDZRIGwJq7owWJHguF2Go6QuFUSI3ZK1WjTI+iZUMvVBX6R9tx1stWm2gn9PlJvm10t0ql2SsVRdp4SzwG1CeXSv5xqDuDC1PzioWJnUd83EYZ7f5IoIMDJoHcrCQTBGrrLFrrPkHtnxOXPpGd/PlkBRiVIkxxOJ6FjUdiEKpDsRuoZqMgVmBGoAgGHyUYPah8rHb+D1be3//e9X+Cu5ui18w2ja9Z6zDqk/NaWYPDRN3k86YcTSA2bULo1E/ld/jpKsaLfE9MmbBjTwJ6g21Z1i5vZevLWH8g/fRJgZmze3KbAmGXqzvF83ojm2TerNRdxbZtLsRCDNlhZiwWGv2OkHTZfte2TJsAdmEi9EinxkzZsvq8rsD8gDpXf3Y5Lszxszp11yESbsDUfu3HPYLXgcS3YGZieEH6XkXiYbUlvH0T4Mx+wys7zMlZXxdtgyzvmsAHQV0O9OOjDGTZYO9fQM7rZ/mXQLYwVRNZIqFlu1tpVXP2q8OyEhqyOtY7PEZzG2kjKA/ljJ2R0Pr78kuP2PIhpwQsw6NGTOo1LCZdZSktmxIGfu2GdC15fk7at+fbTdwNpVGJz0vKVqwjteuY52gjKWMLs6MrPALJVhOTJrPsquxKVuNDU0Lwx1rwLRTz8IvdJlOtSmDYaNaFa/TPr8Wki0i9/1XKeMZlmF9WUDHHKXsK1hdxZdJbhkEnM05Rxt7zzwdJwtTAyCMDF5G/UkNGpl/TCljzfG0YSlaCtlgNRI3Z8ypoTuJ+WqsCHaFNJxlPoXtuzxLjZi3NgZlFmupgjuyYUowSY5oBMaWyzrkCbIziq/7u8gNsUbkZcdET59J2OByNJhFW7d3L4Mwwqsuwwx0zTSjxBD3B/5Q6fduqNa6UKydMzb/YNmiNUdGqTczz63Uu5NF8FPsY/aQ6V3aqIAsCh5NOntaY7ZjyyCgDNJxZvfGSiYNPkDaNPgwb1vxaGdvmKYdHAemNWYQR0aTvOYuZexZaAGzubhTEpum3epsbLAst0aPoMuyWChqvOtO9HNMIIdbfLxWD/R/Ays/JzBdnSXrdWF2S+SKdsKiscTxJjlmVG9WS9y3tu1yK8JTTV9QJ+EgAhN7DcoqON8sgjG1y58yRrXNn1duXRiz/t7IkgRBKtxh2/GQC2POju0kjHyf4ifb7f75awfsXwXsdzwbmH0ThiJBqiNjUhQzKuvXrsunBMze15i9fWC2BWM7uSLb3ieMWpAzkhNjBzdVzD8W+WJiZ8/zWDK5kzsOF0QGbZ3lEzYtZKVlmWe0XSeWjOvJXGrMVMrYmTAGdiFwGkBnuPp2CtWYBTdHDpLmeW3acRxHB3f8vrNpB7FpnT2zkEs2HTG7PFTBbH9/399CSj3VQCNSWCaSxS5THPglsc3vVvdjErNndsdAGgUW8EvC6FsW/bWANSMc4OsOBE1mgqycHU7ad2uNQWzDMt+k5iwLntbhYAsyvvygr7dQlyoeZiXqA6+UNDa6czVklEURpKeJaRB5IzNZDdZVj3JD6njP+JZWvF0jm3n/ChdFhcKkCWycQpwHeBK/RpOY7krHXh7Hg7FaUBmBmwG2ars0DFlmgxlImucLeLoDqulAqFflLGwnQBRq5xqzZdawlNb0ESLsPyxyHOmApx8/azLFXFQzeduwXwRGB5uHiJ6Nr5IR1G0jkmDWCBo936oAd7qGhg2gsmYeA7QgI06abzbon2OROCqsMuokqieckfyLeTVmyWZg7qwzY6bMQn3ZaqF/35NCvzY2F59HrAxhcutQ9uDoMgFYYLQoDoyZsSy7jDEAI8xyW2vLuPxvMHEZ0eUrybUEUCOh1xYgJp+BGD7dz3nJwg3ajrx6dm/21wPlH93WkmXmHyxL9JMasyu3xtNQamsujWdSxpLa5tfBKmmNmV3Y5fvCmlXhfSNzZiEC2wJ7ZkllWTT6yNmzrMZsBWH7GjOMp2JJnm4O/PYK++OA/YnnMWbVUfiqpzqPHQAzz9U0n4b5x9e+9rWwvreQY/Z5tcs/Y8NYqheADaZDo1HHHAS6mE1jkFNpfQsoZGljUg+mEkjf1Ix1pmwBXyQ3VAmkujIyg+aZAyO9hu+KMYhtsstYijncEPv7LiHEdGg0CqQecsW+/pZd1s07rNvhdzDXZYsdFLbvdsljCKbuckUAXdbY96OI/BIiMbUFN5zY/3GpVlZfpvVnHcvUMsEYG3xwuRYzdp453WPDlPhCl+RfBk4yzfQ9OZpUBmvsNEcADWIKAnExYYAWdg6XkkBsxGkqNlRw1pdaQVmHWB5kjPy+LhHWNZhzZy4xaiBRvSYaVJU2enoifcnD8vQcuo44eiKek3DjYFm/kdudWAYmysuzfaDvaCBz0rZchBiPxSIT9KTGb2nkqhGNx9hPJcL5s8bDJRyNTDw7IouT5f5awHKcZqeliOMiYg1cv0F190Yj63xrAixDdD8bpiBcpW8JU5aHPJcgYHSCcZp5NlkzD66MloIxEIPBHc8oLcvsFJxG/CcYy3LXmHgKSkFbSSj21RiMGbs6elQaopzIGHcybjtRdy8qNjX6gHzenMOOOp2A2/MYsy+i2P/2EpSlEsasxux2XmO2rUHLAJrBSmnB01mt2d6VcQI1UI2ZLYBsrTGL4dImsek1aYEtjow2hiluD9aV5QzZKinefeKho/4buwlQk9/b/85hPwt3p6AHgVkboeBngO14KicpI6Z6oP9gPo81Zu+S0Ue23J/+03/6UWCmYGwBS8jrzxT4ZIAqnSeSxi5dTCWQ7HLY69KI9SosWSRZ48HL0ntn2WGXNDZwxK/eJYcsVWwgrbAlfs8mwwypHutv6wjL+r34q0sbvW2vEgs2WCqpKxs5Zl2qSBJEZwasuzCSI6PLeoZlfjf70PUIGB946Nj1hjbyO08yzTwzN6xTBVilvmyR4NlqcOh+bhS55eSDZm2HND2FMSFA2ZMMgFpjQjZrMQfyNAmXtqnTVAbNH9mhxew83Zto/MhQatac1QDU4r5xXZnL59hxzuhJXw5/CJhOTxBwki4MSd5als9IrXWo/USieLrt69mnmhB/QAqYyTkRZZM+cszEuRFXhy05zhwQ99CuMtN4cRaW3bPckfHRg2u7cOxe1OSJXs6TmjNiykPOWX/fXYWMWL6QZEz7uXb+ovsiQp1MfI+w3JQyzqozl5qnKGcsAsoiA1ADa25L3lTHr8OBEYkLoyVM2c5Hg8ifW4ns241Ph+nRlAg66nOqIQgyIcHiwuirfLEIBAzSR/GPHEHPz3RlNPungPLTJ0DiVO4LV8bLP7tm0nzj2NgBms9ss7XWTAHaZGPPrPPP7fJjuPQqZawjx2wNlTayx3eUxjXXbU2Zui4qQ8YGJjvGLDJjCNMjGLX4+WdU2G932P/sYWD2oc+Ae76/MCum7ozO7H539J0Pgfc1Zu++lDGArUS+GEARYt1YkAGyXHGMgJqxkYe5+9iGmQW7fJYuJkYhyoxp+9gUxGV5ZyCWMGepM+NFbtm23kwAHIT1UtYMtdYOGrsTIog1q219IGki2+uPdZBU0dhAhECYcYbZq1evDqo700y1LmEMwKzLQTtYBZlhXXaZfNaVqbP8cJffSBmrzbIsxipVLPGdw4XpgeykdktNjbJGm9IDF24mC6oU8w9rNWbVYkHcAGIK1DCTtD2OeK1MnyUaUk+xcsZX5ZlwTnvkYS9njRlzaLz/kG/sECTXqU3rENsAs7Okg8ey6X4C/lnMHPtWbvfTsLd6/UN6fiCes94UOz66tsGYIUoXs5ozdmm0SuYgVBQ3Ppt0KyyMsBuxCWs2EgJYU67mRkzZbO7qDKjW+Wpo4MGx0Sh6l7OmfHSaB1NHwdEDRDHG6dMyZ/kSMQ3HgZVWBnXLgFck1sLv/5RBczLJPGPOMqZsC8zESlJbaM+qMfteFPsXT6WLS7A0uTQy2NqGT99Ocs2k5sw5fHqakJjF4GmuLXO5ltQ23xcLfVxIGdmZ0UOWWTfyiAYfXFN233JnzJ7akylGS9/ryu7CYzvNKcu8FtXoozNjJqwYxqCJLT0Fig74fQ77IwD+6kPA7JMx8vOAKkZrhP0zCaQ+V8DsESnjzpa+AakF+PB3yCI/GHnUWs3MmJGqUsu1fK/XWmXtfMACf2H3eFt93bp9/f7ZtN0fgb4A7joo1mU6K0YgDQLMBpAkMFYI0IGmOdnrO8kZ3d0P2u8h3ezgj7PcuqzRfVsxZnxd1Fvs7avCzpUVo0EeYwbNV8Bm7BrPBiCJrJGXy8qzTLGN0keL0Z0iN13e94DNiBL0Siwa7VDdNJytvQOaOrNhdDx24z6NlQvrj5ViSGzzVwhniSujukLueEwPDJ9K7HzU4niSRefpIZmSj3DU0kPoUofGIQOWXCjxa6ZLS5RBJaN8HsZfmiKDCbrkGAkRHM6B0GEHNiMQdyv/eCmLQ70IckzOkw+XR54WoYYeYY/1P9KBdjrP8AnQZwTC/IJjGgiB690t7n/aQQ+0Dw8hszkEs2I0vt/NQULtIjMvehwyawHQ1cBAzRczEK5UY5ByA0Z31xcgaKGWbAVnwGrYMA9DJjmz5P3CmiECtYB5Co0fiZlhB3nFyXYfdHq0rix7GLEnS2ZKl9WaQZk0QpvASvmFATDJOPPyqCtjgdnvxVMpC8VYGihqcsJYW0bujB1g+W1KGM9qyYzcF5klKwLIRmi1Ua3ZjUBWWYCY5pqdSRlLEjTN9WVXUsbSdBhlkTRWiZmY74/kd8AMtsuv0lPmLMK0GAxjgQXEqK3TZyZ4sOPJYb/HYf/9R4bOnj7yXBEwi3OTPLNdv+XTyTELW3kLOWbvGbMEmO3mJ4HOZ+DIlHFLllfHRk+YMFeTEg6e5to02fayTWHEQjA1m4WQg6JLPIARqHLNMaPjawLQvJtwkJlGJRBkxKwNySDb4Lf13xpg4qBqELjqNWfDiXFjrc8ujRX3ujKWNA62TM6NkyRzPM+r571/l3oyJ8zCpoXBhVH9M7opCNWYLVbvtgmWpuk8kprWzKbsgscnvwuwCEFrNTozeuLWWBMnE2bNAl2VJWhX2pErDMaxyty9942cMdp2VGiGWbTRP4Z4pblNtqVq8HaLVWx+4QOp0K/We0bUHQA0cBMwK+V9OSKqYFcIisOeN8PZe/PWezewEYWPbTOa8Jbd1cGQwUZ5oKlcNMj9nXwyJy9hhM0VD3TAN/LQGCo5tdsZ+HjLA/ORN2YM6zpS8XoPqJ4yh5Etxs/8iGYjMBsGHAFNzu2uHGePWWitaseW7aY5Fa3XkRn/duV36E2uOTNZJowP2InRZ+8EF84xAwVLYyYoG/3QTAZeGMiNwRSuklv5sNX9Lb6PEkcPNWWFKspKYp4PsUpYJY0lgLNYA2NDfAzKn1okhJRdZhuQBjUBKXGaEn2F68wyuWIDdmwGol3OwiIH26ghQq0gQbwFRWZsmQAxCCX4uCvjb8bNfnNqgV+TAOnUIj/Rje5qzcpJrlndWOtr8LSVwZSt4dN5rtnrShmruDDaYj8yKyEL2ZFM5mzCNLbInz7BNpgu/n8NSWTxXUW0xC9JkDR/LsuzdWXPDPjvOuzfBvB/vAZmYfMXA7GnRRtjhOZdZ7g+V+YfjwCzjXxRp9kGREFYrp4J5grGkjo129WwEbPVpZOZo2IhX/xeo8X1XAflpDHI4GXqxoUxzG/TeZ84fLpSzVkw/6DtGlnhd3fEe73WcYAll72OrIMhYs3AjBq9Z2ki15g517RxXRmxec6W+X0Zmeczos5Ht3fnheEJRdOxxsKWqSKQpYxYc5m1giutmaJO5lLyZids2SnHhFT4N3vY1HBGnpbkmLFtfsgvq1JTRu8rMkrl5Ca3VuucWeQrWKsEqRi03UUhdYx3GlWjVapKw4Xpx/5+xTlmBMP4+rIYCxD4Gnfqj/vKBrHjTBWxyMbwYswzJ9HXZGItYdWc6FufFoLhaARHRxfzLQpzjqt3YeNm22LzNWesL1wjHOr3szoBUwx3xhp9MMCnb56qWQIZsWcWp8/XGkD5BNzZb7a2WjqIt6dF05TuIHm7zQKmTtN0IFYIqA0pI8Q2n8FZ7/JUqVvCIl7cAbCVIbNFxmckX4x2+RHtrJb5FgCayzx+tYUNIGBGBGMh9iuAMTX4wGqPb2XRaM6870S+uEAhjxlnBTEjOlwXRW+L1Dil9VyljSWXMnZmyVRg+RAw+wLMftelhDGrOwugjI0/bteOjj27zAm4ZSDNiD3DrdWaRYfGFaBxRSSCpNG2UkYTMIZQX7aGSM/astWV8dzwQ4dEtMYTdN0XrBb4vgxk2KLwEMFQAG5n4MyB3+2wH8LFlfP0kY4k2wWMsc3A2ByX/VyZf7xLRh/ZcjspowIsrGYezFhlhh2egDdPMsY6AAs+01lYdRYeLbLDDBwuUkLMrDUOvWZJpYsDpEvtmYujoisr1kFZPzbiwtilipXkiK52+Y01q8y6UZ1YB2YH56KxsyJb5tN6BlAjeSO3O4BKtd/vwFVkjWkM8/ZekZAivV+65J8JSDMinjrRFOCQxb6zAg3D6jRvyA3z9gVKu4U9VtiF96LfZPTZAVeaSebiyOjJ/ZWDsB4BlWvHdz1FLg8PtenwDbxaPR1d8s4M0fTDwrwod9TjXr3eWZlN2HCoeW5Tj0UyWe4Pc3EYrkue1n1lhmnD3lUiJtli7sTMMDvlbDXiSx2UkX6P78PWnsyjbGljmLECoxkdUJnicpbTrec++mL0Xm2NZQluDXSr/f7swrOkhpTn59clbTyWQGSmLHysHOxYONg0MEHqIc/MNU/NOhhkS3RqYCGKn6k6Q2TLOhCD0pxVXhFkUxBft8ilMXvGXomWApUyukMlBWAIAA0PvG5H9gMQ6kaWGWOGJFjaLSnnKudSxhvl6WrQNM6MPdohKSrNXTSPiRbSLNEUI2fNQsEcVcddm3/8JtzKzwluKaUbcdgqYbQdSCPGrFyYfFjCwu2MQbJaszavmOaaxaDpaf5RAsh5rpTRwJll0/SjpBLGKWW8EVumYRSHCGB9Mf+414vVhQXLLfHFzGP5HH47IaOQ6+oMBfj5B+zXX7FmTx/Js/8SVV0zaO9rzD4DjNkzmbMAxDbr6wDsEACm29AaM2XPPAmfVpOQbrRxKCAjeeKuboyBl8oXNZtMl2PpIkiOmMkcPas3Y2DG4JXNSQhYoTk3cnB0ZbfGmQtde61YOY6DpYyB+eqySmLGKkMAcX7Umt0pZTy7B5CVopN0sdYN5UXLuZh/HNjnap3wWOkNMx1gMpz4/gNL8ZtaTJoETjubgHTGzCizDFHCuEgZfbWchK/azQsCynJYKQDLyHFxfl7jow1Hex+NO2pzaVwdGnnnfAMUPTk7flTUZCdm2LSsxVhu2ImnYygX95nQCiosoLgKJAaFRvlnLvUHPsHf1BlS9rIJWGhHa2R0LQKUthqVoq7Ih/NFXd27sOaog8Fj4sRovV3O0h4aP27yR664cELMsT1AtIP3ZT/nybcBtCLAbWlEradfnc+Bx4EitxUgO+vimCUTxkxdG4N0ka3zGagpUihBFhWZR0u6kBB3RoT6M7XLB3k0ukA3Bmseas8UrPlGTGyBMQvyRWXJkmlBzigmhhAjkHIT7xWbAHCpOWPmDLJ9KFCnAQhLWLOl1kyRY8KWITEG8bZjr057zDcU/DPRwrIAh9paZiDsxDa/s2yhxuy2D55mhm1nDOIlAjQrsFsZHFhJgqbrImlcg6YfkTJON8YO1NYwh0IJfEWSAbvJh9ZYWsKT7QKkM0OPvh83mRefpRkrptEU8dVgvxvAKWv29KE6LvrJILJvas7iSNi7nmP2eQdmGi5tauyxeT+MIkjaiKROrAA4EiOOyAG0XC4yCMky1DrT5lIr5pvaN1d5IrFkHTSaSCUZgFUk9WbEijGAc2LNWEJpBJYKyScruybSOirJGsFW9iInrMRwucgaRyYZuykmy6gdvsv1obVkru0dy5wN0tD9wkX9Eww/Epv8IWV0scLHao+vAdNp9ZJtchdtp7JjuiQBZ3obrixdpB3zYzoz1rIJlMbqzMh2+TztmQpsxiF7X8kqMiaVLzpVjzEwqzJ1BWfXfznQqDzwY4Hcubc11HXdL4gJBKyd7y6ME06OWLEV2cwY0kqMiC1ZXTZoXTu99G0rN+kALrJEkEKvvQshW/5z6HLtLJhnwQTRxt4totY7gTiPQzw8BlKzj+0OFlS+xkHV1hjGPrhgwTIkUShytnVVWJmA7KTu3dpPLeTClwSYBfBlIl+U94Epc2mkQykZI0Cw82mMVUtGAjkje/AoXsTIMWO2LMIY3+SbeWoUon6qHn0mbZNVlsgZszItNTPsMWDhdCDJgHaZT5b4wauFwaMj1F+GHyRnQA2tpbJjSMAYMU6DEiSw9Oo0OuMfAG5/3wKwLq3xiRlzk3BpNQSREOoqro2+C6G+YVhk1o2lfomSRpNaszVoOpMy2saV0ZdXW+SMHlwZSwNlGibdGbP5moVG5/b4q3QxZ5P3DJkt2WxZmqfM+/kH8BsA/DunjBnXOmePTJO7/NSgpYPm7xmzd+jfznHxhCVb3AuZaSIXRmyMPUJtFX3ubJYLa2Zq9HECwExYsgLgaO6RpbkQ9nM8wFNHfx2QUV1akCv2Y9DZJwFnIcCapIu6XmXJxva4dqwzexwbwI6L4trY59fjOHi6H8fRwSdnkjGAMwFpvaaN69eczq8lzCifowWThVB6Kb8KRgdZp9hz3MPqP3ZgRMaOec51hT4vTspgkO3MjkETPVbPApAaoOU12EqCgtcQU7R1/Z7U/z5DLG7yRSenPwQuhCVr0QSEO8ZOZ8AT38Y4LTJjhrxmiT8f9RBzDz4l91q9wAo1MGeNv7PazSlsyXXxagOoxw5+HXLACq6dqouchV0GK0krOXd4eaCGIX2uCWsza3Kxgo0t+FiZhFVXeG1HrLGzlbNFLabajfqtSnSeAdVNrFJmQ6Y7b6sBa3eAXgc2A+TbZ96mY2TxdMMOX8R/7RxaPwcOq0ZmKzzSKF/21bGzU/ox462sPfvgNEFdMDX/GPPrOtxhWCS7KlkEYj7S2gVh6aIRW4ABqScwM3C6GVsjcN1YJl9UhgxJ0LyP8Ot5DRUhmZQ5U2xjSSZzAGe3e4oIg64bJlvGbowsSCsl3nYXyaOthMEaIo5YmGY6QKNAjZ0bpR4LpwHTTzD7Z6McsghjtpEq2nMMQZLPmaFIrzMbxiBduqgMWlyP3aIzo4dMs52Ucb4vOLfK1/qyil7NhiZXZFfGQpVuIJhmwkJnIdJYZI2+NfTQejFLUk13rFiUbvKgRo0yx3/WgR/AprTq6YONw2J4eHo+HLspMXkPzN5RxszjibTMAj8BbsyS7Wq9tDasf88ae5bVpnWAETLOxA0QxGDptkCMmAsoGuxdNwBpr1o3xmYfAZidyRqljoylizzfhLkyBmwsQ8Q0BDGuU3N3a0BrMIwEqPo6CzFvI1ONzD8qZayNeySbkZBUkg98d2o0UQwWpOhMAs46oSQKQM/0iOSTEQKmbVksBiLb6jJfHzUwfBDObJGnk9Xk0Goe4tLY3AtrWWm/zgZUbJwZBai55S7oJ4xZbouvYkMXVWmXM87RvoN4MUOuR70vfYAzzirJGY1q0WyxG4n3q2gAn/ir2zSsmNbp3kBXXUfI22XfnQ67wYXTc2zWL02Gx7FheMjFsdd8+ahxSrz868r0DNOSDtDcqA+ZOfwRSCF2zZnV4+9m23GRIXqTh9o0H7HFmKOBqQFeazsdNs1ZQurA/UfvlpiJeSWrMY+doOB82Z0p23FZlDlUN9a530aRWYgvIGuYbpfPrBlbDi7sGBKHRiMJ48pJckWcA9JBjPJGWyBWlDOyRf6c5lDzj2mFcG4GkksblUnwhfsL9vgbcIYTSSM2n0tZ88oKyxn5mJhY6G+kzqlvTwbSgjtj4sSIjUNjb6mRXf6+xuy/jVv5OShGMkGpEcucFtP6sSuZ4yMyyDJt+ZF8j6cLSLNSxCa/pDVmuZyR6846eHECND4+FzL56IHNlWrLus7gNtQQtuFb43WNAK4yABaBWHkNYKZlE7v6szIfBz/fYb8RwB/NpYykpFmlCMkIxGbQliRLnytg9i4ZfWTL/cAP/MAOmJ0xX48wbEgcGlXGyGxLkDNq/ZhkmF3VmC3bJ8CYgUgGUcxwIVtOp0sWWSZPrLSsZfO4Hk3DoOn7XBMGmmcNePV6NG+ADSyHlHaBmDVuX6X6scJSSVmH1hQG2WO1hFByGaWm8HkTNixAvUwVWGNZVobnHol+VknjY6As2wqo8WKLz2FslWrL+rxau7t83KnDVzljcNwgkDYO0mOZk5vTsxyf1dVy1pyxfX4d/FE8E+zKyF36HHz5YOg2DlKoRx3Mydj9VnRkwlgOS3lyrxywzi0AmTuYqHCPlvUdjI3lJ4l07xKYR2liAwqDOeuSvm5TT3aLA08OW3pGgvdpRpHtVcLFpjU92dLjzjyh1iiPNAKb/XNgo1hBgXnczOHVSRYZAY3jfj7uTatd69mcMTHBbhs4sEmBtXo8YZAaSK6tY2EEBjpD6ExcWW3r7uAzrivsbwWq1Sga9XY9DeMFAlxq/bfMU8asg7IyGU5yibTBNuW1K7F2bHVrZAmhGoBwjtn92zeq0JksBndK7VTWiBOJo9SQuYAzySoLEsYiBodqm3+bff/gB2JTvmgUbF0YeGUAjQwWgXiqopSxSIdWs8kS0MZyRw2W7sDssN0N+B+DGXDQAegH56A9V4DU5x08/3ZSj5a4NAZWTJap6soo3+1mIOQUac0IpDZxLSeIFao12wVN50YY84rkYOkp4XX6rZQhY7xBHRfXAGlbfm8AlqoyBm0r5509xUASzV1dWSZpjHV24fv/6BaYfWPHiCWft+5m8TfwtnPMwvre55i9OWN2Arh2bosZyAo1ZiJD7OxTTRi0M/DVbepZZqhtV+Dksn4Gaks2GYO4DQAL0zdATf+ZyBLZdt4EmKmhSGkgq5tydEasOzreGKgRq2Vcd0bW+J5Y6oMYsVHDhhkBUMlQhaMFAjCL52MnnU1qypCUZ9VcxjiIKF8t8tXsQ7EdcOKL8Szq7CTMOXVidJHF1bjDVRKxq2zHMwklomU++CDaCU9mMn4PYclMY4dDRy1+RlIfoICrBrmiujUaIGtcH4G83GDMWH3kkWOBUX2TA9ERr+1h66h7K9TyxnZ2KDDd2C1kad0ltFRfxrLIBq7MQNVahRiz6dyIAZQa5OjAzModnHg3GbGkI1nbZXYHZrYkS9eYTTbwyrRC0EG4DraEdJzXVL0DvvvlPJ0n79LEe3uLSOAG2Ktt//j01Fk/ZyGzjH5KxkffB+MYro4GeEs7xkO2Wcj8tAEz72AXbM/f2LvbjTLMjMKlPQnm4rozzTS7YakzQ53StuX3aQvwYqHX3oXRQkrZLUgcNQltmjGYsGKcy8SANVaWqnA3ySnrv8UijosCnFji6DsfjTK9WKDgTE5DsMlXQEbjGJYNvPHpsIxB2+gvQ4NLhMycmu1bKePfi2I/P7BhVYBVsVgvZsn8yt+z83q0wIxFYHX65yeSSao167lmPoSEa61ZrDnjK31nhOH06kmOWa+mrAQEV2BWNwxZfP5pjRmWoPWYW5azYgWQMIzAgm3nq7yx/f0Sh/0sAD+yArMkLmRPi60SRjYC+TSA2Xsp45v92zFMOybMyfosAW11I380lR9KphkyS3w18MBa04YNA+a97oElgyJ7DLJAkiYyOBrgFdNFcsuYZW6LwqYtgdM7INjrvJhp6yCKgSrVhhViyBicOTOVnXmj0GiuYetSSmNDFDrnzKqxjNXuHVK79Wd8FaWYxXioRdIIBWcAMlWcujIqAKsk06oi0N7FFz8Pm+UByMEK33x9HbaTSepaPSRMOgmY3tGADN4MsSZq034SeCHWlcXOeR1OjFjkiytbZkOa6MHkY2UXuxhyhYJqSuIimOvZZU4RLInFhntyTlfBJgjU9evNTW3bfZW9NrBXR6bX/N2aDEp475mRpDYduRgSx0O241EsKTVlXY6Y6AKTQyJaV2bgkly3pQMbLO2pXe0YHlLj5k5R1uk5QWj/UuupICwTILdL/dDjJR3izvohmLVQVluw8vO1p58ZgjArtkzzpaPkCzu2djuiyBGUBbW6MTK7NnPMImTzEJ0bu4MebEdKEIVFB8cTHONi7oGNdBHIXeYn1RfMDztjdkOIN4um/7a63CsgU5XiSsZzLaBJ8ZqiNd2xfbLcYKJW8w+D2e+Cly8FkKN1ZVvWjOZ3kLUDVUP2eIvyx6xubJFIimNjZ8qWcOqZi1bKrDVDY85KiIPGEjZdEjapDkDGjoxsle8LY3avN0MwGdFqssmcAVpdpjb+KmHMP59LFjn8JZMu1gW0LUYoX3bgf+zAb8sZMwFY7vnYserslUL+jACp9zVmkdXyK2ljwphh4+TIDFgAYgLGAoOmUkfJDsvqymxjhe8iewxW91z/pcwa15slOWeXwCz5rMCscO1WX39juqyZl7iAvULbrGIE0gFWcHYkWWKXRlbeNtaMt76NSjVv3cmyf0/dbpeK1cWvgh7swzleneU3OKZjnGp76WLGkoXua+Iub1ckmWd3POQyRkDCpcU+n20muysjA7LMDMTVDKRTD7buNHyzQx4kVLNTXKnSCwLGWMao0yYUqzJl5TCnvJGPfBWVfhWwxqOYtdYc0NjJgKGyb77LJ0J0nFBAZDlL6tL5vuYsnzNyNjuQnSUbQda+lhE8vBEGYsFNRHBbsv95qYKTKYotjHj4wSszZ2qgSCxgYyJPx4L94UO4zunXQtnZ5SOvJdNOvTUZozF7hiQ8ywSgeRBYYQFhWEbXC9l83BYmbWoCTTgn17CwAbqiAUiULpLJi9wOLXt/AsZMLPEH0sKa0bxIGVfB4DIta5MhjwY5FUEsTJlFNiyzxWcrfaedXBmz74HZr7+zZFxXJp8vpzMos5wpqwLedp/9xMFxt85kfrTNL8SQldZBKEudWU2Yo2iXP4cPjSzxGZB1i/w7bMvOvsY97PP6FIBlNWVlYc6WLLIFdFnyuy4y0LH5+40O+y4APx6A2d8xw9G05eHZZ1gfDCagzCPaec+YfWaA2aMgzFm+qJJCljJyQDOSEOjGIC1SyY1sUmWMS82YSuwShkyXtwTI7QDWyA5rIAYMlogd3M0D2eeD2CoGbD0GwIhtG9b0zW2RA6W1/qzIvMrbkH1ydobsyzXWrksXSyZfpPkB/3imxoOofIRYWgKlue+dSBt3NWVVHsA1GWv357p+nLo0JiNVnGtWGygrvcaMdroDtkqmH+4rGANijRl3LIO7YNYLjRIqE+HSCjRMQMcKbrLaswmzeAx0lSjWRRzpxMclg3zEMtyvzW6sUZoJhDyHXAgg7v13844zqa0lnXcQAui1Vog1Ynz8LBWQ2gISVikiBlgY+2ATTM96sPv1U82wNteHXT2HYme0pHpwqouhz6hrYfCCjQY5ViIRykaVpZkwZO5hfVGYSvvCYx1APAeKwHx2src4ldPFC6UQF0lKLj6nF6kxWygY1V5bdHTEGibNAkJmxWIQrS1gJP7dq8qiwHECMgsGHwrCSuDqdm50KsRkW/r+3pFY5xfBNWh9e5AzfVvG206OrDITKGlklLkBZyW5ZZ+O2/B905NTE9iyIlQcIVAngw7fBEwbfjWKfee99owAXmDICIAdGzbsIDnlYhJiF2za7TwHbWHKdt/tLNoEaVbKgGIeDEEsrf1SSWCXw8daM7XJ75VsPjLLtLastBBpC3LdXUoZUlmj+gfvsshWUGkLyMwGjk2Ysppc0xX4uwD8SsD+SABm32w6eutOVUQXu20GHmw+X5JBic9Vjtm7ZPSRLXdll/+IzDGROypLZtSBV5ZskS4y+9UkckMKuGHkMsC1yBP5+xLg3GWODFj9pG4NynzpPJY9nvyZArNMpkhyxXDsyOAD4ugIZddkfQyylLkLEQUCGpd5O6fO6tha3RtyEJbWmVUsGWZGjJnnisfwunI2ebjy86SMG0sRlwYzDXhUogIPov9KRJoHIiNWbU8BuiEGTBOb5nn3hKOdI3xygU6W5Jft/7wJ/LzthInQEQOCVWSeVszZGcG/GW3NgfR3vVoE2paKF12Ow8we0xDpHWj3yPBSx9/D6IGFa4KbxGEEznyJO9YktC5RtCEbZLBTRQuY1YDrOl3DwDyRj1IwWnYM9Og6M7PLsbMU1JMdZFTjsjSS68G8Magm4xFA7rKX1WEijzSLB6BIorF4s3cQViyyYTxfpZBoodQh2tY2jFiR7qsvAdP9mtnlexWqOCtLlpkF2/y1NVhMQWyx17eFMOqHhF3jUxkj9a46QOv4JYRONxqwVMLEapZZJFTa4mdAfFxsDaJe9Y1Z2BrbRq58ZgRqTebnbJ+fuDKa/YP3C3vDiPXP3J5qFzVmGwlj3Tkz2gMgbVdP1g1CLFrqN6bQ/G4E0gcDSnBktETKaIu0j50ZpyujfjuKb28SJl0DC6yREDt2zODAkuG3N/awk1rrWFdWNwz41d89xMN+iwMRmOEpFe3owJuOFy3ZEfQse8+YfQYZsx3oQjTr8GSZxSxkV8PGwEg7/yKDzBi5DJiZ1Kp5Vh8mQJAt8ndGIWdsmiswo+Oc1rFJHRq7MkJAn++AILNkHB9A4dNFWLEuaWQwxxED1cwKh02TjLHXrS1s2QC5yNEOBzqzlJEJJMYyDEhckABLGc+cGP1k9NTf6NeTeRsy7QCynESsN1sK5iCFeSBTEF+ljGyVm6UMp6I6z5U7gS2LgCziQAoglnDpmXM2a8w4XDpCPJdtzjNRNYtL2c9a05HvrRTuUaVfJtUTJ/6H5HJXjXs2TWvLPl3t35ttaSP1e9P172SXKpk8bdEDORAne5XLWDFRQrf5KxZDo03ki+w2ob953rYpZ182YsD1rrJmL2Wh07P26jY6tSxqZPZsXYNLN9CFFY8eqh6NQTwyY5BDg0zaWOiMlMSJvkwV4EgusHmYDRI3J4YeJqct66QujvgL8JKanUIsQ7iAVdpYprQRWynjT4XZrwgFdoewZAdRiN3Y47C8xgwllzl2p8d6BshkWmrDnzBltbFqvgGFWLPNVoAWpYwawBxrzTjLrAbWzIYT47y2q4hZbeOAupMyZmYfoUZD5JeZTDFjywqQyjajK6PtWLW/34GfAuDHBjCr34Y0GyfLAQryI0tVBe+B2WcAmCXgC8Jq7ZY3qedCwoxldWbptgRwLSBKAVzGAAr4shNWzSW/bGGROmjaMGcLS8bLZUyVODhWAWaF3RE7GGJ7/QYgK9W9sXSykCxxAVhtmRvVjvVcs26QMtZJAdxIHCfTqI6adDaCqzsHSnOeWc3VfiasGqv97ITL2hl+eNoZehSMcXKtUH+6o+6rFtMR680qOZW42E0edMP1GqzfJyircacs4wbWGG2TEFkWFk4vxUIyRZUtzi5cHaCtBmlihHTKhiH4PNqQsHgiorRl8GaYyBh3JS24Se467J6d7SUj3EfocUo/2Qo8BshwCzJCd2BbKRVs8LPpUULauwcZPDuV7VkGuJLap6VY/EEIdIa+sM871Rak0s8rhLfgusa8LfYwdUgjw6pKIQs/EEhDYpcPYc0IqRgSJh0poHTpMFp4jyUAd0oanTLNPIA0H8LGQs6LKmnUHLN+9Dk1bJU0Qm4xbAASFIFZZplNQLbklxE2cnJ0Z8YryDZZbUogTTtwzK4FdjUzAeEiOd7JYht+kpmz20oj9p2LjNl/C8W+G4XA007KWKW2rSbOKUWA3ABZnI12lWNGgAuUVzYMQ3bW+jaljlJvZm4oVkbUMwM0HnAom6DpQs+BaJPfhxWmjPHW1lJFyggZ3EAC0OwCmO2s7zNHRgWYdctoIw2YPpEywoDvAez7APzhyZh9yeD+ekNm/tkEUp9bYLZhxbJ5iykIyQ0ViOHE8KM7OXYHRWXESg+Y1uws7O3ylSFLLfwV8G3qz7IMNBMgBrXP3wE3ZroIwIVw6waerNs70/pLrfXgjDMyAHEGfg3hOeWRVXFdVIMSE9arM2l1I4EMDBmxaf14jgin0SllkEXYhYFXFTfGAcIOCpc+yTF7lD2ruQgxgS4XDNniKqC+/uJgYj7TsXv49HAywbozIHqR7fS3riYWQYMBaXrxTKAKojSEzzYgWl5Tth7rA2yXXxMBpEoTV+g8hZTcEnqA1rqqN1Tal543f+zplKAJT9ZjidzPPW+FL5I73zws/eGHaD9D9dHnbssX27k2xh/mZGOjy6RthjSiW+PZr2dRnHrebl/+z/cNP+1wGAFFT8/8em5iOBZiQJZ5DOzCBqDxceTfmiEFZ4ZY56LiQf0WW4GzbX4Ebh2UIRVCuljm89ZXPt3kPFiKZaAZZkJEmZBKC64RTAI6FWZrDRmvd5EpYoODs7LSnUW+FmQakIdKU3fRLOEvpcbM7DdPVgwiVUSUKB4kieTPnZWrxJoVkTseHBqXWe030Na/V55hEFIKsWW3rbW+3WLaWC5pzFmiPozAUsYaotKN5Iy7AOl4lWZ1k3lYdAy8Bh4z9tjVmJ2za+eGNTJA8w86A7P67b6U8rKxx+798huY897nmL1D/wSI2QUrpmHQDGz8pC6NjT8qfVkliFpfxpK8fu34xm1R1+HCzhlizdmSY5Y5OirzlgE4kRZe1ZUFRkvNOHidCbBj044eKj3aTN8pidyS930AOMonY6DJ+8rAD2fMJP/cKxE7aVSwi9urn2SZIcoYXezydwYgmfv+FXPml0NNvDc1CW4U6/wB0AiY4Zjve8FcQDzivpgiTUt2xuNB98AtRVABF2/GmReVyxl9G+Yd6/n23v4ZGFvZs0qQkbd8b89R63O0eO/ynRePU1Gf8hbfgtTy8XnfqhP1+Ha8M2aF6spgxJiZgDAa9NB5/fe20DQRrGWui9zRtwC8pj1+QW56cWvmH5Mt6wChg65bukVHWbqAbHhgw73RF+HUEiZteTazJaSTCRAbmKZNv5XciN4Cp3fd0V2BLZJBNQk/66MHHYQg0VwyK8ao0qX+bAKzn4Jiv2IJbgvyRQJVYJOPJGA6yCFFPmn6XZVBWmTH6oOZZgzU7DaNQVT+2ADa3T5/Xr3RPl+ljPNKU+MPC/JFbxLG2tiylYmzZchjD8yujD3WbLU0CDplwnaSRZN9tg3LJtN+pcO+G8DXAeDJv7TSvi56fFV4LL0cC4FunyvG7F0y+siW+0t/6S8F9mcEceKy5izUfHVw0pkzft2s34C7HfyGnTOp9xqD6QxC2naMWDcGGOOKFHneTgI5ls3y2zqbtWHpgolIBrIShs2J+TJmEPuxEvaNgVK37r91lktAYogCqLWO5ToT2TPJyGCkh34bHY/7WDudN8ox0/NF18YmqkkUgC6SRq+CgSrhmQfs8s/Ysh3wUqexc3BGI+ZuORxki/xQLFenZrPSjlWRMyKxv1/8/Y1qzXgvyEJ/AzmnwYetmU4CxEBwinPNZsVYrCbbhReo+yLCexXq7aWIdWTBJd7t/liXfCOSe7yjHzp1j1WgLTyISvJ0P05SGdhePq4mt6s/tblHbiWf1bEp53p60Bcfe9lBz9iktYXpYg/DL3/8G1aiRq44OU94dKHg8C6OpTDfxDDYCX/IkMy2NSvK0RQBZQyfolzxjnh8gSfTLt/INh+be6Und0ZOBhhMl0+lhAmFZZl8kerKmE1Tu/zV6B/LcUl4rAck6hogDXIzQeJgEvnJmHWWOJnMcaRfDODvmvViENMPTFvT8ZkNQBATvYNpSJFAarLU9wuDkAC27HGAFsBaGwCQjDMTKWPBNAWZAlvb1GM5CXC9pUZOUWRZ5JEAC3/99NVDrVtXjzAYKu25t5MtZvb3O4BlzxhIsP01/VMA/EIAfwIAnvAl5Jrcs9pc7eEY34zfSxnfpX/N2c+YBtvJFTPwBAl9pmUyBi2wVyAL+1bHpAHVCqqYMXNtZ6+7YiDTAaKajBCoc5ZWMmPE39U/lhrS94pa5J/9YRppOGWY3epEhsOkA1OaGGSJuFvnB7fE4zgqgHIcB9p3bwTASqslA/ZmJrcGEG8EAFmyeDMzP+4rKmYzrKfWWs3sVlWd5augLrBm2ocjKaPVlU0bJoa+xnhd1ZllQO2xLrbUdxnVjLF8ycmvndEnW1U6yRxdA6Yx682GIyPXl2GVpA23u/ZYsLrR9LDZeRXeikOmOwirMqLY8vUCOEPwXIzWkuz/6ALAomgye2xo13bKpXWk8BHmUy3tayrMi9+38DgHWN4XhZfps+8Marrnsj4jgJ51iYWI0d03AdnmtoY4swPjZjTCE/lraKrhvIzRdSzD5dx6liqdYqnQtaABuG1brjmyVdITZIold1rUwqZFyggyhWCufv0tWgh4BnUtXUb/PQVptoCUnhgVu4sOjbRWM5BdC/i0WgBuJcE0vUbsRj1KZtU4tmFEgAnj5iUaDwbwxSptX0vDIMaZZitDlo+nyJ0mHJKzbnVCG7rs3GTMvg83E6lhpufM0KutTNmRsW4WWTNdxoRlM3F/fKge7bZ5b2lwdSnWas2upIxG2WWrlFEt8vuAAteWMQDbmeKfGXu4gMQ8Z+yaKXuA/UqNfK5kjwC+LwIzbJ7xV8Nwed3re2D2Lglq8jqtS8bsikFjsEOZXFvHRg131rbR91N5ogC4lKHCDIjmeSp9HEyaMl3cJrWQJ3ZsW2O2+yPTj0U2SXVeY19528R2jWw1Ng4hMMv75GStr+BQXRdTZsxpkIVBdH96HFj9AxiEjXl1pbqsin9GQokFu3w/D5l+xBBkd9tal9jU6HiyNaUIO5NWpZVexPSDdaAmQC3bCYsshIYuJyPdvsQiY2HLNHRac+Ky2r48tGC+t1QsGVkzTwSnw1J/J2V8u+q29//e/MnyGgf7gt77NP+V25QuFqy9f/OIEtzjMoM6ot+Tab0Zw7E1uwwpVIoGH2yhn5l/LJrAYJtfkunq0ohlmm/umKHeS7CKI063JB26EzqMSQoFTI+Sv0Zk3rCqTcepkVJA1TEGVrjIQIBhQ+1ZwpKJfNHZ3aSZYfQdwK27MhaY/cIlVJoZsqpsGCLo2tnrH4krY919LhJQrYyZyhJ3dWq3mXVQk+VqlFUWK1QRNiOiy5AymljL+yJltMAFT2mk1k9WAnusCGEjD/2cie7P7O/P/55viZ9Bf+Tvf2G7C9XImF0PSe4lGJ8S8HnXc8x+sgIzlSuqbDFhzjo7FrRIx3F4Y8ugDB2zUwR4ujmGib19Z8hcGDGVPLowZ31VHfCM9iizxu6ECTBzZQ2fCc4WqaXUoHXrewaByKz6Gbw2Ns8FULEb42ltW3KNBMmiMKxA5JKiqknzyqqQ6QmyMo+GH6AosJRkwmPSRlwwaNfSF0ijgZOwsTsYKxQ2DZI71ioIh3esCjizaJcf6s1onM+v9sFh2Fd7oQEzLFBqfR+P9xkcrgLGcr6uAOTiGLu1kTF7jZ67YD52T3fl1Nro9yP29HmgsmNraWxvHy1emCJu23rqgojompgfCT+R1ehWPAlYRqqpHOMZllv5D+73stQtrqTf00NbC1E0xYGb5SHSw4ExQQe8v6bBbr7tCtnCpEGCpT3IHKNIsQxL8YIV/dwlZLfgxKh2+bbJddK2+RJUn8sVLSGEINM9A2ukBBx535jZaGlOGaajvVlU+6Ws2tJPtc17Zr4Q2SqH1JvRDhQBa3dg9jNg9gtXluyB99ixbBuL/cz84xAR6LYujdwimQljxqwbhXDwdXdm5DBqYs7KrYSgaU7tO5cy6l+0tbFEyggBZP16vglTdqMndkmA2t7YAwMAZrVkFedOi2/494sd+GkA/j9P+CLWKHW7eOil5k29MPI9Y/Yu/eshxdLB9iYZYet0dNCDKVvLWKkzoOfKrrH8sG1vyFWo/oxdAzXYOTgvJoxY2sZs3gU7FmSOGfjS7zDYudomyzSP4yiIjodOWWO1g62eV9bnAbiR9PFGGWZDHtm22XPNBpqgurpKMtHKGWi11qPf0/i9u/f33amx1KtxnIx4qgnhVFdjEK/RF4MZM85W3skXe4f8Eoh58hBHpk5SazlxYuSA6cCUdTcTWxvddwoWHVTSFGTStvmBXBC4c9RjpmxlxTIRInsurnKOGCitxXIunpgsqOytO2S/2JlxArONjPA1gJrvcRsFFPsl0F2U/J6uMbnwXj9Nb4E/frGQ5bg9VPdtpY1nR0L3fu8X6bZpaLJhljznzfKRGHH+O/Ygp/Ylc4xiMFibVyD2f1SH5lU69ezUmP3u7HSwJxc5IrBqE25x7HMRxowN9UtYY2yZBV5uzXeyU2BuSjoJizYOS+LIESSMiT7TyiZE2yCm/htXRl/7rTuAH1GbDFmU5LwV5TTE898IBN0dGL+Kgi/cgQ9dT+zGuLxP5hWZt9SoXTBnow4Nm7q0Mpmwbrev+WbdjdHLNscsBk/f11XMyD6/14hBcs0wBuamlLFKqDSCzQeWgYMcmO1cF3PZor0WsFKWC5fL2kProfffbsBXAeAJX35bA3qfzxqzd8noI1vuijHLQIiAJWa71CJ/AKZHt7Vx+uvMWNm5P77Oe8kxg+5Px6cikSxkkMGZYMEU47mM2Q7kEcDr7eQ6O9MaNXZ87ICPpYts1d8ZMAbnnMPW89Tkt6HrXcQhY/zYVyfGVBVTAxJY4sFqXRk0LbnKHOW5U1cViPkkns46umEDtkGWFUmINDXe6upewlCyFkKX1nauzT7sRJNpYqHfd7ImWWYuu8PWG5PNAHFYEWL51omRpxcJkt47NHZ+LYI0bZUe79ocLF8n9/g5wcwPsU9qxIFn5kpfJV0/52uPsoV2tZ5rO41HLUEszWdbP+9tRp6zs8L47WLhdissPdU4kTPyZ74qQ/JxBsJd2DQ7qSXbmwnMm++ET/cMp5WzAVkmLNrBB6SMluabgZaJcktlwhicoawgLXhkqIV+icQTSxS13myx0NeOrNSYGXbWCJYwosJWecZobar9TCSjrxwAfiNuZKt/JLb7Z+zZcUFBak1a9j2uU7NyXZeGjXPjIl3UWrPOnFmw0++h01hqzaJ0sNLVWwnC9VS0mwxLxKw/E955X1PWt1voiXNmg39eR2bLtMelj4+ZhHRevwK/AcBfecKX7DF9xOMSkveM2Tv07wws9Y47AwECSmffUQDHGWBVQFzmnAhiXxiYbHPWLqR3zu+1rozAWWDyFLglgAgZW7dj7BKwtdSaXbB9pkCQGEyVPuo+L+8b02ZZrpvW3zFbSLJOPsfhaVcVkCXduBAiLQjLNz1/F1fGIwEJSr5VAmiesWeP/1jWjteQSpFjiXbS3MUuX3imkWNmQv9Rzz/VYrIZCTNrLo4Iq1jPJH/Kg7RRrSJAzozneWZ1GH/sks+iINJpTNMDJxMr4Poj96h1BDh7BoUaYptyRAuj5R5cBPt6WvfTIsqKYbTe1mHxcjD1u1j5BQZ5Cwzx+a05vcLdCFtz0LXPsQBTVBi3zV2VeZMlEOFYg7bjQiv6DGfNh4nMXVLoAYj5CNq+d7HupFLflxhy7eMjDxK08/cAuvVgaiODPHRu72MZdR6ZfhJHjZlJz97FYcNj7djiROGTdTNPTU2Y7QqywHQUfc1u4vk3+psisQnKPHVitAH0/NQghM+1Ul7RcGPMLSveYGXfkmVWckyzuDJ6lC8G4MWnDSe2+SmBqVpM+THYLlRavSELuZe0zz4yy75nrSWD1JjZxXSpO7usUSsP1Jxt6tYCu9YDr5/r2miRVStntWarXb6RhNHa3M791sCQ8WCQpQHQAEIt21UA9DpM8XqM2aOACxfT5f7wPXfG7Et0sz2TKmaDECoHqm8f+LzPMXuzf2rtzmBsx2zR62LEQbVm/bNTDZrvvkcGEkMuyQYUx3F097+HGDFm7s6yzRLL+y3jdcaEMeh6E9asn5Os1oscEnuTC7k3DgOQbuLR1YvN4KMQKC4zxsxT84/O8GugdCCm6Dsyb0oZ+WGYeGH4piSrZzCruSGDuZ3Rx6GrlNuXb/rz18SBRX//LCk7UH41qUNDLLID0X/BAETBoNjjc85ZKiXLKudU8xW9EFdzTBuclnJvGVs2GTPQmVgT5bLYX5dkmSiupFNSD/EpVNTvgTBk57+qBI5PEBKCiwObS51w57o7xjce5DPthtayO+/fr4E99tRy3ynmwC1K7+6OhpHz6ZnuXm0GudO2xz3I4pk3j9JE2wE32vYAsQNkirDRK6q1ei8Cv269y1UHCIZPWG4c9TDKKZ0h6n2UZ/m9MpSt8/xYFlM9DXHc56BEANNLYZKtEkYkskatkOlujkHj5xlEbnBrhztZcBjtwAs0dWwCvZJUqCHY59vCK8TWxZozI6bsrJu3SBgRa7syg0NjPWJC+ATsdvZ5h6uwloytC/m0KdUiuHSFyRa47ozZNCvA4U+A/cbo3ph02UMq96ZLf1a0d+h0rDVoyGrSsrwzqkszrmfbgDOVOwY2bZqEGIEzb0+KKW3kGjMngDY9HQGkBvkqX8wYsilZXGva/LVYstcz/HguEEuGDn6TA//8vcbsTBrtz5j+KQCz94zZpwLMUkbq0ddHgQwDPGbM+qwux2PGjCSEof6M2Z5HpJivM+/RfXuk7mxjtGEU/NzBZG1/RjVmHYjVzu61Y1U7C9YPGdWiuWSgjftPqx3sdWYL8NJ/BP7SeQOYcXg0EivyjeFHL93ojvLGbNlx//P27Ah1ZpZbb9yPEbnKI8lg9lOWPxlxNWLCVAMnjoyBGkxkjV3KeCAvlOOdWxouoK3faNlCP4AyG8ktToDAqfNVA/to23qy+eojPjqP/FbYHEOnp2GIyaOVub0+OOErmzLYrXkMrAZCJrA9fXR5b3rRoIEDFvLqIsit49ruQIhgAp8Ozhw3Hx1fC0jRA5/J7KwteXPjxjfO6x3X2+wj1vgsnkDIQrtgLcPHeynLZBEhYw+DZVM5ZNs5dwvsRAc8RnWRLh34CdRa2+vs57rL+7FtMr9pE00BvDnc70DLAuPXrp52cYzvMUUzcswQa8Yyp0Z9v9zpHFe1ZcAaKJ119m7gwOnpUFdI2liXxC+GcAWZyb4nXUQPXSEPzCqXbwXbe+xxRIYp1JERXKJUz3PLAijzfB7yjq3cOi3uUCZnHA0mwKXHcph+CEX4yl6hoOBVO0CvmNrrrorozNp8z8t0NqyKu0m1k5o0ZcEwmTFIjVrfvyp2/WMdZb4qIOOctFqilLFQTZrdpY1m1ozvC4VNrw6IhTLLejw6xLPU5d7odF8uyITzj8sNVyb79Rgxe0MglixbDHj1hC9aHJLQDsqVqN7pB1Dfm398loDZIwANFzVmmHb5Z8AsZcyIvWFzjFBvtpEaBsAmoE0t9VWSqCzbWwNmmUX+Zp6J46MRi2bEnjFDFqzvef18nplF7Hb8IpVkYJgyZAkQ07/iIAUUGRNmffVg7gEsFvkZGdXNDbW2rG6ggdac+YNYbF3AogYyuDNSL3wANrWTpGK5Pm9IGdvDsssZQ32Zb6SM1EkNAM3lvl2RO+V5AG0uTEMloeOZnPGA42lIGdcIaiS1ZFjqyaInXISLbV+Og0bwyRlvMFTtUeMiu6oeuCFrF14lnaM1dmkhGZ1laRbA3JCtVQ9zKpi1a+0bHYca2mhWB6ipZN/d2SRvmjHvAMQojc5rzCaroi/zicxGdl2SkT5JwfsyXQJaLWp9wxGUy6ntWQNF2SDtNNewcW9q763C6pTNziM9daC1rdRsgrI+iFMDa2KolbTSlD/YgelgIPsl1F0ZjXRzA6AlgVq2Ccg2YBfRHDltTTHjWg9LgRmCvNEobBeL+YeRGMzEpdFCDVmBujTO5Wb9jWVW+fzzIEJIy7IGAVXWsqhOqKgysJRo+n/W6S2Gy070jlELctNMIREarNOoqziSsrsMsLX88K/By08FGih7aq+BLSOGa1t/lnTZLalPw4O2mLVElo0/FwJkwaVRJZHq6lhCXdnMNZs1Z2ZlgDNcSBm1ljI6ifanmpHjIgL7luX9xey0PRv2Jq6KjwCtR7+XTPvpFfa1u5SxvA1L394ze+vA5/a2scrbXNm7ZPSRLfdn/syfeTYrlr3fySElMHpxRryax+CNHSEzKaSAqQDAtOaKlmOZY7C/17osRGMQexSg6TK70GoJeR7HUYHa7hgy4NsxdT1kWsCwfsfOWE49V9lQcM3GZs7AkOdALCvL6rinIjH8sBV0qRpwKbnakf3LsqtsLjgmqkX2oP6QaDgFeTI7lh2gRY9J4BCJdMpkx5ejYtDcslxeGIOlVx7MA7NWyCbElnDpullrFj6dXzte6wBg401nVmp2rc0qKEjZjw3AI9+xPLTazMjWX8PGQeGyxH21nmsEkj5+IE4j9BzAHDuHdQBxg6/HZOwXCRbDKZ8sKWR0WT+xiJBBBMxnXWiH1OKuaIGkzY5ha2g1OoYVCPVqvohubbGDIYDqlpvFGB+vyY4NIL6ctxvVk9n6Hpxa3Mbeg7yR6848iUpIe/4jKNfkjGhENHdHJ1gpkmMWHTQsMGURDsbAaE5SQ+ALLMjELIsIixnbCXtmEglmhHO8j/sT+uLg6UBKmsTKESNuJT507KQ00fxsKN42kkUBQ6rBHNkBhD69AIf9NLh9eXyvZLaUkknGktkOlJgvUcMQrZVbvncB2IoJKJNw68VGv7FlXRJZL2rParTVL2aDDzuTMpYG1250vdZl+M7eWhaZzsczgRgeAmX2LNYs2cZXDP7TZo7Zjhl7tHL+U6oxe59j9q1jzDYsmQKxh6SOyro1VqjuAABL78SdUGvIljaqzPGZro0aqgw1+biqN1OnSZ+uHZaRUH3fqKaM68A6Y8ZmKZ35Gp8flR92lo1kjGhsJPr5YPasyyo3TNmsb/MV/1QPvgOnqc9qlW9UjoV6d4WvRRgyj9lmQx2oKkCP9Wa+Y/yXz5YM4Yglvpp8GDFIgznjIrqa5JiRnLEHS3djkODI6JvjZxdjTbaMgLvIFTVEerXw4KZ6CJjuLJk3js3Sb63paUjirLn6bdRPeWOPrA7QY9RJHyYdbJoRTCcItBmbYHgCYgniGTM61JElzZ2ZT4MPvzNOs6arS+smsJx1VtbqwawxWS5AD7EcxiebdJf/eWTmBm6cAJGNT4JM1KY0cqybatzutWOT0xzL1egxM5tq7Zx34nhCp8GmWQSaDAqdj5EMJBgfM+s1Yyy4m4DR2v4PsGee5gp775B2dwmopZ/UnZUbGYEgYclsw57Z8hs06qrFKrBVzrgK6Ew8GA3suGhpwPSePVvjrnMwpv0+Y3MPUOxXSQgdUQOamgq2XOZghknv2S5/KU27rVln4FO3TQ2xDSjLXBdjnHewKBlU4Q3Aq8Y44cN5AHuuGdnmh/c8rU14MuAV7kybyftD5JBqBHIgAr+6Wf5Qxo5AKMske4aZMns1C6E+/zNjKaNJTZeHBL4qTqFrePS1sccjQGsVSz4uMTyTKb6mZHHPUAMfxhyzM8liNrypnZr7E+BtM1zvOgP3kwGYpQHQiCYej64jlTISI5ZJHEH1ZvagrX9m8JFJGU/ZLUQ7/T6/ZC6RO+MPBp30t6zjgm0bNWeUOcY1ZIWkiCMEO2HUTIBYkCRKrRnb4/cNl8DjJMAPQOmYgsmbkTfkOMsgDstwnRm/dtJpAQ6emLT7dvWr6MivtI2+T8zW+rIA1iotQ8HSEGDGNWbdejLbCT1uJj0OP8tP0pqx6KRXESVl2Wb3wd61cWezYM63qXIMhxzTWiODSG28sWfBDf1aTdga3ud6Xgv9XH2EKgW367GcKzZVUMnDsg/717lehS8PtxONRmTmK/hvrs01jc2LosLnHyRcN9uGZPax5c/bNGFgXbjTk9UGG0CpL7PS5I0CwhTIQTMWPFA0WsMSOStLZI55rdlaKcbMWRFwFp0Ye3fJN+wZs2OWsqs5ecSDAUtGM0TWmFnkW3Rl5JKpktWQEYE5MLLN02VZf5WWSUGZZfdSy9moIGWUWjNQPdor/2X3HuVVF3wz3/Rg29rmR0V0mWRSmbdjZ7kv0kcT8xCzjUHIjYKpp8yx3LqUsSxSxvslUClM2hYGF8iMPRYrHlrv49JECMC7YrOuWK7XPPPbaQ77ZU/4dtJe+7LE+tmwr/T/dKSM72vM3uDfVbZYAsRwxYypVX43rLiSMnY2am4y9LJ6Ntejzowm0zIr+ey7dgKQ/ATEXX0vMHhn39nlmLEdfgerBPy2ksakvmwBrXw+mqtmBpAtO/aJ1NGq4hYFOX4GflZJYzfQG68+GbIlj1nUf4ynsJO4qDPjjj0bujFLBqTYatJj/dmQPiZOjSnz5atGU/Od4g95vd8Oy26/7sMHO2/fOjHqaauLSLFS19+X+jLdUV8kjJ5W6Ixt1uMt3wBxotK/0rpeff98fWuC1wl0EDv55+3Tm5YiULuuVnVKr2y+6NJbPkNQnpu6ZBltEfBcNNwEmGmIFpt7FELXsChpJCA23SJd2mWLVT6ILZtLlcxVnt5bqMO5swtcM6aixzKkkwjWCmt3UtmyjEemdIbgwIhEtrg4LlJ5kpNJoFO/vlirM/MclI4sZzLVhNjoBwkkFR8FKxMT+g+ONBlbZYyab+Y2A5q7McaBXzBBD+YrT2NQlM1/5Du79wcxXv39gdws5CjRLITNQw6cW+7vzEG6CcihxiDTCESljBwmzRyW0/Wo5h6PAq7nmnm8DZYLb/87v2Da5ZdNh8AumDJ9ir8HZp8VxswShuxKomgJ47UDUpxXNqSMBLwUjHGNWZAobkCWJ/vzWk6Mj057pOaMWS0GmUkd2K7urJISMYDVLn1s2+CMM2W0WOoYctKwkTxq37wrIbGY4Ue7fFPckvX2gSDhG4o/UCnWQcNY3TMjIZWqusqTIYjWoWW46pQtCz2TukIXLWwzBWGZwfzRdiRFOlHCWMkJEhsLSsuO71lP1wQi7WMI9FR1GDaDqD0ETE/jj7rhK+ODYQfegvCy1jjmZ4/s457qMkSjiunxYWLqIh03V8fCx9qi9VCuRheJyQILh9XifnAsbLiByBxaUru3Vj/ZdIz0s2Wphq7LHU3jBjTDKybS+fbYIHrqYCnZCyfel9+csGgGWcb3XKbZ6u8+SBGiZjjLbAoKom4uiG98X6+EWMUVTfFXedW0w2eAZmLb3ZPPbosQUtkzE/85D/AwZkJlHUmz/FK3E0CWucRnGWedwGRgdUs6z2CGrL13IcOUI/BQa2w504wHEeaSmC3o87BPtl3tjGa0ZH6YlpiCpEHVu/lnTBuurTRPw6sTsMY1aCx5rLdmnx/ljP0ZchtXN3AM4BaZsszYIwI0e22zjh1QegS0PceA5jUB2ydRymgno8nZGvT++znMMXuXjD6y5S7s8k8Zsnteji0Oh2fr4mUJgC3AqwMN+i7XlCkIPK0j41cOsb6SQl5Y8LOD4RW442DoS9DW67ja9MrgqFnjd9BcEWvKjOWEoMgBAnvb+rOEzUsBGteipT1poFR9KCau8uk3mUiqcRlVASr4UqIJGQll67wHxvRXdFaxBq1lhXKe1JmZ1JstUkaiAZ0GxAKztrGXrNkTYZU4GGZdWdwzWzisXY3ZMbueA6CtcdOVxjQj3DMy5fcErWuemQHwo1IP3jbsjJ1McuFRyE49uwBCuPMDLBFjZo8D8HP+nuoJgwT2CAN2tb95Yzn0mvdxCQ9Y2qv7GaOxL1p2QYMJz+UXg726nd0l8chhHAHTIGdGkAGIUDBB6ijIMozy+MKV5WM/Je3cZeljha7gG5EqLGW0ZpvgYou/5pqVhSmb9X6G1Y9RWLKN/4TiGTvLaNYyriJ1ZRDZok5XXI3IjPFv0T2pNzOIvaQAFbc46GJlPUMcKs10INd5HVhrvyCDAWqbrwjzQHyfTTudn6zTLC6r01J7fkTDkiyo+igrINvUmkUpo4dBAn0yFBruex1G7BFQdAWUXld38FxwtvvOzDErF9Kjs1agdzbe2+V/hhgz9GDoDeO1Xa5L4UQqt8gHSW6XMWbAlOilwE1rwHbgiBFjUi+WAjIGflntGLOEG+nhmdNi6tBI+6WujMwMVgKNNwFU3RyEAZ66U2qbnJbN2MzMIr9uuBkKphYAhtVVPsMxo4Ml3hkaCxaYMKxW+YxvXAaHGNClHepdr9JF0uKeM2VKe41OQMWaBVBn/e0OdFUPtueB9qsXDN8yxthB16wyySJ5ccph3e3xbwmYq0PZ70lIdE24ol21X8xOsvbwnnJbMsdA7MVP0GEUzty6suaUkNZxx+yQcTj1vCgNLmBEXR8DgGbTP4sxBtNUYw/Mhvej0xlLEtBNKNLATNvaSY3o3ebvsUluncBNCG1Wpq9LKlsHbZwpDvLmLdExNAXDRllo1OBKz5FhcR9OC2fH9Sw2MnjpQIOla92MhSFoD5zudvlDyljoPaJqCFitAY16/wGg4YQ9XUf2CyACQ6P6Mdvmet3aXx1ruCVm+jGmN8s5y1g0NijJBFOaazwAlgA0N/HOKOvnUapFh/1ma10d9PAbkK1qwcuWgX1lk0q8txSLoC1FmQTKuFju2PW0LXm/6YbbSXdewV2KiIFtbdprf8cu0HdJwq2p7qzc7qHTdg+dLsKYYYlBf07g8zkoe4T5et3vvE1m7OzfE75drvJHAFlaHODA8b7G7F37d8EuXTFpkKyw1LJ9A+z6dd3dBLP6sykci66M2hZ/wG0xyy47zTjbZKPhxO3Rs9oxiIFIZoAix49rubiejNdvuh+ScdYfPbeMFdNrgNQA7NgItdSXZbd3gYoLwJDFaWldWSUHelHDeQuZDmHILnb5ntvpJ+qmGEd2KslWm21EOs89UleDHWN+SeSMPWA6IE2LRXRMCy4FcTsVwwq7LIjmqAObMGRbdSUQwFUdvosOwzH2ywJzdmA1MXacFxuuy7gfs8MNkNUnIftx2BhA1REaDTKHGK6PWeoBgQpt4gofqe11fsc9oA/6vgsrNwOzoxkL/98ChBtx4VpfFaO71prIcTz65WuBOYOvdYdsEtNDtTsKC6DJ18uz9qDuBJbDF0JzfXbI+eH9XJK23EOtSgDbPQg78KXtqDKDwLllejMo0st3TzrGO6t8D+YfDhYNMhyKMkNbrEEwQnePRbC4Jn8pzFsHAmyxH8mqGUMOM+82vy85YxbwDBLjQ3VrbAHTRoedr5FiUXF61tHtwE1Ur+eEgsmgXVE3RssRp4K2Q0DYo7SJMl04qT9bgB414SE27XVr4JLpWY1aQXtYSwZalzTeJjAr4Zn0Znlhb8t047mM2Nti287Wd2fMblitsrC99+zDp4/PBJD6XDNmD4ZKb+vSZD1+IWV0BWFk/gFQiPSJK+NDjBmBHtd1KMjKGC+dtvlcEklgB5b1GcHUwR5/V2PWjxeBNOs1Z2ZmHaAJixdcGTfsmW+ojMWJccuYYVNPVjcEygakmd9BGAphm27+Ucn4g3GMz7KtxcBQalgqVs06tHIukwTOar3InqmscQlhS3zxMyljbY3oOxkYNYjnv/6ZdB4hUMqDQ5+PGOlzs0y17agNht1GnZlWC9SEJTvbCoI9vpyVdr9iS30OKp77bWTIMG5LNlmzzuoPJsoioDHq4Pd8tLvSKZo2DHUAhT8zM6dHHdWX0OneNqsWrPXhtQVLj6Ub40YAg2zvwUxcywrrh8QcQUs83f09Joh5iw+Ao5LNPgNhM2bWfLCFTsyeCZfu8JAZ148ZdLuOEaaNMU3Zsgh0ozgXNN0Cl2jtd6FtGZEJXNTEjNgiXYSEa9G0YP8njhSLjca0APFNoHQma7y131yh41cGm3Y3/zCSLk4ObjWY9+B4N2HjWglYlqETzSLjCDfNItuRSyjRNt+lPKvYavyhsBPJaTDLsZX5CuZyDbMnTBFyVoiljZwb4CJlfFYvPHNmfHQdiTXmzunxoXU8WAN3JJrWs6Drgy6AWlBKGXb32l04D1t/ffD1XID0rVrfY4zZF5Nfgj/AkEk/5tMy//ja174W7O3fQo7ZWw2Y/qwAs2eAr9N5z8hCC1LGBi4qom0+A6ZQY0YL2Bm79Qj42r1/5PMzpi+gDZscsy5d3NWYSW6bE+OY5pjdywA9GHecASwFZwKkdZkUmB0X9/+AxaTXz47zXqV1DZzV2gbhPKr9nIwRucjbyZWRQeO2jamXPgMdJ5t0dWDcHZaaw5yqVvh1Ik2w4YeCQ1PcE5FlqA0ascAySu9b7ir3T4ywa743kkhmWWU1VK/ZBo1XYkAskU7VeoyTaFZJ8ucDhNTQCYksTwddtYOClu8zTmvPBGNHfl87Ll02hw4UW/7XOJ4W+3hD9t2vQaftOyb6Q1zP7AVPsOLB/vt+EfpQO09nVcDJLd9Cl3tmsqFlfvkarr2YelImWmt/HXlkiGCL2t6lpD1vrrYfppk1wrOOiKXpzFOpHrTnrfk49mjHHIj710Gek5ebixFKNTF9gQFfKEnPn0Kmi6+5ZsygBStAtYKNLFRCFKV5SkgBmonw0Al6+SJd5PwnpPJFSzm6aNS/OqaGfnlmnY+VWFpIprICtm7cFw499lluZyDWZLTdLpVeOxv6nRlIRvlZtJZ8daEtyVr1cC5F0q335/YAE5jgj7bFnjct1KUhuDkaboM1c+yzwb6VYOltsVxvckb2wOzpAG47Z6EH/gW7/Ap8znLM3iWjj2y5H/iBHwggR5gonLBUCxOG1fzDkhqvnZQxZcx2rowMuHR7CUhT+/ytY6POy763MRrZ2uCfzEuliBAESvNG9ADJFTsjNxhGZsloXgfhaVvIij/cH3o7xSnydB/uf9gWjSvo6R1icE5ZGrgciSc29AAI33iUq3giXfTsHnXpVqB2+ELtjY3tXBg3zoxjZxBRIyA2ky6Wkp7XwS3BtgqBfLEkYHnfmS9L5MEqRULbCAeNhh1OgA0EzHxDmRoJED0B8fP4encSdB9RCTbYnQY+mtQx4GcjoNIukl7qZ+4ExmY0wmBvWpe1Uui0O/F3rG6zSc9yIPQd7NQBWuaJmFI7dxdA1fbDZ8DzHaRUcimsA9x4uz47g+Vdc9jsTs1tyiw7ZBjHa7poODFitNcw83Zo2ScScKtUb2bwSoME41i0fWkOmx2cOrT+j8BkZwGtjlH0AXbd7tul/Q6/hVHTV8modI7aGIdfpUwZuYr0lGP1i1d3xkVCpFe5Xd5yitSXqa1+DJnujNkKTyzhmnzrXXdmrG1rx1N+ptpNVPxi5CrPiMlk8F+DpJc/mwYh9syOsC8NVJaJGyvLBIhXkJp/FAJqVUwx9LU8OK0mVvUlWf+j382Wf+76TtveKM9a5jS2469lCae2K5Olb/G/d6ktKzDDxzMsTy9o98fljHVQZu+ljO8YY/a6DNlzGbQE6FUCOW+VMVPr/rfFmL2u1FFcDhd7+o0rYmDMfPakuCaOAdww/8CUfw5ZY1+EpiOTLrKZCLaeiYsFP88r9UobtykzGiuX/lUmqmQpYwqFalKqdfX3nBFCBkhLw+saOK3h04oyMzf9ETbtpNlE7jrPnL+/zuhpjlX3F4ALJ+YoQ9RYG1SYtWZOO+UbCGhhHhuJeB/FGZ14mA13zPsFb2AHx9plgg64RwkZrI5SMC7DMk+UoJKzNUvaLMgqp/DGSV5oZPzSWThbahUj50QttXoHY8wQ0VcruHqJpYZsZ99pujo61zUEb3f5ZRX3VCNjkMmyuVcBjRHgj32xFCOhHX7K8u0mHLvEBxsWH1n3o9LR83VrIHzeQKCYtxjIldHuA9HdTWNgHEUBLh16zwvlUjgw9zSXZcXw6ZKwZyX9y+dEjjzCutV50Siuer8Xph8SBqz3pDIlW7eBG9llBVOmTqeiH/YbNiHTZ8yZXH/p2ViyKjVwWi0ksXJyHMAWjv3t3oUeF9PTOs1P5p1O4+/envnd567j0bbzX5HXGx2Xp/vx8tsAZqyzWB739rxnFt7s0Xeao/la4P9T+O4T8E0ZFcBa36B3y+zKNwfu4aDvgdlPXmD2UI0Z8lyyysxWa1uhZT1hchS8nbYzM/ggQJOxYM/NO7NdjVnCLKXrSOzs0xozki+qXf4Au2YWmDWdflFjtgVt2ptOJJG3LS646vGT0+BQeGUMGuEUd5DlxJzGLJrip37DdzEfSO3NkWlzMBsx5IMEzsJ7djAhm8luOclg64CALz93bOScM096ea7j9EvXnzq0NuDTVZ3ZQcG2UcpY298EWWXwa1XG5Xc1Z/HZ0f9fARzHsaFgz6YaVKE++lzqL7ouGqaRWLBDPwElCpZOVnayye3GPXnWhu15DAGD5ys3Eyo5C6SKDQtmpA+MNU+OKtnGgtIezKELL2temi7Hfe+6vQAAlKdWZyYJxMO3vYcIkx3+UmOGlXVLuluGGB6tnQ9NH0NgxnJp37Sl2C/lKQcFYdFc8ArLHj0cFheGzHz5ylbKyLimiLTRKcesM2e8WgZsC2BNiIKdo154EJkGRvPK2WAnEU0aBUzzNLfHQRb/+W7eBij5bQO0rrYl8z1Zh+/ax+9L/K6+X/6svZZhCjK8r3w+Ah8Zy72ykPIHQdtzgZQ/8P7TBIERmPkzWgtmysJd/nOVY/au/3uwpsxPgqT9ikGjzLNTV0YFigy62nXjJ1JDz4BTstxYsdS47bLLtvJFBnkM8M5cGYXF24Gz7C9zZcyy0UoHXaM/1RgzdWXUc0bdpaqgTXtdZlZ930OzajgvXJLPnqGASvOEJRou80mG2SCZeNO6PPegEc39FuafJ3Z6pVIHzT3Seur5zz0Z3kGnULZqubEHLNdiIkvetYs7/YRfDI0gDBiyUUt4kC0C0x6fa88OOnkdrh3oMjgnCAeCW7vHp0MtuqvXWc5HdXNZftaEnnVWPzUG7a6Ka3K9unbkfZEzJkCBpmu29H1b3FYsIG7IGk1KCLXGi5DFYPDOSqHp2h3yvgwexR3tN4twr14AK+GeylWAo5YMKRMIMTBUkGmUoN0BlwkIZJNEF1wFBctBPTmvVx6MiOeS/N0L6+Skk16yURxoxgJyKVG0/4hjKUa1lfsam5WQMqkY00o0rSGLIzd+UdXmoe0W8Mnirs6HMylr2xmBhLGurmyT2Ioi+Lf7AocMs36+ixCbWFMMPLvHa8yBWxLSfII6h2U+7cgO3FyyWwKCAhjKlsvWVyJ4WoBUoe8Kw8XT+rp5G/5E63qS1zIZMZfP9RazzFDg1e6zOzCj8un+rH5AbJOO+z4Cop4D5PyZIOtNQODZ+iYw0zj1vJcfh9VMh23fSxk/o4yZJRLCR15P67NwLmVk0PPGjBnnmEHs6xOglGZ/Jdu1Z7Bp24yzPu0kAy2TNt6ZqU2OWT9mHtH1wvAhCZcGuWGCDEME2JWT+2SpWS8ku/OoPX6l2wfHfmEFbAcxZSpHZJzTR+KqRX8Mp07momzZOjOyi4iLXb7WlxFwsx3SFMRYIZ8NadKz1wjaWIep4S5+etiXB5l+5hjoDrk8nBIfgkWVIk6rkOjneM2Y5ZRlPXK2ifvoe9him07za/7jOiUx588InGpn6GTP9XnK9JyzS0P66Ltag3PW8dEj5MrWJetwXJCGlkhJ6yMM4XVjc87Slry+SdF0lixLOSYmrPTEY09s4ujXYednKcKf6JK4ly7aECgW4cRAAdO9Y+20lplVpgYgOSgrgAx70HlnctKScq0da8Y5Zrj32Uv7zFFgRbPJfJYxFSIzx6ZKJC4DICPhVigDLDzgRqjSyaACyqYlyLI/EsvtbiNsmjCnQKqs76+YqkUmuJl2tb4F7JXzaR1sgQBWkGsSCKsto2yAsj69nVCnwOl2XLsJ8XhOs2LfEsssy59PV0DrTZm0T5Npe+767jVmg65FktshY5WOGMO+FD98voDZu2T0kS13BswYGO0YMZybf5wt5wzIBDjdO/ezcYZoBJKafQiYymzxGbzgBLCE5U6kjbsMNbXwf0jKSEDprM7MeHo/hhQD0MOiTYDXIlmkE5bWuGHjysjMInKZY6m4BmJBScK+GpUyzGoC0jqewVqOlbFnoNH1gGEs4q6lE7ncRWWCMS2n1vggkNasJK1GpuzOLbbCaCbTuDCuRvfFnfd/Nljvj4/G7SSL+XvH0WSMkR8DMNwXGa5VYGsAYids2fr4HIMXwRriEeiwQxQ9lFiX5jAwpOWFttvEdaPCPuRfnGyhPbrC013Pgqx1WaqJe/ZOncz32PfNWzKjC86tzHdHLgZH50vRT1VdyHswVqEgaROTj160ZALCxjLc+z+7kVjitGiBvyohdNqE+4qWHt2RsQxxsdaXZRLGErLNeAvREmZjU7IxLjQGWBlrJpEEdqM4FPLNYLv8UV9WWtlfx8aFmEMiOBkwKkBz5QzUDp9HUjSAzZFQf7QjOKYrIzNmqUzwKX9/BqBOl8/Wl0zzZP52WiJNVIlivc3A6CFN7NNKBGLd8MNnpEB/zA0A1gQkXc54mJQo5KKafayL5V2QM3btkUHL1wF1b5O5e4In5h/hwb/S9fvR8feM2WeIMTOsEsZlejIvrd1KwF0PQ+bx/SrgqwhbxnVVg7ViQIR9+HXatjPwlQCnR80+svDnnUX+rg4tgC/k9vmFTUEIuN0EyCndta2Fw2omwqYjWb1ZpswpwQsjI9Y9lmtUDXrm20tdLfUH40UdLbbGD6o+ka84kVwcSGx531hG7akTVs/G6WQnOyoMO3G0B5wmYZvUk3mshOblYRFpPkr2PPBQyaHSZIZibZk18w9v5ueryb4TWzbT0yqZJGtgs6f3q3la6tr1ZkdEKxRhEM+rdcdC3M0snC4YL3RBke285geHJx8rVQVrOuF4bWhleEm5eMMe3tkvsz2e3BfAFe3qEQ1AGHhRe+uaOS2yTRfS2AVe+OmVFL7rM5OMSd1wzpvbpJ11cch1NPHsHM6gMxGvSqd6SiQDE2StvqyUyIQZ1ZwZRL4ICaHuv8OCswwhl2OmXodRXOgBuu2s4csiRSxQx0UP/BKIb+PYa8t6dMiOuF7ORvf2XYTVwDFlxT2MH0s7hKVIx0wMNCGnhTkBnsaXkZVn3CQX7aayamU+iCxxO/HbU5QRirTw1CgjYcWYrfKTaYHlus33gVHTaSQ7RCZFLOtyfpPP7Xh4dFxM/9xSdcsAZ0ZlCSYDsfZ43dlVjdrrgKs3rWl7nTE2ev80GTPGK1ltwzLClRacvXXg8z7H7A1P+Ik8UYFI79DLdD/5jglA20kZFbAZuwf26WwGssles41kUuvHmF1bbPwz1m1Tb5bWnyUsnOux2NjjW1b3JTgp2Oar+QfLIbskVAO4M1ko78+oL4kd4jj+vrYztLnubkzaqZXSq1oF0/BnzWXm0bTOkJETI05IJqdts3TKru66mjoMUAKxhrGRM+PQatJrX/aoot/wqNkYO2eJ+YcnCFQMDB686e8KqVdMrMJEzjSrix0+uzFa8i3toHsQJcYu4D22gevx/aSc7lgIoYDkuTPNo+bHPCo8y/MSuJycUmTfQEk0l+e8sgZv3S4IqSOKU5YzaK9FgIVtW6LeNeHveo5byL2wTW0myTx9bTXD8bufznSA3Dy0Fr408ou6c74nZgcbRuFZIXDao45uMfbwyKSVx0RL0XlxH5hcEvhURMLYuJoGB22wZGqJ74OLK0G+6GRHEvk8LL/DhcOU813UO2NTa+bsm8E70P4GU+YiXRSMXOh0dCmjWcTTer1b1l1dRuOMKDzeiRJ3pAMyIx2mU3I2bj96WhPmSQ2Xy/ts2tV3eL7f1vfIDDqeTgw7brFGrIhM0QqxZm25UiI4A6eJF9SWQxokiz4dlavfwZk35uwQUJaxZcu0ndgEjxmL4IQ9O3uP11jX2TS5k/zoE/DJHAG6rDPjB1G23HvG7DPEmJ0yZQJ82F59t47MMKRg1pWFmrIEDNQMAAkIYgC0s8j3MyC1W2fGLGk4dwLIkLFTF9O0Jq8Qa9YZM7j7DdP+vksab2zJ39nFzJWR2r/cK8goxCRoemHIkmlAlzLuevxs4kG2+Py59nqzW2L+USmDmUfZ6Ob+SLHwkm32cFWuShWxhkpz2LSxdT5rMv2u4xlPEU+eNJYwaSd9Pn/eON3OK4SFiNmDr/ejqkRKTwDGzowI4dK65bXmDNsdvNeY9dwyCnpuFujsbOEz3XmaEBoiM+Ctiz/IpRrqmZzlaRJifG+Q0UBDAzeDbBO7ierkEGgRQthk0NAZprEPbR39klqMMYxyz+uwx69wCtzmzLT7znqV0OnO3zQkN+6+Pq34OV5vGovM4zUrHiY1zQM91qIDVu+/+3HvYeEVXdboZPTCfeh7jMA4ku2AWMuBm+2Z7evxBuA2NjOYkGRcqFCKM8sUCTB9AwmgXgZGPOyDC0RPVIEJiHOROEZ+7O6Q2t/N6OkM4mWWIdHAH1BZYzbIZr7ilADCgDT52QiUeRWr/QbMOundwRlj3/FZsbIlgFBxegrMPLJheiYc5wYgISGbpz39IaD8tusarl1dF9ejleR9Mi1l0kpk1XYsGMrKgJ2xZ/xX6cT2jDLWtw6wW2YteI1GH+P57Sto29WdnTFoV4zaMs8e6C/g9WSOb0vKaMAfeoJ/NAXDpnoki3JGKoZORPtdyvi5Cpj+yQDMlClLmDCVEwagsWPSMJSMCCxQBxQMqJQtU8YLibOitMkUBOk+Pypf3ACwHZhLt02MluabLbb1ZnarEy1ZYlRStOZMLfexkSjKspkpSFAlEVh2YS+jlDHJJjMdiSejDy67YkyzG+7y2p4FvnGSt7WeDB5vvjqOlKqyDHmgsz7UnWRgph79hDZ3tpO7sDUkFB94J30jpvfUeix30s8ioaNtpbozYhEpogkLuZ5shksjZEzV7WPNwEzY3FJv81Hr6FwPrNs78S7MycgwQwxejnijMUU+8rDuGVytwz6Ckzlo+p6H5T6dFYcMzynAuoMr/mlY314dIGyELvMR6I6G5s3nRVwPQ24Z1Tr2fQ7mNA1y+WSnBqQyznibpiEDSCFguQgG23Fi98U6os8IhLR8tOX3FE4C9cioHXOfbSE37uy+U86cofoKFJ0BNYvy+Jj2zuTwaPdofV9KrDWDogGh3G29ibBrIgsp2TMxZ84sVHspKDO6brnGzII+MEdIemcwAWSr7FLUfYjqbliuAFTvjCUirL8n74wBvoq4L4pUkbPRrKUvQCWNZ3JFCKKjsPexE24rcPPN+5BndrvlUsYLO/qrWrAzS3pcWdaX/fTMvKNSvZgyZ4EpK3E6a1M7RdrWO8y4bGPUxbVmkHozYc/UHKSeMGX1GUDtTYDe6zJmV5LK9np7gn1M3LPcNVQ8fz7Y+blkzN4lo49suT/4B//gFphlQE0B1xW7dlJjdrktWTbknu0AGtvnZ6zeRoLoJ+DMNtt6OPNMgdoO3CbzrQMyBq+y3kLHw5LjG6FFziraDoDuZIzyaNNul9XkjlKrsGa3eHcyNf5QcFaJqrnNgOmEUJuSCJe4L4vW+QPT8DjT9h5G7FVvYBVnRudcMwma5h1ibSZLFrch05DaM1uL8dIYsPgYcOKuGHTNB1YNDntOqWSZfLHCSEaFAdEgfJuCNkg0tdH2YmtBfBvgfrRg6PuxqASMjRR1jg7KJuDxlpdlbX4vsvKedtzA3B1MjZvdvc/VtLEuAWjMAM4wagyYClQ4DdF3oDDqrroBiRNkGOyPNZVsBylGdWTeM6MHYHCqnXMjkGOzSs1aL7qOR/ccrehMHPpxG3jnfq3VBmI7YKrB7N0HCzeZLg+q32lvbwTEJkAbLOCIGbAgP2UCj8/1PMb9eiFGboQhWmPi+JzarEkbAdOqk8OsmDWLWjlOOO634dMRHgQIZHLrtAB8bAmdLiJEvMFGnmD3W/TUy1HfszQxzzXjyjfPtK+ZVBEiaUQEYraJ/wIZfnT2rCSGmJrZNvCygtlbJoLeM5Kpf4LJsRpg64g2lCxhtKSVfnsBLzXafiZ1Yb6rBdswWYvl/YbtSr97O6kZ29SLBWdF2zBlJTKHpsYfZdxbh3Jf2TAuqyZwFurMbAVgV8xZAGT2GFDDA6zY1fTn1qVdsWa4m1G/aOYfRr80SKG5R27YLFrf8Mitvc8x+ywxZlmOWQsn3tWdaabY+NyytOLK7kxPzaSN3ZKdnBk1x8w2dvmPADQ7scbPAqi3rNoGkCl4DcdICbGTz96kjKDjVLqksTNlZItfOpCSPLgswDowYeLCGD7TOfcmS7oaHCrVHpDbybdc5I2uaEveqw3+aWa1C5GkZrG2kTKm9nWIK3EJZLPMqURsJTk12y0HZGr0EaSMnt/1DQ9lmWEjHARyE/tYRwaJkEaQMnZhYw2yxhqg3aw/4273KiBx6ZQfR407qnljsDuIMjSpG3IreyI9Zoe/nYcB1KKczMMXJmWnMWerQT1JEuucVofO0GCdVeogxe/sUwxHs6E8Ccb/SZhy1CVgOWbmMgvrWIt1yWIlvsQcVj1Ea6/fIiap+owKqJPR6+ubjFxdc+OyLLkBqAgIuy+7uh4XTrNjANzObA+X1oBopmrCdEtKjzwJ0NobgTDbVahmrhA0KicM2XRjBAoKyrjOs4DpmGtmxJhl6WhsUmK73A07AWe2yhNDfZmtpAqIaLFKYdK7vfGIn/nUZEDMtSY0y6lk+s03DoyKKoeEkYDJKKK7/Wmg/A347WfMGq4nLI6HanPvJzVguF3Xgp3WiRVixfRzWef3ZYxcGHeGHnwSwQ6V7fqrhlqo9MDW8UdmzbzO8UquN+ufFZApSFsGbK/6CXbh8vhMFu057/EY0/bXDfjTzfzDNmEkYjXlnhTXUoKrv/sMFz6/NWapvE/nKSiRz2dh075xZFzaQiCuCrhzlv8p4CLgk9rln0gbnw3CHpE8Xljqb9m7xNbezYwBGqierNq9Uv7W57VDeCZXdJJPmk7vAExy0JaaspN5peoAJN0i1JExgLFBj57f/fyIBFIaRJkkeSjxNQAZd2w17oq/aOL2sCTg9s62ujLqDgiVOCg9rK6MQ38pVN9yFydnPx7VV91mkkmUw7YVaqynZQoPK0kQ1ccxCiFdxJNI88wsEVzGBI2kw2u2LRbMM8F2pO/Ft3dg6JHt4g2S1N5SBNu35B9fbjWHrGc7swRyP3f/r+PeJnorlqAAF7qGHBdVNweVMJL0MWOaUkanJJxWr+XEprbMQr5ZpSmG0uS5bAgS3Ro91JnFoIKySBlz09pUFUg5y7voL8vtJUccWOGMb58qU0i5Hyw6QUIAWpCICo+wWuUj+n8AYhuZ7Mxio992ABXA00s4bov74sJeab7ZA/VfZ+/PWDCUa8ZsGHp0oNaYsVLOHRehr72u7L5Pvfwg+Fkp60XzOzA7NNvsqu5sA8oUwL2pqyOwr0v7lJi2GxwvJzDb/fPMXNVjq8G9rffA7F1nzHASKK2gSBkrxDyxpf6rgQZw1pYANDuOIzBqND2V010ALBf2jOvZHpL07UKoeXlpixP4TEGgBktvDESM6sY6kGXGzDqjpvPErTFY5GMNoF7OKdeS8Xs6bk6MWgfudYh/HEt5lPnGjV7c5dn0wyh4ehiCeMxjXsw/kGAc5ERXas+9Y5zUppxkZOtOkB4DYvxhhC5xm4L6xSYfAtjoPlulMI6LeNRqf7tjsX6nLvCJfRXvwKsAwyK/eypWmm8y/skVaGwKEiSAEvfbAVlNnjw9XcNQowmgR1EYzINoYzImhFUDWOgmFTVHXr5jvsTIY8GFK0vlCyicvwbr7SZQYqEuTOAKM3/Gx4EYRF+NzqPdxwOZ1YlxRdzZWJHkpJbh0vM4yFEXZiy4bO6wcHLsbJhfTgaNTS1ANYOehYwrs1WUeiGwVdjq8iZUDYOyVTagNYJZ1hqnioE4vg7Epnwxqxq7BcB1w42WBpBEWMekshiCkEHpFIRJzFfq/bbJaB6A7JhqQKuRqCx0ny625pOZrQTn9kqW0OllRwvowZAxZoI+xw53kHNQbdqtwvB/ht9+61oL9ki92NNrMGK36JAYasvKWjO21IvdVoAWXm+TIawJMAMxhiSJdLdZG14jKFMD4iF3bI/NwwWU2cw6W+rONgAsc3Pc1qX5SXzoW2TUHmHawjKGP+VAfQI+XB/+dmXpm8hr5oT3wOwd+rer6dq4MS61Ytl3ugvXBry5hDwHx0FWHlDGmS73qF3+IrXU942dW/LPkNeTndWaXQKwMzOR5P0i5zSz0mrOhuyz1rtokCiyhTXkfVJQ+YzrhOvcAMmFk2FH633examasEpQ+HX8Utu9vk2viekHDgmlRDQtrCJh3GUzG3Kjw/MDIR9G4Yy4MdYuWeRatNa62ovl7P4ahgoxw6b5qQKuQ0tusq5OJmfjaTGFyoNlu0kCGQYg0xozD8JFBGBmwzxfQRqgxvu2JKR5CiVNBpKeTSB9mmzTybr1BuaB3avp8vV1N5mAmfr2duXND/jFJFvAi7/eyVPW+/KpnxU2EWMG28sag+mHgjJfuL8IZAuQcFbW7OttALIyXBknqeeLxUclqaKNgOmV7fHAmsX8Mkt5O1vYMzXiCKHSHH1LLGTwyihCPBE1ONIKiKxk48wTqLQ+jORzOiCn2uCClUHLrCXv4KtpRBrqKLzDN4fjr186H57VkZ2xXHiQATutIdN6MVut7sefUYq3WGwyFVpLZBC93MFWwRIqvbBbvrozutjnZ8xZypbZWq4dKgVeE1xlQhU8CK4eBmFI1/uf2l3U+tG8QJ/TlcukQPb2gZnWhL2FHLO32r53yegjW+4MmNVaR55Mf891U6CAZ1DtltR5Oa+H16tGFcdx0I3emJEKepHEmTAFhDsAxyBKGC3fMX/UlgxoPvoezd4+AKRNGzlgujBQ4xq9TlY1aePROq5l3OOIedP3zEIog0dt4b6d9jaqLDOGZae5gCicsxFwj14AgYyvEZRxJNgyKubpCFPKoEHaZNktzh/p6HnSU9FsMQFtqcWkMF2L2N3XfCwn1MkUoEabuCeaBo4M9sBT5ZINNby3YetRw7JOfFe0ZvETiWLPLtsd8j5PgdnzH0jZCCKaq6KdLXE+CPnM9eQJXA+Pktyt5S+/mfExeAvH7y0smy6yhKu93mr0CEgvPB0/VmDWTT8GXeNagoXo3Ifo0LoJjbPAi50BDBP4dIdZR5juZAqCZghy/+TBmXFFSNF4XyvakEIdHYJbCCffMFGSX2aszyzSv2/4IDP/sJQh3GfApQyfYMbQt9Vcs97gYidbKkA5JGy6s0ed9cL/Fbj9bvjNFhYLVzVj5QF2rCQ1ZJozJm6Lo1aMc8mK1JQRK7YDanVXU8YA0YbwozNltQiLZXFskvPMOkA7xAjkEGB3JEAvlTRe5KDpd05z0t4A1F1Z8yfzDgD/NwdwN//IHgzMnGUjtJZ05fw9Y/au/WMwxPVJnaThMOJpEBhYMFeTEDIKAa0HBOSGfLEzPw1U9dt1t8cfy7R2VGXIQG6N3L62DyZgBxuwhM1yp1b5ff/O3iMJeE4cIblmi8O1O2PGbFeXKXYjFg7pvrFMtNehtX83Cuy+IRqpBNt7NvtoC9x276ndN7oT3NLMYye1DyvtetTXrSG6Shb6ZQVnfWBSMcsYOZM8ZsYxbpG9A8msXKaHf+omx7dMQ3RbREINQnSYnKCd2lLZJmCFCuo0rZtZM5WNpTIGrgpjg3qE92zdwW6MHW7dEsZs9+iyBuW4Fm2KDJ2Yhe7kGGV4CzDbkirZcfBzHomt2bst/hlT5Jvtu4uzJUJJdjDTTGRuWzlk8gz2tcucgrO8Hm/tbVsIJ7i0WT5hqzY1YRtzmnC0wkG6qvlTjnVdxOHpKkL9WtDEqcGHr2YfQTnkkTqyZNoWoGWX8ZREruAsGoaoa6GTlUif6onZhwnMscSz0E/YXwh26QHP4WdlAuDUM0Nt9Mknoh/GYH4i+HgHzrABZ1uDJ1i0xl8SsjdrH/RfZ8mOdXn7AgD8p/dbWcFdmvhA3VdgtG4ny902nxXcGQG2jCm7MPWoBLisrGdAWbx+HNo2/UauyEYDq7aRFvr6p6zZIazZAtQgBiEZg2bnBmKpcYjta9Sem532yHfp+zcD/jruV9GH+8FGLZLcSQfsMwWkPvdSxgup4iQ6TqSEAuoCEDGzADSImarKrHWA189NUie1DK5LOPJDzBpy18blPda8sQUUCpBaHBvp+HnmkijultaNOFrH1Aj0cs0epG1BvohZC3ZqWrK5Rp41oA/yJbTNmM4AO4XIHtLMWQNfA7+wJ3t3ZaSbapA0IrJiISLME8d5T/p/dsJWcNioC0CrPtGlmn2Egrlj+kOPHcG6I6q7GHEDZDLCyJJdI5mS3HRLI8OlNhy9rowzy6Klx6wts2GJH70aszqzGCod44adWuML8Hh9xuzz8e/d8gb5VrfmDbbHjJmRCUihmrL0T2zzh/lO7sYYmep4q5kGHi5SRlvASFZfdt9iWXg0DwBsl2u23h1KAtBODT8ylgzkwggsqMrYEKTSdN9Y5ZN5JjZMmZ3cxotlfj+cPG+b4E1xLuEQ6ZK4lwRJIn4UsP8Yfvv7Amg6Y8qCO2NZma4AuLhmbAfWblITdovGHp2GKicMGeSzE2BbzD66i4vN8cYSa8QelTKydX5Vq/0zI5AHbPVT02c7AWVYUzjPXB35+8DjcsbN+n/Ygf9fA2YfrCDMN1qTXecmMmrvgdlnAJgpoEIMEl7AFlbb/EXm2NdBnauxTK21sqU+AT0GDlXXL7JD38xXqd4AYgJq7Io9e2QaSzUT6/zQwTwzMUmYQVeQRHb6zuyabpP/1PBFgGrW+V3A+CUw82SMnTFMJm/k2rNMASj1aJVKvBbgpTlllVzO9Y448qBwYTUvrJn7BnUmNvpwKaij+V3KCKxIEgniVHvJ4PIoidkWg6Z3DwEAi1SRGZdeMVYW/ovBmwXIBqlWm3Ozre8/BZ6r1nP52mtpEHOnytnP9qSueuccc7ZNFTA+50aN11QSJvs28svszbbzVhq7/9ZiaS4T4vI72aZOd6S65JLQNAv4ctHRcfqxJwDFl/NgGxCx2n9MBrPIfm1gAAGzWXl23/cbog4TG3A2a84KCg3a5G6ufDOxbCCeQNZCPJU5+BZAWonAzCjrmyPmtjiZmDXttqaurByiOZyCWNfOlKCtDoxDvpg4mwyHRXwEt798B2aPGHiUE3v7kgdBd8BWNq6K3dijUiB0ZuhRNwyZZpQtJh+0z8LIDWOuVj+eZpLtpIwUNj1yzTwHZUdb10Fs2nECzLKY0AyMqUEIcC1zvJQ92mvJIP8S7m6MeIJ9OG+GS6C0Cz/MTla0jIEDUd/nmL1D/5hxEvCQTVtqrBh0NUCSfo8ZN3YbtJFwisKyPAZmmM76Z2CKQZ5TO+wMUHUgk9TQvY6JxwCHmZRxU0cWHBOVQfMVCd3a/oHkiRnoC2CamUaqSwtSSgXQSOSO3KOR6USu3Y2lw4CkxzoEF9yyRBdpKEnvJzTmrGOZKkpAfgio+g88CmfxlfGLuuDHQSiPyG50Fjk8usyCOHZiHGMLWcC0R0CmriUVD1YU26bYI0OcLFuM9+/VBMQCeOvcVwk5ZiZSxvXRw/HWGPYhbAYSu4LTjzCaf5zaz7tkai3LZdKOdVqwInEXoEuU7BmDQ9dLZmzymDn/DmzveSILtuDJ89m3AsCH0wL65bYoRmkl5x4ctkhVU/Ekn0/3FLQzH4UNT7UeIJb+ao4ZorxNZY6e0ESho68j05aMZkdpownktADRMut8Bm6cOja5pm4uEpeyAM5sYfAyO43V+CM1LlTHQzUD4ZzmrO7MJ8YpctghKtNCtvkaXQHBy0ooOMvqR7gaJBkbskPCjjFgG5/J2cSadPH+7weA8t8bQOZZdva3Z0gfhTULtWLW2LasXszW9535qpZb4BshagZvdP1VFwmj56AsPOZcasb72KXP9x2cuQC0nalIahKCE3OQkwy05amWDArjARYMz2DN5jV0//cE/4A6H9mz3TbF8Nq6cRP6XDFm75LRR7bcWcD0FYsm9VEAyRczkwwCBZml/qgJI9DDdvvBgl6B4Q5wSRsVCJmaYBAasWz/MxmgsmRyHHYMmSWSy7T/wkCu57tNo0Ybph7dxbKHQG9kkgvg4kBpPV4KxpJ7hiXTymGEVyDujHK34UxmrivzWzIExQyZrcYf4b1v8Ixm2fDIao031qVfpX77WVaZyzyTojnzu5RxdLgrPRFq8qRi0JXdvZMdujCFmNHLs+PKFvl1CBMnG5a7M7LCtJKUMSJrtQrRyjYFjnW00+L5q/UzE+P1xv8esrD353zhU2vPZyleLX/ql2j9V1xMQGwTPu0rEOc0Y0d6jkygF4sGS+OrDqhc0ci6A8N3sVJCmadxzOtnF+dF23obYgA7PcNFUPoCyLJCur5smSoFa0WqoWSLcsuMTkcp8ZQAed63ZSSflpJBqLTUuSRZeJAOzJrVKREcN+3BmAHA/wNePoLfvpzb2Yt9fbCzL7nBhxp6uLBfQarYv28RrGXZZcyKHe2EWEJrMjgsbI9/34aX5nXCDBfZ3vuFlHGwZZgyxiFprK1+jNi3Y2elj6QO7YQ5qxdujVvGLRlPZuBWpQ9S7QLwxb8PAPw/JzDDB1grOi/ECNnw5fxJvJcyvkP/BHAFtktZIVBdl7oq7uqVlJURIMid/6W+igOnxWBEa6g8Ya4gEktj8Kd1Y5Bas0R+aFlotW5HwN8pyGXHx4St6yD0ANWrsalJaz/nmJkwk2koOAO11s560s7hvqg1hrvrCNECQwhznFbIcm2YiV97IKdqtN5lpV/l0fwq5Vk2F/ISsYzZqkZcB6MSOY+RvpIHsWpt8hEQk6bujFW0l62B6R3bozlIAIojyEkQMBKRlG/5hhV5O71OgFZHLcy07yhhLbtUNCxrzQMLXMRo93/Ha9SYbSHqG+sJ6fPWZRDYBXu/7k64KrHs9XfMRdHllkRwPbC/ezHo83dypxydh/KMEbbXO81m0Y990DWdTcNqCrLYA9KWWP64ESqCasgcuetgjSTTAGgVGjBtAszWCi0Xsw+T+rMMlDi1d7HL3xR0LaYemsdcCIj1aJSOYXwuB5psFvcGto18XjPOLkcbQBbwPtmvsJPMoLHfP+2MtQyzkGM3gNl/Arf/CH77pXu26/Y8a/v+OYCvQqOW4pxotjf4wKwJm1b3G/OPpaZMXBkbUBsgq07CznVQ1VYwk0kZncw/+P221uwsgNrOa81U0qgg7jLXzF7PFORMDOOG/wDAX53AzH68m18/LntwofbHlst7YPaO/dN6oiswwWDrBJgp2FoARwKOkMj2ilje1xPWKV0nojzPHjQ42QKpDXumeWhbYJbJJXeGHA2U3ogh7L+uQnLGvl4+Vp44UPpu3/t3Ie6QYGliwjyqEQu9lnDDEbYsSAVdlEXMiglF4930qsrNkPwz+q0nlGn5avZxp2hjz825LbsOIXfzTKjAwV6RdPFQLabspPnUY/IwH7CpIDbaIbnpcmK3m+h4xi+edsuIL1tv4dMf0YPYsCxNm5JGyxNjgtnHypIxk1epKsiCM+Mdm1ZsxgZOU68864i7qypwXduSM33iVLhtly8Szdehp8LvhgfG4u02aee5K6PLiEpdBiJm/Y219+7rgfPlsPlDx3VCFAld8JPGuh5b5Bpko306vWCK9Ow9FjhxPRk0UDphXewsTNCFoTojmBgWMZSyBRdyjllWxWbbaZOry2WN999reeCKZWYq7JjIHE3RpiDSKzt8xsKKkyGnMeuOLvfvfs9O6T+s6DKkaEsdWmjNE5/2PwIvv3SpD9uxZkZW+OqaWMTWnk09TOvNEgZtZ32vACyrJ0tryuKfu42asmDSlWWPJbE3y6tH6/zOoAVnRg2bThwbj4xFSxiwnZzxSgKZ1qUlgO3Z1vuGP8y/tSf41+89mCLWzNtRKk/u1AHzfK5yzH4SADOVtZ0yMBvW7XJea4uCtirtVHmhJ9u1HZDi74h8L3t9jn1+odBn/qzHNZUvJu6RYRoDWgJsAXC1+TVzzsykjBBpJzY1YwnAXpbziNLvUka5M1RP+mPdebHdwEMSGiJb1rEMl2UddQ2SXgAZonwxzGc2rW6ex9zpdtJnjtBoSM1Zdpslu3yvVNNA1F3lRoKqlumAVaz1ZEoZ9qec5bAk2ib4ZrTOEwjlweyj0qh9N8C3wac5OTM6SRvncVnBSrfSBwG4CNIcwHHUpdN9CXTO0NDACbavudoVSj2AslJj/gfR2c7g2C+adbWSLFUgg0ixY65GMsBZ+HNmuL8cPrEvt5Ox3pX39ctw7ecNxxZx1PATpwlPLPNB+rrEvCfpK2Xwaa0h676Kpc1zYsqixPgeXcFixwhjPFStlQTu9XatAdPqJem4Bl+yM0EFGJrm8trNP2xzSpAnGZi875dssQ27zIVyrhTgzu9RmLNQe1YQrYNLBGbAD8DtXwbK00NM2PYz1X2VE1aNmTJ2UMyMPVJmzFaApvVomVeot9qysj53U1Zr9+eROfMaGTSWNPozmbOFAbsAZqeyROSujM8299gzbS8B/FAEZvjb13fLx++o7xmzzxgwOwE4wOrImNWV4UQaGTLPpN4rVPYI0+YPbD9towRFY8O0DUMQnoc8/0xZOB/uGsm8pB2nDo8JEC2ItvhV5kFYLCQsmDHbJSAVm+OpNWVZbdl0hzzpJzGpFD7T/AWUFWHXapQcKJbjuC+XzDTuMyExU9vmVcHWyl4Tu0gTgGaSW9ZrEQbLVQV0bbSZTAUuO8Y5A74Rb1ngyUwMP9jGe9pzWBAiqgNjxMyV4NMK9Rio7WrMMiOH2CpLHEMTNz5xJRzzHXC7ilxe17daNazbSeV3J06BW0mkrEydBx+SB75JMPN5aWJUyuJaTBiMFB07p+YYzL0xADTsDCf3UdsexHjANvunlAi62Je9YJ1nnigAOUoDa/B0GAwxMqHZQwCWK/ow++gsdQbUOFg6lzPaeOVw6VXOaCGA/uK3kPQJLcM2RW5Vm+Roy5wYXZSmTmaaiZkin4PtgBsDwrRje8KajTyXDlpkFDHWmAHAX4Pbv49afmlgvZj5Mq4/S9wW1b0xY8p2WWTW3DkXYGbCjBVqu7BjMKwB0iSf9DKzRJkxq6vs0M9YqUTKWMU6P4ROo20LFD59xpg1Vu1I3mc1Z1cGIaeWV7apPTthzzyCwT8L4D8XYIZzm3x/9ijV5wqYvUtGH9lyGQg7A2bPAG2prBHR6n2ACAJiaviBrA5M2a8M8GxYtS17psxaYvt/KXU8ywg7CZxeJJAZKJPj0MFraTlvdRMdoJJG2+WSnZ3fZ/6zrYzM423DqKzKE4ZM71Z+zIFOLiQOeKWu2IY70FArf6nRt0yVloUJZ3DVtWhOXE7GK0kcvYqHbo20HxiBeo4o/YiyNt+HSnoidXMCZx0SxLqxtfYMyHTz2WOqLkb9vqwFoRtoFIbrVBlXa012y9ewZm/7YZOz6sQxk7ujH+0W2lGD4q51osnNzTtItsiqenD7a9ugdXUZYGSlGBp3JsnHYEWF3e3tfUKQMdjvK86psLvF/wlDZq35DGtGxVNtbYbJiMl9g7HdJufWFsFMkAjzcSagF3LrPLrmWTuuw5kz1FQWAvdxDIc9Rp1sKvvxBW9zFDEJvWJC8aXaPYh7owKyiBQ01nlHxUZI6Zi1YXFt83Y5HRmdQqY9kTMya7YbOpitjm3HZtgnHagvsxIm2L8dCXNG9/6RXMBOjDeqqjEx/LB4yJd5vrmP4wyUCSCzrKAOs+jNLaECAzCrcPvD8PJLn11jFurEkryxQjlkrvPKrBsbrJg4LgY7fCNWTti2DshKmcoPjzb5ztJFck/Uv0wWONJiELPMsrDpUGuGx+rNwmN2l3N24tyY1aE9WqP2GkxZ//tDbRxUgNlOVu8PSgneB0x/1hmzEKyM1azjSrqowGoBbrJeILo07taVsl1qwKHLZ4CJQqzZ6n73qmDw4XnCLPVlOYsMyfdNXBQ7y+jdJKXLKMk+P8gLxdBk+/rovOROEKSM/WbKd66eueqJ6i/MOxIpDNUi9OJxdZZncMaOTmw8smSdQSLCPFFgsxyJGTEGYZYxRQS8RrV7pQd412UWeoKxjkPe645ADENgkolWF3bAAxiKNWa5hHE6M7LhQKXPs1PoiV1+DQLItcYsL6Feubr7fykwU00c79VZjdFYMgoOd/g7fb5t1Xyrn/0jSkitFAs/rqQmTAV+deE4NtuSCU4gZSnV8tPdkrFaj8d6x5Ql6zs7tOt+T31vlDXOY1CXS4QjD2RrQcroK2OmrJmVxKFRkIEMUaU1UAtIw+C0mBlTxd9NOntlTCvj2xYcGJk521dtrdLGlfZyYcMWy/suC+9mhSAipt9CdYdkmk2+ZjBjhXxY2KfFFIiR7wq735sTMQoebMh0l8m+G4Ovfg34vMdbR6E3uv896c/0B+Hlfwq/fTFmjWkG2S0JgS4rwzZeJYfsNJOs7e8hBh8QeaInrBgiOzbb1dgyzSyrJDMsK2DahjyDABmiVb4LQKt1X2uWujRe5ZxZrCTYZaClbX4gC83tsbq0Nv1DGP6YXkRPZ1R1/vTayCP80wE+73PM3j4wUykbAxmzKCeiz4v8rc/j72zMMExABZg1m94aww0yMx+x7lhoZpIP6yqBPAVRmHlprEzcvQLimsjLKHjsJiG7OrYzR8y2f8r2GYMxAczsMKnCwNpq4ap+py/D32nLjvVkElIGZovgzESChKj2q6z+APaWRzb3oHpuXOhSCsvZZUxccclspkpa72M6aiq2+YvuK9FjWo0jquNJwxTgRhPBQGwMLZIBRG/H0kYXCCXsUoBJFhwY47xZCTZrzFzKSHbl0CCA5inwsmD+4EKz22TMviX/NCkie/ZtBF3PqXW6WPYzZUNPFN6zyvEerRX81NrdgNkAZWTkoA4URXLKdpLGE8FfFBUj8Fpq9sHsH8Mm0DwPdxjOMbuNtdim7owloJqelmfTqUHGRtIoVvYQTAPFQ1Rb5lRjVgDcOGwaa6Rcodo2ttEfA3nyhDJkrp+alr2pLRuUnxbPlTjCmEsZAeD/Dbf/EF5+SWDDygVT5hvjDmXDQh6ZgC79rjJxEDdGzS3L7PIxbfIHYOoEGht+lFXO6Dug40mdmTJmkm3Wwdlprdmu3mxTd7bILDMm7KxO7oxV2zBnybz/AMB/tgCz78G98ixT9QAXgIzUOAXAFwD8F+8Zs3frWXohTdwAhUwqtwAJlSkmboVaI8XrLQlT1jtmTuBpTEvMNXZsHDKwubHkv/yT9Wk79Hg+ZFByEhHA7CAvG0Ki2/6zO2Mhdq7b7DtWx8XBvvF3nvn7WH1cPRmF7zImzzk45+ccEVVG0V8HchPDtFxLwJmST7uR/EW2OFKxxb882EoywiSBFadn99A0L2IbaclOMHOW0TRC+23FSZnxR9zBeDoUtNXBoGXH/Kz0OZMzulS1YQGNcUoYFAKCRG2AP6rzmRiqyQHRZY4+v0bAwIkvWGKMlzQYLpIha087cYhMQIiRVBK9bb5RVFFtjg9qq4iFvC+RxkjtMiJE8M28rb9g8JmZ+7/W6DVFgk/wFocJ+MA6qeBODFnGgMg8zxVZCZvTbesk4lqljIs9vs9O+QLObMqRO5OS1LJFAW1kyWKemJPIsV+P3gAWyxcj3JrTMufFLGA6WoxYwhLxNBdhZdHr2sh8u65ElOUp2fN7hC3KbZNQILh54fOKADACbvAkNiWAMUfqj8lATW30mUXzLiVkqPyEhMr/vfDyx1MGbNSZCWDrtWaaQbZ8vuWui9hY3iNzXzxxXsRaU9YllJUGQIMjo9jku+1rtwKA4TxSrTEjZ8YuZzw6u1YSxsySPLOEMTt2LNoDn3d2+XUDwHZDmGK9/3uzW9/TT8NGBvLI8JbIHsp7YPZZYcy2NvnMoCUs2ZV0Uc05dt/FZpoaWwzQR+BPl9P3gcFCrG/rx6QzWwvrl7CAanJS+PVMytgNT9gsBDObjBksZsoCIwmRRkJCpJNeeSppjIc3dV5U7vvstfhO2aV3npLMp/qyBet4lEewkaG6MgbDQnFqXPwWalJXFnrXicsDm3lUX+WMI0EVUlfW9XWUYxbE7XV1XGRWrAoarYnEEZ6ye9xJj6DHZFw8ExtaSCljAhPEmDkOYr/WkGlvRiEubBoCo5Zb+dc67a25Gi6CNYwCqmm4ZvDa68RmL41rtbrz4P0U+wB0DBhGGgGy7HWm+ud267hupM5q4Dhr4KXtucc957xi8wYkWt3Vfd4RqYFRjza3M77XrwCbmWFJQhWdoxWGjm+QxlDhPvH8ML/XePV9xZ2CH9JLo6Q6I1ElXyUsV2Xo4u33Y5h1aP2HHAWqFZrKhV4r6KJxy4Kki2aXqVtjod+bE9rg397cR4WuMerZBL/YNtus0rL3rdxIwti9HE2gYAmQL88xW45WaLeTZJC/ZiY4BohOjZtsszEQR9lmWmNWIIkFJqfJpA0yqGBZ7l5wBSlINRThi2UaPnUFhUldGbNKlorO/gQq/hJK+a+mjovbDDI7MfYok9EKNWTquChOi9k8tyhz5HaZrc6PpUQb+yKPr5O6r8xCviagjGM8lTGrNbJmAwzSKwMz39SchbozO5EuZs6M7Dz5AKN2lX3WlvmPDfhTKTD7bqwOuSzpt8zhzPJBW/tsAKm3ur53yegjW+45wOwN5qskUuvSMunkmZV95sRYBESUDmguQrSXejS2u7/6I3C1gKxEOsnyzLMMs0CFtFq7Zd/V1GNzvIaU0cwKMY5BY0fTPQoGA0izM0BGy5WqKj/yEXABaMa5YsQKuIK0GmUxXCMW3ObpZs7gDcjt9JXVy80/6NCo9786MQZ6j3bMTSQwZNihGo5+vbBeU9MoKzbFT5IBkI6XWTCd4M6whVqzCaUKuTJiFfNQjllf65HWk92XrdTFm915E34hdvj7/Uo63QysVEbG9BRhqXGO+47wGs1GmNd9uQl6OksXgU6NDnY7P3rj6KRWq+ORoeQ6sWiuJQI4A7zOOqa+/2Y1P+3GBWphxyOiHWCPxx8iRPNw9UzeqbbjfScxKZNCTcKs7SdnVCx9h3ZcrTOcNVj2W7iauktKN3yp6r9C4LTm/ZIgZSTw1YubFFhwg5HlX/k6T+SNfOxWWWMEXJmtRCzL6tdjGXb33qq0LAmYZnAGCZCewNekxbbEtQUm1SKjbHzpauB0WcUEpUzGjRMJuNxvQJ6SYGghX1m3EKYr9gqWqgmrHCi9voMkSzdxLuGte9ndgv9t1NvviS6Kt9WVcYAfcWLcZZJVZchsY32fJIA71ZbdCnBQ6HTfn1dSV1ZaZbETMPH53K0goEZg7EzK6H5imU9qGWXMHgqdTtwZA1NmiTujJtg8Ar4sly/WjWwxBW6G//0OVzx9Z6Jh4A5WpgCynQzoUwA+73PMPh3GDGvd1Q6QmSyU1WsttWedDarUAK7Xiiq9FYxdbGMJPL4P0nrGbgU53+u8qoQyMR/Bc9dLDN/RjwOzfnJerAEv7gFU6QkUknwCs/sBVaeQfNF2rBvWAhx+zAYpI3Ny7qs+zRPgwcYgXvL5FWuMV3Bi7Ou3eTNXiaPSgJA++tqLc5EueuKWKGNf2Q6EnSHDjiqgawfKFtCYSXOwo//Qve2iZDHueOQ+fHmIWNq8mV0WvzUfSx7YMSxCSBUy8mh/rccCyuIJTKyCE6AUgJln6ABIA6HZzjA9rll4smwiV+/tV7lRqFjoTO9zvSzdkyQcmdG254VfIfLJz5LMdu3YDN72Tn6V3e0yweTUhnXYxfTdsR7AzEjO6PHuGOSN3Kn3FfgiYawNNOxQhRuLlV2bxKxQg1ZWEUH7xdUmWMzNPMoCznZbK4Exc5LrMrsZTm+JjokggkdliwtjZtNXYtSY1Xv//4ZZN1YA3GzNK+tKUy75W0SZnFASrgsnosyTLLNNw0121IUtGw+wrU3DvwYv/zhq+btHiPTiwEiArW7yxtJMMsuli4eAr2CNX9ZpplJGW2WMXu6PryKAzEj4UaMzY30NKaO6M3pinR8kjXYO0C6BGTah1Lg2B8nq0TLjj9QgZM7/mwD+wBaYfcfKbUdg5uvNlkdTmFkLHq3vpYzvxL8ze3StGcvA0Y4VS+Yv03U4sdebKWOm8kXefsJQFWHEuE4qKzjQdZUGHJd1v8krSRwDo8fSRwFHxrVgxAgG6WWXRDY2rJK7ZOmSzCyHLLBbUgPYz0dSG3gGDvm3c6uWdNiUZNoRTjU5Q4RxhjN8kRu3RVdFflCk0kpPamctkmOLFNM2VNvo1ZY9gzbowRqtldn7fzzVkFcOnwG17H2iWTDElDnOVFJ+K2PG+BQdYZ4T73Yl3lgbahsTELbvd2+VabGkimpIiMux1vGt1HPrliXtUp74o8blmb8z44wPyeYiy/1+9NxEjhkvE68+mKAh3wsBYSQzDJPFPdZJ/thb7LSvztNqIwbmdIzaL88f2HUSuvOI2CByJ+BpZ01UvkYSGz5mjlleaTJ64yEDoDFcY5e6KqGxaOZD+ukkz6yVCJBKV5H1Y93ZRXrmWTmRKSJxZQTVnpXoPKGgjdhQNoOw5J1+mg+FQr8eH86oUeZ4CwYfsyqtkEQyC47WWlMsDF4EKvFS7bseDAv5NaP9NLOMnR2tEUdYM75dPputr+DfZ3ILXI+2rRSg28o4jwt2k5wddqDPu+26Xn8b1X4/rPy+Yd7B7FdgxBJrewVoWV1ZTQw9bGcwYsKuiY1+kok37PELMVuJhHFryPGolBGr+cfOOj8YgZQLA5ALS/2lJszWsOnwhMsy2R4wB9kAtf8lDN84B2ZZTWSWMplE9vAN8vMoZfwMMmap7PBBOeNpzdmu9ozaYnEz5/LFDiq0Fk2MRYKJRsKOFQYymMHSpdvQN6B2+opZU8bGGeO1sVnKpmXW+eoeqXVjC19CMsSiodhsjILXqDXL2DKRPWb1Z8GVkUuvqkeVzxaM1fz5B3IjrlUCKW19n4Gv4JFh0k4TuWW48OUB7tJDGR1RlTNyAVslFoCL5uSphAdAmVqOBWomuznbUi1kgZlabfMrYs5WrDMz3IRJM2HFdp5Ulvo+zrPEN4JKnFmXJt9/e3TS6tTY18GOTFDX57sT0PLaTulEE+NSNgKFtd6leQROfHRKPQISGKxpbiuZhrA8dpiWMNfV5X9h36eZRgBjzFrUKWUE5XN5oy+GNHKU5lUCJj7kkG6V+Jv7D4iZsXF4mcV0xm9TAgkqiQSdhwoPNKW5ickJf7GDtA6cO8Du95Aajnm/Fnrm2QBrI1vOWlt9SvWcZGxdysh0TOEwtX5ns03usO9zrpJuU5a9zKuNt74IkgoKgbMobXQkxg6LONKIac24ury1c9DExmkqBasPkhoZkj+G7QwNZSyrK0q7H8tNiMyAi22VNUJq0YKydFFAJGnYZvmOsJ1kv7d3Vqm0IAMn5syezrpffwBe/kfw8lODAYiXxA7/BIBlzBlOXsHW90VklyaMmbJlZTH8GEYfNDi6hEknwdKeSf98fRSGWrPsr04zEGXNfMOcHQLGjhMr/WMjazxeQ9KYZZclj/e/aYZ//ezCefqKbeQUj2gYpAiz3YTfNvCx98Ds7QEztbZXe/wELKTsGK+LpItO61LAtLRLtp0xN57Y5C+sVMKenQVjP0uuqLLFk6DtABxPDEkeCXkeElAzKxLEDdlHtoiyxqKVxD4/83h2YdEUNu0+F9+wUqMcxDfSIj9RBXqM5hryCJEx8khuTciltFLuSsIYQqRYAuZCifhaROcnOk1YzChjg4/OpLFLIzIJo0gZHwih8k3eVTwVmfOiy8g997Pi2KeT4YfugAcwuJvvQfAFOI5aW1/KxRGQk8rvjAozWeOCaZ2xyn2y4OeHCYaMuqSd3XIfIC1sko0wKEQ6cIGV1skOn2Pw0olFooBhLtQcAwrOaddJTRWnihn9Dqfm647R6jToIF7Mvd236RI1j9eGwYYK1/gYwBZWfJJnnJV2B7y20Iq0IxWo3YLfjWSBgNVugGJ0KL0B7MaGNlTpYx+xckTOAVmYtWZdP1fIvx2eFDbxSPTmfmYeGKps0TORYcF0DC2NQcMIgLfxW2RgxuJHDpzua/RLSePazfKkvaG/p5b4LcuqZGpJ/tmz23wlv4uVpwnOjIql///tfVvILVt61fjmv4PdURpiDFHwQfFBEPGSFx+8gdgm4kMSFTUqiCI+eCGtpsVoI4jp0w+dGIwk5KEDQZvGoN3BFyEXY3xQsQ9oR4OJIPGWRKOJ3VHsPjG95ufDqjnn+Mb8ZlWt/3LOf87eC/b+16VWrapZVbPmmGN8Y0QxppSQWTJY7FZVWFNsKVgDWVBuAK2zZoVWtQvMPg3Ht6CWDx4ae/Rw6O33W6C0ieFHxqbZqtbM4msIQ1YobDrJL+vSwkKyQpYwboqWhuM03HmXNfL5by9fkBqzysYjlG02gcMNTPkec4bzdvqZ0cdRMPXePhOL+DcB/Ow+MFswZpM8H6uh3TQseO45Zo8ap/KcjD6y5TIQkNjfp/VmC0A2SRxbzlYiZbSdPKxJspeBJZAlfLL+FCgxICG7/n5ururXdiR9rmBztWwzCQGkiI40Si0PjTPZeH95AoHkhiZAql+1jRkUB0u1xDcGxALIAo2ZXMNlAo4KaWjcUl1mTbOcMlKGuNot19w5yV202gzU1ChEiCclvVJbrz5CJRamL1RHIcPkYlLjDdxt3tGgx4wzWcPbn/SZWKgDg0zBBY1KiDCQmnwEsw2sasniz8YcswzGMYaP8kYTuLeIV270cKxZhOpP4wC/sTVuM4D1LpdjFoqsUDxCxWbzEdw1sgkG9wkG899JhKA1l0HcWYPUb0gHGtPmOxi8OTLGAOaG5EgaIdtKE0Q0WaGgxqkhPdNs7s0lYISgJ3eVdD7hKstE5Hg9OneGZ06VdxMoc4QWNWXCbGFWmOnoIM4T2ay1HQz9s3QzF97KxNmxiPlHvBJHnhm6IUj8fAZlHiZC1LSkTAb/nvHzC6IpU/wxWeUlsl0ahx2aGnMJYAoWkWSWLaf1/XjBoKdMkKYiU39xNET8dtTytbCt1ixY5N+DIasWwZVnbFhSY+ayLDNkhaMAxj++bXVARhb5HRzVHSkj5F6uUZ4iZXSpN2Pr/FBzVndqzWyYklTMDNrl6C8WVvtIjENwm0FIBX7SDR85OmlevJvdcqS4lv/qdexyjrrv9k3PieF6sxJMnyVjtscmJcBsj3nCChytWKVbQSMDKgpKBgclU22Wi9wx1HQpawakk5v6tyRsEZ+XLn+rgEPXbDHeZpYZ+kCLtsMxgZg73xjHrH7Mk6mULlEkqeJy2XTEyVLGSATMS7m4yNsOQyY2+QYpy7K1GUjlmwZi6UD/mboYZaQTTJwl5vPONOtITywnbev9QzV8pslEbtXEDVkTSWN4rrrMKuBsNitQsrLScNGnIOnZYWZIGS/IVfUXrIvksqnseXhbaw3Szc7UuEUDDPausA0Pi+RzkhfuMKW9HdT1gvm8yWhCXUBsk/RXcv1cmHfYJkL0eXDYebDE/XhTTC9NLnx34FnjknZlpUD7Zwx2onn+nIPGdqxy7o02IGDk6heKybjF0vcFxpBLJbYYgolI7ru4rbHcRf1coYRj09e+r0MUZhI2d9S5lNEmWNXaupDMtNBEygAwJlLGwZQNM4/xC2w54lI7ZiR1zJ1oMJtQsmEhBKMog0Z9aymxq2yyxsCUyaG4SwAbWMZoc9tmQq9BqcttndFjsJXcNrawy65a5OvN7u5oCPa/rqzZ3TcEQ4/MwCMFZsSSXUSyuAqtdgZwEhptGh6d1JdtEuRLIYBkUc64JyOsdqL+ClJ2jTlo2hWs1SR0mreNwdhRzRmSejObgeRlD2RiYbefSTlxni0DgBe/CBpoKfbXNs+GmeUzzk8kZXxVY/ZAYNbImgbS+HV7nrFRzGxtuV9O8sXGwDjXVyEaWHSA1b6vDNnw35jNP5osj4APNgOMzg6RHJLBTpXdYNfGSlK/ti2tVo3/gpiq1WfhPamBw2bs0ZehWjTUWsu2Oyn4o98pWpum9WVhDn2TMJKUMZMoTp8l7oy7wMwtGQR62h9E9dWKlrFYrtUDK0GO8oRJXNRi4fd8dmH0mty51d5xspbD7NAobAUqI8sF8tRe24UChOXSTh0EMoNi+1JGlQ3mdXieIv94WAbLZhn6hh/MIxxtY9y6BswOoocX40mSs6WZCCv4wr+XuRsOlqcDl2Q1RrDEJ89+T08tP7Ffg7EbZvuryJq0qWzHGXLSMVhk2xLFjPl+oLYkeh9KiM08nNa9Pi6ZLjJSfnq38cfSabJPPTRrfKVptDjJhDWDjPS5+EnATMrm5KI5GhKXXhdXSBhcpuvUkhozriuLg22WMWZujZbOQ+4QSU1MwPnKl/1SreDC6FKmiyhdZFkjFmxaQW6eGc5NqLzRF9ezFsAJtQeXz2jHzQmQ3Z25BL8Nbn8ItfzaUVd2N8sRU2B2F/ecXRn3XBiL1prJsktAd2XQumSwxMnPajFYOtSYIakxs9zjSkFZB2RIDEBq8nwDaBePFv1nXBrTMOqEMasJSMvq0XhashK4uyBKHh34IRzUlg3GLGH4cxp4h6dHKMV4BcyeJ2uWyhIVQCUujUFGKHK5bP2JafSQ5OnYpNZqmqMlZiCZdXzKumm9G29nA3MtWFrWYwRMgVgbduoz3hbaDgZrpmB4xdDpOhvAI0A5gc6E3SsYtWpFjquO+JkcqapcSc8pgWomeMU5q4yNCpEDsz6BKe9puCPLFftOaB2aWCaz9bova2enUbDsgMfioU4F3lGTFUx6zYYKJw2mzYnZweffDiz0VzxUZDx8Ibhb5YEbslBplzqzmSnL680yP6rsJDS5ng9A2bItXNR2fvBFha62BpUuv+CZsWeThzrVVfkhPF2VBsCV3PW8zPCoqRwz2st+R1wg8w0XO3W6rkOC14lztbfapNb0oEo1umi9h3NHFtjS4EI6Xlaiu4RaAhZymiiAFMbtDI7ybtJOSIeUDQPWtWcxa8yCO2P2zwJQ8+W2eDqpYnmA8zwPElGUL+zygamEi5uZ2bI8SiAvGzaZfLD0UNn6EHp2A7NRMBcYN8spQrw4cwl+Gm5/EbV8T1prhkVeGTNmarO/NP/gmjKbWbIWMA2tLRuyxg6ciDELDBm5MrrFurKpxgw7dvmYw6XDPVyCpqfXZAaSMWYteNpxgtU7WXc2lVcgrznLlnfD+wD871PA7Au3C2PVoXPAdJqU4pNQ4rFzzMLWvcoxux2UnZUTnjWn2LHHn0AUkzFZjhlIZsegStwj1ap/AkPy+4W2qTJb6O6BAWQ2j/8yGyi29GCgyfVjBLpSV0oCgauQ7Qzs9Vwyqh3T9mnvFdpu8PJ07nf2sdOL23JcXybbH60d3ctkly9lRj0OSrk5ho6ik3PCMSB5QgNaF09CKpVF4/wyZfs56ygNaLTcYKPNjtdExuhaX4UZ63qJVvls/gFIyHTmdJKOnVIRD9evMEhTa/yxKgsyxirDjoosYLqm6NrTz5QtWiFNmuRJClviYCwewOUMgnzgh4Nlz0d92Ls/6gY62dvLVrrl5x2fYzs/7Mo+2z5utRND8QnGbBpKX64h2Y8AjA1Hu5x+7tIG7PCvOT6KWm3WY0+bz4wZm3vcmdA2JE8MIE3Bs0tdKsc2N6fR+N4KcGj1VwNqTepYwpRHAXqaGZuAFFkbM4ZR2jgmbbDZ7c98eOYxMIVPcy0ZFgHT9NxLJB4zUV3GjGVgtZzj+zBVLFhm7lEjzdfMYno/r1ULvIMvzg7Fvh9u341avjoFZivmzJIcsiyTzJMQaS+JsQfVkpVh9NHAmbvh0mJr2u2qDpbMJVi6HoCeVcDyxJYpU4bcBGRVa3a5LFizxE7/Itt42fsLykBbALajOrPtVv9dMPzTsyfLi3fzyM1kosjWMxRvY8bsUc0/npPRR7bcDcBslV82CWz2lktqnTLjD0h+WWfjEqt7F4MNFuGwZI8Dn0PI9NYOdZNFYmOl+lxCey5/Ie+1/ZNCjS651LapCfgK1vNqlS9Sz+VEu3rgCxhr65qWXwGuE5zMLGU8ICZcWCoTiqYbfjh9ziVcFBp9IRduT2RZzII5GRkocwauYTtiX2zu2MaPaZp2Rm0R6mTLKbYU73pNp7uYz8Vyimd2Gl6N8Q3r5HDmirKfYtv8UQ9Tt+F3DWtQnk5/zXfrzSZ2f3kmukc2Y8VzrXp7v9ddYo3wprJQj8ydr4Df8vf81MY57HBRvwmwZReUr2m9sw1e51N52SSes5Tr97LvWd6UpcxooBAobsANSRFTYIecsq4gNWYm8MXo3fF8ODCODW05Zu3YajRYwcouH5MbY5QzjnjZaKGP8HlWGyeXWipbDPVnFuMbO7aB9P9lBqcrkJbt2S2s5C5faS2psQhzRnJH0yOg5eangVmF48+hlt+NYu+61oCp66ICM3FaNJMQ6DLQSMacgTLLphbWurJRW9bruxmQsfFHFXdGo7KDhV1+FqqydGVcWefX2Qyk8nsYc6CHtWY7TFmWc+YnQZnnrz+7sWWnbz8dmC07Pdt5X2+ap+ca31Jg9lKZf2SGGjoQkjqzFHytwNyKYeJlpQYNCWjjbbHEan5i5Whd5YRLIzNRKi9U4MTuicv3st/KmMHEAbOTbJIjVzDbZEDBqYRpt3avG6OWaepWA2DXuj+5uveuE6t70/kMwHxWBE5qwHbTr7GrSd2bLLJl3fQDwU19lr1oTU1d7HHXYeoA1YUe1EPVXl/mFTLdF6brmDnzOYRNQ1BuQBaG/UxqNc3MTTQH91MD6KobI3CRXLPagdsasHL7zVsWr6l23IZ5xNUWPQIUNirv2WMmth5uZOVukXDhUHHLRFyzHUY/t7txhkf7i81Wv9nvz5JHi+vibDbJY+vu+RZZw74sohFKhwlbpEBzbhzS3hjeDH4eYqaJbW2MkEdWMEQNGDBDZsAog24rDJ4t5n1Y3vPKBGpdB48SXN3BuXlvQzCz0yzOC9E1AXDRMTdyueCp5sypsdFAlMMXmar5vcxlqsCo1zCsiCejjbFu+BHrzdi5UXk6ZcxsMcxjN0TPFHyCjDpxaIJlkEsb2UhEwRiEsGSGrWOlZDZmKv3bG8emmsfFDix5zvb67pbh2E/A7UOo5a+HDDPbs7xPDDwy98Usv8xtdmX0xXMzuNtQ2ZO4QyWM1SRgGosMMzuQMiZ1Zqx+WdWaTdb5HDp9gjVLa8yUQUOsPbssgNnlBHvmhr8Bw3+/5UTpwMwyjbvtvPYl4nlVY/aMHgvGLBxZCS3GDgumrFmc5Zbnkm1mM2GDPdCVyf2AWcbXj+vGioXnLFek3ylJOLUCQl+9155zLRuDnQbCxDp/CYjl3FQAiyRYmy32IdN5YV4y236SYe4xY9P3lTHzPe8HlxlzNfnAYMcUpIHYMi7Lqha9NLLSLM/MR+gzU8SiU8NtEBlki613a4UUTqNlWs4qDdTqGBQ6cotJpfYc56xXDgFZiCheKyGx9GEJ4Cyu/xJusx6sySnwOQVlvqTC+inCLrKUNzaYS4+1io2RowF2HYZD/WRz5/qZcWx4UN/AW4dOfrV7dAJsxpCwZZr1aIXNMbC1ilPQdXttc71YMK8xDxmAbfhcIblhHUey9b0F9qi232/By5WcF1te2GZH32rL2saM32vAczDIFrLdKFvOWhi3hYvf6fj1bQ6yxC1QwY0MRjyAVtCWebUpMaJN7NRt3ddDb1u7Vsoq24KCVTMXmDPkodLm+RgJLlAnWlTbgunh2bPWa1wWnfmYjYumHy5m+3l+WdnhmUyuRpsM32wFyDhYmiK+OH85JVItd1/kwOkAhQqBNf7cJMkgERpMqHGCxUAaMN12Rmm+8Lzewpi1x4dQy1fCypdF10VDeF13jD1WtWWwBMQlDFkAZxtbd1cG4LlDZM4seX7G9ZBvf5gdGbnOLJMyLoOmte7sMoxAel1ZEnj9+fa8JGzZDoPGph8sc1xlncnrfwnDh289SV58ITP4R7MLYungYmRU7fGBz+uvvx4utUfIMXsFzBbAaMU2rQxBEmC1B26mZWXgH8yoxAa/cOBykyU2i3kKYS6UO9YMLzoAq+TFvbFWzRyjP2+SxPY8q4Pj502SqVJGYbkmB8iEBVN5qLKALhlqS4nioj5sNcRfSiV3vl8umB3oVVfGkRtakuV1hJO6RUxjnpddqYt8dcE2bJtNBJerFC4rmq18E9fiGEkGqx5txrxisoWE7GzAKK1mzeOdK+AZdVRIiM0EGNOwelUhJEutwqWZbxrMVHxVA1M2wBoA+YYduEH0w3CpUUK/DeBnM4qgJ5TR2cbqUBuyMcUANrR/tbkDjqIlNwIT7rNLMZ1QPQbZI4sXgbCPUyetNWu/x5HbYoxiNoM5/n64X3sHnPEnagB96OHYurW8nsFU9qDpahGsWKZU8KkAzJ1NPWyeLvC11LhuTGC1eFnwcRuXGHUcTapYhPWaPNrZBl8ljRYZtOSqui5V+mKXqdaMk8RMAtzVwWkY29+FSZdC9WVlGoTbbD05gTEP/B02+aTNNWbKQi2MPbh8qxAoc/JeAbl/lzsBW1jLGiewJqxaGzm4R1fHcHw0v86zilr6Vxh1Jmizv767dUj283D7clzKjwLli3drygp9xq6JF3Fb3KspY3ZtA2BRErm5MGJgwW6mofVlVVwYhTWbGDTcT8rIOWY1sdDfkzRm2WauLJmAyiOXRpU3ZsumwMzwP9zwFUSInwdm72qnmsXzV+tb59nlePY3NIuXrMbs7SRlTIDRLsji2qnk+YpBS001mFFqz3mZ7am6HU7TWvx58jwDlbPp8bHLokofjwBrykqqdFKeF7HEbzVpwc5+27e6WL4Q2Au5aYgZavo9SwDjNPInVlA/D873tmNSMTmu+cKxEUGtNHXimfhNjQ4BcWhUwGI7kHSSN3ocWUDQJW/85MYoU7Zhh0ymDD32+iCUOan9/LAX0zJ+XzBjnHSWsWaFIBeICbNg9OHwPndYCcTVzcmRwVmGJC3pnGsf8MfQcpLLdbZSHNVaGPGWz+WImWjOtvgeyB4CbKPw8frH2tVElXQkpyTwtlWjwopLfeMwY2kywKvfgJPpjZhbOBDcItl+HoMRGtJCxlUtnDq2bLeYt+EeCZZBbmYmYTOsLePdLMb6xIWPNg/W+0YsJIJ0jgFZNRC7hTAd0Fu657axhb6cTXUDOhtAc2tFsJvssZk5dBYs09DJwD01F/aFPC5nyqIdz/zXgrzRl5lnBSNzcIRAm7Bkca2OLK8s5pnxjmjkNAgEBS2lmhwqspQJr6AKJBf6Ujec7JEpU7WpphekgLHIphWsIxQLTXpZAexCAAYzq9ZY6CLC0o40v+A+w7KfhtvXopaP7jos2oaULiRPNKopUzbNE6AW3BrZ7EPCpMUaPwAynwHZBM4wSxn9pJSR/6YSRg2crpE165LGOuzzd3PNzkgbEYw79pkysdOnW/2fheEz9zlBrgHTMiGkEbzGE72JG5NZGEe8VDVmz8noI1uOGbNbWbM9mSLLEzNJokokV3JKXs+2rdd7+jCyCJLAPSBJZM/K0THY8N/jeQbIMoYw/V4C4oJvWCJNRCJVVIdFlUCy9NMo2BrERKomQ9kyO2DWSt0hMPayyjrpROYfXeLYVIF1QBzGMWE2yvOfUbIptHsVcJbtZQdfGiZqg8pjgDb0YVdNRQaVnO4GjSLkpOzg0IgYcM1VyJjGf9N40U9IFld53zUZc8baMlBNWW0CtG4E4onE0ae50qxwbmz5pW5gjo1ayFDDKknruqyO09auX6hU8cW0ameQGqhwG/VhPgBNq3na9HFdZthugi5uis5By5VEgQ2UkdTwKoMUmWY1il2rPS/NTPLrujxv20/basm27WvySppxilxhlzGGfJJR0+UkcZR4r96t2QCnnU3EAEedK5SS4khEt2PsG4jm884FmLVjNySavFGtzo499i9OVXCGIWFcebOr6o9DqEFBW+bRgcjyaQZbvKdQb5jb+3R5l0l62M7rEvLLBvdmwqSpMYjtToqsHjpnIEaUcDY21DsKq/7oDtZUox0nGylMLWfF9DlKJBOsiLjAdmauuAqhEJixy4K/BKKlcGPLXtx36Pgx1PJ7YOVrJvMPtbwvZSDcizKkmZRROMcGKovIGjdWja3xnQKbOyBzqSk7a6ixkvu5gLQTUsYAztSZkUFaHazZUbbZmQDqDKjVhUtju1VvIO7vwPD373tyvHiXbTS5R2fGlbY4vE8ypYaUnwBIPXeg97aRMu4As13pIoOdxIwjY+G0Hkyf99dNBqiSwJ26tWlbd4DbY4GvvedTG2UB3BmjiGG3j5WkEce1dsvnJOtUiWNqxHJG5sjAzEQmyGhg8slQi/xm9mGRra8b1rkQE6ZxX1XwijPTRla/nbWgWV1f7p2GBrtwg3SnCACNaECf4QyMpiKz8JZJr6lIytcBZFhP4qstyR3NjZtAJu8Qa7BptYfTDnbiWv8S5z29f/OyXFueB1XTnfB6GbP8Pk8G1gA4oiuiJ6er2qhfwbmE6jV1KnyWUbIfu0WKOJhukDFG/F1eNhqbxDDkeJyda8dULzwpBQeIV0YpUtrx+3G1vqst0SD3TKbpgeljsWyubOz9N8Ex7YR8DjkbtYwEIueZFqricw2Ytlhn1kAYO1IEKaPNjJrliGzlcLj/zyQSemSbtcSyBnzvSNg4YqkLMWVc28ZW+jOnvpY6zhjOEvOOsCi/XxCjEBT0XoYXi+aZWSJf5OYO/isJmdnJrXR/k51x3ZEy5KxuswYTWnt27+GpA/ZHUO2XAOW9S8v7zBof4sq4a4+fhUg3We/VHt/ZgZHDpAu5I0uwtMoW/cD445SUESRXxMyWBdt8dWSsMdfskjB7u1LGgwDqzEI/C6Xe/v4j3OGPPWTcfjX/cDrX8j5uDZNI5n95Aimj1oQ9Qo7ZSyVlPAvMFkBjj5XaBSc7oE3Xa2TtzoBsCTzacraFCG37yMYbXTJ5K9hi8JcBPn6fHCcrgbEq7VKTkGxlKxkcRjuKtelJBsQyUw89NlMNmbZtAuQmYOZhkDxP1NDEelADGqv97obph2G7b5Ay0EtkxkAkRc2wTPuti+Cby5kr33asuOcaGNBgOM8042VqDFnj9ElFD3WXUMqnrcSlMBtqjRtjJbrVEoDG9WYe3BmvvFTtsqtKa2DTj/j+nunHLP306sOMgnO+QxLaQPLmmEK0bVEz3SvKCBRNflaeidckLKsNk92DfUkzBMFC/OYybDf+vs05ELaotTIBSrFliK1ih9Hplj2OfZTk7bl/jQvNE/Cr++CWAz7NyHKuBVu0Xc5uy7LUYBZes5SR1jfZAUpn0idmpN7UbEaagYU0qrYcrW1BXGghUcwoUWzmaYzkEXcb4Cq0uQzxEDg4C+dedGqcY+hj/h6pemdBAbsjtv4a1L+3uCzPtRm2MWzFSH5RtvcVgPliCKqu9pmiK1xyJAmeQtnKmAnqRhzbTE7J7CnbEfkFDxmeORzvQy0/ALMvDbVkCqTYndHEuSazx1+Cue3AbMt2FqoQwCkxxaX/qzlztnJldOQMWpijRGL+gejQmFrnkxlIMAKpBOBsXW/mEJMQnA+gDsZjs2zzJ73gL9xeVaaMGQa7n9022czGfX9scLEnYbie+/qe9WOv/ipjxxJAldnOezLI35MV7rI0Z9anpiELQOKJc+G9gNle2x1Y49tOjdu9gKL+9i3behKM3/QdkF1+IJiImuFsslADxKxAHRKUFkbdpIwoQL3EeK82Q+WIfhpBJYiIgcwiNzMN7kJILKR+SQNtXZxMVnVlBaFArAfAUAMEr3/DkmBaGRv6SqUzS6JWJiAzr+Wp3LH2waOafjSgVvtQVNe0ts5HuiO1n88r7itQJ7G0qQOmBReMjH1ZE0W+Qx+t0t/Y2dA9GcSHMZkwtuEHbHnO+h4DxYYrjjh5MFUfzoBzbw5zkG+eT9oqu8fmi7befuSk++50asqNusV2CNe5zW4S2KG0ipp/kMGMI/FyZ4YrXoVRSDSqv5xMQIyyAoe8MU64FOHhTKwlR/h0HKhbiLCGwMXIi48tIp084+0ijroWsayJQsF8QR0WAl8be1bYFEQPl0dLfDYCCSDNF9SlJf10f99kh5LCOlPaT2YA7//4d4C9F7V8L1B+6RwaXYaU0VmGyDVliQV+IYfGBsZKXM43Ex0FZNVne/ylNPAAyOwGTCMptfb9WrOUMasSPl2BS92vNeuGIAkouyQ1aJcIvmbG7Pr3J3CH9wL49w89KV68G8CdpRN248Rf1Gv7nCX56IwZXpl/PCVjluaU6bKaTbYaxDfJ3oJ5WwJBlfpRvduKMcOCPcq2TQEns1OZQ6S+Dt85AWYyU5WjfTlch5qhNNljc68k0w8dMikLVhfLRZwVl5sYs7qa6tDxHvXM3Md04FaJeSsbu3WHLnPsUgWLNuFsrtAs9HnW2qlurU/m66yTjsK5snwU4BBwc1kh2UlaEs7Wuq+mBel3Gw6eFhYNa+C1ZsoO+oDFgfSdf2MY4z1n6TpQGrdVI/hlh2tc7VgctQ3GPJndXjWBhfKi/VH8nofDmQaemJuVowybx9jtt51Ai8XmONrKmAhh+2h+d7sMSiv6wde7yoC6MYetZ3V3dl0DH46O08iUAyRTQQKmbbbMt4xFI0DWLP9YX+fUsVhjypygllPcwbA1QQBew0PVAw9mgakekCCzQC+ITosqa7Qlk25JxtkU8abZZPR+kCuW0e9OCiyWs29/+VCwEYhZYv5Bjour/G9VmCJLo7EaU7BBDFnfeKNOhVAkS7B9m1HEux5hRGr/Fm4fAMpHds1ACmWfTTVm2b/IjkVQZyGrLMgYxSr/dL0W9vO8sjqziTE7y5zVnZqz5tBYDwDlmdBpk1r31d/r86/HBT/yGNTPi/L/tlmKW1fmCUirLx9j9pyMPrLlFJjdwIzshUun0sUkryyV3q1Ak7JnGQhbAKXwGUsZ2QlSX++1i4IhcjbU11wbNi2bbLsfgMuMacQCmO6B1hVLeQf5oQVIs53PiussupaSyNR3qx+DWOgHVaAYHIZZN5ci22hS19fvWR/FBn6sPFwOMjMvcqcbOqI5x+TUKIi0Fb3pzjDL4GLTHwiomfVY6BvCACxD6PNrXxiAXOfRc/OP2mWNjSmrwpp5MHpf8XVcn+SjxnAbILU6q6vrHjNCW15YM9bgIGawc1/LFcNmetGMMlie1kKJicUwMdogRqYDUGvSxejb7t3e37rsOQSNG9VVscSyhyOPE9rImMSZgejcCgdMU31cs8c3cWL0YYZhKh00C8HXTuvr5iJ8vLr5CgV8b9vrxM20tib8ghFKzeYm14vTjWz4nQntzQ3SbIbfxIw3Or/ltXWpZKdiKES6JMCMwZha5qvc0ZBEahidhRYAUHuX+fTIw5QNjA1RYZMc3/UugRkxrkxrtWbjswo2BQFiELUtZhtsOY1g4jHgRmwaY57tuQJevwzAxlb5sNx9kYlKTS6w1TgUSYyL9j2mB9AJjGnQNKNTJHloj8YbfAeqfSlQPjjXmgkrxtvJy0zB0ZJX1hBKKaN2y8jVsMT6slrJQl/Yp37LslnOl7oxWi5j3GXN2vt1KGIqYq0ZZ5sF6/xWa6ZGIOUAkCXW+hwufVlZ6he8H3f4u6cmVc8AM/s5AtjzfT6Xna9UD/XxGa7XX389rO8RcsxeZrv8CXDpZwKcJkB7IpPs8DMBBhzYDAJRae3THnuVsFy7gOsGYIZV6LOARRwxeFjY8LfXWtd2BKTv+9mKHT3TLmjmeOqJIaRIUP3RZ1V9NYxUgURaMTDT0quAZVwcGRPHRo4n09q0URgk2stQI8PFc7xzWyLnZPpBmkyX6cF+B/Nko6mAjsX6ShVWxPC2PhT0lKcCVmJCrgTzMFNfwxAvSuB8s8xXMLaSM+a1ZnUKqEa9DIv+jo88SvaazXwHVZxIxj0ZfW97zZ46DbQ4h1R7ZjgxGBknR0TwL/rgGK+b14CaiH7JwILvtVbFFbOtw6fNQEvHCn1Z38XG4hLe2fLTWEbXGZwNENWaBCk0wONjGF9lpsPBbexiskM5cZP6cWvL6lPH4gzUOFg8k+lg2OlzdEGw8e9jaIu2+To+n4qbLNcCTzMduU2+JSCn0PWVsz6Du7ojprqCq8gG+2E5sgS27+ch03PO1zgzZpkSlylOcE6NQDJ7/Rb/dje6yFa6FfwENUJOUw4sXW2oZS52MPse6srqPOwxW7QnG8GURIfwKI/Xrl1reW0dIr1gzFzqzCaTkEJW+TaADVvks/siyxgVONW1oyGDs0zCOBmAHLBl4XWl31dXxqzmrA5wmdWaMfDi2rNqOShbMoMF70fBNz7mifACbwgwO5p68J1O6vLyMWbP/XHEmO0N2kWaOC2/9znLE/X1arCPGKK8ZNv2ZI1ZThq7E6psMgONOyHY6WcMKEfmtYFfZ9uv2WGyLBL2K1jm62th2VTaGF7z50mG2dFVP6SMtiac2vPq0SSk2+JjKEjafadZ5TfL3pow871jrFKepUYhjK84i1gJKPbY5xFHVQcTj3bZVgG/I1TJh6JGdi1oMbU62hdlWJ4TYxZ46rRL04FUXcy9gSBUyy9rxh6Fhi9jcMi32BmsWZqYplLHipVG8eKDXTIGYWQ1DxsMWu2sTbOK3wa97YRgRmmzXG9D4uoJYxPqp64nWMvPavVrwcG427hbfz4INCNQYRE6EqPT3UmJ5fPIT3Xg0fbNg/8egtX+mAwxOvfHRjvNilTfLOk7WTuYP4P177oUjjWWckQ7cL6Od+auN691e5QYs+MIcdyN2WvtYVngNdcSmhPrichgMuNZioxZLbJixRMQRswqFzoB4kxRwqTA5DmB6IaqrNTgalniOABypayzRfzyiX+j5WYvyPFOpvQuZO4BMtpwiwoIK5hjHdlpnhAfY+DWtKXMhGZgzqTpoWDNF2QFa577RjrJUNm9ClTPpWDM1zWrj/f40BYk/dqgGsmlcZVbZsn7zVXSY21ZNXEzbLVl5MRYmWmqc8D0odU89gFa9dkuP3NoVOOPurLOrzGAmtmzYG1fZsOSy04ItQIzZsocgBe83wq+8bHPhCswy/InbKGWwY6i5gkYM7yqMXtqYDa5MIax7Qy+lsurHG/n9VDBuZ95nckY9XUDZNn+B/nirUD1BHN4+HrF+h3svwK0W4AqEubxPq/3gZlHc6AAesiFsan52hRwn+AWK/2+HNWHBRljRiCZ1Jwxk8djR8ylOxEElYgAA1XBTIGyJGUGYwzQun8/EtaLgEGoM+MpTGVcbN6uRNYw+D8PXfSdeCbqjHkMmB6SxsGe+cRjWo8r5hwqGjSr++JUQbQNzauIJ31I5IwnfnjALvbwwVYjMDsjw6uLzfjarp7c4+qQBiYSOqcRKp+XmNidYMvRs79cJi1ADFQ/OlvwM+/bBFc8u32TlbzxpFlktY0YYyeQ4KhTrRZ1YhJl4CE/gHPVENrFJ6VwgPgdXFqA/HOHRPLQfpo04Dqlh0dgZhqgtTXQCuME20VPAqgNw6l0XQsX54I8VHW1Yz0wTenn6WDOMmA2YI4LoxahO1sDmUza5OweRrZ637beEkW6u+wvAzWj7mL77A6zF0u30fcFiYnIzplMxLE8MtqsbhsQEqrLONds66ML5Zj12mHEGUMrTz2U/NAWIv1aypJpblnPKEts8jm7zEuoJ3NPQBgFTDfPqjRUGrOM8aF2+Zpp5okJiGdW+WL8oWxaNwI5Y2BiO7VlamzyBExZB2b2Bh3nIxizwzU1+fYrxuz5A7MMbAjttbK2h7JOCVs0vW5EljBmh+CCvpPKH3deT2zXLVK9M4ziQ9dxVIOXgaOs9uwEWNbv7IKwpK4wm4YpsahuLFX1nqjeGTR7amUQE1VkMU7Srkoh03EOaMYzIIik0wCcCztPPKlxus0sQHAz2Ta8SRU7BcCjFZpl1aRNHpWy9SQDsVB/JiiUUbG4mhjJGpHAn0pWBAM+ckwtOswqGHbdSFkvtciPAdPReD8CqtpDqqmsjuRhQyV2HTw51RilPKHMfkeeahv8Co4JYGmFrd0P7h5+4n7JDE5kVX2xStd0BgVdO9WErnIXBkjiFumJTaIzCEnqeBwKKOP+ZzFtAeSEtrVDG8a0dlQdSF14q+AIWBLnxcHuLUPHgDlEq197JZiA5Fdb7JAtwDTFNxbCpS+ASB6zxDOOoo7IUq3x2VCfG/wuAWurAdNSBUjkUuhOW+2ZY4oA64pSi1YmGSkZSsEQ65oLRFHK3hyuK6njB73mmsi2ViNmf8q040rBx374Bs4K4OW1UWNmeW6ZZ7llVHNWC+WWEegiENaZJJ/t8XtNWSGwoqCGgQ9yq/w0VBoxUDqTNTpLKCHGHyJjDHVmPhuBhJq5kwAtqzF7SlA2GLOyYMAMO/5umOvRnoAxe+45Zs/J6CNbbpGhNRl7nFhG688UjPWQaJU6MoAjqeIpOeEN7M4pBu4hoIrrv7Qe7ETQ9aqND0GgAFBbAOvd14t13lR7ljJmMpaF5N5Ul8B6j470OsbqSjbWuuusm629/1j6yL+RnsXLzBuLw88WEh06uhJRKftJ6+hcvf05JbvKyJjZtHRU7nMw9sRFzTLFsVeVZu99qjdjgFbJTHtAiNphlYI0X4C2OW65Ut5TDTlKnfEOhOX1GAzjjiG3nEFUDF9iUWCl6p+w502SSDDRuK4puYMMGR5CllmoS5x6z8Eg1YNb0rSNG2sYXeDVsTGjhX06rTuLLWCe5yh6dpyPujmF/plkj3PkqraJSzYcbSdHrg01ouVHwDbG0YfT4XX+IrpBBgVnY8xAFoCdonEBZaSBVpdGyOtAtHuAXQ1cgTismgAgI7BdJJb7EsBTW3eZvBrjxmKBMk16hjs6zzyVMk53kFWxmZNRLY8CPU7AsRzSnDK/IQ6MRSzyMSSOQdqoNWkQR8gpBoVQZSGQxRNqgSVVfaZShU/6+NCGJF4bcspWU6Ynp8hbAyi7fsYOx8H8o0QjkIklq2QKYhGA7VnmO07Y5SeArMsWIazYCev8LNOsW+pjWOT7ym0Ss8QxhE1fQdnXWcE3PeWBn6WMe9M+CtZyYPaKMXtGj9Xg+75gDYBvYcphGXqvr6eFLsvrJfBLXuNomYQ1U+BiJxnCMwYlZySLWc3WUX7c3vec7s2+AGl8F5lkh1jEFqyMU85cQzrh3Wcsiwyw2B1+u68Zdb7ATES1PdFw6UnGiDxzKq03w2JB7sDUa8YgBhvKGYDsaAXM8RZyQEwmaQxuJkgs1lX3ZZjThSNTFCtZYn6VBU7F4uB9A0vXEyc+9ySSWgGaBRMSRxQBzjlrLnYl7t1Sr9ustxqoxsrBt8GrNjnk5DCFZujGF915EKOGTKWRINfFzqlVKR9r+9pq0SqxvrxZdbS+88S7CE55XUES2GvLhgMiIc54irbfMgIoxFJdSye9t/GokxvnXjeosPYaBIiNjEGGKUqvhOLAc8dwoOynah0YukGCvm1buHi0KOFOGizO7bVoQdFbe01iJzmKSVGTzbLGPe1cim2a24QHLqrS0VchqM17FDpuVnZriVYRAGaTxz+wNq5QG/2SGuRzuDSkH+fVuom5YYmMljryeok3jgl88Z4UMfuwGaTBI4ZutXDucZnJ+7+wlEJ3klgw3cFBwWWI/GnBmZc3cClfDy9fMmwvt2NeC3BXZrbMOM/MrpllYonf6su4tmwlYZxMM3C7lDF9fiBlVBOQLGTaReJYxQik/b147i6Z1ZpxADXVnv2UGz6Igr/91Ad9ADNbALNVOqktBzqPfbY+NpB6U66m5/K4XC5pDln2ngKIhblH6tOpUkdm0yBGGTcAorPAZfd7J9mre0kWs/1HHjVwBAZ331uAzYmmoWVK0uap+cdq2j7JMmvv3VXGD4jkkrebdDNp8yh7rOQZbSWWbfRfvESHJ0Ac5xkStBl6i/VkXIblkXzYzcciZwmRCnLBxAoSVioeF8as0iir0sZ4QgsyXeiJ+0kqvcTETkXYZaHeywlAVoqZNaoYG+KfGN5rYvbhHZRFR8ZKYG7mP9RW/2rIwW53Bket28C7rSlxWaDZEfJqMaqnqiSk9LF/1iYpDGaV3ADbvtfRJmxJX5Ug22rRjIEP+ns0fXNdbwVZ2DtJHLcj5ARinUxOnEa2jgEI2cq/NU+VCQZOeiATmxogvXUYVpXyDsYkg56u3VXSaR9pkO91GIGwCQnVANUNBLtMbHg3IgGqeTTQ4BQLj+AWTmdWVbpFiKYJjHkS4IqUucuGKAy98veig+Mqo4QBW6Hhiy+D13SnuK8qBwOq2EdoBZ32lXa0A00JiGiE2LtTkrOned6W+Uwi+nHMm7520ERCGfdb4kV+wCUbIGPS3tTHN8Pt+1Dte+HllwWzD2ODD2LIikgeyfDDhSHzRMJYy8wsBTv8BVO2J2XMANlKyjiZf2CuKZus85Ow6crujHXIEkPANANPLAHaj/sd3os7/OibccBf2BuPeJ49DWP2yvzjERizM4wJciv9MyAj8Ko7AGLFBtk93kPG3S5YoOk2cl9gtgBPpwHbPcDYWWYvBXJSYxaO69G+L669AsAuSO5VFEHENfiVS1Uq5yhJELTkfHJZVU3MDPv4vEaIEsKmaWxaXaRaAVRS0FJ16dQKjQaysDRelgdFrQZNGLJqSf2Y4ipP6D/HWi5HLE9aaySD5T7AJTBAg/NCosfr0KXSuKd2axDv++2pUX80+VBz/rko2UMOgzaHVobNvbmLq+WyfqrbrIPYutj2k8lHgsOnSiinEhxaXx+Yu4dg9Mi8Rkg9wVjP9nvsg5ZKqlX9nOsnUknJl+vHx8m4hA0++kyLkM8VydnlIv10WjTKTud4xWhoCpWZ8rZMUk+jHLOEUCriyc4THCbe63Y0ZZyn963wS1YZUuQK4iFVM//g+W+bgFq6k0it34lBW1oMWEwWANnYU9lkYNrMIvXnjIG2ybhGXIZDkAVML2zy2ZURG/u26yU86ekTWo0RpBN1N8kX6xNxBruPH0a1r4CVbwXKb7kCrw2EfX4LkiaGjGWPzJZ18FIEkEmY9JI5w8ycLcKWUynjMsMsAWiBCUMeMK2OjZNLY1ZrhrFvYb/KQp5p+EG/w5+xNwmUXRmzz2E/pwM4V2OGPkPyqGfr66+/Htb3CDlmL52U8YFA5BZwFoYGWa3ZWYB3Arzw9+1G8HILILoZJD0UdJ54X8FXOo13hmF8CIutY97JrMCiuzyY/VI7ZcVBWdyXZ0lYO07zEmTNCiSfR95xA7O5nEAgaphRkdOfXRnlLqUjZA2YTkf9tF51bpThrvUaLt2LSsu42I8HqnCWhvbhn4d6pPFbc7UawzEIA8f1T5Ulj4TKA4AnJN0t1QHOiR6gojEywf4dovzcqn26nT7JFdmATwZvwZQvbUHXyq7AnBqHJfcQagwb+e5kOCi5ZtZhKgh1qplbjfSNArRt5yIlvm3Uq20M2eZmGXK3232lRQV0as+CtweDqeaaKNXE5NdinFwgfQvFIICO1QYazax7OfBlbK0DCPb4WMgYTZwbF2RU7MERg6QTPIDZKsIWM16q6L4LA9ohQYwMmMk8WlkANAVn+a0g4BOfyaQp9oswrSUlWA3fqGdRkCcmitJC5h4K0Do4pD69WEKQAVK4WKM+k+coOzjnnahydCTX5c19/BsAvxXVPgYvXzObfdDrLUgaxQIYq3VmzEL0TBHmLJEy+hkp4x5bhmPLfM4vy+zylzVmPpt/qCHIxfM8s5oD0O/EF+CPv9kH+oV/lk5wexin5E9jl/+sGbjnZPSRLdeK6W8BXCsQdAtg2gM9C9h/E0g6AB6nlt1pl0dpr1vbZa+9VqBuwX4dMYz3bq92d8qSqJjI0awbh+AYI+BGBeJMPHXVHgZr1p9jP7/Mce2IQQMMP9XNyIjDaSThghwn90bIDb3JSSxKFgMQgxh9iPd/bzMx4q40eNTPBHipDLFBq0L7y+wYsyZsr2CdSatAcFlUCWMFQuSzyhlrgDEMFJ10Tr3cjFgrYwkcIrY1jNyyYXPvoT6s0ijS4cOQoMsJY7TCiLKrlAOmnpc+ndoIVvcDoFdQ9lmTO1ZOWh81mcPwhLw03SlXDds6t+Vkq5oDo/POBDbuKt/02mScRtvFoedVcsysS5TbTnqrw3Pljq4Xrm+5be61A6nr+8bp2GMKwVtuXJNwgkDYYO96FJwP1nMEbdPsTGPFoKArcZOYpADUeU3Ad18YiMWQKuPVnK6xFkChCj0Xt0WI82KsUJujq30pnByvJ/sQE7m5NItt8jirs/iAu08T9FkI1BWbmTJImRfngncyKysFy+5c5qKp1EkJX3CZi1ugFbxl4ivHHwXsB1DLNwH2njRQerPJ9xYm3RJbCkn/WIliM3O2kjLWPSkjxGYex+BskjcmNvmh7iyrN6tSi5a5M0q2mZfdmrPPeMGf9xf4zreCyclrzFY9iO9OtLyyy3+GD871uoEh22XEbgVzR58pSEuyvB4KJm4FYDe//xCQm8gQ/RZp5GOxbwvgnC3fXRld/SlMMsPqyOfsmczimohtdq7duJ3xjJO0Ajmu2XOTDwBDas1in0dTsJP7YdbpSYhP12hyOOkBMAMiS1bbAB4j2TP4lNdYX7YolnMy7MBUxcUCx7lIsPbBIQS2gfixOVA62uGD4N2QxwExhyuakWyD01qxIjOZPULWl3H4nfyeSt9YuDckdRZ4DZfRtXMWUo1Oj4lXIqJccuzMrMokiZRRbQ4xVw2chZorgdttGw11uoDNhzQ1sJmNafRu1RjYuDF5Qu23sXp12o8o+QzCUecatAZGB6jLAsD6sfHoGOk1ssd5voeP9jNsThNCKDF5FOgbnwFcn6wRbZ/NnfTOEGlnSOKbwY4J/zrO7SYytiA/tO2b1kFblpBmEp6RgcflVJWU3BmXavE8AEXCtQkTEy8kI23bJFHckS2auO0Gkovn01JW0wigr4BXBlJr0mKsmnjLqmIqgI/A8Y9xKf8AtXxZs8O/Shob9VUGIKuYzT/YcZFCppmAqwtA5isZo+2HS6fGHxDwRX8nlgy0P5hrzNhKv+pzMQJZsWVu+CTu8AdQ8J/fKrBwrTFbTffY3vB4OZR7VWP2jB579u0MKNrMZPbd5DO1wU/BCdvMY9/1cZoW0PytZJvbuh2JpHELlQZyuWOW8aW/nzJ8yfvLz3ZYqtUxyiiYs8DztJzxxDlz9B3TuCetK4PHLOQW+VVpBrUmcDWAKouMGJNJzIC55OB2wxGSrsmYOz+rPMl9kpn85MPA3kyjeaxoPY8bNhXJER2UUX4hC8DToZaTKb1+7pRkFv0cr59ewvh1ODIagS0jcaTEBGMWnc6vLZjnb+tLCqK6JUGoAfPIWnjCaDBISDLt5otThGRO+WZTyHcd8sN0qskp22pxA83yuCoxbv37G2Ayk3YezCBLLivmDDs2PhnvzKxfZPkaU8LWqy3g26T9mL6aGacp+yz8iETQ9T7FUZuE06MDac5ZcrD2cPa8dlZlBl+pzR+k5gwzYAt2g5gy3gZLvRMpMHV9Rt2TTTcCB3AX7HnmvLJCgK3VnkWYl2WfRceMLGTaVhutzJlIFk3xDCjqsVA9me/Y4GNtlc/tw6abqZZU7SU16yLYrKrxB/dnBQu/37fi8R/h+B1wez9Q/jJgd8MqvwzJIjFmVUKlqyU2+QTW0tqrE1b54Z++5zuvEykjs2MMxjTLLLgy+syU6euLEyC9bufna8EH8QLfZMD/eSsP7Fxj5vsM7i70egJgpjVhj5Bj9rIyZisGLICzFUtzw2cTS5YZU9zIsK0AB4Ohyb3xrCX9CTbsST7DwqnxHgzZaZbs5GdHLFqpHuukw02dJSYsVZRoMFAYafucyabMTR6+YM48kQ554qlxeEvds2l0mTWtycxq1an4KMRf7QDkeRUakoGj1xhEHQZ00aYbIXGqTiMW3fKME4wsQJYeB+DgfQsiSshzxsBSq9YBDoVTT4P6OvbYWaw3QqV7jZXUivlC+xSjAaz/JLkHIar7HFZtsu13AZnTqLaBvx6qbYHNavuROniQdivIOXuLeFyX6fUwwGWv4VImvC0VcqDm/LtWL9fNZxw5kygTHg2ANRBKUHibYKlhbkIrO02cScOvbdJN76N6kTCGSzyhaqT+LsocgRyVazCERcCIzOHUwn7bdBU1Nm2uJ/MgU2ywQZ0VLWXMIrayCWuFXDpgylE3S+dAeoLA5K/RmGZy7V0dlqzMD2KSuOq1beWZkDGdjDpDkjUWzifP7vGzAD6Aap+A219DLV/ZWDO1xue8MicJ4+TKSADN+XZjUksm9WWhlFrqy/JwlTw9JrBmiazRBZSlrowC0porI7/fQ6cBeMHH/Q7fgIJPPYeD+gKfTTipI8v8bIJ23Pdf2eU/T2B2K0jAAUg4AlM3AbEzYOwhgOMME/SU7XP03Sdo30dvHwZmviCcQo0B38jrAF2qXBr24cJmlJkwCkN+i6QRSyQrclC2lu+wPiaxdMyy1sNsrCMLcQ3ADIkJyATMMDNDwTJ/tVcMgvLhl0+dtSWDZwuBtzONy0YenryOrAybfIwtnION0WdMK+Vhxcy16tvyzQmQZwLa4N55uxno1AEejKR1ZvBuxx+dA/teWR0xD0yK8ngOm7V+DUVx2/I+AqvNgvV8BKMeJYOhxaxrwyzaE1L93WYQsWmIOzA1dmccv+/G4Cw6WJq5OJp6CINu+2LCtF3BVrSXMbMAdTuxuW1Pbe81o5GeXyZMepcmyj44CMolLHz1IWVMY77Uq10G86HQyXOkMo/4YTu8npNkODhXytXSRI7DAzXWi5VwtQ72LLJl/L4CwxxWYrH73KVNBLXNE3GmogIbcsYMdNnqENBvl6TFNShgfxgpbHt6R0KiivAUNj+Tx78C7Pei2h8G7Our49dUAmGVasvqDmN2+A87z7HzPPvnO893mLO9oOnJrbHO1vnBuRH44VrwmhX8PXGweouB2eeQx9Ia1vVmixwzexog9azX95yMPrLlGJgdgItTnz8WyLgnGLsVcDjyEOr7ALOwTMgUunGZvTq1J26/PVDqN3xeapz4HjddzA6MoetQC3SbX/db32XM2CFxlQ9MGd1bU+d5O1P3oXpMAWjZtDG2u146WBPnE3YzgbgxMhM2jctFJoaMonQagFWZtzepNPOJd8jgW0DiCUPBhh8M2thlMZqARGDHtVEdTFVPbOJHVpXLLIDxOeW+mDsUZ1pmfQjYeWA64sp9GV3nM3HZAYz8hoCwjNGFa0KdR6Dks5gx7rNTeaRjElNrAWY4qTwCoQ3rZOagDjkeMlHhpGl2T+rwnCAKgWJwDl0AZeJkaghOLfNVJ9dec5dgtGFi9KFaONbOwRauFHPfoPVhlnJlJkw3pnFhSxaMoki26EEAaUbQpBBY498qAShOItb+eRjQCVHNk25muZDKbcze9ck6aWKT9ZiaIyJKHaHMGS03Za6tbq9KrZlj984QPjKsZOPPZR4ewEfh+D6veL87/oQbvqgDGq4hy2rLjOLQDmzymTVb1phhBmmcX+YLUMZs2eTKCGHIstoyYc68xuU2oPYzXvEdbvgwCn76uR3IKzBbDRH9tnPRX0Jg9twfZ4KVbwRnp5c5AHG3LHcTYFkAkSP27ibgI7V7h6HWZ0DfWRB1j+UevIw8ShfxSVF23Zt+TW54Kn/UYvLAiAmcUPA1ATx57/hWunJB2vsmB0Ol0ayxoGm54S5MGpKaNEsAZM6MmQ7WJ+Egf0vn12dJU+0cSH4UYoB0tPgImVjTFsQbTbhOVMEXzhGyzA/7bJCkssA9QJhACFy0LLU6ID2LrorLkVwu98tBNdc12hYNMB8rjfdy0zqxYe0R6rnS09fk+MgnPJqW3fPVZZHWbCIFLi5zGxws2OSNzYEzlm1qenwiQ1W6HriW3yxNPRSk2SxphKCO3oFZBgcJiDkxWXHvdUoEUxB8jIS/6/WDWjMGMg5R1m7u20xYNo2eTq3yqdl0noqbjA9nJxlb1hjisQzNbjMzFuSNlpObsBkQmq/GsD7LGVMbSQwpY/G3oyvBTwH4Oq/45mp4X3X8qVrxnu6kz/VkLiCMLfKLyBYXoCzki4pdvuaYHdrlI3FlRO7EmDFoWc4ZM2XV8Rl3fDsc3wLgvz3XA3iVMp4dkr0FNWavcsweOIVS61OBqjNA5ywL9uDlbgErNwKl02D/ndpeCXArFbPPgroeWnJz1xq0EN0lticuAI0H6ynGwb7dxHKSKfhA04DLD9DlJGFUOJMAsxSg2RwYfbSM+w5rolKo7HSIkC3O50eAN4s0XZivyBBZECx6qE/z5LMQd+2eDvQtEk+UtaVAS/PScirKF2gimsmnDjzBZ8R5EJefdYEX8fRnRSKVGMisMKDLvjtyXBl3Xz0dZzxlq77P5DyUCZBshRMLm036agQCg/kdlnA5A6RKnh5yZWtDPksoGWRsGdkSBuasyPUQa8ci64UA38ZVWEJ9ZN34r7ItXYI0MQNc6x3T4VkEfzOfXhDl4VO/rgY6qgZPvJJM5L+GBGTZTvqa5Te3UAub5ZmZ5TSYKbq02MnwRuUn7XN+/ASA98Pxre7409XxJ2vFF3VjD4qkqSUyZE6OjX6D6ccEzjDXlZ11Z+yfqazR1zVnVd0aB5P2M9XxEQDfBuC/PPcD98I+l9yvz7C0iXPjyyhlfBsCs9Og5ARTdQvb9KgA5IjRekSG6AyQfXB7PWL7Pnp7Jb1BaR2rIXgChEGhiVQRMhOrZBDf3Fm95IkkJuCWQqTVDlCDLdi5zLo8gC6/oU9cUH8pWkxsLF06V60/S3+0IgqoVuYC2dxZrDXz4OHmU1ONiozZGl9Bm9bOmByRWI+WMGbTCchrnFKgd5afyZYg3tzqm1TaFbBCcnPr1V9tFGM7Yb0pyMNkFpJEt9/wyC64AzC66Al9cmJsY1afBttTqLsElvuqN/HDiONpMmf+xHZnjPvybJdvi5E9lI5BZNkmeigV8W3vlIm/tl2wzv6JZbtmCu4Cn51udOC551oyrj8b37epFde3xECe2ux4O01LSfdlfHlI51xs51AkOJovF1sMOG2vg870mFiAtukmYUdX9HN9/CcAfwkV3+KG9znwB93xy1ttWQdEwozVM1JGLBwZE3CWZpkldWae/F1JGadcszpiPzdg9l8d+Bgcfwv2fBmyCZjhs1hb/mYd90rWmN/1XwGzt/hxQ1DyY7BCj/adhwCWRwSFuh9ZpMCZersz37Mbjqnf4zs7w7CbQazVg4HnxFh47CayVnMZZ2k4tSMHX6jz+0i6KV/JrjL2QvGrn5i1cuSf++o3FzpNeLLDR5eB7zMIApTmoUZmOoEwlHORMuaCwHmH5/+z13yeRhnYPELfzsBmJ199k/UxO+A9yypkhSNK5LI6sDFkvgY3s0W8J7HSTuYTYQDcjRJ05iKe0G4EqjfzEFuBy8Ut2RRoC0YrFOvNrqhIkkS8B1lv7diMNmrCNlR2zTRRGvrMXmxW9twdVsI9174y7lx3jPR4HKfSObsKbocqcosP8A2YZaN+HACzie5Z8TVt2TJ9zxZuqevZcKPJDxMxcAk8G8LVgiBMnIMaon0+/xZ2hnU1qfMKUY8iR3RurnZcufmHj82QRyI39cCivswzkObREV/SUSloTVHkwZ3RGSFWPNP6sjOPH4fj62D4gFf8fr/KHX+9MmdpwDTOSxkDEFtlmXkEaqeljJAcsxVT5vjXAD4M4BNw/Nzb7UBda8zOGH+cH1K/VMDsORl9ZMtljNkDQNN9gNOpNr9V2veIbNARiD1a5hRLtve9N7E9Hwv8lWyMtsxlRiJFE3lif7/MQdVh1hY5CPMzOAjLbGK643siTdthJ4CEKQNSTea0UVktE0831wVI9B1sGPzwpL6LZ999GsDF1CtMgzqwZb2wXzbJE+NvcOZZtN6X574GflPzs/GDI4muHsBphqjIzTcm4OhzePIEvD04RE4431dnZZwxcNqoPZCcAtrslUfwo1LBfMaC9sHrAkLr7Igj2fOpjSM4S5sghnGHdayY1Hm5iLGZ8ZLBeMqcMVgjuDB9L4PHJVwpM9TiKzSDRPEKLAmA8gDITISMNu3Uylw7q2abbhLbR3erG4klsYGWN496I03W+FgcEpvr3CZIbNJlLzOjRQER5F47seBLuerbdo7/DQAfdcd3OfAb3PFVteL3ueFXV7bGLwNc3SJl9HtKGdX8g6WMWdi0z/9+xIFPAPhuOD4Fw+XteoCujFkyObScRTie53+VY/aMHjvA7KEA7bA9H8KUPTXwuC8wu3UfHgp87wlm790WJ9m4UjFP9nLNzZTfuehGQr2OAbiM555MWiIJsNaxpSd1Lx3Y1Z3Wqpk9/hn3I1/MNWMGZmFn6syyhXoy+V3XpNasU7bUfsKW9hs2gRm2MYimIS7OcSqT1F/Q+rK89o2BoNdKDBK1rshdBxOT3KRcptrlME3iMLfOsOigOuOq0vfpOI5AbI9FLzrNL6xGts+w+Hx8tirygRTZ+CJ0yqjt04TkHi2gFiPrQKwW7Ly1Jek/VXGa1SVNEzuIJhqRuZjbaVfdU0oyQMcMtHSAntEyhwDNpqvRE9iVAzq9PkzWvhbu+QTELPmF+UxbBWx0ILS89g7uPst6XkxW+7aDhVIMpZef5Yd2WuOhlPFoR4B7CE+e6+PnAby+/fur7vjN7viqCvyuavh1wQgkkTD6I0sZ3fcljZn5R3X8kAPf48A/dOCfv1PG7S/wBh6PlX0JGbO3OzBrEjsKavb7gpRErncmE2sJkMxsD0CcOY437cSZdfI2HbTRoxuRPNK57Sd/286vBHmtiYClXUdXxSae4BlPJuwzr4gFoeR+codWNpEndNzp65Te8IMNyyiFve/kACsfiiNlteIve8KszdvlkYvBMnyYwF1s3cjHXIPLr9O21WQ7ndbjFpwUXcbPTUpnCbjllLM+6N+6yauszrvdezX1pLmeXHUbBQ6pY7N+byPXitadGGKKas//6qHSVNFHYKbnezXgSBkVlSSGfYOMjrDLMF0yLIb0UwKk+40DPRcuunFuv0BANIR7O7GznPHnV0dBeDKnEJSem5wT6MHZVzkdcb0aNO1xG8IAvO1LKTu9W5JhmC23nGnyZBAUZa/zVEPeb7SY6Jm1NumRWE7b0s5M4i2sP8dywsHSq7tgVhl0GSLh2wDSuL44wUJxYLLf1OH9DEcfLWeLLrUsfrGFr+FovvcdA8qyxz/b/v0Vd/xGd/z2DaT9qgr8ymo5g3arlDGAL+xLGSfzD+DHquM/VMf3u+GfAPgUgM+/0w7Evl3+rcPbJwBmJwfgpwe9tjfafwc+jgb9jymxuxFgPApgeQrW6DH28RHB1qNOMpyJSzgF+I9gqK+AbUIGLZZ3uw1t+31mcHfx9JETkp/b+b0uzB/p/TQsOvtk3eBRdpXLHu1Q2unS5Bo+vXZEDIN+O5L0rdbC2YEm0dm5QNKXDoieuo0ifOzJRIGPoGvfcXYMkwwiB3RucY+MdMdYOvuhreXJKcJyxljJlnvmL1o6fL6y1Pd0tiStBw2f+dw2Imf0M/2aWsQuL5sd+ZoaVtj5LtMW5icKqmz5wxkutAXTtObEdF2rYdqeUM8ypssSr5pE3pg1vZUbbj52EiMf3blsZ2BrRxYiN5d1v50fPw/gkwA+CceHAbwbjt8EwxdXx1dXwy+uwG/bQNgvDOYgoHo05FJGRx4sLQzZ/93+/mB1fMYNH3fHp93wL96ONWM3A7M3Pk8X4wFj68rmS49T7W1x5r5izJ5Bu73JLNE7HmC/6efVCrL4OdxjOHajPzslk0kXd4HZubXugof9m3e2I2eRYeZ1jpPfy8FlllSVeb0dYb+cQWM/yLpoK1/uif71lYvL6UO4NkHxdA2Om1b55l/56824tU/wG3bM8YB2eYbmCKXc/67ywDuMnT44tvsdT2Acg3BbmsTYyV99grvtCg/77T+eQqcHEVj2hDv+jnp8DsAPbs8/vp04X7J1QV/uhvdsDNfvrIZfEZgxS9gyAWTb6x+rhh/Y1vNpN3z/xrj/z5exwf8/KN3SXB79k9cAAAAASUVORK5CYII=);
}

.minicolors-no-data-uris .minicolors-sprite {
    background-image: url(/assets/jquery.minicolors-9ebbb213e6c8e959f1344025563e208945acb8d70e519e84cf54612fd30b2b37.png);
}

.minicolors-swatch {
    position: absolute;
    vertical-align: middle;
    background-position: -80px 0;
    border: solid 1px #ccc;
    cursor: text;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.minicolors-swatch-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.minicolors input[type=hidden] + .minicolors-swatch {
    width: 28px;
    position: static;
    cursor: pointer;
}

.minicolors input[type=hidden][disabled] + .minicolors-swatch {
    cursor: default;
}

/* Panel */
.minicolors-panel {
    position: absolute;
    width: 173px;
    height: 152px;
    background: white;
    border: solid 1px #CCC;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    z-index: 99999;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
}

.minicolors-panel.minicolors-visible {
    display: block;
}

/* Panel positioning */
.minicolors-position-top .minicolors-panel {
    top: -154px;
}

.minicolors-position-right .minicolors-panel {
    right: 0;
}

.minicolors-position-bottom .minicolors-panel {
    top: auto;
}

.minicolors-position-left .minicolors-panel {
    left: 0;
}

.minicolors-with-opacity .minicolors-panel {
    width: 194px;
}

.minicolors .minicolors-grid {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 150px;
    height: 150px;
    background-position: -120px 0;
    cursor: crosshair;
}

.minicolors .minicolors-grid-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
}

.minicolors-slider-saturation .minicolors-grid {
    background-position: -420px 0;
}

.minicolors-slider-saturation .minicolors-grid-inner {
    background-position: -270px 0;
    background-image: inherit;
}

.minicolors-slider-brightness .minicolors-grid {
    background-position: -570px 0;
}

.minicolors-slider-brightness .minicolors-grid-inner {
    background-color: black;
}

.minicolors-slider-wheel .minicolors-grid {
    background-position: -720px 0;
}

.minicolors-slider,
.minicolors-opacity-slider {
    position: absolute;
    top: 1px;
    left: 152px;
    width: 20px;
    height: 150px;
    background-color: white;
    background-position: 0 0;
    cursor: row-resize;
}

.minicolors-slider-saturation .minicolors-slider {
    background-position: -60px 0;
}

.minicolors-slider-brightness .minicolors-slider {
    background-position: -20px 0;
}

.minicolors-slider-wheel .minicolors-slider {
    background-position: -20px 0;
}

.minicolors-opacity-slider {
    left: 173px;
    background-position: -40px 0;
    display: none;
}

.minicolors-with-opacity .minicolors-opacity-slider {
    display: block;
}

/* Pickers */
.minicolors-grid .minicolors-picker {
    position: absolute;
    top: 70px;
    left: 70px;
    width: 12px;
    height: 12px;
    border: solid 1px black;
    border-radius: 10px;
    margin-top: -6px;
    margin-left: -6px;
    background: none;
}

.minicolors-grid .minicolors-picker > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: solid 2px white;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.minicolors-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 2px;
    background: white;
    border: solid 1px black;
    margin-top: -2px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

/* Inline controls */
.minicolors-inline {
    display: inline-block;
}

.minicolors-inline .minicolors-input {
    display: none !important;
}

.minicolors-inline .minicolors-panel {
    position: relative;
    top: auto;
    left: auto;
    box-shadow: none;
    z-index: auto;
    display: inline-block;
}

/* Default theme */
.minicolors-theme-default .minicolors-swatch {
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
    left: auto;
    right: 5px;
}
.minicolors-theme-default.minicolors {
    width: auto;
    display: inline-block;
}
.minicolors-theme-default .minicolors-input {
    height: 20px;
    width: auto;
    display: inline-block;
    padding-left: 26px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-input {
    padding-right: 26px;
    padding-left: inherit;
}

/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch {
    z-index: 2;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 3px;
}
.minicolors-theme-bootstrap .minicolors-swatch-color {
    border-radius: inherit;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
    left: auto;
    right: 3px;
}
.minicolors-theme-bootstrap .minicolors-input {
    float: none;
    padding-left: 44px;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
    padding-right: 44px;
    padding-left: 12px;
}
.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
    top: 4px;
    left: 4px;
    width: 37px;
    height: 37px;
    border-radius: 5px;
}
.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
    width: 24px;
    height: 24px;
}
.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
.shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}
.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}
.shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
.shepherd-content{border-radius:5px;outline:none;padding:0}
.shepherd-element{background:#fff;border:none;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);margin:0;max-width:400px;opacity:0;outline:none;padding:0;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}

header.new_index {
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  background: #fff;
}
header.new_index + #content {
  margin-top: 70px;
}
header.new_index + #content + #sidebar, header.new_index + #content + #sidebar_tease {
  margin-top: 70px;
}
header.new_index.new_index {
  box-shadow: 0px 2px 10px -5px #444;
}
header.new_index.new_index.speaking {
  box-shadow: none;
}
header.new_index .button_icon {
  font-size: 25px;
}
header.new_index .btn {
  height: 65px;
}
header.new_index .btn.access {
  padding-left: 18px;
  padding-right: 18px;
}
header.new_index .btn.access.skinnier {
  padding-left: 10px;
  padding-right: 10px;
}
header.new_index .btn.access.skinnier img {
  width: 25px;
}
header.new_index #button_list {
  height: 63px;
  min-width: 100px;
  width: -webkit-calc(100% - 174px);
  width: calc(100% - 174px);
}
header.new_index #button_list.with_back {
  width: -webkit-calc(100% - 225px);
  width: calc(100% - 225px);
}
header.new_index #button_list {
  padding-right: 50px;
}
header.new_index #button_list.has_content.flipped {
  padding-left: 60px;
  transform: rotate(180deg);
  padding-right: 0;
}
header.new_index #button_list .history_button {
  max-width: 60px;
  height: 60px;
  margin: 0px 10px 1px;
  padding-top: 3px;
}
header.new_index #button_list .history_button .modeling {
  position: absolute;
  top: 10px;
  left: 0;
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  z-index: 2;
}
header.new_index #button_list .history_button img {
  height: 42px;
  max-width: 60px;
}
header.new_index #button_list .utterance_cursor .left, header.new_index #button_list .utterance_cursor .right {
  margin-top: 5px;
  height: calc(100% - 10px);
}
header.new_index #button_list.text_only .utterance_cursor .left, header.new_index #button_list.text_only .utterance_cursor .right {
  margin-top: 0;
}
header.new_index #button_list.text_only.text_medium .utterance_cursor {
  margin: 0 3px 0 0;
}
header.new_index #button_list.text_only.text_medium .utterance_cursor .left, header.new_index #button_list.text_only.text_medium .utterance_cursor .right {
  height: 15px;
}
header.new_index #button_list.text_only.text_small .utterance_cursor {
  margin: 0 3px 0 0;
}
header.new_index #button_list.text_only.text_small .utterance_cursor .left, header.new_index #button_list.text_only.text_small .utterance_cursor .right {
  height: 13px;
}
header.new_index #button_list.text_only.text_large .utterance_cursor {
  margin: 0 5px 0 0;
}
header.new_index #button_list.text_only.text_large .utterance_cursor .left, header.new_index #button_list.text_only.text_large .utterance_cursor .right {
  height: 23px;
}
header.new_index #button_list.text_only.text_huge .utterance_cursor {
  margin: 0 7px 0 0;
}
header.new_index #button_list.text_only.text_huge .utterance_cursor .left, header.new_index #button_list.text_only.text_huge .utterance_cursor .right {
  height: 37px;
}
header.new_index #button_list.text_only .history_button img {
  margin-top: -24px;
}
header.new_index #blank_status {
  text-align: left;
  padding-top: 5px;
  padding-left: 10px;
  font-size: 16px;
  opacity: 1;
  height: 55px;
  overflow: hidden;
}
header.new_index #blank_status .progress {
  width: 50px;
  text-align: center;
  margin: 0;
}
header.new_index #blank_status .eye_status {
  display: block;
  color: #444;
  margin-top: -40px;
  margin-left: 70px;
  font-size: 40px;
}
header.new_index #blank_status .eye_status.text-muted {
  color: #ddd;
}
header.new_index #speak {
  width: -webkit-calc(100% - 62px);
  width: calc(100% - 62px);
}
header.new_index #speak_options {
  height: 40px;
}
header.new_index.speaking #identity .btn {
  width: 58px;
}
header.new_index.speaking #identity .btn .user_holder {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -12px 0 -10px -30px;
}
header.new_index.speaking #identity .btn img.user {
  width: 40px;
}
header.new_index.speaking #identity .btn img.modeling_user {
  height: 25px;
  width: 25px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 50px;
  position: absolute;
  margin: 13px 0 0 -41px;
  background: #fff;
}
header.new_index.speaking.small #button_list .history_button .modeling {
  top: 4px;
  left: -3px;
}
header.new_index.speaking.small #speak_mode_notification > span {
  top: 17px;
}
header.new_index.speaking.small #speak_mode_notification .badge_earned img {
  height: 40px;
  width: 40px;
}
header.new_index.speaking.tiny {
  height: 90px;
}
header.new_index.speaking.tiny + #content {
  margin-top: 90px;
}
header.new_index.speaking.tiny + #content + #sidebar, header.new_index.speaking.tiny + #content + #sidebar_tease {
  margin-top: 90px;
}
header.new_index.speaking.tiny #reply_icon.pair {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  padding-top: 4px;
}
header.new_index.speaking.tiny #reply_icon.pair span {
  font-size: 25px;
}
header.new_index.speaking.tiny #reply_icon.pair img {
  position: absolute;
  width: 25px;
  height: 25px;
}
header.new_index.speaking.tiny #reply_icon.over .follower {
  width: 20px;
  height: 20px;
  margin-right: -10px;
  margin-top: -5px;
  border-radius: 20px;
}
header.new_index.speaking.tiny #reply_icon.over.pair {
  margin-right: -44px;
}
header.new_index.speaking.tiny #button_list {
  height: 43px;
  width: -webkit-calc(100% - 136px);
  width: calc(100% - 136px);
}
header.new_index.speaking.tiny #button_list.with_back {
  width: -webkit-calc(100% - 177px);
  width: calc(100% - 177px);
}
header.new_index.speaking.tiny #button_list .history_button.utterance_cursor {
  margin: 5px 0 -4px;
}
header.new_index.speaking.tiny #button_list .history_button {
  max-width: 30px;
  height: 40px;
  font-size: 14px;
  margin: 0px 7px 1px;
  padding-top: 2px;
}
header.new_index.speaking.tiny #button_list .history_button img {
  height: 26px;
  max-width: 30px;
}
header.new_index.speaking.tiny #button_list .history_button .modeling {
  top: 3px;
  width: 13px;
  height: 13px;
  font-size: 14px;
}
header.new_index.speaking.tiny #button_list.text_only .history_button {
  height: auto;
}
header.new_index.speaking.tiny #button_list.text_only .history_button img {
  margin-top: -16px;
}
header.new_index.speaking.tiny #blank_status {
  font-size: 14px;
  height: 40px;
}
header.new_index.speaking.tiny #blank_status .progress {
  width: 40px;
  height: 15px;
  font-size: 14px;
}
header.new_index.speaking.tiny #blank_status .progress .progress-bar {
  font-size: 14px;
}
header.new_index.speaking.tiny #blank_status .eye_status {
  font-size: 30px;
  margin-top: -33px;
  margin-left: 55px;
}
header.new_index.speaking.tiny #identity .btn {
  width: 38px;
  padding-right: 12px;
}
header.new_index.speaking.tiny #identity .btn .unread {
  left: 3px;
  top: 26px;
}
header.new_index.speaking.tiny #identity .btn .caret {
  margin-top: -15px;
}
header.new_index.speaking.tiny #identity .btn .user_holder {
  height: 30px;
  width: 30px;
  margin: -30px -3px -10px -30px;
}
header.new_index.speaking.tiny #identity .btn img.user {
  width: 30px;
  margin-top: -20px;
}
header.new_index.speaking.tiny #identity .btn img.modeling_user {
  height: 20px;
  width: 20px;
  margin: 0 0 0 -29px;
}
header.new_index.speaking.tiny #speak {
  width: -webkit-calc(100% - 47px);
  width: calc(100% - 47px);
}
header.new_index.speaking.tiny #speak_options {
  height: 30px;
}
header.new_index.speaking.tiny #speak_mode_notification > span {
  top: 6px;
}
header.new_index.speaking.tiny #speak_mode_notification .badge_earned img {
  height: 30px;
  width: 30px;
}
header.new_index.speaking.tiny .button_icon {
  font-size: 15px;
}
header.new_index.speaking.tiny .btn {
  height: 45px;
}
header.new_index.speaking.tiny .btn.access {
  padding-left: 15px;
  padding-right: 15px;
}
header.new_index.speaking.tiny .btn.access.skinnier {
  padding-left: 10px;
  padding-right: 10px;
}
header.new_index.speaking.tiny .btn.access.skinnier img {
  width: 15px;
}
header.new_index.speaking.medium {
  height: 100px;
}
header.new_index.speaking.medium + #content {
  margin-top: 100px;
}
header.new_index.speaking.medium + #content + #sidebar, header.new_index.speaking.medium + #content + #sidebar_tease {
  margin-top: 100px;
}
header.new_index.speaking.medium #button_list {
  height: 93px;
  width: -webkit-calc(100% - 242px);
  width: calc(100% - 242px);
}
header.new_index.speaking.medium #button_list.with_back {
  width: -webkit-calc(100% - 323px);
  width: calc(100% - 323px);
}
header.new_index.speaking.medium #button_list .history_button {
  max-width: 90px;
  height: 88px;
  font-size: 15px;
  margin: 0px 15px 2px;
  padding-top: 10px;
}
header.new_index.speaking.medium #button_list .history_button img {
  height: 55px;
  max-width: 90px;
}
header.new_index.speaking.medium #button_list.text_only .history_button {
  margin-left: 0;
  margin-right: 0;
  height: auto;
}
header.new_index.speaking.medium #button_list.text_only .history_button img {
  margin-top: -31px;
}
header.new_index.speaking.medium #blank_status {
  font-size: 18px;
}
header.new_index.speaking.medium #blank_status .progress {
  width: 60px;
  font-size: 16px;
}
header.new_index.speaking.medium #blank_status .eye_status {
  margin-left: 80px;
}
header.new_index.speaking.medium #identity .btn {
  width: 78px;
}
header.new_index.speaking.medium #identity .btn .unread {
  left: 10px;
  top: 70px;
}
header.new_index.speaking.medium #identity .btn .user_holder {
  height: 60px;
  width: 60px;
  margin: -3px 0 -10px -30px;
}
header.new_index.speaking.medium #identity .btn img.user {
  width: 60px;
}
header.new_index.speaking.medium #identity .btn img.modeling_user {
  height: 30px;
  width: 30px;
  margin: 32px 0 0 -60px;
}
header.new_index.speaking.medium #speak {
  width: -webkit-calc(100% - 81px);
  width: calc(100% - 81px);
}
header.new_index.speaking.medium #speak_options {
  height: 50px;
}
header.new_index.speaking.medium .button_icon {
  font-size: 45px;
}
header.new_index.speaking.medium .btn {
  height: 95px;
}
header.new_index.speaking.medium .btn.access {
  padding-left: 20px;
  padding-right: 20px;
}
header.new_index.speaking.medium .btn.access.skinnier {
  padding-left: 15px;
  padding-right: 15px;
}
header.new_index.speaking.medium .btn.access.skinnier img {
  width: 30px;
}
header.new_index.speaking.large {
  height: 150px;
}
header.new_index.speaking.large + #content {
  margin-top: 150px;
}
header.new_index.speaking.large + #content + #sidebar, header.new_index.speaking.large + #content + #sidebar_tease {
  margin-top: 150px;
}
header.new_index.speaking.large #button_list {
  height: 143px;
  width: -webkit-calc(100% - 396px);
  width: calc(100% - 396px);
  padding-right: 65px;
}
header.new_index.speaking.large #button_list.has_content.flipped {
  padding-left: 75px;
  transform: rotate(180deg);
  padding-right: 0;
}
header.new_index.speaking.large #button_list.with_back {
  width: -webkit-calc(100% - 517px);
  width: calc(100% - 517px);
}
header.new_index.speaking.large #button_list .history_button {
  max-width: 140px;
  height: 138px;
  font-size: 20px;
  margin: 0px 15px 2px;
  padding-top: 10px;
}
header.new_index.speaking.large #button_list .history_button img {
  height: 100px;
  max-width: 140px;
}
header.new_index.speaking.large #button_list.text_only .history_button {
  margin-left: 0;
  margin-right: 0;
  height: auto;
}
header.new_index.speaking.large #button_list.text_only .history_button img {
  margin-top: -53px;
}
header.new_index.speaking.large #blank_status {
  font-size: 22px;
}
header.new_index.speaking.large #blank_status .progress {
  width: 70px;
}
header.new_index.speaking.large #blank_status .progress > .glyphicon {
  font-size: 16px;
  vertical-align: top;
  line-height: 18px;
}
header.new_index.speaking.large #blank_status .eye_status {
  margin-left: 90px;
}
header.new_index.speaking.large #identity .btn {
  width: 98px;
}
header.new_index.speaking.large #identity .btn .unread {
  left: 10px;
  top: 105px;
}
header.new_index.speaking.large #identity .btn .user_holder {
  height: 80px;
  width: 80px;
  margin: 15px 0 -10px -30px;
}
header.new_index.speaking.large #identity .btn img.user {
  width: 80px;
}
header.new_index.speaking.large #identity .btn img.modeling_user {
  height: 40px;
  width: 40px;
  margin: 62px 0 0 -80px;
}
header.new_index.speaking.large #speak {
  width: -webkit-calc(100% - 102px);
  width: calc(100% - 102px);
}
header.new_index.speaking.large #speak_options {
  width: 55px;
  margin-left: -70px;
  height: 80px;
}
header.new_index.speaking.large #speak_mode_notification {
  width: 100px;
  margin-right: 76px;
  margin-left: -179px;
}
header.new_index.speaking.large .button_icon {
  font-size: 65px;
}
header.new_index.speaking.large .btn {
  height: 145px;
}
header.new_index.speaking.large .btn.access {
  padding-left: 40px;
  padding-right: 40px;
}
header.new_index.speaking.large .btn.access.skinnier {
  padding-left: 25px;
  padding-right: 25px;
}
header.new_index.speaking.large .btn.access.skinnier img {
  width: 46px;
}
header.new_index.speaking.huge {
  height: 200px;
}
header.new_index.speaking.huge + #content {
  margin-top: 200px;
}
header.new_index.speaking.huge + #content + #sidebar, header.new_index.speaking.huge + #content + #sidebar_tease {
  margin-top: 200px;
}
header.new_index.speaking.huge #button_list {
  height: 193px;
  width: -webkit-calc(100% - 520px);
  width: calc(100% - 520px);
}
header.new_index.speaking.huge #button_list.with_back {
  width: -webkit-calc(100% - 670px);
  width: calc(100% - 670px);
}
header.new_index.speaking.huge #button_list {
  padding-right: 85px;
}
header.new_index.speaking.huge #button_list.has_content.flipped {
  padding-left: 95px;
  transform: rotate(180deg);
  padding-right: 0;
}
header.new_index.speaking.huge #button_list .history_button {
  max-width: 190px;
  height: 188px;
  font-size: 20px;
  margin: 0px 15px 2px;
  padding-top: 20px;
}
header.new_index.speaking.huge #button_list .history_button img {
  height: 120px;
  max-width: 140px;
}
header.new_index.speaking.huge #button_list.text_only .history_button {
  margin-left: 0;
  margin-right: 0;
  height: auto;
}
header.new_index.speaking.huge #button_list.text_only .history_button img {
  margin-top: -63px;
}
header.new_index.speaking.huge #blank_status {
  font-size: 26px;
  height: 70px;
}
header.new_index.speaking.huge #blank_status .progress {
  width: 85px;
  height: 25px;
  font-size: 20px;
}
header.new_index.speaking.huge #blank_status .progress .progress-bar {
  font-size: 16px;
  line-height: 28px;
}
header.new_index.speaking.huge #blank_status .eye_status {
  margin-left: 100px;
}
header.new_index.speaking.huge #identity .btn {
  width: 98px;
}
header.new_index.speaking.huge #identity .btn .unread {
  left: 10px;
  top: 125px;
}
header.new_index.speaking.huge #identity .btn .user_holder {
  height: 80px;
  width: 80px;
  margin: 35px 0 -10px -30px;
}
header.new_index.speaking.huge #identity .btn img.user {
  width: 80px;
}
header.new_index.speaking.huge #identity .btn img.modeling_user {
  height: 40px;
  width: 40px;
  margin: 80px 0 0 -80px;
}
header.new_index.speaking.huge #speak {
  width: -webkit-calc(100% - 102px);
  width: calc(100% - 102px);
}
header.new_index.speaking.huge #speak_options {
  height: 120px;
  margin-left: -90px;
  width: 75px;
}
header.new_index.speaking.huge #speak_mode_notification {
  width: 100px;
  margin-right: 96px;
  margin-left: -200px;
}
header.new_index.speaking.huge .button_icon {
  font-size: 65px;
}
header.new_index.speaking.huge .btn {
  height: 195px;
}
header.new_index.speaking.huge .btn.access {
  padding-left: 60px;
  padding-right: 60px;
}
header.new_index.speaking.huge .btn.access.skinnier {
  padding-left: 40px;
  padding-right: 40px;
}
header.new_index.speaking.huge .btn.access.skinnier img {
  width: 60px;
}

#small_header header {
  height: 50px;
}
#small_header header h1 img {
  padding-top: 0;
  height: 40px;
  width: 40px;
  margin-right: 5px;
  position: absolute;
}
#small_header header h1 span {
  line-height: 40px;
  margin-left: 50px;
}

@media print {
  header {
    position: absolute;
    display: none;
    height: 0;
  }
}
:root {
  --fitzgerald-pronoun-yellow: #FFFFAA;
  --fitzgerald-pronoun-yellow-text: #4A4A00;
  --fitzgerald-verb-green: #CCFFAA;
  --fitzgerald-verb-green-text: #1A4028;
  --fitzgerald-adjective-blue: #AACCFF;
  --fitzgerald-adjective-blue-text: #1B2D5C;
  --fitzgerald-noun-orange: #FFCCAA;
  --fitzgerald-noun-orange-text: #5A2018;
  --fitzgerald-social-pink: #FFAACC;
  --fitzgerald-social-pink-text: #3E1838;
  --fitzgerald-negation-red: #FFAAAA;
  --fitzgerald-negation-red-text: #5C1510;
  --fitzgerald-question-purple: #CCAAFF;
  --fitzgerald-question-purple-text: #2D1F5E;
  --fitzgerald-preposition-pink: #FFCCDD;
  --fitzgerald-preposition-pink-text: #5A2838;
  --fitzgerald-adverb-brown: #CCAA88;
  --fitzgerald-adverb-brown-text: #4A3C1C;
  --fitzgerald-determiner-gray: #CCCCCC;
  --fitzgerald-determiner-gray-text: #2A2A2A;
  --fitzgerald-conjunction-white: #FFFFFF;
  --fitzgerald-conjunction-white-text:#333333;
  --fitzgerald-other-blue: #73CCFF;
  --fitzgerald-other-blue-text: #0A3A5C;
  --fitzgerald-contrast-black: #000000;
  --fitzgerald-contrast-black-text: #FFFFFF;
}

.fitzgerald-soft {
  --fitzgerald-pronoun-yellow: rgb(244.375, 244.375, 180.625);
  --fitzgerald-verb-green: rgb(206.125, 244.375, 180.625);
  --fitzgerald-adjective-blue: rgb(180.625, 206.125, 244.375);
  --fitzgerald-noun-orange: rgb(244.375, 206.125, 180.625);
  --fitzgerald-social-pink: rgb(244.375, 180.625, 206.125);
  --fitzgerald-negation-red: rgb(244.375, 180.625, 180.625);
  --fitzgerald-question-purple: rgb(206.125, 180.625, 244.375);
  --fitzgerald-preposition-pink: rgb(248.625, 210.375, 223.125);
  --fitzgerald-adverb-brown: rgb(182.75, 170, 157.25);
  --fitzgerald-other-blue: rgb(132.5, 199.25, 237.5);
  --fitzgerald-determiner-gray: rgb(229.5, 229.5, 229.5);
}

.evq {
  display: block;
  min-height: 100vh;
  color: #374151;
  font-family: inherit;
  background: radial-gradient(900px 500px at 100% 0%, rgba(42, 157, 143, 0.06), rgba(0, 0, 0, 0) 60%), radial-gradient(800px 600px at 0% 100%, rgba(40, 96, 201, 0.04), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #ffffff 0%, #F4F3F0 100%);
}

#within_ember #content > .evq.evq--quick {
  min-height: 100vh !important;
}

.evq__shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 20px + 1vw, 40px);
  padding-top: calc(5rem + clamp(20px, 20px + 1vw, 40px));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.evq__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
  background: radial-gradient(720px 320px at 12% 0%, rgba(42, 157, 143, calc(0.08 * 1)), rgba(0, 0, 0, 0) 55%), radial-gradient(560px 260px at 92% 12%, rgba(40, 96, 201, calc(0.06 * 1)), rgba(0, 0, 0, 0) 55%), radial-gradient(400px 280px at 80% 88%, rgba(70, 80, 95, calc(0.04 * 1)), rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 254, 253) 60%, rgb(244, 250, 249) 100%);
}
@media (max-width: 720px) {
  .evq__header {
    grid-template-columns: auto 1fr;
    grid-template-areas: "back  meta" "title title";
  }
  .evq__header .evq__back {
    grid-area: back;
  }
  .evq__header .evq__header-meta {
    grid-area: meta;
    justify-self: end;
  }
  .evq__header .evq__header-title {
    grid-area: title;
    padding-top: 4px;
  }
}

.evq__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.evq__back svg {
  transition: transform 140ms ease;
}
.evq__back:hover, .evq__back:focus-visible {
  color: #1B365D;
  border-color: rgba(27, 54, 93, 0.18);
  background: #ffffff;
  box-shadow: 0 8px 18px -10px rgba(11, 23, 50, 0.18);
  outline: none;
}
.evq__back:hover svg, .evq__back:focus-visible svg {
  transform: translateX(-2px);
}

.evq__header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.evq__header-title .evq__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #1A7B7A;
  font-weight: 700;
}
.evq__header-title .evq__title {
  margin: 0;
  font-size: clamp(22px, 20px + 0.7vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
  line-height: 1.15;
}
.evq__header-title .evq__subtitle {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

.evq__user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #1B365D;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 18px -10px rgba(11, 23, 50, 0.18);
}
.evq__user-chip::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A7B7A, #2860C9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  flex-shrink: 0;
}

.evq__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 5rem;
}

.evq-intake {
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
  padding: clamp(24px, 20px + 1.2vw, 44px);
  background: radial-gradient(720px 320px at 12% 0%, rgba(42, 157, 143, calc(0.08 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(560px 260px at 92% 12%, rgba(40, 96, 201, calc(0.06 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(400px 280px at 80% 88%, rgba(70, 80, 95, calc(0.04 * 0.55)), rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 254, 253) 60%, rgb(244, 250, 249) 100%);
}

.evq-intake__header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}
.evq-intake__header .evq-intake__title {
  margin: 0 0 6px 0;
  font-size: clamp(22px, 20px + 0.7vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
}
.evq-intake__header .evq-intake__caption {
  margin: 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.5;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.evq-intake__choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.evq-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 22px 20px 24px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(252, 254, 253, 0.68) 100%);
  box-shadow: 0 14px 32px -18px rgba(27, 54, 93, 0.22), 0 4px 8px -2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 120ms ease, border-color 160ms ease;
}

.evq-choice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 123, 122, 0.32);
  box-shadow: 0 22px 42px -18px rgba(27, 54, 93, 0.28), 0 6px 12px -3px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.evq-choice-card:focus-visible {
  outline: 3px solid rgba(26, 123, 122, 0.5);
  outline-offset: 2px;
}

.evq-choice-card:active {
  transform: translateY(0);
}

.evq-choice-card__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.evq-choice-card--tailor .evq-choice-card__icon {
  background: linear-gradient(135deg, #1A7B7A, rgb(15.3208053691, 72.4791946309, 71.8899328859));
}

.evq-choice-card--general .evq-choice-card__icon {
  background: linear-gradient(135deg, #2860C9, rgb(29.8423236515, 71.6215767635, 149.9576763485));
}

.evq-choice-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evq-choice-card__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1B365D;
  line-height: 1.25;
}

.evq-choice-card__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B7280;
}

.evq-choice-card__chev {
  flex-shrink: 0;
  align-self: center;
  color: rgba(27, 54, 93, 0.35);
  transition: transform 160ms ease, color 160ms ease;
}

.evq-choice-card:hover .evq-choice-card__chev {
  transform: translateX(3px);
  color: #1A7B7A;
}

.evq-intake__header--form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.evq-intake__back {
  align-self: flex-start;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.evq-intake__back:hover {
  color: #1B365D;
  border-color: rgba(27, 54, 93, 0.18);
  background: #fff;
}

.evq-intake__back:focus-visible {
  outline: 3px solid rgba(26, 123, 122, 0.5);
  outline-offset: 2px;
}

.evq-intake__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.evq-intake__field {
  border: 1px solid rgba(27, 54, 93, 0.07);
  border-radius: 12px;
  margin: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(252, 254, 253, 0.65) 100%);
  box-shadow: 0 14px 32px -18px rgba(27, 54, 93, 0.22), 0 4px 8px -2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 200ms ease, transform 120ms ease;
}

.evq-intake__legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1B365D;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.evq-intake__legend::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1A7B7A;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.14), 0 0 12px rgba(42, 157, 143, 0.35);
  flex-shrink: 0;
}

.evq-pillgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.evq-pillgroup--access .evq-pill--access {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 18px 12px;
  line-height: 1.25;
}
.evq-pillgroup--access .evq-pill--access[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.evq-pill__label {
  font-weight: 700;
}

.evq-pill__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1;
}
.evq-pill__status-badge--ready {
  background: rgba(26, 123, 122, 0.16);
  color: rgb(20.8, 98.4, 97.6);
}
.evq-pill__status-badge--software_fallback {
  background: rgba(40, 96, 201, 0.14);
  color: rgb(30, 72, 150.75);
}
.evq-pill__status-badge--unavailable {
  background: rgba(184, 80, 64, 0.14);
  color: #8E3E32;
}

.evq-pill--access.evq-pill--active .evq-pill__status-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.evq-pill {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 251, 253, 0.65) 100%);
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 12px -8px rgba(27, 54, 93, 0.08);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 200ms ease;
}
.evq-pill:hover, .evq-pill:focus-visible {
  border-color: rgba(40, 96, 201, 0.42);
  color: #2860C9;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 252, 255, 0.85) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px -12px rgba(40, 96, 201, 0.35);
  transform: translateY(-1px);
  outline: none;
}
.evq-pill--active, .evq-pill[aria-checked=true] {
  background: linear-gradient(135deg, rgb(113.6578008299, 153.0367219917, 226.8721991701) 0%, rgb(129.8590909091, 143.0318181818, 162.7909090909) 100%);
  color: #ffffff;
  border-color: rgba(40, 96, 201, 0.42);
  box-shadow: 0 6px 18px -8px rgba(40, 96, 201, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.evq-pill--active:hover, .evq-pill--active:focus-visible, .evq-pill[aria-checked=true]:hover, .evq-pill[aria-checked=true]:focus-visible {
  color: #ffffff;
  border-color: rgba(40, 96, 201, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(40, 96, 201, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.evq-pill:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(27, 54, 93, 0.1), 0 1px 2px rgba(27, 54, 93, 0.04);
}

.evq-intake__preview {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 14px 18px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 12px;
  border-left: 3px solid #1A7B7A;
  font-size: 14px;
  color: #374151;
}
.evq-intake__preview .evq-intake__preview-name {
  color: #1A7B7A;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 13px;
  padding: 2px 8px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 6px;
  font-weight: 700;
}

.evq-intake__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.evq-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease, box-shadow 160ms ease;
}
.evq-btn:disabled {
  cursor: not-allowed;
}
.evq-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.evq-btn--primary {
  background: linear-gradient(135deg, #5A6A85, #46505F);
  color: #ffffff;
  padding: 14px 28px;
  border: 1px solid rgba(70, 80, 95, 0.4);
  box-shadow: 0 12px 28px -14px rgba(70, 80, 95, 0.45), 0 2px 6px rgba(70, 80, 95, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.evq-btn--primary:hover:not(:disabled), .evq-btn--primary:focus-visible:not(:disabled) {
  box-shadow: 0 16px 32px -14px rgba(70, 80, 95, 0.5), 0 4px 10px rgba(70, 80, 95, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  outline: none;
}
.evq-btn--primary svg {
  transition: transform 160ms ease;
}
.evq-btn--primary:hover:not(:disabled) svg {
  transform: translateX(2px);
}
.evq-btn--primary:disabled {
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: none;
}

.evq-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: #1B365D;
  border-color: rgba(27, 54, 93, 0.18);
}
.evq-btn--ghost:hover:not(:disabled), .evq-btn--ghost:focus-visible:not(:disabled) {
  border-color: #1B365D;
  background: #ffffff;
  box-shadow: 0 8px 18px -10px rgba(11, 23, 50, 0.18);
  outline: none;
}

.evq-runner {
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
  padding: clamp(24px, 20px + 1.2vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: radial-gradient(720px 320px at 12% 0%, rgba(42, 157, 143, calc(0.08 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(560px 260px at 92% 12%, rgba(40, 96, 201, calc(0.06 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(400px 280px at 80% 88%, rgba(70, 80, 95, calc(0.04 * 0.55)), rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 254, 253) 60%, rgb(244, 250, 249) 100%);
}

@keyframes evq-scan-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(40, 96, 201, 0.55), 0 0 0 6px rgba(40, 96, 201, 0.18);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(40, 96, 201, 0.55), 0 0 0 12px rgba(40, 96, 201, 0.1);
  }
}
.evq-scan-active {
  position: relative;
  border-color: rgba(40, 96, 201, 0.6) !important;
  background: linear-gradient(135deg, rgb(165.2589211618, 190.2614107884, 237.1410788382) 0%, rgb(175.5454545455, 183.9090909091, 196.4545454545) 100%) !important;
  animation: evq-scan-pulse 1.4s ease-in-out infinite;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .evq-scan-active {
    animation: none;
  }
}
.evq-gaze-active {
  position: relative;
  border-color: rgba(40, 96, 201, 0.6) !important;
  background: linear-gradient(135deg, rgb(165.2589211618, 190.2614107884, 237.1410788382) 0%, rgb(175.5454545455, 183.9090909091, 196.4545454545) 100%) !important;
  z-index: 1;
}
.evq-gaze-active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(rgb(32.2993288591, 152.8006711409, 151.5583892617) var(--evq-gaze-dwell-pct, 0%), rgba(26, 123, 122, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
  transition: background 80ms linear;
}

#evq-gaze-cursor {
  position: fixed;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at center, rgba(40, 96, 201, 0.35) 0%, rgba(40, 96, 201, 0.12) 55%, transparent 70%);
  border: 1.5px solid rgba(40, 96, 201, 0.55);
  box-shadow: 0 0 12px rgba(40, 96, 201, 0.35);
  transition: transform 90ms linear;
  will-change: transform;
}

body.evq-gaze-mode {
  cursor: crosshair;
}

.evq-runner__progress {
  height: 8px;
  background: rgba(27, 54, 93, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.evq-runner__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(105.9966442953, 223.5033557047, 222.2919463087), rgb(142.8236514523, 174.0767634855, 232.6763485477));
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.evq-runner__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evq-runner__header .evq-runner__step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1A7B7A;
  font-weight: 700;
}
.evq-runner__header .evq-runner__title {
  margin: 0;
  font-size: clamp(22px, 20px + 0.7vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
  line-height: 1.2;
}
.evq-runner__header .evq-runner__item-count {
  color: #6B7280;
  font-size: 13px;
}

.evq-runner__item-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1.5px dashed rgba(27, 54, 93, 0.18);
  border-radius: 18px;
  padding: clamp(24px, 16px + 2vw, 48px);
  text-align: center;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.evq-runner__item-id {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6B7280;
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
}

.evq-runner__item-prompt {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  max-width: 520px;
  line-height: 1.4;
}

.evq-runner__score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 600px) {
  .evq-runner__score-row {
    grid-template-columns: 1fr;
  }
}

.evq-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 12px;
  border: 1.5px solid rgba(27, 54, 93, 0.1);
  background: #ffffff;
  font-weight: 700;
  font-size: 14px;
  color: #1B365D;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 160ms ease;
}
.evq-score:hover, .evq-score:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
  outline: none;
}
.evq-score--correct {
  color: #1A7B7A;
  border-color: rgba(42, 157, 143, 0.35);
}
.evq-score--correct:hover, .evq-score--correct:focus-visible {
  background: rgba(42, 157, 143, 0.1);
  border-color: #1A7B7A;
}
.evq-score--incorrect {
  color: #C0392B;
  border-color: rgba(192, 57, 43, 0.35);
}
.evq-score--incorrect:hover, .evq-score--incorrect:focus-visible {
  background: rgba(192, 57, 43, 0.06);
  border-color: #C0392B;
}
.evq-score--skip {
  color: #6B7280;
}
.evq-score--skip:hover, .evq-score--skip:focus-visible {
  color: #1B365D;
  border-color: rgba(27, 54, 93, 0.18);
}

.evq-runner__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.evq-runner__wrap,
.evq-runner__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 0;
  text-align: center;
}

.evq-report {
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
  padding: clamp(24px, 20px + 1.2vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: radial-gradient(720px 320px at 12% 0%, rgba(42, 157, 143, calc(0.08 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(560px 260px at 92% 12%, rgba(40, 96, 201, calc(0.06 * 0.55)), rgba(0, 0, 0, 0) 55%), radial-gradient(400px 280px at 80% 88%, rgba(70, 80, 95, calc(0.04 * 0.55)), rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 254, 253) 60%, rgb(244, 250, 249) 100%);
}

.evq-report__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.evq-report__header .evq-report__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #1A7B7A;
  font-weight: 700;
}
.evq-report__header .evq-report__title {
  margin: 0;
  font-size: clamp(24px, 20px + 1vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
  line-height: 1.15;
}

.evq-report__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.evq-report__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: #ffffff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: -0.005em;
}
.evq-report__chip--confidence {
  background: rgba(40, 96, 201, 0.08);
  color: #2860C9;
  border-color: rgba(40, 96, 201, 0.22);
}

.evq-report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.evq-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 254, 253, 0.85));
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 160ms ease, transform 100ms ease;
}
.evq-card:hover {
  box-shadow: 0 8px 18px -10px rgba(11, 23, 50, 0.18);
  transform: translateY(-1px);
}
.evq-card--wide {
  grid-column: span 2;
}
@media (max-width: 700px) {
  .evq-card--wide {
    grid-column: auto;
  }
}

.evq-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6B7280;
  font-weight: 700;
}

.evq-card__value {
  font-size: 20px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.evq-card__hint {
  font-size: 12px;
  color: #6B7280;
}

.evq-card__chips {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.evq-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
  font-size: 12px;
  font-weight: 700;
}

.evq-report__promote {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  background: rgba(242, 185, 90, 0.1);
  border-left: 3px solid #F2B95A;
  border-radius: 12px;
}

.evq-report__promote-title {
  color: #1B365D;
  font-size: 14px;
  font-weight: 700;
}

.evq-report__promote-reasons {
  font-size: 13px;
  color: #6B7280;
}

.evq-report__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.evq-comprehensive {
  display: block;
}

.evq-comp__shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(20px, 16px + 1.2vw, 36px);
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.025) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
}

.evq-comp__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.07);
}

.evq-comp__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-comp__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
}

.evq-comp__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.evq-comp__trial-counter {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-comp__da {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.evq-comp__da-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.03) 100%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  text-align: center;
}

.evq-comp__da-target {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1B365D;
  line-height: 1.2;
}

.evq-comp__da-prompt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.5;
  max-width: 520px;
}

.evq-comp__da-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0.12) 100%);
  border: 1px solid rgba(42, 157, 143, 0.25);
  border-radius: 10px;
}

.evq-comp__da-level-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A7B7A;
}

.evq-comp__da-level-value {
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
}

.evq-comp__da-level-index {
  font-size: 12px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.65);
}

.evq-comp__da-ladder {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.evq-comp__da-rung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  font-size: 12px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.65);
}
.evq-comp__da-rung.is-active {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.4);
  color: #1A7B7A;
}

.evq-comp__da-rung-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.12);
  color: rgba(27, 54, 93, 0.85);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.is-active .evq-comp__da-rung-num {
  background: #2A9D8F;
  color: #fff;
}

.evq-comp__da-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.evq-comp__skip-link {
  align-self: center;
  font-size: 13px;
  color: rgba(27, 54, 93, 0.55);
}

.evq-comp__literacy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.evq-comp__lit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.06) 100%);
  border: 1px solid rgba(76, 134, 216, 0.22);
  border-radius: 14px;
  text-align: center;
}

.evq-comp__lit-word {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2860C9;
  line-height: 1.1;
  font-family: "Georgia", "Charter", serif;
}

.evq-comp__lit-prompt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.5;
  max-width: 520px;
}

.evq-comp__sett {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.evq-comp__sett-intro {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.55;
}

.evq-comp__sett-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evq-comp__sett-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-comp__sett-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #1B365D;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.evq-comp__sett-input:focus, .evq-comp__sett-input:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.evq-comp__ai {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evq-comp__ai-intro {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.55;
}

.evq-comp__ai-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: #1B365D;
  resize: vertical;
  min-height: 260px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.evq-comp__ai-textarea:focus, .evq-comp__ai-textarea:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.evq-comp__ai-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px dashed rgba(27, 54, 93, 0.18);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.65);
  text-align: center;
}

.evq-comp__ai-error {
  margin: 0;
  padding: 10px 14px;
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 8px;
  color: #C0392B;
  font-size: 13px;
  font-weight: 600;
}

.evq-comp__placeholder,
.evq-comp__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px dashed rgba(27, 54, 93, 0.2);
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  color: rgba(27, 54, 93, 0.78);
}

.evq-comp__wrap {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.1) 100%);
  border-style: solid;
  border-color: rgba(42, 157, 143, 0.22);
}

.evq-saved {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 12px 0 28px;
  padding: 24px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.025) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 4px 16px -6px rgba(27, 54, 93, 0.1);
}

.evq-saved__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evq-saved__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-saved__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
}

.evq-saved__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.evq-saved__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 54, 93, 0.78);
}
.evq-saved__chip--confidence {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.3);
  color: #1A7B7A;
}
.evq-saved__chip--soft {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 13px;
}

.evq-saved__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.evq-saved__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
}

.evq-saved__card--wide {
  grid-column: 1/-1;
}

.evq-saved__card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-saved__card-value {
  font-size: 18px;
  font-weight: 800;
  color: #1B365D;
  line-height: 1.2;
}

.evq-saved__card-hint {
  font-size: 12px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.65);
}

.evq-saved__chips {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.evq-saved__targeted {
  padding: 18px 20px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(42, 157, 143, 0.04) 100%);
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-radius: 12px;
}

.evq-saved__targeted-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 157, 143, 0.18);
}

.evq-saved__targeted-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A7B7A;
  margin-bottom: 4px;
}

.evq-saved__targeted-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.evq-saved__targeted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.evq-saved__targeted-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
}

.evq-saved__targeted-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-saved__targeted-value {
  font-size: 18px;
  font-weight: 800;
  color: #1B365D;
  line-height: 1.2;
}

.evq-saved__targeted-hint {
  font-size: 12px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.65);
}

.evq-saved__targeted-picks {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evq-saved__targeted-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.78);
}

.evq-saved__targeted-pick-count {
  font-variant-numeric: tabular-nums;
  color: #1B365D;
}

.evq-saved__targeted-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.evq-saved__targeted-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.78);
}

.evq-saved__targeted-bar-value {
  font-variant-numeric: tabular-nums;
  color: #1B365D;
  font-weight: 800;
}

.evq-saved__notes {
  padding: 14px 16px;
  background: rgba(27, 54, 93, 0.03);
  border-left: 3px solid rgba(42, 157, 143, 0.45);
  border-radius: 8px;
}

.evq-saved__notes-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A7B7A;
  margin-bottom: 4px;
}

.evq-saved__notes-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.85);
  white-space: pre-line;
}

.evq-report__targeted {
  margin: 8px 0 20px;
  padding: 20px 22px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(42, 157, 143, 0.04) 100%);
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-radius: 14px;
}

.evq-report__targeted-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 157, 143, 0.18);
}

.evq-report__targeted-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A7B7A;
  margin-bottom: 4px;
}

.evq-report__targeted-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.evq-report__targeted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.evq-report__targeted-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
}

.evq-report__targeted-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-report__targeted-value {
  font-size: 18px;
  font-weight: 800;
  color: #1B365D;
  line-height: 1.2;
}

.evq-report__targeted-hint {
  font-size: 12px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.65);
}

.evq-report__targeted-picks {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evq-report__targeted-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.78);
}

.evq-report__targeted-pick-count {
  font-variant-numeric: tabular-nums;
  color: #1B365D;
}

.evq-report__targeted-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.evq-report__targeted-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.78);
}

.evq-report__targeted-bar-value {
  font-variant-numeric: tabular-nums;
  color: #1B365D;
  font-weight: 800;
}

.evq-report__goals {
  margin: 8px 0 20px;
  padding: 20px 22px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.04) 100%);
  border: 1px solid rgba(76, 134, 216, 0.18);
  border-radius: 14px;
}

.evq-report__goals-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(76, 134, 216, 0.18);
}

.evq-report__goals-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2860C9;
  margin-bottom: 4px;
}

.evq-report__goals-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.evq-report__goals-lede {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.72);
  line-height: 1.5;
}

.evq-report__goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

.evq-report__goals-cat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
}
.evq-report__goals-cat[data-category=linguistic] {
  border-color: rgba(76, 134, 216, 0.3);
}
.evq-report__goals-cat[data-category=operational] {
  border-color: rgba(42, 157, 143, 0.3);
}
.evq-report__goals-cat[data-category=social] {
  border-color: rgba(242, 185, 90, 0.4);
}
.evq-report__goals-cat[data-category=strategic] {
  border-color: rgba(232, 122, 111, 0.32);
}

.evq-report__goals-cat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-report__goals-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evq-report__goals-item {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.85);
  padding-left: 12px;
  position: relative;
}
.evq-report__goals-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.35);
}

.evq-saved__narrative {
  padding: 14px 16px;
  background: rgba(42, 157, 143, 0.04);
  border-left: 3px solid rgba(42, 157, 143, 0.55);
  border-radius: 8px;
}

.evq-report__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 16px;
}

.evq-report__notes-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-report__notes-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #1B365D;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.evq-report__notes-input:focus, .evq-report__notes-input:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.evq-report__error {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 8px;
  color: #C0392B;
  font-size: 13px;
  font-weight: 600;
}

.evq-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(20px, 16px + 1.2vw, 36px);
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 14px 32px -18px rgba(27, 54, 93, 0.22), 0 4px 8px -2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(252, 254, 253, 0.65) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.evq-item__prompt-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}

.evq-item__prompt {
  margin: 0;
  font-size: clamp(18px, 16px + 0.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1B365D;
  line-height: 1.35;
  flex: 1 1 auto;
}

.evq-item__id {
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6B7280;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}

.evq-item__hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
}

.evq-item__cause-effect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
}

.evq-item__big-button {
  width: clamp(180px, 140px + 18vw, 280px);
  height: clamp(180px, 140px + 18vw, 280px);
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #1A7B7A, #2860C9);
  color: #ffffff;
  font-size: clamp(20px, 16px + 1vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 24px 48px -16px rgba(26, 123, 122, 0.45), 0 6px 16px -8px rgba(40, 96, 201, 0.4), inset 0 4px 0 rgba(255, 255, 255, 0.18);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.evq-item__big-button:hover, .evq-item__big-button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 28px 56px -16px rgba(26, 123, 122, 0.55), 0 10px 22px -8px rgba(40, 96, 201, 0.45), inset 0 4px 0 rgba(255, 255, 255, 0.22);
  outline: none;
}
.evq-item__big-button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 8px 16px -8px rgba(26, 123, 122, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.evq-item__big-button-label {
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.evq-item__choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.evq-item__choice-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.evq-item__choice-grid--cols-4 {
  grid-template-columns: repeat(2, 1fr);
}
.evq-item__choice-grid--cols-6 {
  grid-template-columns: repeat(3, 1fr);
}
.evq-item__choice-grid--sequence {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
@media (max-width: 600px) {
  .evq-item__choice-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

.evq-item__choice-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 18px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(27, 54, 93, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 251, 253, 0.78) 100%);
  color: #1B365D;
  font-size: clamp(16px, 14px + 0.4vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px -8px rgba(27, 54, 93, 0.1);
  transition: transform 120ms ease, box-shadow 200ms ease, border-color 160ms ease, background 160ms ease;
}
.evq-item__choice-tile:hover, .evq-item__choice-tile:focus-visible {
  border-color: rgba(40, 96, 201, 0.45);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 28px -12px rgba(40, 96, 201, 0.32);
  outline: none;
}
.evq-item__choice-tile:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.95) 0%, rgba(240, 245, 250, 0.85) 100%);
}

.evq-item__choice-label {
  pointer-events: none;
}

.evq-item__choice-tile--with-symbol {
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px 16px;
}

.evq-item__choice-symbol,
.evq-symbol {
  pointer-events: none;
  max-width: clamp(64px, 22vw, 110px);
  max-height: clamp(64px, 22vw, 110px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 1px 1px rgba(27, 54, 93, 0.08));
}

.evq-symbol--mulberry {
  background: transparent;
}

.evq-symbol--book {
  max-width: calc(clamp(64px, 22vw, 110px) * 1.2);
  width: calc(clamp(64px, 22vw, 110px) * 1.2);
  height: auto;
}

.evq-symbol--plate {
  max-width: calc(clamp(64px, 22vw, 110px) * 1.25);
  width: calc(clamp(64px, 22vw, 110px) * 1.25);
  height: auto;
}

.evq-item__access-grid {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 54, 93, 0.1);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.evq-item__access-cell {
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(27, 54, 93, 0.1);
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 160ms ease;
}
.evq-item__access-cell:hover, .evq-item__access-cell:focus-visible {
  border-color: rgba(40, 96, 201, 0.45);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(27, 54, 93, 0.2);
  outline: none;
}
.evq-item__access-cell--target {
  background: rgb(113.6578008299, 153.0367219917, 226.8721991701);
  border-color: rgba(40, 96, 201, 0.42);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(40, 96, 201, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.evq-item__access-cell--target:hover, .evq-item__access-cell--target:focus-visible {
  background: rgb(113.6578008299, 153.0367219917, 226.8721991701);
  border-color: rgba(40, 96, 201, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(40, 96, 201, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.evq-item__library-compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.evq-item__library-word {
  font-size: clamp(22px, 18px + 0.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
  margin: 0;
}

.evq-item__library-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 640px;
}

.evq-item__library-row--single {
  grid-template-columns: minmax(180px, 280px);
  justify-content: center;
}

.evq-item__library-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  aspect-ratio: 1/1;
  border-radius: 18px;
  border: 1.5px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 22px -12px rgba(27, 54, 93, 0.18);
  transition: transform 120ms ease, box-shadow 200ms ease, border-color 160ms ease;
}
.evq-item__library-tile:hover, .evq-item__library-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(40, 96, 201, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 36px -16px rgba(27, 54, 93, 0.3);
  outline: none;
}

.evq-item__library-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.evq-item__library-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #6B7280;
  font-weight: 700;
}

.evq-item__sequence-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(26, 123, 122, 0.06);
  border: 1px solid rgba(26, 123, 122, 0.22);
}

.evq-item__sequence-progress {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1A7B7A;
  font-weight: 700;
}

.evq-item__sequence-buffer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.evq-item__sequence-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #1A7B7A;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.evq-item__observe {
  padding: 24px;
  border-radius: 12px;
  background: rgba(242, 185, 90, 0.08);
  border-left: 3px solid #F2B95A;
}

.evq-item__observe-message {
  margin: 0;
  font-size: 14px;
  color: #1B365D;
  line-height: 1.5;
}

.evq-item__manual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.evq-item__manual-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6B7280;
  font-weight: 700;
}

.evq-item__manual-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.evq-item__manual-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: #1B365D;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.evq-item__manual-btn:hover, .evq-item__manual-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}
.evq-item__manual-btn--correct {
  color: #1A7B7A;
  border-color: rgba(42, 157, 143, 0.35);
}
.evq-item__manual-btn--correct:hover, .evq-item__manual-btn--correct:focus-visible {
  background: rgba(42, 157, 143, 0.1);
  border-color: #1A7B7A;
}
.evq-item__manual-btn--skip {
  color: #6B7280;
}
.evq-item__manual-btn--skip:hover, .evq-item__manual-btn--skip:focus-visible {
  background: rgba(27, 54, 93, 0.04);
  border-color: rgba(27, 54, 93, 0.18);
  color: #1B365D;
}
.evq-item__manual-btn--incorrect {
  color: #C0392B;
  border-color: rgba(192, 57, 43, 0.35);
}
.evq-item__manual-btn--incorrect:hover, .evq-item__manual-btn--incorrect:focus-visible {
  background: rgba(192, 57, 43, 0.08);
  border-color: #C0392B;
}

.evq-runner__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.evq-runner__kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(242, 185, 90, 0.1);
  border: 1px solid rgba(242, 185, 90, 0.3);
  color: rgb(189.5646067416, 124.0786516854, 14.9353932584);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.evq-runner__kind-badge--auto {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.32);
  color: #1A7B7A;
}

.evq-runner__kind-badge-divider {
  opacity: 0.55;
  margin: 0 2px;
}

.evq-targeted {
  display: block;
}

.evq-targeted__shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(20px, 16px + 1.2vw, 36px);
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.025) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(11, 23, 50, 0.32), 0 4px 12px -6px rgba(11, 23, 50, 0.08);
}

.evq-targeted__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.07);
}

.evq-targeted__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-targeted__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
}

.evq-targeted__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.evq-targeted__instructions {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.5;
}

.evq-targeted__grid-sweep {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evq-targeted__grid-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px;
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.1) 100%);
  border: 1px solid rgba(42, 157, 143, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.evq-targeted__grid-label {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A7B7A;
  line-height: 1;
}

.evq-targeted__grid-capacity {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-targeted__sweep-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.evq-targeted__sweep-history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.evq-targeted__sweep-history-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: rgba(27, 54, 93, 0.78);
}
.evq-targeted__sweep-history-item.is-correct {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.3);
  color: #1A7B7A;
}
.evq-targeted__sweep-history-item.is-incorrect {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.25);
  color: #C0392B;
}

.evq-targeted__library-3way {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.evq-targeted__trial-counter {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-targeted__library-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.evq-targeted__library-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.03) 100%);
  color: #1B365D;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.04);
}
.evq-targeted__library-tile:hover, .evq-targeted__library-tile:focus-visible {
  border-color: rgba(42, 157, 143, 0.4);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 4px 12px rgba(42, 157, 143, 0.15);
  outline: none;
}
.evq-targeted__library-tile:active {
  transform: scale(0.98);
}

.evq-targeted__library-tile-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 54, 93, 0.55);
}

.evq-targeted__library-tile-word {
  font-size: 28px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.01em;
}

.evq-targeted__skip-link {
  align-self: center;
  font-size: 13px;
  color: rgba(27, 54, 93, 0.55);
}

.evq-targeted__access-cotrial {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.evq-targeted__access-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px;
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.1) 100%);
  border: 1px solid rgba(42, 157, 143, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.evq-targeted__access-target--tappable {
  cursor: pointer;
  padding: 56px 32px;
  border: 1.5px solid rgba(42, 157, 143, 0.32);
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.06) 0%, rgba(42, 157, 143, 0.16) 100%);
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  width: 100%;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.evq-targeted__access-target--tappable:hover, .evq-targeted__access-target--tappable:focus-visible {
  border-color: rgba(26, 123, 122, 0.55);
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0.22) 100%);
  box-shadow: 0 12px 28px -12px rgba(26, 123, 122, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
}
.evq-targeted__access-target--tappable:active {
  transform: scale(0.99);
}

.evq-targeted__access-tappable-hint {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(27, 54, 93, 0.5);
  font-weight: 700;
}

.evq-targeted__access-word {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A7B7A;
  line-height: 1.1;
}

.evq-targeted__access-method-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  border: 1px solid rgba(27, 54, 93, 0.14);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1B365D;
}

.evq-targeted__syntax-probe {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.evq-targeted__syntax-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.evq-targeted__syntax-phase-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.evq-targeted__syntax-phase-chip[data-phase=receptive] {
  background: rgba(76, 134, 216, 0.12);
  border: 1px solid rgba(76, 134, 216, 0.3);
  color: #2860C9;
}
.evq-targeted__syntax-phase-chip[data-phase=expressive] {
  background: rgba(242, 185, 90, 0.16);
  border: 1px solid rgba(242, 185, 90, 0.36);
  color: rgba(27, 54, 93, 0.85);
}

.evq-targeted__syntax-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.03) 100%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  text-align: center;
}

.evq-targeted__syntax-phrase {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1B365D;
  line-height: 1.2;
}

.evq-targeted__syntax-prompt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.5;
  max-width: 480px;
}

.evq-targeted__placeholder,
.evq-targeted__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px dashed rgba(27, 54, 93, 0.2);
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  color: rgba(27, 54, 93, 0.78);
}

.evq-targeted__wrap {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.04) 0%, rgba(42, 157, 143, 0.1) 100%);
  border-style: solid;
  border-color: rgba(42, 157, 143, 0.22);
}

.evq-targeted__motor-map {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.evq-targeted__motor-map-prompt {
  color: rgba(27, 54, 93, 0.72);
  font-size: 14px;
  margin: 0;
}

.evq-targeted__motor-map-grid {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 560px;
  align-self: center;
}

.evq-targeted__motor-map-cell {
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease, background 80ms ease, border-color 80ms ease;
  padding: 0;
}

.evq-targeted__motor-map-cell:hover {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.42);
  transform: scale(1.03);
}

.evq-targeted__motor-map-cell--target {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.18) 0%, rgba(42, 157, 143, 0.34) 100%);
  border-color: rgba(42, 157, 143, 0.68);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.18) inset;
}

.evq-targeted__motor-map-target-glyph {
  color: rgba(42, 157, 143, 0.92);
  font-size: 22px;
  line-height: 1;
}

.evq-report__targeted-card--motor-map,
.evq-saved__targeted-card--motor-map {
  grid-column: 1/-1;
}

.evq-report__motor-map-heatmap,
.evq-saved__motor-map-heatmap {
  margin-top: 10px;
  width: 100%;
  max-width: 480px;
}

body.ll-layout-focused .md-shell--reports-view .md-pillnav__pill.active,
body.ll-layout-focused .md-shell--reports-view .md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #4C86D8) !important;
  border-color: rgba(76, 134, 216, 0.3) !important;
}
body.ll-layout-focused .md-shell--reports-view > .md-workspace {
  padding: 16px 16px 0px !important;
}
@media (max-width: 1024px) {
  body.ll-layout-focused .md-shell--reports-view > .md-workspace {
    padding: 58px 16px 0px !important;
  }
}

.md-shell--layout-focused.md-shell--extras-view > .md-workspace {
  padding: 32px 40px 0px !important;
}

.md-extras-page__focus-head,
.md-extras-page__focus-divider {
  display: none;
}

.md-shell--layout-focused.md-shell--extras-view .md-hero--dashboard {
  display: none !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-page {
  margin-top: 32px !important;
  padding: 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  border: 1px solid rgba(27, 54, 93, 0.07) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 9px 18px rgba(76, 134, 216, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(27, 54, 93, 0.05), 0 6px 16px rgba(27, 54, 93, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-page__focus-head {
  display: block !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-page__focus-divider {
  display: block !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
  border: 1px solid rgba(76, 134, 216, 0.22) !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap {
  background: radial-gradient(circle at 50% 46%, #262d3a 0%, #333c4a 48%, #515d70 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 5px rgba(0, 0, 0, 0.16) !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--intro .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--intro .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #4FD1C5 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--lessons .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--lessons .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #4FD1C5 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--sync_details .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--sync_details .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #7FB0F0 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--account .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--account .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #7FB0F0 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--goals .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--goals .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #68D391 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--reports .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--reports .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #F6C453 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--run_eval .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--run_eval .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #F6C453 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--record_note .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--record_note .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #B3A9F0 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--supervisors .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--supervisors .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #FC8181 !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--offline_boards .md-extras-card__svg-icon,
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__icon-wrap--offline_boards .md-extras-card__svg-icon [stroke]:not([stroke=none]) {
  stroke: #E0B97D !important;
}
@media (max-width: 460px) {
  .md-shell--layout-focused.md-shell--extras-view .md-grid--dashboard,
  .md-shell--layout-focused.md-shell--extras-view .md-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .md-shell--layout-focused.md-shell--extras-view .md-extras-page__grid {
    grid-template-columns: 1fr !important;
  }
}

body.ll-layout-focused .md-shell--reports-view .ub-boards-page__page-header,
body.ll-layout-focused .md-user-summary .ub-boards-page__page-header {
  display: none !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-section,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-section {
  margin-top: 16px !important;
}
@media (max-width: 1024px) {
  body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-section,
  body.ll-layout-focused .md-user-summary .ub-boards-page__boards-section {
    margin: 32px 0px 0px !important;
  }
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-section,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  border: 1px solid rgba(27, 54, 93, 0.07) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 9px 18px rgba(76, 134, 216, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(27, 54, 93, 0.05), 0 6px 16px rgba(27, 54, 93, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-new-btn,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__new-board-btn,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__set-home-btn,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__show-more-btn,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-new-btn:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__new-board-btn:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__set-home-btn:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__show-more-btn:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-new-btn:focus-visible,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__new-board-btn:focus-visible,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__set-home-btn:focus-visible,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__show-more-btn:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-new-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__new-board-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__show-more-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-new-btn:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__new-board-btn:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__show-more-btn:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-new-btn:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__new-board-btn:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__show-more-btn:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(160deg in oklab, color-mix(in oklch, #4C86D8, gray 22%) 0%, color-mix(in oklch, color-mix(in oklch, #4C86D8, gray 22%), black 14%) 100%) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__set-home-btn-icon,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn-icon {
  color: #ffffff !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__new-board-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__new-board-btn {
  min-height: 44px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-new-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-new-btn {
  display: none !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li > a,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li > a {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(135deg, rgb(145.4, 168.6, 199), rgb(111.8, 158.2, 223.8)) !important;
  box-shadow: none !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li.is-active:not(.dropdown) > a,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.is-active:not(.dropdown) > a {
  background: linear-gradient(135deg, #7693B9, #4C86D8) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li.dropdown.is-active > .dropdown-toggle,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.dropdown.is-active > .dropdown-toggle,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(135deg, rgb(145.4, 168.6, 199), rgb(111.8, 158.2, 223.8)) !important;
  box-shadow: none !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__folders-section,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-section,
body.ll-layout-focused .md-user-summary .ub-boards-page__folders-section,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-section {
  background: linear-gradient(180deg, rgba(206.4666666667, 221.4, 236.3333333333, 0.94) 0%, rgba(214.05, 227.7, 241.35, 0.95) 45%, rgba(229.5, 229.5, 229.5, 0.96) 100%) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__section-icon,
body.ll-layout-focused .md-user-summary .ub-boards-page__section-icon {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
  border: 1px solid rgba(76, 134, 216, 0.22) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-stat--in-folders,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__boards-summary-stat--unfiled,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__folders-count,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-stat--in-folders,
body.ll-layout-focused .md-user-summary .ub-boards-page__boards-summary-stat--unfiled,
body.ll-layout-focused .md-user-summary .ub-boards-page__folders-count {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
}

.md-stats-main__focus-head,
.md-stats-main__focus-divider {
  display: none;
}

body.ll-layout-focused .md-shell--reports-view .md-hero--reports-dashboard {
  display: none !important;
}
body.ll-layout-focused .md-shell--reports-view .md-user-meta {
  flex-direction: row !important;
}
body.ll-layout-focused .md-shell--reports-view .md-user-meta--before-hero {
  margin: 32px 0px 12px !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-main {
  margin-top: 38px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  border: 1px solid rgba(27, 54, 93, 0.07) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 9px 18px rgba(76, 134, 216, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(27, 54, 93, 0.05), 0 6px 16px rgba(27, 54, 93, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-main__focus-head {
  display: block !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-main__focus-divider {
  display: block !important;
}

body.ll-layout-focused .md-shell--board-picker > .md-workspace {
  background: radial-gradient(680px 380px at 50% 1%, rgba(76, 134, 216, 0.12), transparent 52%), radial-gradient(880px 460px at 12% 4%, rgba(76, 134, 216, 0.16), transparent 44%), radial-gradient(820px 460px at 92% 12%, rgba(76, 134, 216, 0.14), transparent 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.5));
}
body.ll-layout-focused .board-picker-page .md-home-boards-picker__layout--tabbed {
  background: linear-gradient(180deg, rgba(223.101875, 228.63625, 238.598125, 0.85) 0%, rgba(203.815483871, 209.8051612903, 221.784516129, 0.9) 100%);
}
body.ll-layout-focused .board-picker-page__cta-icon {
  color: #4C86D8;
}
body.ll-layout-focused .board-picker-page__divider-line {
  background: linear-gradient(90deg, transparent 0%, rgba(76, 134, 216, 0.7) 45%);
}
body.ll-layout-focused .board-picker-page__new-btn,
body.ll-layout-focused .board-picker-page__new-btn:hover,
body.ll-layout-focused .board-picker-page__new-btn:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg in oklab, color-mix(in oklch, #4C86D8, gray 22%) 0%, color-mix(in oklch, color-mix(in oklch, #4C86D8, gray 22%), black 14%) 100%);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(76, 134, 216, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(76, 134, 216, 0.2);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
body.ll-layout-focused .board-picker-page__new-btn:hover,
body.ll-layout-focused .board-picker-page__new-btn:focus-visible {
  transform: translateY(-1px);
}
body.ll-layout-focused .board-picker-page__new-btn .board-picker-page__cta-icon {
  color: #ffffff;
}
body.ll-layout-focused .board-picker-page__assign-btn,
body.ll-layout-focused .board-picker-page__assign-btn:hover,
body.ll-layout-focused .board-picker-page__assign-btn:focus-visible {
  border-color: rgba(76, 134, 216, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(76, 134, 216, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(76, 134, 216, 0.2);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
body.ll-layout-focused .board-picker-page__assign-btn:not(:disabled):hover,
body.ll-layout-focused .board-picker-page__assign-btn:not(:disabled):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(76, 134, 216, 0.5);
}
body.ll-layout-focused .board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li > a:hover,
body.ll-layout-focused .board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li > a:focus-visible {
  box-shadow: 0 0 14px rgba(76, 134, 216, 0.24), 0 6px 16px rgba(76, 134, 216, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.ll-layout-focused .board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li.is-active > a {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(135deg, #7693B9, #4C86D8) !important;
  box-shadow: 0 6px 16px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.ll-layout-focused .md-pillnav--user a.md-pillnav__pill.active,
body.ll-layout-focused .md-pillnav--user a.md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #4C86D8) !important;
  border-color: rgba(76, 134, 216, 0.3) !important;
}

body.ll-layout-focused .md-hero--dashboard-user,
body.ll-layout-focused .md-edit-profile__header,
body.ll-layout-focused .md-preferences__header,
body.ll-layout-focused .md-logs__header {
  display: none !important;
}
body.ll-layout-focused .md-user-summary__stats-row--boards {
  display: none !important;
}
body.ll-layout-focused .md-user-summary__stats-row--supervise > :nth-child(1) {
  order: 3 !important;
}
body.ll-layout-focused .md-user-summary__stats-row--supervise > :nth-child(2) {
  display: none !important;
}
body.ll-layout-focused .md-user-summary__stats-row--supervise > :nth-child(3) {
  order: 1 !important;
}
body.ll-layout-focused .md-user-summary__stats-row--supervise > :nth-child(4) {
  order: 4 !important;
}
body.ll-layout-focused .md-hero--user {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
body.ll-layout-focused .md-hero--user__avatar {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
}

body.ll-layout-focused .md-edit-profile .md-pref-box,
body.ll-layout-focused .md-preferences .md-pref-box {
  border-radius: 22px !important;
  border: 1px solid rgba(13, 36, 56, 0.07) !important;
  /* BODY surface — the lighter boards-body look: white + verdigris radial blooms over
     the LIGHT (non-darkened) section gradient, so the body is clearly lighter than the
     darkened header. Plus the body inset glow. */
  background: radial-gradient(ellipse 80% 70% at 30% 10%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 75%), radial-gradient(ellipse 60% 60% at 80% 90%, rgba(44, 183, 176, 0.1) 0%, rgba(44, 183, 176, 0.04) 50%, rgba(44, 183, 176, 0) 80%), linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 2px 4px -1px rgba(27, 54, 93, 0.16), inset 0 8px 14px -8px rgba(27, 54, 93, 0.12) !important;
}
body.ll-layout-focused .md-edit-profile .md-pref-box__header,
body.ll-layout-focused .md-preferences .md-pref-box__header {
  /* HEADER surface — the darker sunken section gradient (no blooms), with a hairline
     separating it from the lighter body, mirroring the boards section's header/body. */
  background: linear-gradient(180deg, rgba(206.4666666667, 221.4, 236.3333333333, 0.94) 0%, rgba(214.05, 227.7, 241.35, 0.95) 45%, rgba(229.5, 229.5, 229.5, 0.96) 100%) !important;
  border-bottom: 1px solid rgba(13, 36, 56, 0.12) !important;
}
body.ll-layout-focused .md-edit-profile .md-pref-box__icon,
body.ll-layout-focused .md-preferences .md-pref-box__icon {
  background: radial-gradient(circle at 50% 46%, #262d3a 0%, #333c4a 48%, #515d70 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 5px rgba(0, 0, 0, 0.16) !important;
}
body.ll-layout-focused .md-edit-profile .md-pref-box__icon svg,
body.ll-layout-focused .md-preferences .md-pref-box__icon svg {
  filter: brightness(1.4) saturate(1.05);
}
body.ll-layout-focused .md-edit-profile .md-pref-box__icon svg [stroke="#46505F"],
body.ll-layout-focused .md-preferences .md-pref-box__icon svg [stroke="#46505F"] {
  stroke: #a6abb2 !important;
}
body.ll-layout-focused .md-edit-profile .md-pref-box__chevron,
body.ll-layout-focused .md-edit-profile .md-pref-box__header:hover .md-pref-box__chevron,
body.ll-layout-focused .md-preferences .md-pref-box__chevron,
body.ll-layout-focused .md-preferences .md-pref-box__header:hover .md-pref-box__chevron {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
}

body.ll-layout-focused .md-logs .md-logs__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
body.ll-layout-focused .md-logs .md-logs__action-pill,
body.ll-layout-focused .md-logs .md-logs__action-pill:hover,
body.ll-layout-focused .md-logs .md-logs__action-pill:focus-visible,
body.ll-layout-focused .md-logs .btn.btn-default:not(.md-logs__danger-btn),
body.ll-layout-focused .md-logs .btn.btn-default:not(.md-logs__danger-btn):hover,
body.ll-layout-focused .md-logs .btn.btn-default:not(.md-logs__danger-btn):focus-visible {
  color: #ffffff !important;
  border-color: rgba(70, 80, 95, 0.3) !important;
  background: #7693B9 !important;
}
body.ll-layout-focused .md-logs .md-logs__action-pill svg {
  color: #ffffff !important;
}

/* Home board info row */
/* ══════════════════════════════════════════════════════
   Caseload page
   ══════════════════════════════════════════════════════ */
/* Sunken container holding all supervisee cards — slightly darker
   tinted surface inset into the page surface via a top-edge inset
   shadow. The cards inside still float (their own resting drop
   shadow), reading as raised tiles sitting in a recessed tray. */
.md-caseload {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: var(--md-r-lg, 18px);
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.1), inset 0 1px 1px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

/* At <= 950px the caseload wrap was touching the right edge of the
   page. Pull it in 2px so the rounded corner doesn't sit flush
   against the viewport without overshooting the inset look. */
@media (max-width: 950px) {
  .md-caseload {
    margin-right: 2px !important;
  }
}
.md-caseload__extras-dropdown:not(.md-caseload__extras-dropdown--mobile) {
  display: none !important;
}

.md-caseload__extras-dropdown--mobile {
  display: block !important;
}

/* With the corner chevron hidden, the bottom-row only contains
   the goal area. The base rule uses justify-content:
   space-between (designed for goal-left + chevron-right), which
   can produce visually-skewed alignment when only one child
   remains. Force the goal chip flush to the left edge and let
   the goal area span the card width. */
.md-caseload__bottom-row {
  justify-content: flex-start !important;
}

.md-caseload__bottom-row__goal {
  width: 100%;
}

.md-caseload__goal-row {
  max-width: 100%;
}

.md-caseload__actions--tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 6px;
}

/* Override the base tile's 8rem max-width / 5rem basis so tiles
   stretch to fill their grid cell evenly. */
.md-caseload__actions--tiles > .md-caseload__action--tile {
  flex: initial !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* The More Actions wrapper sits as a grid item; stretch it to
   fill the cell and force its inner button to fill the wrapper
   so it visually matches the other tiles in both width and
   height. */
.md-caseload__actions--tiles .md-caseload__extras-dropdown--mobile {
  width: 100%;
  height: 100%;
}

.md-caseload__actions--tiles .md-caseload__extras-dropdown--mobile .md-caseload__action--more {
  width: 100%;
  height: 100%;
  max-width: none !important;
  min-width: 0 !important;
}

.md-caseload__filter-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(27, 54, 93, 0.55);
  pointer-events: none;
}

.md-caseload__filter-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.md-caseload__filter-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-caseload__filter-clear:hover,
.md-caseload__filter-clear:focus-visible {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
  outline: none;
}

/* No-matches empty-state CTA sits centered under the description.
   Reuses .md-modal-btn--cancel for the same muted button look as
   the modal footers without redefining the styling. */
.md-caseload__empty--no-matches .md-modal-btn {
  margin-top: 14px;
}

.md-caseload__back-to-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #1B365D;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-caseload__back-to-list:hover,
.md-caseload__back-to-list:focus-visible {
  background: #F8F9FA;
  border-color: rgba(42, 157, 143, 0.35);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08);
}

.md-caseload__back-to-list svg {
  color: rgba(27, 54, 93, 0.7);
}

.md-caseload__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-caseload__list-row {
  /* Accordion item: the clickable header row and (when expanded) the
     inline detail panel stack vertically inside this one bordered
     surface, so expanding reads as the row opening — not a separate
     card appearing below it. */
  display: flex;
  flex-direction: column;
  position: relative;
  /* Breathing room when the expanded card is scrolled into view (see
     _scrollExpandedIntoView) — also clears a sticky header if present. */
  scroll-margin: 90px 0 20px;
  /* Clip the flush left accent stripe to the card's rounded corners — same
     approach as .md-org-session-row on the organizations page. */
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.02) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* "Our gradient" (verdigris → dusty-denim) as a flush LEFT accent stripe on the
   outer edge of every communicator card — the same treatment as
   .md-org-session-row on the organizations page (full height, sitting on the
   left edge, clipped to the rounded corners by the row's overflow:hidden). */
.md-caseload__list-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2A9D8F, #4C86D8);
  opacity: 0.7;
  pointer-events: none;
  /* Above the card's inner layers (card-top raises its own stacking context)
     so the rail runs UNINTERRUPTED down the whole expanded card — it's a 4px
     strip at the very left edge, and all content is inset, so it covers nothing. */
  z-index: 20;
}

/* Active row — and any hovered or keyboard-focused row, which preview the
   selected look: full-strength + slightly wider so it reads as selected. */
.md-caseload__list-row--active::before,
.md-caseload__list-row:hover::before,
.md-caseload__list-row:focus-within::before {
  width: 5px;
  opacity: 1;
}

/* The clickable header (avatar + name + quick actions + chevron).
   selectSupervisee is bound to THIS element, not the whole <li>, so
   clicks inside the expanded panel (a sibling below) never toggle the
   row. Quick-action buttons still skip the toggle via the controller's
   .md-caseload__list-quick target check. */
.md-caseload__list-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  cursor: pointer;
}

/* Hover/focus previews the active/expanded look: a hovered — or keyboard-focused
   (:focus-within) — collapsed row takes the exact selected styling (border + tint
   + ring/glow) so mousing over OR tabbing to it shows what expanding will look
   like. Resting rows stay plain (see base rule). */
.md-caseload__list-row--active,
.md-caseload__list-row:hover,
.md-caseload__list-row:focus-within {
  border-color: rgba(42, 157, 143, 0.55);
  /* Soft verdigris tint across the whole expanded card (header, goals, and the
     now-transparent Quick Actions section) so the surface reads as one cohesive
     card. ~10% lighter than before — the selected cue rides on the ring + glow
     below, so the fill can stay soft. */
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.063) 0%, rgba(42, 157, 143, 0.04) 100%);
  /* One extra cue so the open row is unmistakable while scrolling: a hairline
     verdigris ring hugging the border plus a soft teal glow around it. */
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 0 0 1px rgba(42, 157, 143, 0.3), 0 0 20px rgba(42, 157, 143, 0.14), 0 10px 26px rgba(42, 157, 143, 0.2);
}

/* Selected-row accent — a teal left edge on the header signals the
   open row without adding another box. */
.md-caseload__list-row--active .md-caseload__list-header {
  /* Left accent now comes from the gradient rail (.md-caseload__list-row::before);
     just keep the header's top corners rounded when the panel is open. */
  border-radius: 12px 12px 0 0;
  /* Header caps the card a little darker than the goals body below — an extra
     verdigris layer over the row tint so the selected header stands out. */
  background: rgba(42, 157, 143, 0.045);
}

/* --- Inline accordion panel (the expanded goals detail) ---------------------
   The detail card now renders INSIDE the active row as an accordion panel, not
   a standalone centered card. Strip its standalone framing so expanding reads
   as the row opening: flush + full width under the header, separated by a
   hairline instead of its own border/radius/shadow, with a short slide-down.
   Scoped to .md-caseload__list-row so it overrides the base .md-caseload__card
   surface (and its ::before/::after glass layers) by specificity. */
.md-caseload__list-row .md-caseload__card {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 0 0 12px 12px;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 14px 16px 16px;
  animation: caseload-panel-reveal 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.md-caseload__list-row .md-caseload__card::before,
.md-caseload__list-row .md-caseload__card::after {
  content: none;
  display: none;
}

@keyframes caseload-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-caseload__list-row .md-caseload__card {
    animation: none;
  }
}
.md-caseload__list-trigger {
  /* Natural width on the LEFT (avatar + name + access chip). Does not grow,
     so the action group beside it can take the remaining width and right-align. */
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  color: inherit;
  /* It's a real <button> for keyboard operability — strip the native button
     chrome so it looks identical to the old div. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.md-caseload__list-trigger:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: 3px;
  border-radius: 6px;
}

.md-caseload__list-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Name + access chip share one line; goal caption sits below. */
.md-caseload__list-name-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* Fixed-width name slot so the access chips line up in a column across every
   row regardless of username length (ellipsis on overflow). */
.md-caseload__list-name-row .md-caseload__list-name {
  flex: 0 0 auto;
  width: 156px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-caseload__list-access {
  position: relative;
  flex-shrink: 0;
  margin-left: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Modern separator between the name and the access chip — a thin vertical rule
   that fades at both ends. Drawn on the chip so it only appears when a chip
   exists, sitting at the fixed name-column edge. */
.md-caseload__list-access::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(27, 54, 93, 0.32) 50%, transparent 100%);
}

@media (max-width: 560px) {
  /* Tighter name column on phones so the chip + separator still fit. */
  .md-caseload__list-name-row .md-caseload__list-name {
    width: 108px;
  }
  .md-caseload__list-access {
    margin-left: 20px;
  }
  .md-caseload__list-access::before {
    left: -10px;
  }
}
.md-caseload__list-access--view {
  color: #1B365D;
  background: rgba(27, 54, 93, 0.08);
}

.md-caseload__list-access--edit {
  color: #1A7B7A;
  background: rgba(42, 157, 143, 0.12);
}

.md-caseload__list-access--modeling {
  color: #9a5b00;
  background: rgba(242, 185, 90, 0.2);
}

.md-caseload__list-quick {
  /* Holds the full action set (row quick-actions + the promoted non-duplicate
     actions). Grows to take the width remaining after the identity, so the
     buttons right-align; as a single flex item it wraps to its own line as a
     WHOLE when the row is too narrow (no single button orphaning off beside
     the name). */
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* When the group wraps to multiple rows, let the tiles grow to fill each row
   (bounded) so a partial last row never leaves a lonely gap. */
.md-caseload__list-quick .md-caseload__quick-action {
  flex: 1 1 auto;
  min-width: 58px;
  max-width: 92px;
}

/* Choose-Board slot — shown in place of Model when a communicator has no home
   board yet. A clickable dashed verdigris CTA reads as "set this up" (distinct
   from the solid action tiles) while remaining a real action that opens the
   home-board picker. Scoped (0,2,0) so it overrides the base quick-action tile. */
.md-caseload__list-quick .md-caseload__quick-action--choose-board {
  color: #1A7B7A;
  background: rgba(42, 157, 143, 0.06);
  border-style: dashed;
  border-color: rgba(42, 157, 143, 0.4);
}

.md-caseload__list-quick .md-caseload__quick-action--choose-board:hover,
.md-caseload__list-quick .md-caseload__quick-action--choose-board.touched {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.55);
}

/* No-board note shown in the Model slot for VIEW-ONLY supporters (who can't set
   a home board): muted, dashed, non-interactive — the tooltip says why. */
.md-caseload__list-quick .md-caseload__quick-action--empty {
  cursor: default;
  color: rgba(27, 54, 93, 0.42);
  background: rgba(27, 54, 93, 0.025);
  border-style: dashed;
  border-color: rgba(27, 54, 93, 0.18);
  box-shadow: none;
}

.md-caseload__list-quick .md-caseload__quick-action--empty svg {
  opacity: 0.65;
}

.md-caseload__list-quick .md-caseload__quick-action--empty:hover {
  transform: none;
  background: rgba(27, 54, 93, 0.025);
  border-color: rgba(27, 54, 93, 0.18);
  box-shadow: none;
}

/* Goals empty state — centered "feature, not a missing feature": target icon,
   headline, one-line why, and the Add Goal CTA. */
.md-caseload__goal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  /* Tightened top/bottom so the empty state sits ~16px higher — less dead
     whitespace between the GOALS header and the icon. */
  padding: 0 12px 8px;
}

.md-caseload__goal-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.08);
}

.md-caseload__goal-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.md-caseload__goal-empty-desc {
  margin: 0;
  font-size: 13px;
  color: rgba(27, 54, 93, 0.6);
}

/* The empty card's primary next step — a touch taller, heavier, and higher
   contrast than a plain chip so it reads as "do this next" without going bright. */
.md-caseload__goal-empty-add {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.45);
  background: rgba(42, 157, 143, 0.16);
  color: #1A7B7A;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.md-caseload__goal-empty-add:hover {
  background: rgba(42, 157, 143, 0.22);
  border-color: rgba(42, 157, 143, 0.62);
}

/* Quick Actions carries the card's own (transparent) background so it reads as
   part of the same cohesive surface — no white fill or divider that would make
   the section look detached. Just top spacing to separate it from Goals. */
.md-caseload__panel-actions {
  margin-top: 14px;
}

.md-caseload__panel-actions .md-caseload__actions-eyebrow {
  margin-top: 0;
}

/* Anchored, not shouted: a hair darker text so the label reads as deliberate
   without a divider that would visually detach the section from the card. */
.md-caseload__actions-eyebrow {
  margin: 2px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.58);
}

/* Access placeholder — a locked action tile (e.g. Speak on a modeling-only
   link). Muted over its own accent, non-interactive, with a lock badge so the
   supporter sees the action exists and why it's unavailable. Container-scoped
   so it wins over the per-color tile :hover. */
.md-caseload__actions--tiles .md-caseload__action--locked {
  position: relative;
  cursor: default;
  opacity: 0.5;
  filter: grayscale(0.35);
}

.md-caseload__actions--tiles .md-caseload__action--locked:hover {
  transform: none;
  box-shadow: none;
}

.md-caseload__action-lock {
  position: absolute;
  top: 7px;
  right: 8px;
  display: inline-flex;
  color: rgba(27, 54, 93, 0.5);
  pointer-events: none;
}

.md-caseload__list-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  color: rgba(27, 54, 93, 0.45);
  margin-left: 2px;
  /* Springy rotate on expand/collapse — the slight overshoot reads as a
     deliberate "flip" rather than a static state swap. */
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.12s ease;
}

.md-caseload__list-row--active .md-caseload__list-chevron {
  transform: rotate(180deg);
  color: #1A7B7A;
}

@media (max-width: 640px) {
  .md-caseload__list-quick {
    /* On narrow screens, reduce to the two most-used quick actions
       (Note + Assessment) to keep the row readable. Model + Reports
       are still accessible from the full card below. */
    gap: 3px;
  }
  /* Compact icon-only on phones — no room for captions alongside the name.
     Parent-scoped (0,2,0) so it beats the base `a.md-caseload__quick-action`
     (0,1,1) tile size, which sits LATER in source (the base 52×46 rule). */
  .md-caseload__list-quick .md-caseload__quick-action {
    /* Icon-only compact tiles on phones — reset the desktop fill-to-wrap
       sizing so they stay a fixed 32px and wrap tightly. */
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 0;
    max-width: none;
    border-radius: 8px;
  }
  .md-caseload__quick-label {
    display: none;
  }
  .md-caseload__quick-action--model,
  .md-caseload__quick-action--reports {
    display: none;
  }
}
.md-caseload__grid {
  display: grid;
  /* Single-card layout: the grid now only ever renders the
     selected supervisee's card (the rest collapse into the compact
     list above). Center the column on the page and cap its width
     at 800px so the card reads as a focused detail panel rather
     than a roster cell. min(800px, 100%) keeps it edge-to-edge on
     narrow viewports. */
  grid-template-columns: minmax(0, min(800px, 100%));
  justify-content: center;
  gap: 16px;
}

.md-caseload__card {
  /* min-width: 0 lets the card honor its 1fr grid track instead of
     growing to fit min-content of long goal summaries — without
     this, a wide goal text in one card pushes the grid column
     wider and the chip can't ellipsis-truncate. */
  min-width: 0;
  /* Scope the card's stacking to itself. The card's inner layers (sections z:1,
     card-top z:5, OPTIONS row z:10, open-dropdown tier z:20-40) order WITHIN the
     card only — isolate keeps them contained so they can never paint above
     app-level overlays (modals live at z:1050). Only ONE supervisee card renders
     at a time, so there's no inter-card layering to preserve. */
  isolation: isolate;
  /* LEVEL 0 — premium AAC surface. Composed of:
     1. Layered glass background — a vertical white→cool-tint
        gradient on top of two soft radial light blobs (top-left
        verdigris hint + top-right blue hint) so the card carries
        an organic, ambient glow rather than a flat fill. Subtle
        backdrop-filter lets a hint of the page surface peek
        through, reading as glass rather than paper.
     2. Directional shadow stack with top-left bias (light source
        coming from the upper-left, casting longer shadow to the
        bottom-right). Ambient contact + mid lift + wide diffuse.
     3. Strong inset rim-light on the top edge + faint bottom
        shadow for a sculpted, almost 3D quality.
     The chromatic AAC ring (::before) and glass rim highlight
     (::after) layer on top of this for the brand identity. */
  background: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(42, 157, 143, 0.07), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 0%, rgba(76, 134, 216, 0.05), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 252, 253, 0.97) 100%);
  /* Lighter blur — keeps the glass quality but sharpens the surface
     so the card edges and content read with more crispness. */
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(27, 54, 93, 0.11);
  border-radius: var(--md-r-lg, 18px);
  padding: 20px 22px 18px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  box-shadow: -1px 1px 2px rgba(27, 54, 93, 0.04), 2px 6px 14px -2px rgba(27, 54, 93, 0.08), 0 22px 40px -10px rgba(27, 54, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.04);
}

/* Chromatic AAC-palette ring around the WHOLE card. Same conic
   gradient + mask trick as before, now on the outer container so
   the entire card surface carries the brand chromatic identity —
   header and body share one halo, no visual seam. */
.md-caseload__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--md-r-lg, 18px) + 2px);
  padding: 2px;
  background: conic-gradient(from 140deg, rgba(42, 157, 143, 0.45), rgba(76, 134, 216, 0.35), rgba(242, 185, 90, 0.3), rgba(139, 92, 246, 0.3), rgba(42, 157, 143, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  /* Reduced opacity (0.75 → 0.55) + a hair of blur so the ring
     reads as a soft chromatic glow around the card rather than a
     visible stroke that competes with the inner content. */
  opacity: 0.55;
  filter: blur(0.6px);
  transition: opacity 0.2s ease, filter 0.2s ease;
  z-index: 0;
}

.md-caseload__card:hover::before {
  opacity: 0.85;
  filter: blur(0.4px);
}

/* Glass rim highlight on the card — same top-edge white glow +
   faint bottom-edge shadow vocabulary that used to live on the
   identity-row pill, promoted to the card surface. */
.md-caseload__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--md-r-lg, 18px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(27, 54, 93, 0.06);
  pointer-events: none;
  z-index: 0;
}

.md-caseload__card > * {
  position: relative;
  z-index: 1;
}

/* Identity-row is now JUST a layout container — the chromatic ring,
   glass rim, and lift now live on the .md-caseload__card itself so
   the header and body share one unified surface. No background, no
   pill shape, no shadow here. The row groups avatar + info + access
   horizontally and stays part of the card visually. */
.md-caseload__identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 100%;
  width: 100%;
}

/* The OPTIONS dropdown ships as the 6th action tile ("More
   Actions") at every width — the standalone OPTIONS row above
   the goals section is suppressed, and the mobile-tile variant is
   always visible. The 5 role tiles (Model / Speak / Setup / Usage
   Reports / Modeling Ideas) plus More Actions = 6 tiles → 2 rows
   of 3. Grid columns: repeat(3, 1fr) for uniform width; grid rows:
   1fr so both rows share the same height. Tile-base flex/min/max
   constraints are explicitly cleared since grid sizing now drives
   layout. */
.md-caseload__options-row {
  display: none !important;
}

/* With the corner chevron hidden, the bottom-row only contains
   the goal area. The base rule uses justify-content:
   space-between (designed for goal-left + chevron-right), which
   can produce visually-skewed alignment when only one child
   remains. Force the goal chip flush to the left edge and let
   the goal area span the card width. */
.md-caseload__bottom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  /* Clip content to the goals section so long goal text can't push
     the card (or the grid track) wider. The chromatic ring on the
     card sits on .md-caseload__card::before, not on this section,
     so clipping here doesn't affect the ring. */
  overflow: hidden;
  /* LEVEL 2 — Goals is the clinical-priority section. Layered
     surface: soft verdigris radial blob at top-left + vertical
     white→tinted gradient, controlled blur on the surface for
     glass quality, directional shadow biased to match the card's
     upper-left light source. */
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: radial-gradient(ellipse 60% 70% at 0% 0%, rgba(42, 157, 143, 0.07), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(42, 157, 143, 0.06) 100%);
  /* Reduced blur — still glassy but the surface feels more
     defined against the card behind it. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(42, 157, 143, 0.28);
  box-shadow: -1px 1px 2px rgba(27, 54, 93, 0.03), 1px 4px 10px -2px rgba(42, 157, 143, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(42, 157, 143, 0.05);
  position: relative;
}

/* Eyebrow row sits inline: GOALS label on the left, count badge to
   its right. flex layout so the badge sits flush after the label
   without committing to the full goal-column width. */
.md-caseload__goal-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.md-caseload__goal-eyebrow {
  margin-right: 0;
  flex: 0 0 auto;
}

/* The More Actions wrapper sits as a grid item; stretch it to
   fill the cell and force its inner button to fill the wrapper
   so it visually matches the other tiles in both width and
   height. */
.md-caseload__actions--tiles .md-caseload__extras-dropdown--mobile {
  width: 100%;
  height: 100%;
  /* Match the rounded-rectangle tile shape (10px) — was 50%, which on a
     wider-than-tall cell rendered the More Actions tile as an ellipse. */
  border-radius: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.md-caseload__actions--tiles .md-caseload__extras-dropdown--mobile .md-caseload__action--more {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Caseload search filter — sits above the grid, mirrors the SaaS
   "rounded input with leading icon" pattern used elsewhere in the
   app. Sunken inset shadow ties it visually to the caseload tray
   surface; the clear-× appears only when text is present. */
.md-caseload__filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px 10px 42px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-caseload__filter:focus-within {
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.06), 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.md-caseload__eyebrow {
  display: block;
  margin-left: 2px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.55);
  pointer-events: none;
}

.md-caseload__filter-input,
.md-caseload__filter-input.form-control {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  color: #1B365D;
  box-shadow: none;
  outline: none;
}

.md-caseload__filter-input::placeholder {
  color: rgba(27, 54, 93, 0.45);
  font-weight: 500;
}

.md-caseload__filter-input:focus,
.md-caseload__filter-input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* ── Google Classroom-style compact student list ────────────────
   Rows of supervisees, each with an avatar, name + current goal,
   and a strip of quick-action icons (Model / Note / Assessment /
   Reports). Clicking a row sets selectedSupervisee in the
   controller, which collapses the list to that one row and expands
   the full caseload card below. The "Full List" button (rendered
   above the list when a selection is active) restores the full
   roster. */
.md-caseload__list-controls {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}

.md-caseload__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #1B365D;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-caseload__action--tile {
  box-sizing: border-box;
  /* Glass tile — pure flat white surface (no gradient cloudiness),
     near-invisible border, and a sharp inner top highlight that
     does the lift instead of any outer shadow blur. Reads as a
     piece of clear glass laid on the tray rather than a boxed
     button. Role-tint variants below layer subtle gradient/border
     color on top. */
  flex: 1 1 0;
  min-width: 5rem;
  min-height: 5rem;
  height: auto;
  padding: 8px 5px;
  flex-direction: column;
  gap: 8px;
}

/* NOTE: the legacy flat-row `.md-caseload__list-row` block that used to live
   here (display:flex; align-items:center) was removed — it duplicated the
   selector and, sitting later in the file, overrode the accordion definition
   above (flex-direction:column), forcing a horizontal row and breaking the
   header's right-alignment. The accordion rule earlier in this file is the one
   authoritative definition. */
.md-caseload__action-tile__icon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  color: inherit;
}

.md-caseload__list-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #F8F9FA;
  border: 1px solid rgba(27, 54, 93, 0.08);
}

.md-caseload__list-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.04) 0%, rgba(27, 54, 93, 0.08) 100%);
  color: #1B365D;
}

.md-caseload__list-name {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-caseload__list-goal {
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.65);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-caseload__quick-action,
a.md-caseload__quick-action {
  /* Icon-over-label tile: the SVG sits above a small caption so each action is
     self-describing without relying on the hover title. Sized to fit the widest
     label ("Reports"/"History") at 10px. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 46px;
  padding: 4px 2px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 9px;
  background: rgba(27, 54, 93, 0.02);
  color: #1B365D;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-caseload__quick-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(27, 54, 93, 0.6);
  white-space: nowrap;
}

/* Caseload hero mirrors the home SLP hero: STACKED title + subheader on separate
   rows (the base .md-slp-hero__text column layout) — same classes → same style +
   from-left/from-right motion, including the shared 32px title size. Keeps the
   base `.md-hero` top padding. */
/* Info button next to the "People you support" subheader → opens the caseload
   guide modal. Small, muted, inline after the subheader text. */
.md-caseload__guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(90, 106, 133, 0.7);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-caseload__guide-btn:hover,
.md-caseload__guide-btn:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  color: #5A6A85;
}

/* Caseload guide modal — colour-coded icon map + a highlighted "open a row"
   callout. Succinct, professional, engaging (soft brand-hue tiles per action). */
.md-caseload-guide__lead {
  margin: 0 0 18px;
  font-size: 15px;
  color: rgba(27, 54, 93, 0.7);
  line-height: 1.5;
  text-align: center;
}

.md-caseload-guide__heading {
  max-width: 400px;
  margin: 0 auto 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5A6A85;
  text-align: left;
}

.md-caseload-guide__list {
  list-style: none;
  max-width: 400px;
  margin: 0 auto 20px;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.md-caseload-guide__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.015);
  border: 1px solid rgba(27, 54, 93, 0.05);
}

.md-caseload-guide__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid transparent;
}

.md-caseload-guide__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.2;
}

.md-caseload-guide__desc {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: rgba(27, 54, 93, 0.6);
  line-height: 1.35;
}

/* Per-action icon tile colours (soft brand tints; navy-dominant icons read cleanly). */
.md-caseload-guide__item--model .md-caseload-guide__icon {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.25);
}

.md-caseload-guide__item--note .md-caseload-guide__icon {
  background: rgba(76, 134, 216, 0.12);
  border-color: rgba(76, 134, 216, 0.25);
}

.md-caseload-guide__item--assess .md-caseload-guide__icon {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.25);
}

.md-caseload-guide__item--reports .md-caseload-guide__icon {
  background: rgba(232, 122, 111, 0.14);
  border-color: rgba(232, 122, 111, 0.28);
}

.md-caseload-guide__item--eval .md-caseload-guide__icon {
  background: rgba(242, 185, 90, 0.16);
  border-color: rgba(242, 185, 90, 0.3);
}

.md-caseload-guide__item--history .md-caseload-guide__icon {
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.25);
}

/* Highlighted "open a communicator" callout. */
.md-caseload-guide__callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.1) 0%, rgba(76, 134, 216, 0.1) 100%);
  border: 1px solid rgba(42, 157, 143, 0.2);
}

.md-caseload-guide__callout-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffffff;
  color: #1A7B7A;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.08);
}

.md-caseload-guide__callout-title {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #1B365D;
}

.md-caseload-guide__callout-desc {
  margin: 0;
  font-size: 13.5px;
  color: rgba(27, 54, 93, 0.68);
  line-height: 1.45;
}

/* Per-action colour scheme — same brand hues as the caseload guide modal so the
   row icons read as a colour-coded palette (soft tints; navy-dominant icons stay
   crisp). Model/Assess verdigris, Note denim, Reports coral, Eval honey, History
   slate. */
.md-caseload__quick-action.md-caseload__quick-action--model,
.md-caseload__quick-action.md-caseload__quick-action--assess {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.22);
}

.md-caseload__quick-action.md-caseload__quick-action--note {
  background: rgba(76, 134, 216, 0.1);
  border-color: rgba(76, 134, 216, 0.22);
}

.md-caseload__quick-action.md-caseload__quick-action--reports {
  background: rgba(232, 122, 111, 0.12);
  border-color: rgba(232, 122, 111, 0.24);
}

/* Honey-bronze = the header eval SLOT accent (position style). It stays on
   whichever eval action sits in that slot — now Run Evaluation (--run-eval). */
.md-caseload__quick-action.md-caseload__quick-action--eval-quick,
.md-caseload__quick-action.md-caseload__quick-action--run-eval {
  background: rgba(242, 185, 90, 0.14);
  border-color: rgba(242, 185, 90, 0.26);
}

.md-caseload__quick-action.md-caseload__quick-action--eval-history {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.22);
}

/* Neutral lift on hover so each button keeps its own colour (no verdigris wash). */
.md-caseload__quick-action:hover,
a.md-caseload__quick-action:hover,
.md-caseload__quick-action:focus-visible {
  border-color: rgba(27, 54, 93, 0.28);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.1);
  text-decoration: none;
}

.md-caseload__card {
  /* min-width: 0 lets the card honor its 1fr grid track instead of
     growing to fit min-content of long goal summaries — without
     this, a wide goal text in one card pushes the grid column
     wider and the chip can't ellipsis-truncate. */
  min-width: 0;
  /* Scope the card's stacking to itself. The card's inner layers (sections z:1,
     card-top z:5, OPTIONS row z:10, open-dropdown tier z:20-40) order WITHIN the
     card only — isolate keeps them contained so they can never paint above
     app-level overlays (modals live at z:1050). Only ONE supervisee card renders
     at a time, so there's no inter-card layering to preserve. */
  isolation: isolate;
  /* LEVEL 0 — premium AAC surface. Composed of:
     1. Layered glass background — a vertical white→cool-tint
        gradient on top of two soft radial light blobs (top-left
        verdigris hint + top-right blue hint) so the card carries
        an organic, ambient glow rather than a flat fill. Subtle
        backdrop-filter lets a hint of the page surface peek
        through, reading as glass rather than paper.
     2. Directional shadow stack with top-left bias (light source
        coming from the upper-left, casting longer shadow to the
        bottom-right). Ambient contact + mid lift + wide diffuse.
     3. Strong inset rim-light on the top edge + faint bottom
        shadow for a sculpted, almost 3D quality.
     The chromatic AAC ring (::before) and glass rim highlight
     (::after) layer on top of this for the brand identity. */
  background: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(42, 157, 143, 0.07), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 0%, rgba(76, 134, 216, 0.05), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 252, 253, 0.97) 100%);
  /* Lighter blur — keeps the glass quality but sharpens the surface
     so the card edges and content read with more crispness. */
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(27, 54, 93, 0.11);
  border-radius: var(--md-r-lg, 18px);
  padding: 20px 22px 18px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.md-caseload__card:hover {
  border-color: rgba(27, 54, 93, 0.1);
  /* Hover deepens the shadow but does NOT use `transform` to lift
     the card — transform creates a new containing block for any
     absolutely-positioned descendant, which clips the Bootstrap
     dropdown-menu under "OPTIONS" against the card edge. The
     shadow-only treatment still reads as elevated. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 8px 16px rgba(27, 54, 93, 0.08), 0 28px 48px -10px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.md-caseload__card-top {
  display: flex;
  flex-wrap: wrap;
  /* Align children to the top of the row so the chevron lines up
     with the View & edit badge (the first line of info), not with
     the vertical center of the avatar+info stack. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  /* Border-bottom divider removed — the identity-row pill +
     half-divider above the goals section already carry enough
     separation between the header and the body. */
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  /* Raise card-top's stacking context above the action-tiles
     sibling so the OPTIONS dropdown menu (nested inside card-top
     → options-row) paints on top of the tiles. The card's
     `> * { z-index: 1 }` rule put card-top and action-tiles at
     the same z:1; the later-painted action-tiles row would
     otherwise win and clip the open dropdown. */
  position: relative;
  z-index: 5;
  /* Required for the truncation chain so long goal text doesn't
     push card-top wider than its grid track. */
  min-width: 0;
  width: 100%;
}

.md-caseload__card-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.md-caseload__card-corner {
  margin-top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Vertically center the ACCESS label + badge column relative to
     the avatar/name block on the left. The parent card-top uses
     align-items: flex-start (so the wrapped bottom-row stays at
     the bottom of its own flex line); align-self overrides that
     on this column only so the access group reads as a right-
     center pairing with the avatar+info instead of pinning to
     the top corner. Applies at every viewport. */
  align-self: center;
}

/* ACCESS group — small uppercase label above the access badge,
   pinned to the top-right corner of the card. Mirrors the eyebrow
   pattern over the username on the left side so both columns share
   one hierarchy language. */
.md-caseload__access {
  display: flex;
  flex-direction: column;
  /* Center the ACCESS eyebrow over the badge below it — reads as
     a labeled status pill (eyebrow → pill in vertical alignment)
     rather than two right-edge-pinned siblings. */
  align-items: center;
  gap: 5px;
  padding-right: 2px;
}

/* Full-width bottom row inside .md-caseload__card-top —
   `flex-basis: 100%` makes it wrap to its own line within the
   flex-wrapping card-top so the goal chip sits at the LEFT edge of
   the card and the chevron at the RIGHT edge, ABOVE the card-top
   border-bottom divider. */
.md-caseload__bottom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  /* Clip content to the goals section so long goal text can't push
     the card (or the grid track) wider. The chromatic ring on the
     card sits on .md-caseload__card::before, not on this section,
     so clipping here doesn't affect the ring. */
  overflow: hidden;
  /* LEVEL 2 — Goals is the clinical-priority section. Layered
     surface: soft verdigris radial blob at top-left + vertical
     white→tinted gradient, controlled blur on the surface for
     glass quality, directional shadow biased to match the card's
     upper-left light source. */
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: radial-gradient(ellipse 60% 70% at 0% 0%, rgba(42, 157, 143, 0.07), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(42, 157, 143, 0.06) 100%);
  /* Reduced blur — still glassy but the surface feels more
     defined against the card behind it. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(42, 157, 143, 0.28);
  box-shadow: -1px 1px 2px rgba(27, 54, 93, 0.03), 1px 4px 10px -2px rgba(42, 157, 143, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(42, 157, 143, 0.05);
  position: relative;
}

/* Divider above the goals section removed — the identity-row pill
   above already provides enough visual separation from the goals
   row below; an extra line was reading as noise. */
/* Options row — full-width flex container that horizontally
   centers the OPTIONS ▾ dropdown trigger on the card. Sits between
   the identity header and the goals section so the controls have a
   clear visual anchor regardless of card width. */
.md-caseload__options-row {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-basis: 100%;
  /* Raise the OPTIONS row above the action tiles below it. The
     card's `> * { z-index: 1 }` rule put every section at z:1,
     so the later-painted action-tiles row rendered ON TOP of the
     OPTIONS dropdown menu. z:10 here keeps the dropdown menu
     visually on top whenever it's open. */
  position: relative;
  z-index: 10;
}

/* Top row of the goals section: GOALS eyebrow + count on the LEFT,
   "+ Add goal" CTA pinned to the RIGHT. justify-content:
   space-between drives the split; align-items: center keeps the
   eyebrow text vertically aligned with the CTA pill. */
.md-caseload__goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* Pill-style count chip — small, low-contrast circle of digits next
   to the GOALS eyebrow. Mirrors patterns like Stripe / Linear count
   pills: tight padding, semantic navy tint, monospace numeric weight
   so the digit reads as a count rather than free text. */
.md-caseload__goal-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.md-caseload__bottom-row__goal {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  /* Now that the OPTIONS dropdown lives in the ACCESS column above,
     the goals row is exclusively clinical content and can span
     the full width of its parent section. */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Wider gap between the GOALS eyebrow and the chip below it —
     premium pages give labels space to breathe rather than
     stacking them tight against their content. */
  gap: 12px;
}

/* Chip stretches to fill the 75% goal column so the bottom edge of
   the chip lines up with the divider above it. */
.md-caseload__bottom-row__goal .md-caseload__goal-row {
  width: 100%;
  max-width: 100%;
}

.md-caseload__access-eyebrow,
.md-caseload__goal-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.108em;
  line-height: 1;
  margin-right: 2px;
}

/* OPTIONS column: holds the fused OPTIONS ▾ dropdown trigger.
   align-self: stretch + justify-content: flex-end keeps the
   trigger bottom-aligned with the goal chip on the opposite side
   of the row. */
.md-caseload__extras-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  flex: 0 0 auto;
}

/* Multi-goal expandable list — native <details>/<summary> so no JS
   state is needed. Strips the default disclosure marker and uses
   the same sunken chip surface as the single-goal row. Clicking
   the summary expands a stacked list of all active goals. */
/* Higher specificity (details + class) so this rule wins over the
   later .md-caseload__goal-row base rule that defines the chip
   padding/border/background. display: contents removes the
   <details> element's own box from the layout entirely — only its
   children (<summary> + <ul>) render as visible boxes, so there is
   no "outer container" wrapping the chip. open/close behavior
   still works because <details>[open] is a state, not a box
   requirement. */
details.md-caseload__goal-row--list {
  display: contents;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 0;
}

.md-caseload__goal-row--list > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Match the unified .md-caseload__goal-row chip dimensions so the
     <details>/<summary> chip is visually identical to the single-goal
     chip — same padding, height, border radius. The hard width
     constraints + overflow on the parent details element force the
     inner goal text to ellipsis-truncate rather than push the chip
     wider than its column. */
  padding: 10px 14px;
  min-height: 52px;
  /* Glass surface — mirrors the landing-alt "Why LingoLinq"
     eyebrow pill (.la-section-eyebrow-badge): teal tint with
     backdrop-filter blur, teal border, soft teal lift shadow.
     Layered on a subtle gradient + inset top highlight to give the
     surface a true glass-rim quality (the parent's own
     backdrop-filter blocks the chip's blur from rendering, so we
     simulate the glass quality with explicit layering). */
  background: linear-gradient(180deg, rgba(20, 127, 130, 0.05) 0%, rgba(20, 127, 130, 0.11) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(20, 127, 130, 0.28);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 10px rgba(20, 127, 130, 0.1);
}

.md-caseload__goal-row--list > summary::-webkit-details-marker {
  display: none;
}

.md-caseload__goal-row--list > summary::marker {
  content: "";
}

.md-caseload__goal-summary {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
}

/* Goal text inside the summary should consume available width so
   the Primary pill + chevron stay flush against the right edge. */
.md-caseload__goal-summary .md-caseload__goal {
  flex: 1;
  min-width: 0;
}

.md-caseload__goal-row__chevron {
  flex-shrink: 0;
  /* Pinned to the right edge of the chip — margin-left: auto pushes
     it past any Primary pill that sits between the goal text and
     the chevron, so the chevron always reads as the affordance for
     the whole chip. */
  margin-left: auto;
  display: inline-flex;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.15s ease;
}

/* Goal metadata cluster — groups the Status pill and the Primary
   pill on the right of the goal text so they read as a single,
   intentional metadata block rather than floating siblings. */
.md-caseload__goal-tags {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* In the goal-set single-goal chip, the tags cluster takes the
   margin-left: auto from .md-caseload__goal-tags above; we don't
   need the legacy margin-left: auto on .md-caseload__goal-primary-tag
   anymore inside this cluster. */
.md-caseload__goal-tags .md-caseload__goal-primary-tag,
.md-caseload__goal-tags .md-caseload__goal-status-tag {
  margin-left: 0;
}

/* Status pill — small uppercase pill that mirrors the bullet
   color so the row reads as "this is its current state". Same
   typographic system as the Primary pill (10px / 0.08em / 700
   weight / 999px radius) so the two badges read as a matched
   set. Color variants below carry the semantic state. */
.md-caseload__goal-status-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.2;
  user-select: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Status tag colors — all four variants pass WCAG AA (4.5:1) for
   small text against the chip background. The honey-bronze tint
   was too light against the previous -28% darkened amber text
   (~3.9:1, fails small-text AA) so the in_progress text is now
   pulled down to a deeper roasted-amber; the other variants are
   nudged in step for visual consistency. AAC accessibility is a
   first-class concern, so these run AA at minimum. */
.md-caseload__goal-status-tag--active {
  /* deep teal text on light verdigris tint — ~7:1 (AAA small) */
  color: #0F5957;
  background: rgba(42, 157, 143, 0.14);
  border-color: rgba(42, 157, 143, 0.3);
}

.md-caseload__goal-status-tag--in_progress {
  /* deep roasted amber on light honey tint — ~7.5:1 (AAA small).
     Was color.adjust(-28%) ≈ #B07A1A which only hit ~3.9:1. */
  color: #6B4200;
  background: rgba(242, 185, 90, 0.22);
  border-color: rgba(242, 185, 90, 0.4);
}

.md-caseload__goal-status-tag--achieved {
  /* Slightly deeper / "celebratory" verdigris so achieved reads
     distinct from active. Saturated emerald text passes AAA. */
  color: #0B4A48;
  background: rgba(42, 157, 143, 0.22);
  border-color: rgba(42, 157, 143, 0.42);
}

.md-caseload__goal-status-tag--paused {
  /* deep slate on light slate tint — ~7.5:1 (AAA small). Was
     $brand-slate-gray (#6B7280) on a 10% slate bg, ~4.4:1. */
  color: #374151;
  background: rgba(107, 114, 128, 0.12);
  border-color: rgba(107, 114, 128, 0.28);
}

/* Multi-goal list bullet variants — match the .md-caseload__goal
   bullet vocabulary: fill carries the status color, outline is a
   neutral gray hairline for uniform edge definition. */
.md-caseload__goal-list__dot {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal-list__dot--in_progress {
  background: #F2B95A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal-list__dot--achieved {
  background: rgb(48.4582914573, 181.1417085427, 164.9889447236);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal-list__dot--paused {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(107, 114, 128, 0.6), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

/* "Primary" tag — small uppercase pill marking which active goal
   is the user's designated primary. Soft verdigris fill so it
   reads as part of the goals-section color family (matches the
   chip's verdigris border + gradient). Used in both the
   collapsed summary chip and the expanded list rows. */
.md-caseload__goal-primary-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(22.6251256281, 84.5748743719, 77.0331658291);
  background: rgba(42, 157, 143, 0.16);
  border: 1px solid rgba(42, 157, 143, 0.3);
  border-radius: 999px;
  line-height: 1.2;
  user-select: none;
}

/* In the goal-set single-goal chip, push the Primary pill flush
   right of the goal text the same way the chevron does inside the
   summary chip. */
.md-caseload__goal-row .md-caseload__goal-primary-tag {
  margin-left: auto;
}

/* Expanded-list rows can show a Primary tag too — flush right of
   the goal text, vertically centered. */
.md-caseload__goal-list__item .md-caseload__goal-primary-tag {
  margin-left: auto;
  align-self: center;
}

.md-caseload__goal-row--list[open] > summary .md-caseload__goal-row__chevron {
  transform: rotate(180deg);
}

.md-caseload__goal-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-caseload__goal-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.4;
}

.md-caseload__goal-list__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  /* Default = active = soft blue (matches the .md-caseload__goal
     status-bullet system above). */
  background: #4C86D8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

/* Status variants — compound selectors so the variant backgrounds
   always win over the base rule regardless of source-order tie.
   Color taxonomy mirrors the summary chip's status bullet system:
     active       → blue
     in_progress  → amber
     achieved     → emerald green
     paused       → gray hollow ring */
.md-caseload__goal-list__dot.md-caseload__goal-list__dot--active {
  background: #4C86D8;
}

.md-caseload__goal-list__dot.md-caseload__goal-list__dot--in_progress {
  background: #F2B95A;
}

.md-caseload__goal-list__dot.md-caseload__goal-list__dot--achieved {
  background: #16a34a;
}

.md-caseload__goal-list__dot.md-caseload__goal-list__dot--paused {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(107, 114, 128, 0.55), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal-list__text {
  flex: 1;
  min-width: 0;
}

/* Link variant of the goal-list text — rendered when the supporter
   has edit permission. Keeps the slate body color at rest and uses
   a quiet underline + deeper navy on hover/focus so the affordance
   reads as "open this goal to edit" without competing with the
   clinical Primary/Status pills next to it. */
.md-caseload__goal-list__link,
a.md-caseload__goal-list__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

.md-caseload__goal-list__link:hover,
.md-caseload__goal-list__link:focus-visible {
  color: rgba(27, 54, 93, 0.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(26, 123, 122, 0.55);
}

.md-caseload__goal-list__link:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Refined avatar treatment — flatter ring, soft surface fallback,
   subtle shadow so the photo (or default placeholder) reads as a
   modern profile chip rather than a raw <img>. */
/* Modern avatar treatment — soft gradient surface inside a clean
   circular frame with a thin inner ring + outer lift shadow. The
   internal padding (via box-shadow inset on .md-caseload__avatar)
   keeps the supervisee image from touching the edge of the circle,
   which removes the clip-art-y look of the default placeholder. */
/* Glassmorphism avatar — same visual language as the eyebrow/glass
   badges (white→teal gradient + backdrop blur + inset highlight +
   teal glow). Reads as a refined product-grade profile chip rather
   than a generic ring around an icon. */
/* Polished glass avatar — multi-layer treatment that mirrors how
   Apple Account / Stripe / Linear render profile chips:
   1. Layered conic-then-radial gradient surface so the chip has
      depth (highlight at top-left, deeper tint at bottom-right)
   2. Backdrop blur for true glass look
   3. Two-color border (white inner ring + soft navy outer hint)
   4. Layered shadows: ambient + tight contact + soft glow */
/* Premium identity-node avatar — composed of three subtle layers:
   1. Soft teal→blue gradient ring drawn via ::before (matches the
      AAC chromatic identity established by the card border without
      duplicating its full conic palette).
   2. Inset top-light highlight + soft inner shadow on ::after for
      sculpted depth, so the avatar circle reads as a domed surface
      rather than a flat disc.
   3. Outer ambient halo via box-shadow stack — light teal glow +
      tight contact shadow so the avatar lifts off the identity
      row.
   The SVG fallback inside still carries its own baked-in shadow
   and composition; these layers sit OUTSIDE the SVG to enrich the
   avatar regardless of whether a real photo or the SVG glyph is
   rendered. */
.md-caseload__avatar-link {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  border: none;
  overflow: visible;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.05), 0 0 0 4px rgba(76, 134, 216, 0.035), 0 1px 2px rgba(27, 54, 93, 0.07), 0 6px 14px -4px rgba(27, 54, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -2px 4px rgba(42, 157, 143, 0.04);
  transition: box-shadow 0.2s ease;
}

/* Subtle teal→blue gradient ring at the avatar's edge, rendered as
   a thin halo via mask trick. Sits between the SVG and the outer
   glow so the avatar reads as anchored to the AAC color system
   without being a hard-stroke border. */
.md-caseload__avatar-link::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.45) 0%, rgba(76, 134, 216, 0.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
  z-index: 0;
}

/* Inner glass rim highlight — thin top-edge white catch + faint
   bottom-edge navy shadow gives the disc a domed, lit-from-above
   quality. */
.md-caseload__avatar-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.9), inset 0 -1.5px 2px rgba(27, 54, 93, 0.06);
  pointer-events: none;
  z-index: 2;
}

/* Hover state — when the parent card is hovered, the avatar's
   gradient ring brightens and the ambient glow deepens. Scoped
   to the card hover so the whole identity node responds in
   sync, not just the avatar on hover. */
.md-caseload__card:hover .md-caseload__avatar-link {
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.08), 0 0 0 4px rgba(76, 134, 216, 0.05), 0 2px 4px rgba(27, 54, 93, 0.09), 0 8px 18px -4px rgba(27, 54, 93, 0.15), inset 0 1px 0 rgb(255, 255, 255), inset 0 -2px 4px rgba(42, 157, 143, 0.06);
}

.md-caseload__card:hover .md-caseload__avatar-link::before {
  opacity: 0.78;
}

.md-caseload__avatar-link svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.md-caseload__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* SVG variant — modern two-tone person glyph rendered when the
   supervisee has no real uploaded avatar (legacy default PNGs are
   detected via {{is-default-avatar}}). Sizes slightly smaller than
   the photo variant so the figure has comfortable breathing room
   inside the gradient circle. */
.md-caseload__avatar--svg {
  /* Apple "person.crop.circle.fill" style — full-bleed inside the
     avatar frame so the silhouette dominates the card hierarchy.
     Default state: hidden. CSS :has() rule below shows it when the
     <img> sibling points at a legacy /avatars/avatar-N.png default. */
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Caseload card avatar — KEEPS the inline SVG fallback. Every
   other avatar surface in the app now uses the redesigned colored
   PNGs in public/avatars/, but the big card on the caseload page
   intentionally renders the teal LingoLinq SVG composition so the
   primary supervisee identity stays visually consistent across all
   communicators. The :has() rule below hides the <img> and shows
   the .md-caseload__avatar--svg element from the template whenever
   the src is a placeholder `/avatars/avatar-N.png`. */
.md-caseload__avatar-link:has(img.md-caseload__avatar[src*="/avatars/avatar-"]) img.md-caseload__avatar {
  display: none !important;
}

.md-caseload__avatar-link:has(img.md-caseload__avatar[src*="/avatars/avatar-"]) {
  /* LingoLinq communicator avatar — concentric clean composition:
     soft mint-blue outer gradient, white inner ring, soft inner
     panel circle, brand teal head, brand teal→navy torso. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='16' y1='10' x2='80' y2='88' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F8FCFF'/%3E%3Cstop offset='0.55' stop-color='%23EAF5F4'/%3E%3Cstop offset='1' stop-color='%23EEF1FF'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='28' y1='24' x2='70' y2='74' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F7FBFF'/%3E%3Cstop offset='1' stop-color='%23E5ECF4'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='35' y1='30' x2='64' y2='69' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235BAEA4'/%3E%3Cstop offset='1' stop-color='%23222A4F'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%231F2A4D' flood-opacity='0.14'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='48' cy='48' r='42' fill='url(/%23b)' filter='url(/%23s)'/%3E%3Ccircle cx='48' cy='48' r='40.75' fill='none' stroke='%23FFFFFF' stroke-opacity='0.85' stroke-width='2'/%3E%3Ccircle cx='48' cy='48' r='25' fill='url(/%23i)' stroke='%23E8EEF4' stroke-width='1' stroke-opacity='0.7'/%3E%3Ccircle cx='48' cy='38.5' r='8.5' fill='%235BAEA4'/%3E%3Cpath d='M31.8 62.5C34.6 53.8 40.7 49.7 48 49.7C55.3 49.7 61.4 53.8 64.2 62.5C60.5 65.8 55 67.7 48 67.7C41 67.7 35.5 65.8 31.8 62.5Z' fill='url(/%23m)'/%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.md-caseload__avatar-link:has(img.md-caseload__avatar[src*="/avatars/avatar-"]) img.md-caseload__avatar {
  display: none !important;
}

.md-caseload__avatar-link:has(img.md-caseload__avatar[src*="/avatars/avatar-"]) svg.md-caseload__avatar--svg {
  display: block !important;
}

.md-caseload__online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #2A9D8F;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
}

/* Tight identity block: name, badge, and goal row read as a single
   compact stack rather than three separated rows. */
.md-caseload__info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Tight rhythm: name is the visual anchor at the top, role
     caption sits right beneath it as a quiet sub-label — Apple
     Account / Linear profile-row hierarchy. */
  gap: 2px;
}

/* Quiet role caption beneath the username. Mixed-case, normal
   tracking, muted slate — the OPPOSITE of an eyebrow. Reads as
   "person's role" without competing for attention. The legacy
   .md-caseload__eyebrow (uppercase) is kept around for any other
   page that still uses it. */
.md-caseload__role {
  display: block;
  margin-left: 2px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.7);
  line-height: 1.2;
  letter-spacing: 0;
}

.md-caseload__eyebrow {
  display: block;
  margin-left: 2px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.108em;
  line-height: 1;
}

.md-caseload__name-line {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.md-caseload__name-line .md-caseload__name {
  flex: 1 1 auto;
  min-width: 0;
}

.md-caseload__name-line .md-caseload__access-badge {
  flex: 0 0 auto;
}

/* Informational status tag — explicitly NOT a button. Mirrors how
   Apple Account ("Verified", "Trusted") and AWS Console ("Active",
   "MFA enabled") render purely-informational chips:
   - Small rounded rectangle (not a full pill — pills imply
     pressable; rectangles read as labels)
   - Tight uppercase tracking + a small leading dot indicator
   - Solid muted tint, no shadow, no border-glow, no backdrop blur
   - 14px text floor (project a11y minimum) with reduced visual
     weight via letter-spacing rather than smaller size */
/* Read-only status badge — Editor / Viewer / Modeling. Explicitly
   NOT a button: smaller font, lighter weight, no hover state, no
   shadow, no border, soft tinted pill background. Reads as
   informational metadata about the relationship, the way Notion /
   Linear / Figma render "Owner" / "Editor" / "Commenter" labels
   next to collaborator names. */
.md-caseload__access-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  border: none;
  letter-spacing: 0.01em;
  cursor: default;
  user-select: none;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-transform: none;
}

/* Variant tints — soft, low-saturation backgrounds with muted text.
   Color carries the semantic meaning quietly:
   - Editor   → blue/teal (active permissions)
   - Viewer   → gray (read-only)
   - Modeling → amber (limited / specialized) */
.md-caseload__access-badge--edit {
  color: #1f5b8a;
  background: rgba(76, 134, 216, 0.1);
}

.md-caseload__access-badge--view {
  color: #5a6678;
  background: rgba(27, 54, 93, 0.06);
}

.md-caseload__access-badge--modeling {
  color: #8a6a14;
  background: rgba(240, 196, 25, 0.12);
}

.md-caseload__name {
  display: block;
  margin-left: 2px;
  /* Premium SaaS hierarchy (Apple Account / AWS Console): pair a
     small uppercase eyebrow above with a larger, bolder name below.
     Tight tracking + heavier weight gives the username gravitas
     without resorting to gradients or decorative accents. */
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
  text-decoration: none;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.md-caseload__name:hover {
  color: #2A9D8F;
  text-decoration: none;
}

/* Caseload card squeezes at ≤1200px once the layout collapses to a
   single column. Drop the communicator name to 18px at the
   breakpoint and let it scale down linearly with viewport width to
   a 14px floor — anchored so 1200px → 18 and 320px → 14. The
   clamp + calc wrapper keeps SassC happy with the mixed px/vw
   middle expression (per docs/CSS_SCSS_GUIDELINES.md). */
@media (max-width: 1200px) {
  .md-caseload__name {
    font-size: clamp(14px, 12.55px + 0.4545vw, 18px) !important;
  }
}
.md-caseload__goal {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  /* Final pass: bumped to navy at 92% opacity (was charcoal-dark)
     for AAC-grade readability on the verdigris chip. Weight 700
     so the text holds at a glance for clinical scanning. */
  font-weight: 700;
  color: rgba(27, 54, 93, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  /* The status-bullet `::before` dot has a 1px outset box-shadow as
     its dark outline. Without left padding, the span's overflow:
     hidden (needed for text-overflow ellipsis) clips that 1px
     outline on the dot's left edge. 1px of left padding gives the
     outline room to render fully. */
  padding-left: 1px;
}

/* Status bullet before each goal — DEFAULT (active) is verdigris.
   Status modifiers below let the bullet flex into a true status
   indicator once the backend exposes goal state. The inline-block
   placement keeps it flowing with the text and respecting ellipsis
   truncation on the parent.
   Status taxonomy — modifier class names match the backend's
   status values verbatim (snake_case), so `g.status === 'in_progress'`
   renders class `md-caseload__goal--status-in_progress`:
     default               → active     (verdigris, solid)
     --status-in_progress  → in progress (amber, solid)
     --status-achieved     → achieved   (verdigris, ringed/checked look)
     --status-paused       → paused     (slate, hollow ring) */
/* Status-bullet color system — each color carries its own
   semantic meaning so the dot reads at a glance independent of
   the status pill text:
     active       → blue   ("currently being worked on, no
                            milestone marked yet")
     in_progress  → amber  ("active progress logged recently")
     achieved     → green  ("✓ done — milestone reached")
     paused       → gray   ("not currently active")
   Active and in_progress are intentionally DIFFERENT colors so
   the dot communicates more than the pill (which can also lag
   behind reality). Green is reserved exclusively for achieved
   so it always reads as the "done" state. */
.md-caseload__goal::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  margin-bottom: 2px;
  border-radius: 50%;
  /* Default = active = soft blue. */
  background: #4C86D8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal--empty::before {
  display: none;
}

.md-caseload__goal--status-active::before {
  background: #4C86D8;
}

.md-caseload__goal--status-in_progress::before {
  background: #F2B95A;
}

.md-caseload__goal--status-achieved::before {
  /* Saturated emerald — reads unmistakably as "done". */
  background: #16a34a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal--status-paused::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(107, 114, 128, 0.55), 0 0 0 1px rgba(27, 54, 93, 0.55);
}

.md-caseload__goal--empty {
  color: #8a93a3;
  font-style: normal;
  font-weight: 500;
}

/* Goal row: empty-state label + Add-goal action, wrapped in a soft
   chip container so the pair reads as a single grouped status
   element rather than two free-floating items. Subtle navy tint
   surface + thin border keeps it quiet relative to View & edit
   and the action tiles. */
/* Unified goal-row container — both populated and empty states
   share ONE base surface vocabulary so they read as two states of
   the same component, not two different components. The only
   structural differences are:
     - border style: solid (populated) vs dashed (empty)
     - subtle emphasis tint via a slightly stronger verdigris fade
       in the empty state to signal "needs attention"
   Padding, radius, layered shadow, and inset top highlight are
   identical so the two states sit on the same surface family. */
.md-caseload__goal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  /* Chip stretches to fill its column so every card has the same
     goal-row width regardless of goal text length. Long goal
     summaries truncate via the .md-caseload__goal text-overflow
     rule below — they no longer push the chip wider. */
  width: 100%;
  max-width: 100%;
  /* Padding + min-height combined keep BOTH states the same
     overall height. Empty-state contains the taller Add Goal CTA
     pill; populated state contains just text. min-height locks
     them to a matching footprint so two cards side-by-side don't
     have different goal-row heights. */
  padding: 10px 14px;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0.12) 100%);
  /* Final pass — border opacity 0.42 → 0.55 for sharper edge
     definition; the chip now reads as a deliberately framed
     surface rather than softly fading into the card. */
  border: 1.5px solid rgba(42, 157, 143, 0.55);
  box-shadow: 0 1px 2px rgba(42, 157, 143, 0.08), 0 2px 6px -2px rgba(42, 157, 143, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Empty-state variant — same surface, just a dashed border + a
   slightly more saturated tint to read as "action needed". The
   inner Add-Goal pill carries the actual CTA weight. */
.md-caseload__goal-row:has(.md-caseload__goal--empty) {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.06) 0%, rgba(42, 157, 143, 0.16) 100%);
  border-style: dashed;
  border-color: rgba(42, 157, 143, 0.5);
}

.md-caseload__goal-row:has(.md-caseload__goal--empty):hover {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0.24) 100%);
  border-color: rgba(42, 157, 143, 0.7);
  box-shadow: 0 2px 4px rgba(42, 157, 143, 0.12), 0 8px 20px -4px rgba(42, 157, 143, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.md-caseload__goal-row .md-caseload__goal {
  flex: 0 1 auto;
  margin: 0;
}

/* Add-Goal is the primary CTA for the empty goal state — solid
   verdigris pill with white text so it reads as deliberate
   clinical work the supporter is invited to do, not an optional
   afterthought. Replaces the previous "subtle text link"
   treatment; the chip-level dashed border + gradient already
   announce the empty-state, so the inner button needs to be the
   action surface. */
.md-caseload__goal-row .md-caseload__goal-add {
  /* Vertical separator removed — the Add Goal button is now its
     own elevated CTA pill with a clear outline and gradient, so a
     left-edge divider was reading as visual noise between the
     "No goal set" label and the button. */
  position: relative;
}

/* Add Goal button — same blue treatment as the Speak action tile
   (.md-caseload__action--speak / --tile base): white→dusty-denim
   gradient, blue border, layered drop shadow + inset top
   highlight, blue-tinted hover. Same visual weight and tone as
   the Speak tile so the empty-state CTA reads as a paired action
   from the same family. */
.md-caseload__goal-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  margin: 0;
  border: 1px solid rgba(76, 134, 216, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.14) 100%);
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 8px -2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.md-caseload__goal-add:hover,
.md-caseload__goal-add:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.26) 100%);
  border-color: rgba(76, 134, 216, 0.48);
  color: #374151;
  outline: none;
  box-shadow: 0 2px 4px rgba(76, 134, 216, 0.1), 0 8px 16px -4px rgba(76, 134, 216, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

.md-caseload__goal-add:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 1px 2px rgba(76, 134, 216, 0.14);
}

.md-caseload__goal-add svg {
  flex-shrink: 0;
  stroke: #4C86D8;
}

.md-caseload__goal-hint {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: #6B7280;
  font-size: 14px;
  white-space: normal;
  line-height: 1.4;
}

.md-caseload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.md-caseload__actions--tiles {
  gap: 8px;
  align-items: stretch;
  /* LEVEL 3 — supporting tools tray. Layered sunken surface +
     hairline edge so the recess has crisp definition where it
     meets the card. The 1px border at low opacity gives the eye
     a clean edge without competing with the inset shadows. */
  margin-top: 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.07);
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(27, 54, 93, 0.025), transparent 60%), linear-gradient(180deg, rgba(27, 54, 93, 0.04) 0%, rgba(27, 54, 93, 0.02) 100%);
  box-shadow: inset 0 1px 3px rgba(27, 54, 93, 0.08), inset 1px 1px 2px rgba(27, 54, 93, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

.md-caseload__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 42px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.md-caseload__action--tile {
  box-sizing: border-box;
  /* Glass tile — pure flat white surface (no gradient cloudiness),
     near-invisible border, and a sharp inner top highlight that
     does the lift instead of any outer shadow blur. Reads as a
     piece of clear glass laid on the tray rather than a boxed
     button. Role-tint variants below layer subtle gradient/border
     color on top. */
  flex: 1 1 0;
  min-width: 5rem;
  min-height: 5rem;
  height: auto;
  padding: 8px 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: normal;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.03);
  background: #ffffff;
  line-height: 1.2;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 1px rgba(27, 54, 93, 0.04);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.md-caseload__action--tile:hover {
  /* Lift only — NO background here. Each tile darkens its OWN gradient via its
     per-color :hover (--speak/--setup/--eval/--ideas/--account/--history);
     this previously forced a white bg that overrode them. */
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 6px -2px rgba(27, 54, 93, 0.06);
  transform: translateY(-1px);
}

.md-caseload__action--tile:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.08), 0 1px 1px rgba(27, 54, 93, 0.03);
}

/* Role-based color identity — each action carries its own accent
   so the row reads as a deliberate, semantic toolbar rather than
   five identical buttons. Subtle by default (faint gradient + role-
   tinted bottom edge), stronger on hover (gradient deepens + border
   picks up the role color). Icon accent colors are set inline on
   the SVGs in the template.
   - Model    → teal      ($brand-verdigris)
   - Speak    → blue      ($brand-dusty-denim)
   - Setup    → violet    (#8B5CF6)
   - Reports  → slate     ($brand-slate-blue)
   - Ideas    → amber     ($brand-honey-bronze)
   The active --primary tile keeps its full glass-teal treatment;
   the --model class below adds nothing on top so it doesn't fight
   with --primary. */
/* Role color system — controlled hierarchy, not muddy tints.
   Strategy:
     - Tints use deliberate "hue-anchored" hex colors (not pure
       brand colors mixed into white) so each tile carries clean
       chroma instead of washed-out pastel.
     - Gradient TOP is barely tinted (1% of role hue) instead of
       pure #fff so the gradient direction reads as
       "color-on-color" not "white-fading-to-color" — eliminates
       the muddy mid-grey transition zone.
     - Border opacity bumped (22→35 rest, 48→62 hover) so each
       tile feels confidently colored at rest, not whispered.
     - Hover values stay punchy (~2× the resting tint) so the
       interaction reads as deliberate.
   Hierarchy:
     Model    → teal      (PRIMARY — full glass tile, separate rule)
     Speak    → blue      (communication)
     Setup    → violet    (user/admin)
     Reports  → terracotta (data — warm coral from $la-cta-gradient)
     Ideas    → amber     (guidance) */
/* Role color tints — kept the gradient floor so the chroma still
   reads, but borders dropped (35→18, 45→24) and outer drop
   shadows replaced with crisp inset highlights so the tiles feel
   lighter and more "floating". Hover restores a punchier border
   + a single crisp colored contact shadow. */
.md-caseload__action--speak {
  background: linear-gradient(180deg, rgba(76, 134, 216, 0.04) 0%, rgba(76, 134, 216, 0.16) 100%);
  border-color: rgba(76, 134, 216, 0.18);
}

.md-caseload__action--speak:hover {
  background: linear-gradient(180deg, rgba(76, 134, 216, 0.06) 0%, rgba(76, 134, 216, 0.3) 100%);
  border-color: rgba(76, 134, 216, 0.42);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(76, 134, 216, 0.1), 0 6px 12px -3px rgba(76, 134, 216, 0.18);
}

.md-caseload__action--setup {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.16) 100%);
  border-color: rgba(139, 92, 246, 0.18);
}

.md-caseload__action--setup:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.3) 100%);
  border-color: rgba(139, 92, 246, 0.42);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(139, 92, 246, 0.1), 0 6px 12px -3px rgba(139, 92, 246, 0.18);
}

.md-caseload__action--reports {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.05) 0%, rgba(232, 122, 111, 0.2) 100%);
  border-color: rgba(232, 122, 111, 0.22);
}

.md-caseload__action--reports:hover {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.08) 0%, rgba(232, 122, 111, 0.32) 100%);
  border-color: rgba(232, 122, 111, 0.48);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(232, 122, 111, 0.12), 0 6px 12px -3px rgba(232, 122, 111, 0.2);
}

/* Modeling Ideas — the Reports coral/pinkish-red, keeping the tile's own
   gradient offsets. */
.md-caseload__action--ideas {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.05) 0%, rgba(232, 122, 111, 0.2) 100%);
  border-color: rgba(232, 122, 111, 0.24);
}

.md-caseload__action--ideas:hover {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.08) 0%, rgba(232, 122, 111, 0.36) 100%);
  border-color: rgba(232, 122, 111, 0.52);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(232, 122, 111, 0.12), 0 6px 12px -3px rgba(232, 122, 111, 0.22);
}

/* Quick Screen Eval tile — shares Modeling Ideas' honey-bronze accent. */
.md-caseload__action--eval {
  background: linear-gradient(180deg, rgba(242, 185, 90, 0.05) 0%, rgba(242, 185, 90, 0.2) 100%);
  border-color: rgba(242, 185, 90, 0.24);
}

.md-caseload__action--eval:hover {
  background: linear-gradient(180deg, rgba(242, 185, 90, 0.08) 0%, rgba(242, 185, 90, 0.36) 100%);
  border-color: rgba(242, 185, 90, 0.52);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(242, 185, 90, 0.12), 0 6px 12px -3px rgba(242, 185, 90, 0.22);
}

/* Account tile — verdigris green, matching the goals-section gradient. */
.md-caseload__action--account {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0.18) 100%);
  border-color: rgba(42, 157, 143, 0.24);
}

.md-caseload__action--account:hover {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.08) 0%, rgba(42, 157, 143, 0.34) 100%);
  border-color: rgba(42, 157, 143, 0.52);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(42, 157, 143, 0.12), 0 6px 12px -3px rgba(42, 157, 143, 0.2);
}

/* Eval History tile — slate-blue/gray, the same accent it carried in the header. */
.md-caseload__action--history {
  background: linear-gradient(180deg, rgba(90, 106, 133, 0.05) 0%, rgba(90, 106, 133, 0.18) 100%);
  border-color: rgba(90, 106, 133, 0.24);
}

.md-caseload__action--history:hover {
  background: linear-gradient(180deg, rgba(90, 106, 133, 0.08) 0%, rgba(90, 106, 133, 0.34) 100%);
  border-color: rgba(90, 106, 133, 0.52);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(90, 106, 133, 0.12), 0 6px 12px -3px rgba(90, 106, 133, 0.2);
}

/* More Actions tile (mobile-only kebab menu trigger) — uses a
   neutral navy tint instead of a role color since "More" is meta,
   not a semantic action. Same gradient + border + glass shadow
   vocabulary as the role-tinted tiles so it reads as part of the
   same deliberate toolbar family. */
.md-caseload__action--more {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.03) 0%, rgba(27, 54, 93, 0.1) 100%);
  border-color: rgba(27, 54, 93, 0.14);
}

.md-caseload__action--more:hover {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.05) 0%, rgba(27, 54, 93, 0.18) 100%);
  border-color: rgba(27, 54, 93, 0.32);
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.08), 0 6px 12px -3px rgba(27, 54, 93, 0.14);
}

.md-caseload__action-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}

.md-caseload__action--tile .md-caseload__action-tile__icon svg {
  stroke: currentColor;
}

/* Boost icon contrast — bumped from #2D3748 to deep navy so the
   icon outlines read crisply against the now-pure-white glass
   tile. Stroke width also slightly thickened via stroke-width
   override since the inline svg stroke-width is 1.5 (a touch
   thin against bright surfaces). Targets only the slate outline
   strokes, not the role accent strokes, so per-tile chroma
   (teal/blue/violet/slate/amber) is preserved. */
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#46505F"] {
  stroke: #1F2A44;
  stroke-width: 1.7;
}

/* Slightly thicker strokes on role-accent paths too so they don't
   feel thinner than the now-bolder outline. */
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#2A9D8F"],
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#4C86D8"],
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#8B5CF6"],
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#E87A6F"],
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#F2B95A"] {
  stroke-width: 1.7;
}

/* Darker label color too — bump from $la-navy to a deeper navy
   for AAC-readable contrast against the glass tile. */
.md-caseload__action--tile .md-caseload__action-tile__label {
  color: rgba(27, 54, 93, 0.95);
}

.md-caseload__action-tile__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1B365D;
  width: 100%;
  text-align: center;
  /* Don't break mid-word — short labels (Model, Speak, Setup User,
     Usage Reports, Modeling Ideas) stay readable. break-word/hyphens
     produced ugly fragments like "nyc_te / st" / "Modeli / ng" at
     narrow widths. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

a.md-caseload__action {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.md-caseload__action:hover {
  /* No background override — let each tile's per-color :hover darken its own
     gradient (was $surface-200, which greyed every tile on hover). */
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

/* Selected/primary state — same glass aesthetic as the
   "ABOUT LINGOLINQ" eyebrow badge (#about-hero .la-section-eyebrow-badge):
   layered white→teal gradient, backdrop blur+saturate, thin white
   inset highlight on top, teal glow shadow. Adapted from a pill to
   a tile but every visual ingredient is preserved. */
.md-caseload__action--primary {
  /* LEVEL 3 — active/selected tile, the topmost surface in the
     hierarchy. Same glass aesthetic as the "ABOUT LINGOLINQ"
     eyebrow badge (white→teal gradient + backdrop blur + thin
     teal ring), now with a deeper, more directional shadow stack
     so it visibly lifts above sibling resting tiles. The teal
     glow + outer focus-ring effect signals "this is the active
     one" without changing the tile's footprint. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(20, 127, 130, 0.14) 35%, rgba(20, 127, 130, 0.28) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: #0d5c5f;
  border: 1px solid rgba(20, 127, 130, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(20, 127, 130, 0.1), 0 0 0 1px rgba(20, 127, 130, 0.18), 0 2px 4px rgba(20, 127, 130, 0.18), 0 8px 20px -4px rgba(20, 127, 130, 0.32);
  transform: translateY(-1px);
}

.md-caseload__action--primary .md-caseload__action-tile__label {
  color: #0d5c5f;
}

.md-caseload__action--primary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(20, 127, 130, 0.18) 35%, rgba(20, 127, 130, 0.34) 100%);
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(20, 127, 130, 0.15), 0 5px 18px rgba(20, 127, 130, 0.3);
}

/* Modern OPTIONS dropdown trigger — single fused pill containing
   the label + chevron (Linear / Stripe / GitHub pattern). Reads as
   one deliberate control rather than a separate label + icon pair.
   Layered shadow + thin inset highlight lifts it off the card
   surface; brand-verdigris hover state matches the verdigris
   accent used elsewhere on the page. */
.md-caseload__action--corner-extras {
  box-sizing: border-box;
  /* Match the GOALS chip height (.md-caseload__goal-row has 5px
     vertical padding + 14px text line-height ≈ 26-28px). Using
     explicit 28px height + 0 min-height override so the trigger
     reads as a thin pill matching the goal chip on the opposite
     side of the row. */
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: linear-gradient(180deg, #fff, rgba(248, 249, 250, 0.95));
  color: #46505F;
  flex-direction: row;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05), 0 2px 6px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-caseload__action--corner-extras__label {
  color: rgba(27, 54, 93, 0.7);
  transition: color 0.15s ease;
}

.md-caseload__action--corner-extras__chevron {
  flex-shrink: 0;
  stroke: currentColor;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.18s ease, color 0.15s ease;
}

.md-caseload__action--corner-extras:hover {
  background: linear-gradient(180deg, #fff, rgba(42, 157, 143, 0.06));
  border-color: rgba(42, 157, 143, 0.35);
  color: #1B365D;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 4px 12px rgba(42, 157, 143, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.md-caseload__action--corner-extras:hover .md-caseload__action--corner-extras__label,
.md-caseload__action--corner-extras:hover .md-caseload__action--corner-extras__chevron {
  color: #1B365D;
}

.md-caseload__action--corner-extras:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05), inset 0 1px 2px rgba(27, 54, 93, 0.08);
}

/* When the dropdown is open (Bootstrap's .open class on the
   parent), switch to a "pressed" filled surface so the trigger
   reads as the active anchor of the open menu, and flip the
   chevron 180° to point up. */
.md-caseload__extras-dropdown.open .md-caseload__action--corner-extras {
  background: #46505F;
  border-color: #46505F;
  color: #fff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.md-caseload__extras-dropdown.open .md-caseload__action--corner-extras .md-caseload__action--corner-extras__label,
.md-caseload__extras-dropdown.open .md-caseload__action--corner-extras .md-caseload__action--corner-extras__chevron {
  color: #fff;
}

.md-caseload__extras-dropdown.open .md-caseload__action--corner-extras__chevron {
  transform: rotate(180deg);
}

.md-caseload__extras-dropdown {
  position: relative;
  /* Centered inside the ACCESS column (.md-caseload__access already
     uses align-items: center); align-self ensures the dropdown sits
     centered horizontally even when other siblings have different
     widths. inline-flex keeps the dropdown trigger flush with its
     contents instead of stretching across the column. */
  display: inline-flex;
  align-self: center;
  /* Lift the wrapper's stacking context above every other element on the caseload
     card (content tops out at z:10) so the open dropdown menu (the z:20-40 tier)
     paints above tiles, pills, ring, goals row. Small, contained values — the card
     is `isolation: isolate`, so nothing here can escape above app modals (z:1050). */
  z-index: 20;
}

.md-caseload__extras-dropdown.open {
  z-index: 30;
}

/* Modern action menu — matches the .md-settings-dropdown-menu look:
   pill container with soft shadow, rounded corners, hover-tinted rows,
   and consistent spacing for the two-tone leading icons. Wins over the
   global Bootstrap .dropdown-menu defaults via the .md-caseload__
   dropdown-menu modifier. */
.md-caseload__extras-dropdown .md-caseload__dropdown-menu {
  min-width: 220px;
  padding: 6px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  background-color: #fff !important;
  background-image: none !important;
  /* Force the menu to size to ALL its content. Some inherited
     rule was capping the menu's visible bg at ~4 items, with the
     remaining items rendering below the box without a backdrop.
     Forcing height: auto / max-height: none / overflow: visible
     guarantees the menu grows to fit every item. */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  /* Highest z-index on the caseload card — guarantees the open
     menu sits ABOVE every other element (action tiles, pills, goal
     row, identity ring, etc.). Combined with the wrapper's z-index: 20
     stacking context, nothing on the card paints above the menu — and the
     card's `isolation: isolate` keeps all of this below app modals (z:1050). */
  z-index: 40;
  /* Isolate creates a fresh stacking context so the menu's items
     can't get caught in a transformed parent's layering. */
  isolation: isolate;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
}

/* Force every element inside the dropdown menu to carry an
   opaque background. The container's bg alone wasn't enough —
   items, links, and buttons all defaulted to transparent, letting
   the action tiles below bleed through. Universal `*` selector
   inside the menu paints every descendant so the menu reads as
   one solid opaque surface. */
.md-caseload__extras-dropdown .md-caseload__dropdown-menu,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > a,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > button {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Belt-and-suspenders: paint a solid backdrop layer behind the
   entire menu via a ::before pseudo so even if Bootstrap or
   Ember LinkTo wraps items in unexpected elements, the bg is
   guaranteed. The pseudo sits at z-index: -1 inside the menu's
   isolate context so it stays behind menu items but in front of
   anything outside the menu. */
.md-caseload__extras-dropdown .md-caseload__dropdown-menu {
  position: absolute;
}

.md-caseload__extras-dropdown .md-caseload__dropdown-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 12px;
  z-index: -1;
  pointer-events: none;
}

/* Mobile More Actions tile sits at the BOTTOM of the action tiles
   row, near the card edge. Flip the menu to open UPWARD so the
   full list renders above the trigger rather than getting cut off
   below the card. Bootstrap's `top: 100%` default puts the menu
   below; overriding `top: auto; bottom: 100%` flips it. */
.md-caseload__extras-dropdown--mobile .md-caseload__dropdown-menu {
  top: auto !important;
  bottom: 100% !important;
  margin-bottom: 6px;
  /* Right-anchor since the More Actions tile is the rightmost in
     the bottom row — keeps the menu inside the card horizontally. */
  left: auto !important;
  right: 0 !important;
}

.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li {
  list-style: none;
}

.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > a,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}

.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > a:hover,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > a:focus-visible,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > button:hover,
.md-caseload__extras-dropdown .md-caseload__dropdown-menu > li > button:focus-visible {
  /* !important needed to win against the opaque-bg force-rule
     above, which also uses !important to seal the menu surface. */
  background-color: rgba(27, 54, 93, 0.06) !important;
  color: #1B365D;
  text-decoration: none;
  outline: none;
}

.md-caseload__extras-dropdown .md-caseload__dropdown-menu .md-caseload__dropdown-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* When the mobile More Actions menu is open, lift the WHOLE action-tiles
   row above everything else on the card. The menu lives inside this row,
   which the card's `> * { z-index: 1 }` rule pins at z:1 — below card-top
   (z:5) and the OPTIONS row (z:10) — so the upward-opening menu was being
   painted over by the goals / Add-goal content above it. The row is the
   menu's stacking-context ancestor, so raising the row is the only way the
   menu can clear them. 9999 matches the open-dropdown tier used elsewhere
   in this component and sits above every other caseload-card layer. */
.md-caseload__card > .md-caseload__actions--tiles:has(.md-caseload__extras-dropdown--mobile.open) {
  z-index: 30;
}

.md-caseload__badge-progress {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 54, 93, 0.06);
}

.md-caseload__empty {
  text-align: center;
  padding: 60px 20px;
}

.md-caseload__empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  margin: 16px 0 8px;
}

.md-caseload__empty-desc {
  font-size: 15px;
  color: #6B7280;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .md-caseload__grid {
    grid-template-columns: 1fr;
  }
  /* On narrow screens, stack the card header so the avatar/info
     and the access/chevron columns don't overlap. card-corner moves
     below card-main, both spanning full width. */
  .md-caseload__card-top {
    flex-direction: column;
    align-items: stretch;
  }
  .md-caseload__card-main {
    width: 100%;
  }
  .md-caseload__card-corner {
    width: 100%;
    align-items: flex-start;
  }
  .md-caseload__access {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  /* Hide the goal/extras bottom row at this width — the empty-state
     "No goal set | + Add goal" chip has nowrap content that overflows
     the narrowed card, and the chevron is already swapped for the
     "More Actions" tile at ≤950px. The goal area can be reached via
     the per-supervisee Account / dropdown actions. */
  .md-caseload__bottom-row {
    display: none !important;
  }
}
/* Mid-narrow screens (480px–640px) — keep the two columns but
   ensure the access group stays compact. */
@media (max-width: 640px) and (min-width: 481px) {
  .md-caseload__card-top {
    gap: 8px 12px;
  }
  .md-caseload__card-main {
    min-width: 0;
    flex: 1 1 60%;
  }
  .md-caseload__card-corner {
    flex-shrink: 0;
  }
}
/* Very narrow page width — the wider sunken caseload tray padding
   needs to shrink so cards don't get squeezed. */
@media (max-width: 600px) {
  .md-caseload {
    padding: 16px;
  }
}
/* Caseload “…” menus use position:absolute; default workspace + sup card use overflow:hidden and clip them */
.md-shell--caseload > .md-workspace {
  overflow: visible !important;
}

.md-shell--caseload .md-card.md-card--sup {
  overflow: visible !important;
}

/* Caseload My Caseload card sits directly on the workspace surface
   with no fill or outline — the visual hierarchy comes from the
   sunken .md-caseload tray and the cards inside it, not from the
   container article. Applied at every viewport. */
.md-shell--caseload .md-card.md-card--sup {
  background: transparent !important;
  border: 0 !important;
}

/* Extra left padding on the active caseload pill (when it isn't the first
   pill) so the dark active pill doesn't crowd the pill to its left. */
.md-shell--caseload .md-pillnav__pill.is-active:not(:first-child),
.md-shell--caseload a.md-pillnav__pill.active:not(:first-child) {
  padding-left: 18px !important;
}

.md-trends {
  width: min(1040px, 100%);
  box-sizing: border-box;
  margin: 56px auto 56px;
  padding: 0 20px;
}

.md-trends__hero {
  margin-bottom: 26px;
}

.md-trends__title {
  display: block;
  height: auto;
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-trends__intro {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-muted, #1B365D);
  max-width: 800px;
}

.md-trends .panel.summary {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(27, 54, 93, 0.07), 0 8px 20px rgba(27, 54, 93, 0.08);
  overflow: hidden;
  margin-bottom: 16px;
  text-align: center;
}

.md-trends .panel.summary .panel-heading {
  background: transparent;
  border: none;
  padding: 15px 12px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-muted, #1B365D);
  opacity: 0.72;
  white-space: normal;
}

.md-trends .panel.summary .panel-body {
  padding: 6px 12px 16px !important;
  font-size: 26px !important;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
}

.md-trends h4 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
  margin: 0 0 14px;
}

.md-trends .list-group {
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.06);
}

.md-trends .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(27, 54, 93, 0.06);
  background: rgba(255, 255, 255, 0.82);
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-ink, #111A2E);
}

.md-trends .list-group-item:last-child {
  border-bottom: none;
}

.md-trends a.list-group-item:hover {
  background: rgba(76, 134, 216, 0.06);
  color: #2860C9;
  text-decoration: none;
}

.md-trends .list-group-item .text-muted {
  color: var(--md-muted, #1B365D) !important;
  font-weight: 500;
  font-size: 13px;
}

.md-trends .label-danger {
  border-radius: 8px;
  font-size: 12px;
  padding: 4px 10px;
}

.md-badges {
  max-width: 1000px;
  margin: 0 auto;
}

.md-badges__hero {
  margin-bottom: 24px;
}

.md-badges__title {
  display: block;
  height: auto;
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-badges__sub {
  margin: 0;
  font-size: 15px;
  color: var(--md-muted, #1B365D);
}

.md-badges__note,
.md-badges__empty {
  margin: 0;
  font-size: 15px;
  color: var(--md-muted, #1B365D);
}

.md-badges__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.md-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(27, 54, 93, 0.1);
}

.md-badge.is-earned {
  border-color: rgba(242, 185, 90, 0.5);
  background: linear-gradient(180deg, rgba(255, 249, 236, 0.92), rgba(255, 255, 255, 0.78));
}

.md-badge__star {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(255, 255, 255, 0.85);
  color: #6B7280;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.md-badge__star svg {
  width: 18px;
  height: 18px;
}

.md-badge__star:hover {
  background: #fff;
  color: #F2B95A;
}

.md-badge__star.is-on {
  color: #F2B95A;
  border-color: rgba(242, 185, 90, 0.55);
  background: rgba(242, 185, 90, 0.12);
}

.md-badge__image-btn {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.md-badge__image {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.md-badge:not(.is-earned) .md-badge__image {
  opacity: 0.5;
  filter: grayscale(0.45);
}

.md-badge__spark {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 20px;
  line-height: 1;
  color: #F2B95A;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.md-badge__name {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--md-ink, #111A2E);
}

.md-badge__name a {
  color: inherit;
  text-decoration: none;
}

.md-badge__name a:hover {
  color: #2860C9;
  text-decoration: underline;
}

.md-badge__earned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #1A7B7A;
}

.md-badge__earned svg {
  width: 15px;
  height: 15px;
}

.md-badge__progress {
  width: 100%;
  max-width: 150px;
  height: 8px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  overflow: hidden;
}

.md-badge__bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4C86D8, #2860C9);
}

.md-badge__level {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
}

.md-badge__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--md-muted, #1B365D);
}

.md-badges__gate {
  max-width: 640px;
  padding: 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.06);
}

.md-badges__gate-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink, #111A2E);
}

.md-badges__gate-text a {
  color: #2860C9;
  font-weight: 600;
}

/* Shared "raised glass pill" button — mirrors the boards-page Change
   Home Board button (`.ub-boards-page__set-home-btn`, ~app.scss:57064)
   so the boards-page New Board CTA and the setup Board Category CTAs all
   read as one button family. `$bg` / `$hover-bg` are parameterized so a
   caller can keep its own background while sharing the shape, border,
   layered shadow, and sizing. Defined here (before first use) because
   the setup rules that consume it live earlier in the file than the
   mid-file mixin cluster. */
/* Modern board-card STYLING (the LingoLinq board-card direction), applied
   on top of each surface's EXISTING layout — `@include` it inside any
   `<surface> .simple_board_icon` rule. It changes only the look (glass
   surface, subtle outline, top edge-light, contained logo tile, type
   hierarchy, soft glass pills, gentle hover lift) — NOT the layout
   (no display/flex/width), so every surface keeps its own composition.
   `!important` on the conflicting cosmetics so the shared look wins over
   each surface's bespoke declarations regardless of source order. Dark/
   themed shells (e.g. bento --dark / --midday) re-assert their own bg +
   text colors after including this. */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*
  Keyboard focus indicator (Tab / switch / voice access):
  When someone moves through the app without a mouse, the focused control gets a clear
  navy ring so they always know which button, link, or field is active. Older styles
  used "outline: none", which hid that ring; this rule brings it back for keyboard-style
  focus only (not for every mouse click). Matches WCAG 2.4.7 (Focus Visible).
  Scoped to #within_ember; !important wins over legacy outline resets.
*/
/* Global keyboard focus indicator: 3px navy box-shadow ring around the focused
   element. Critically, this rule does NOT change the element's background or
   text color — those stay as the element designed them. Earlier iterations
   tried to add a light navy bg tint + dark text on focus, but that broke
   contrast in two opposite ways:
     - light-text buttons (Sign In on dark bg) became light-text-on-light-tint
     - dark-text active states (active pillnav on dark bg) became
       dark-text-on-dark-bg when the forced color override applied
   The simplest fix that works for every element type is to leave colors
   alone and let the ring be the sole focus indicator. WCAG 2.4.7 + 1.4.3. */
#within_ember *:focus-visible:not(.md-board-detail-edit-toolbar__search-input) {
  outline: none !important;
  box-shadow: 0 0 0 3px #1B365D !important;
  border-radius: 6px;
}

/* On dark backgrounds, use a light focus ring for contrast */
#within_ember.board-detail-view:has(.md-board-detail--dark) *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
.md-board-detail--dark *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
header:has(#speak) *:focus-visible,
#inner_header:has(#speak) *:focus-visible,
.md-board-detail-sentence-bar *:focus-visible,
.md-board-detail-header *:focus-visible,
.md-board-detail-board-actions *:focus-visible,
.md-board-detail-board-actions__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px;
}

/* Windows High Contrast Mode (forced-colors) compatibility:
   The global focus rules above use box-shadow for the ring. HCM strips
   box-shadow entirely AND we explicitly set outline:none, so HCM users would
   see no focus indicator at all. This block restores a visible focus ring
   using `outline` (which HCM respects) with the system `Highlight` color
   (which adapts to the user's chosen contrast theme). WCAG 2.4.7 compliance.

   Selector specificity must MATCH the global rule above (which uses
   `:not(.md-board-detail-edit-toolbar__search-input)` adding a class to its
   specificity count). Without the `:not(...)`, this rule loses the cascade
   battle in HCM and `outline: none !important` from the global rule wins. */
@media (forced-colors: active) {
  #within_ember *:focus-visible:not(.md-board-detail-edit-toolbar__search-input) {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }
}
/*
  Suppress the browser-default focus outline (and Bootstrap's default button
  focus box-shadow) for mouse clicks. When a pointer user clicks a link or
  button, :focus fires but :focus-visible does not — this rule catches that
  gap. Keyboard-style focus still shows the ring via the :focus-visible rule
  above, so WCAG 2.4.7 (Focus Visible) compliance is preserved.

  Carve-out: the speak-bar chip is a focusable control whose box-shadow is
  DECORATIVE (its glass elevation), not a focus ring — this reset would strip
  that shadow the instant a click focuses it, making the chip look "pressed".
  Exclude it so its elevation survives a click; its keyboard focus ring still
  comes from the `--editable:focus-visible` rule.
*/
#within_ember *:focus:not(:focus-visible):not(.md-board-detail-sentence-bar__chip) {
  outline: none !important;
  box-shadow: none !important;
}

/* Standard app layout (bento page with bottom navbar) – used for padding and fixed bars */
:root {
  --topbar-height: 68px;
  --bottombar-height: 59px;
}

/* Hide header entirely in board layout mode */
.header--hidden {
  display: none !important;
}

.content--no-top-padding {
  padding-top: 0 !important;
}

/* When user is logged in, use a shorter top navbar */
#within_ember:has(header:not(.header--unauthenticated)) {
  --topbar-height: 16px;
}

/* After authenticated topbar rule — hidden header must not reserve space (beta onboarding, board layout). */
#within_ember:has(> header.header--hidden) {
  --topbar-height: 0px;
}

/* App-navbar-only header (no speak row, no legacy #nav_header): bar is 70px; 16px left #content tucked under the fixed header (e.g. /offline-boards on narrow screens). */
#within_ember:has(> header.header-index-with-dark-toggle:not(.header--unauthenticated):has(#inner_header .app-navbar):not(:has(#inner_header #speak)):not(:has(#inner_header #nav_header))) {
  --topbar-height: 70px;
}

/* Eval WELCOME exception: it renders the full app-navbar (70px), but the
   line-above app-navbar detection doesn't match the eval intro's DOM, so
   #within_ember falls through to the 16px authenticated default and the eval
   view tucks under the fixed 70px header. Pin 70px for the eval welcome
   (board-view + app-navbar header + the .md-eval-intro__panel the eval-intro
   component renders) so #content and every other var(--topbar-height) consumer
   clears the navbar. Section intros keep the speak bar and match the taller
   129px rule below (higher id-count specificity), so they are unaffected. */
#within_ember.board-view:has(> header.header-index-with-dark-toggle):has(.md-eval-intro__panel) {
  --topbar-height: 70px;
}

/* Board page: navbar + board bar (speak or nav_header) need a taller header so both rows fit */
#within_ember:has(header.header-index-with-dark-toggle #speak),
#within_ember:has(header.header-index-with-dark-toggle #nav_header) {
  --topbar-height: 129px;
}

/* Board index route: header often lacks header-index-with-dark-toggle; speak bar still needs the same
   --topbar-height baseline so board/index ResizeObserver math matches #content padding (see docs/SPEAK_MODE_EVAL_LAYOUT.md). */
#within_ember.board-view:has(#inner_header #speak),
#within_ember.board-alt-view:has(#inner_header #speak) {
  --topbar-height: 129px;
}

/* Landing navbar: target height 88–96px; footer 50% taller and content vertically centered */
#within_ember:has(header.header--unauthenticated) {
  --topbar-height: 92px;
  --bottombar-height: 88.5px; /* 59px × 1.5 for unauthenticated footer */
}

/* Unauthenticated header with landing nav (index or /landing-alt): compact height and padding */
#within_ember:has(header.header--unauthenticated .la-topbar-nav) {
  --topbar-height: 44px;
}

header.header--unauthenticated:has(.la-topbar-nav) {
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}

header.header--unauthenticated:has(.la-topbar-nav) #inner_header {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

header.header--unauthenticated #inner_header {
  display: flex !important;
  align-items: center !important;
  height: 70px !important;
}

header.header--unauthenticated #inner_header #nav_header {
  height: 100% !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

header.header--unauthenticated #inner_header h1,
header.header--unauthenticated #inner_header #nav_header h1,
header.header--unauthenticated #nav_header h1 {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

header.header--unauthenticated #inner_header .nav-header__brand {
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
}

header.header--unauthenticated #inner_header .nav-header__logo-link {
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  /* Keep the focus ring hugging the logo content rather than stretching to
     fill the parent flex row. width: max-content prevents flex-row contexts
     from forcing the link wider than its image content. */
  width: max-content;
}

/* Hide page footer in unauthenticated view (login, register, landing-alt, etc.) */
#within_ember:has(header.header--unauthenticated) .page-footer {
  display: none !important;
}

/* Hide page footer on authenticated pages */
#within_ember:has(header:not(.header--unauthenticated)) .page-footer {
  display: none !important;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url(/../fonts/OpenDyslexicAlta-Regular.otf) format("opentype");
}
@font-face {
  font-family: "ArchitectsDaughter";
  src: url(/../fonts/ArchitectsDaughter.ttf) format("truetype");
}
/* Applied in: app/templates/application.hbs (line 1), app/templates/brief.hbs (line 1)
   Main app wrapper - background_class, dim_sides, color_black set via application controller */
#within_ember {
  position: relative;
  background: #fff;
  overflow: hidden; /* Windows-only quirk causes extra scrollbars without this, if you
  change, make sure to test sidebar and modal.highlight */
}

/* Page-level horizontal-scroll kill switch. No element inside the app should
   ever trigger a horizontal scrollbar on the document — that's always a bug,
   typically caused by a fixed-width child overshooting a narrow viewport. */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Bento page: standard app layout – .app (fixed inset) + .topbar/.bottombar fixed, .main scrolls with padding */
#within_ember:has(.page-footer) {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* Only #content grows; other direct children do not take flex space */
#within_ember:has(.page-footer) > *:not(#content) {
  flex: 0 0 auto;
}

#within_ember:has(.page-footer) > header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--topbar-height) !important;
  z-index: 1000 !important;
}

#within_ember:has(.page-footer) .page-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--bottombar-height) !important;
  z-index: 1000 !important;
}

/* Pricing and features pages: same as landing – full-page scroll, footer at end of content */
#within_ember.pricing-route,
#within_ember.features-route {
  position: static;
  overflow-x: hidden;
  overflow-y: visible;
  display: block;
  min-height: 100%;
}

#within_ember.pricing-route .page-footer,
#within_ember.features-route .page-footer {
  position: static !important;
  bottom: auto;
  left: auto;
  right: auto;
  height: auto;
  min-height: var(--bottombar-height);
}

/* Pricing and features pages: reserve space above footer when scrolled to bottom */
.la-wrapper.la-wrapper--pricing .la-main,
.la-wrapper.la-wrapper--features .la-main {
  padding-bottom: 0;
}

/* Pricing page: org management + bulk purchase above buttons, displayed horizontally */
.la-pricing-extra-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px 32px;
  margin-top: 2rem;
}

.la-pricing-extra-link {
  text-align: center;
  flex: 1 1 280px;
  max-width: 420px;
}

.la-pricing-org-management p,
.la-pricing-bulk p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #2c3e50;
}

.la-pricing-bulk .la-pricing-bulk-explainer {
  margin-top: 0.5rem;
}

.la-pricing-bulk-link {
  /* WCAG AA fix — was $brand-verdigris on white = 3.32:1. */
  color: var(--fs-dark-teal, #1A7B7A);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.la-pricing-bulk-link:hover {
  border-bottom-color: var(--fs-dark-teal, #1A7B7A);
}

.la-pricing-bulk-explainer {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.5;
  color: #2c3e50;
}
.la-pricing-bulk-explainer a {
  /* WCAG AA fix — was $brand-verdigris on white = 3.32:1. */
  color: var(--fs-dark-teal, #1A7B7A);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.la-pricing-bulk-explainer a:hover {
  border-bottom-color: var(--fs-dark-teal, #1A7B7A);
}

/* Speech page mockup: hide the main app header and bottom navigation */
#within_ember.speech-route > header,
#within_ember.speech-route .page-footer,
#within_ember.speech-route #setup_footer {
  display: none !important;
}

/* Content area: cap height so it ends above the fixed footer (footer is out-of-flow so doesn’t reserve space) */
#within_ember:has(.page-footer) #content.index.with_user {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: var(--bottombar-height);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(126, 184, 224, 0.25) 0%, rgba(212, 168, 75, 0.12) 50%, rgba(61, 122, 92, 0.14) 100%) !important;
}

/* Login, register, forgot password/username: same scrollable content area so form is visible (unauthenticated, so #content has .no_user not .index.with_user).
   Apply the login gradient to #content itself so it fills the full scroll area —
   including the top/bottom padding bands — regardless of how tall the form is. */
#within_ember:has(.page-footer) #content:has(.login-page-bg),
#within_ember:has(.page-footer) #content:has(.register-page-bg),
#within_ember:has(.page-footer) #content:has(.beta-welcome-page) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: var(--bottombar-height);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Transparent: the mesh lives on the full-viewport #within_ember below, so
     #content scrolls over it with no second background layer (no seam). */
  background: transparent;
}

/* Beta onboarding: same scroll model as /register — #content scrolls; page bg grows with content (no inner scrollport). */
#within_ember:has(.beta-welcome-page) #content,
#within_ember:has(.page-footer) #content:has(.beta-welcome-page),
#within_ember:has(.beta-welcome-page) #content.index.with_user,
#within_ember:has(.beta-welcome-page) #content.with_user {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  padding-top: 2.5rem !important;
  padding-bottom: calc(var(--bottombar-height) + 2.5rem) !important;
  /* Transparent: mesh is on the full-viewport #within_ember below. */
  background: transparent !important;
}

/* SINGLE full-viewport beta background. #within_ember is `position: fixed;
   inset: 0` on the page-footer layout (line ~412), so its background fills the
   ENTIRE viewport behind the fixed topbar, the transparent scrolling #content,
   and the footer band — one continuous mesh, no seam top or bottom. The
   compound :has() (1,2,0) out-specifies the `:has(.page-footer)` transparent
   reset above. */
#within_ember:has(.page-footer):has(.beta-welcome-page) {
  background: radial-gradient(60% 45% at 12% 8%, rgba(42, 157, 143, 0.16), transparent 60%), radial-gradient(55% 50% at 92% 18%, rgba(76, 134, 216, 0.14), transparent 62%), radial-gradient(70% 60% at 50% 108%, rgba(27, 54, 93, 0.06), transparent 60%), linear-gradient(180deg, #F9FAFB 0%, #F5F7FA 100%);
}

/* Login + Register: the SAME gradient/blobs mesh, painted on the full-viewport
   #within_ember exactly like the beta page above. This is the background the
   page intends — .login-page-bg / .register-page-bg are transparent alignment
   boxes (the `#content:has(...)` rule keeps #content transparent too), so the
   mesh must live here or the pages render bare white (login) / with the bg
   only covering the card (register). Filling #within_ember means the mesh
   covers the ENTIRE page height behind the scrolling content — no seam, no
   short bg, no bare "footer" strip. Compound :has() (1,2,0) out-specifies the
   `:has(.page-footer)` transparent reset above. */
#within_ember:has(.page-footer):has(.register-page-bg),
#within_ember:has(.page-footer):has(.login-page-bg) {
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.18), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.2), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.14), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.1), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
}

/* Board-picker page: same recurring "short background" bug as login/register —
   /board-picker is a top-level route, so its #content is NOT `.index.with_user`
   and never gets the #content background (line ~546), and the .md-shell mesh only
   reaches content height inside the scrolling #content. So on short content the
   area below the picker card renders bare. FIX (per LEARNINGS): paint the SAME
   .md-shell base mesh on the full-viewport `#within_ember` (position:fixed; inset:0
   on the page-footer layout) so it fills the ENTIRE viewport behind the scrolling
   content — no seam, no short bg. Compound :has() (1,2,0) out-specifies the
   `:has(.page-footer)` reset above. */
#within_ember:has(.page-footer):has(.board-picker-page) {
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.18), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.2), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.14), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.1), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
}

/* Full-screen onboarding: hide the app footer bar on the beta pages. Use
   display:none (not removal) — the element stays in the DOM so the
   `:has(.page-footer)` shell layout above still matches; it just no longer
   paints the fixed bottom band over the mesh. */
#within_ember:has(.beta-welcome-page) .page-footer {
  display: none !important;
}

#within_ember:has(.beta-welcome-page) #content > .ember-view {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

#within_ember:has(.beta-welcome-page) #content > .register-page-bg {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
}

#within_ember:has(.beta-welcome-page) #content > .register-page-bg,
#within_ember:has(.beta-welcome-page) .beta-welcome-page.register-page-bg {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Light mode: shell bg uses active pill gradient (7eb8e0 → 3a6bc7). */
#within_ember.bento-default-mode-active:has(.page-footer) #content.index.with_user,
#within_ember.bento-page-with-footer.bento-default-mode-active #content.index.with_user {
  background: linear-gradient(135deg, rgba(126, 184, 224, 0.35) 0%, rgba(58, 107, 199, 0.3) 100%);
}

/* Default palette: top-down gradient – blue, gold (subtle), green (subtle). */
#within_ember.bento-default-mode-active:has(.page-footer) #content.index.with_user,
#within_ember.bento-page-with-footer.bento-default-mode-active #content.index.with_user {
  background: linear-gradient(to bottom, rgba(126, 184, 224, 0.25) 0%, rgba(212, 168, 75, 0.12) 50%, rgba(61, 122, 92, 0.14) 100%);
}

/* #index_view fills #content so shell can stretch to full height; grows when content overflows so #content scrolls */
#within_ember:has(.page-footer) #content.index.with_user #index_view,
#within_ember.bento-page-with-footer #content #index_view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 0;
  margin-top: 0;
}

/* Shell flex/layout overrides are in app.scss after the base .ll-bento-app-shell block (so one clear winning rule, no !important). */
#within_ember:has(.page-footer) #content.index.with_user .ll-bento-app-shell .ll-bento-device-frame,
#within_ember.bento-page-with-footer #content .ll-bento-app-shell .ll-bento-device-frame {
  flex: 1 1 auto;
  min-height: 0;
  align-self: center;
  width: 100%;
  max-width: 1200px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

#within_ember:has(.page-footer) #content.index.with_user .ll-bento-device-frame > .row,
#within_ember.bento-page-with-footer #content .ll-bento-device-frame > .row {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

/* Bento page with footer: full-height chain so #within_ember has a definite height for flex children.
   Industry standard: html/body/wrapper height: 100%, overflow: hidden so only the main (#content) scrolls.
   !important so these win over later generic html, body { overflow: auto } and any other overrides. */
html:has(#within_ember.bento-page-with-footer) {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  max-width: 100%;
}

body:has(#within_ember.bento-page-with-footer) {
  height: 100% !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  max-width: 100%;
}

#ember-application-root:has(#within_ember.bento-page-with-footer) {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* #within_ember = flex container (like body in sticky-footer pattern); must have definite height so flex: 1 on #content works */
#within_ember.bento-page-with-footer {
  position: static;
  overflow-x: hidden;
  overflow-y: visible !important; /* only #content scrolls; avoid being overridden to auto */
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}

/* #content = main (industry standard: only scroll container; flex-grow 1, min-height 0 so it can shrink and scroll).
   Target #content whenever parent has bento-page-with-footer (do not require .index) so we always override UA display: block. */
#within_ember.bento-page-with-footer #content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: 0 !important; /* beat :has(.page-footer) #content.index.with_user which sets padding-bottom: var(--bottombar-height) */
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Same layout when #content also has .index.with_user (for any rules that key off the more specific selector). */
#within_ember.bento-page-with-footer #content.index.with_user {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Main area: at least viewport minus footer height; grows when content overflows */
#within_ember.bento-page-with-footer .bento-page-main {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--bottombar-height));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#within_ember.bento-page-with-footer .bento-page-main > *:not(#content) {
  flex: 0 0 auto;
}

#within_ember.bento-page-with-footer .bento-page-main #content.index.with_user {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: 0;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ember outlet wrapper: when it wraps #index_view or .md-shell (modern dashboard), keep it in the flex chain. When empty or a ghost sibling (no #index_view or .md-shell inside), collapse it so it doesn't split space with #index_view. */
#within_ember:has(.page-footer) #content.index.with_user > .ember-view,
#within_ember.bento-page-with-footer #content > .ember-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Modern dashboard outlet: size to content so .md-shell bg extends to bottom of page; min-width 0 so it shrinks with viewport */
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-shell),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-shell) {
  flex: 0 0 auto;
  min-height: auto;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* #content.index.with_user > .ember-view beats specificity above; without this the outlet stays
   viewport-height while .md-workspace grows, so shell bg ends mid-page and content “spills”.
   flex: 1 1 auto so the outlet stretches to fill #content vertically — otherwise short
   content (e.g. home dashboard) leaves the shell bg ending mid-page. */
#within_ember.bento-page-with-footer #content.index.with_user > .ember-view:has(.md-shell),
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(.md-shell) {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Shell fills outlet height = full scrollable content; gradient/bg covers to bottom of boards etc.
   flex: 1 1 auto + min-height: 100% (fills the now-stretched .ember-view parent) combined with
   the existing min-height: 100vh guarantees coverage whether content is short or tall. */
#within_ember.bento-page-with-footer #content.index.with_user > .ember-view:has(.md-shell) > .md-shell,
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(.md-shell) > .md-shell,
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-shell) > .md-shell,
#within_ember:has(.page-footer) #content > .ember-view:has(.md-shell) > .md-shell {
  flex: 1 1 auto;
  min-height: 100vh;
  height: auto;
  align-self: stretch;
}

/* When zoomed or viewport short: allow vertical scroll of modern dashboard content */
#within_ember.bento-page-with-footer #content:has(.md-shell),
#within_ember:has(.page-footer) #content:has(.md-shell) {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
}

/* Collapse only truly empty ember-view wrappers (route transition placeholders).
   Non-empty views are visible by default so new pages don't need an allowlist entry. */
#within_ember.bento-page-with-footer #content > .ember-view:empty,
#within_ember:has(.page-footer) #content > .ember-view:empty {
  flex: 0 0 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

/* Focused kid view has NO footer, so the footer-scoped collapse above misses the
   empty route-placeholder ember-view (the opening-observer ghost). Unchecked it
   keeps flex:1 and grabs vertical space, pushing the focused content down — a gap
   that's worst on tall/portrait viewports. Collapse it here so the content fills up. */
body.md-home-focused #content > .ember-view:empty {
  flex: 0 0 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* General fallback: any non-empty ember-view outlet sizes to its content so #content can scroll.
   Specific page rules below can override if needed. */
#within_ember.bento-page-with-footer #content > .ember-view:not(:empty),
#within_ember:has(.page-footer) #content > .ember-view:not(:empty) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Login, register, forgot password/username: same as .la-wrapper so content is visible and #content scrolls */
#within_ember.bento-page-with-footer #content > .ember-view:has(.login-page-bg),
#within_ember:has(.page-footer) #content > .ember-view:has(.login-page-bg),
#within_ember.bento-page-with-footer #content > .ember-view:has(.beta-welcome-page),
#within_ember:has(.page-footer) #content > .ember-view:has(.beta-welcome-page),
#within_ember.bento-page-with-footer #content > .ember-view:has(.register-page-bg),
#within_ember:has(.page-footer) #content > .ember-view:has(.register-page-bg) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Beat #content.index.with_user > .ember-view viewport lock when logged-in user hits auth/onboarding pages */
#within_ember.bento-page-with-footer #content.index.with_user > .ember-view:has(.login-page-bg),
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(.login-page-bg),
#within_ember.bento-page-with-footer #content.index.with_user > .ember-view:has(.register-page-bg),
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(.register-page-bg),
#within_ember.bento-page-with-footer #content.index.with_user > .ember-view:has(.beta-welcome-page),
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(.beta-welcome-page) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Pricing, about, landing-alt: let outlet size to content so #content scrolls and footer shows at end */
#within_ember.bento-page-with-footer #content > .ember-view:has(.la-wrapper),
#within_ember:has(.page-footer) #content > .ember-view:has(.la-wrapper) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Stats page: let outlet size to content so #content scrolls and .md-stats-main padding clears the footer */
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-stats-page),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-stats-page) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Search page: outlet grows with content; #content scrolls (same pattern as stats) */
#within_ember.bento-page-with-footer #content > .ember-view:has(.search-page),
#within_ember:has(.page-footer) #content > .ember-view:has(.search-page) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Search page: extra 48px + 5rem breathing room above the hero.
   !important needed to beat `#within_ember:has(header.header--unauthenticated) #content { padding-top: var(--topbar-height) !important }`
   (defined later in this file) when the search page is viewed signed-out. */
#within_ember #content:has(.search-page) {
  padding-top: calc(var(--topbar-height) + 3rem + var(--speak-bar-extra, 0px) + 48px + 5rem) !important;
}

/* User settings pages (preferences, billing, edit profile, account index):
   outlet grows with content; #content scrolls (same pattern as stats/search) */
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-preferences),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-preferences),
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-billing),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-billing),
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-edit-profile),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-edit-profile),
#within_ember.bento-page-with-footer #content > .ember-view:has(.md-hero),
#within_ember:has(.page-footer) #content > .ember-view:has(.md-hero) {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* #index_view as direct child of #content (outlet may render with or without .ember-view wrapper). */
#within_ember.bento-page-with-footer #content > #index_view,
#within_ember:has(.page-footer) #content > #index_view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#within_ember.bento-page-with-footer #content.index.with_user #index_view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Dashboard: .md-shell lives under #index_view (AuthenticatedView tagName ‘’), not under
   .ember-view. #index_view’s flex:1 + min-height:0 caps height to viewport so shell bg stops early.
   Apply to ANY .md-shell (home, boards, extras tabs), not just boards-full. */
#within_ember.bento-page-with-footer #content.index.with_user #index_view:has(.md-shell),
#within_ember:has(.page-footer) #content.index.with_user #index_view:has(.md-shell) {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

#within_ember.bento-page-with-footer #content.index.with_user #index_view:has(.md-shell) > .md-shell,
#within_ember:has(.page-footer) #content.index.with_user #index_view:has(.md-shell) > .md-shell {
  flex: 0 0 auto;
  min-height: 100vh;
  height: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#within_ember.bento-page-with-footer #content.index.with_user .ll-bento-app-shell .ll-bento-device-frame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: center !important;
}

#within_ember.bento-page-with-footer #content.index.with_user .ll-bento-device-frame > .row {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Footer: fixed height, at bottom of flex */
#within_ember.bento-page-with-footer .page-footer {
  position: static !important;
  bottom: auto;
  left: auto;
  right: auto;
  flex: 0 0 var(--bottombar-height);
  height: var(--bottombar-height);
  min-height: var(--bottombar-height);
}

/* Authenticated-view main content column fills row so shell stretches to footer */
#within_ember:has(.page-footer) #content.index.with_user .ll-bento-device-frame > .row.ll-bento-main-content > .col,
#within_ember.bento-page-with-footer #content .ll-bento-device-frame > .row.ll-bento-main-content > .col {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Authenticated-view main content: fit content height (no fixed height); overflow-x hidden to avoid horizontal scroll */
#content.index.with_user .ll-bento-device-frame > .row,
#within_ember.bento-page-with-footer #content .ll-bento-device-frame > .row {
  overflow-x: hidden;
}

/* Sticky top navbar on every page (main, landing, etc.) – match HTML mockup */
#within_ember > header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

/* Override Bootstrap .row clearfix pseudo-elements that add invisible space above/below header content */
#within_ember > header::before {
  display: none !important;
}

#within_ember #content {
  margin-top: 0 !important; /* override header + #content { margin-top: 50–200px } from legacy header_sizing.scss (Rails asset); !important needed to beat .speaking.tiny/.medium/.large/.huge variants */
  overflow-x: hidden !important; /* Kill horizontal scroll on authenticated pages at small widths; no element inside should ever need to scroll the whole page horizontally. */
  padding-top: calc(var(--topbar-height) + 3rem + var(--speak-bar-extra, 0px)); /* content below fixed header; extra grows when speak bar wraps */
}

#within_ember.dim_sides header #speak, #within_ember.dim_sides header #identity_button {
  opacity: 0.7;
}
#within_ember.dim_sides #sidebar > * {
  opacity: 0.7;
}

#within_ember.color_black {
  background: #000;
}
#within_ember.color_black header {
  background: #000;
  border-bottom-color: #444;
}
#within_ember.color_black #sidebar {
  background: #000;
  border-left-color: #444;
  border-bottom-color: #444;
}
#within_ember.color_black .board_status {
  color: #ccc;
}

/* ==========================================================================
   MODERN SCROLLBARS (Global)
   Applied: All scrollable elements (modals, sidebars, overflow areas)
   ========================================================================== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

*::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.45);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Applied in: app/templates/board/index.hbs (line 76)
   Board background container - bg_style, bg_class set via board controller */
#board_bg {
  display: flex;
  flex-direction: column;
  background: rgb(125, 125, 125);
  box-shadow: 5px 5px 10px rgb(125, 125, 125), -5px -5px 10px rgb(125, 125, 125), -5px 5px 10px rgb(125, 125, 125), 5px -5px 10px rgb(125, 125, 125);
}
#board_bg img {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
}
#board_bg .text {
  color: #000;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3), -1px -1px 0 rgba(255, 255, 255, 0.3), 1px -1px 0 rgba(255, 255, 255, 0.3), -1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;
  text-align: center;
  padding: 5px 20px;
  white-space: pre-line;
  font-size: max(14px, 6.6666666667vh); /* WCAG minimum floor; original scaled with viewport height */
}
#board_bg .text span {
  padding: 3px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 10px 0 0 rgba(255, 255, 255, 0.7), -10px 0 0 rgba(255, 255, 255, 0.7);
}
#board_bg.stretch .text {
  position: absolute;
  top: 0;
}
#board_bg .exclude:before, #board_bg .exclude:after {
  position: absolute;
  content: "";
  background: rgba(255, 0, 0, 0.7);
  display: block;
  width: 100%;
  height: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#board_bg .exclude:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Applied in: Various templates with meta_header id */
#meta_header {
  margin: 20px 50px;
}

header:after {
  clear: left;
}

header.row {
  margin: 0;
}

header:after {
  clear: right;
}

header form .btn {
  height: 34px;
}

/* normal_mode: flex row, just to the right of Done with Boards, with board_id on next row */
header #normal_mode {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

/* Board bar: Done (2 rows, col1) | normal_mode (row1) + board_id (row2) in col2 */
.nav-header__board-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.nav-header__board-bar #board_done {
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

.nav-header__board-bar-right {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  gap: 4px !important;
  overflow: visible !important;
}

.nav-header__board-bar-right #normal_mode {
  margin-top: 3px !important;
  overflow: visible !important;
}

#nav_header .nav-header__board-bar-right #board_id {
  position: static !important;
  left: auto !important;
  top: auto !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.25;
  display: flex;
  align-items: flex-end;
}
#nav_header .nav-header__board-bar-right #board_id img {
  margin-right: 5px;
}

/* Size #board_id to its content rather than stretching to fill its flex/column parent. */
#board_id {
  width: fit-content !important;
}

/* Board-alt: let #board_id grow to its natural content width (up to full page width) instead of being
   capped by the 300px clamp used elsewhere, and stretch its outer column so the long text can expand
   horizontally. Also nudged down 8px to align with the taller 84px
   inner_header in normal mode. */
#within_ember.board-alt-view #board_id,
#within_ember.board-alt-view #nav_header #board_id {
  max-width: none !important;
  width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-top: 8px !important;
}

#within_ember.board-alt-view .nav-header__board-bar,
#within_ember.board-alt-view .nav-header__board-bar-right {
  max-width: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

header #normal_mode .btn {
  height: 42px;
  padding: 8px 14px;
  padding-top: 12px;
  padding-bottom: 13px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

header #normal_mode .btn:hover,
header #normal_mode .btn:focus-visible {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827;
}

/* Speak Mode button: blue, white text, no border, same radius */
header #normal_mode #speak_mode.btn-primary,
header #normal_mode a#speak_mode.btn-primary {
  background: #4D83C0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
}

header #normal_mode #speak_mode.btn-primary:hover,
header #normal_mode a#speak_mode.btn-primary:focus-visible {
  background: #4374a8 !important;
  color: #fff !important;
  border: none !important;
}

/* Level dropdown (L10): same radius as other buttons, oval pill around level text */
header #normal_mode #level_dropdown,
header #normal_mode .dropdown a#level_dropdown {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px;
}

header #normal_mode #level_dropdown span[style*="border-radius: 100px"] {
  padding: 4px 10px !important;
  border-radius: 100px;
  border: 1px solid #D6E8F6 !important;
  background: #eaf5ff !important;
  margin-left: 0 !important;
}

/* Level dropdown reveal: keep the −/level/+ row and the explainer
   fully INSIDE the popover card. The − / + are `.btn`, so they
   otherwise inherit `header #normal_mode .btn` (42px header-pill
   sizing) and spill out above/around the menu panel. */
header #normal_mode #level_dropdown ~ .dropdown-menu {
  padding: 12px;
  min-width: 320px;
  border-radius: 10px;
  /* visible (not hidden): hidden was clipping the level text + the
     "+" button on the right of the first row. */
  overflow: visible;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

header #normal_mode #level_dropdown ~ .dropdown-menu > li[role=presentation] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  width: 100%;
}

/* Fixed compact squares so − / + can't grow and eat the row (they
   inherit header .btn which has no width cap). */
header #normal_mode #level_dropdown ~ .dropdown-menu .skippy.btn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 38px;
}

/* Middle label: flexible + allowed to wrap so it shrinks instead of
   shoving the "+" past the card edge. */
header #normal_mode #level_dropdown ~ .dropdown-menu > li[role=presentation] > span {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  white-space: normal;
  text-align: center;
  color: #1B365D;
}

/* Show text labels, hide icon-only on wide view (words like image) */
header #normal_mode .btn .wide {
  display: inline !important;
}

header #normal_mode .btn .skinny,
header #normal_mode .btn .real_skinny {
  display: none !important;
}

header #normal_mode .btn .caret,
header #normal_mode .btn b.caret {
  display: inline-block !important;
  margin-left: 4px;
}

/* Back button: show "Back" text, hide arrow so only word shows */
header #normal_mode .btn .hidden {
  display: inline !important;
}

header #normal_mode .glyphicon-arrow-left {
  display: none !important;
}

/* ── "Modern View" button (classic/board page, normal mode) ──
   Single link that takes the user to the modern (board-detail)
   view. Styled to match the Speak Mode primary button. The
   board-alt page re-themes nav buttons (see override near the
   board-alt block) so this matches Speak Mode there too. */
header #normal_mode .board-view-modern-btn.btn {
  margin-left: 4px;
  background: #4D83C0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
}

header #normal_mode .board-view-modern-btn.btn:hover,
header #normal_mode .board-view-modern-btn.btn:focus-visible {
  background: #4374a8 !important;
  color: #fff !important;
  border: none !important;
}

header #normal_mode .board-view-modern-btn.btn .glyphicon {
  margin-right: 5px;
}

/* ── Hamburger menu for board page (small screens) ──────── */
.la-board-hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.la-board-hamburger:hover {
  background: rgba(255, 255, 255, 0.2);
}

.la-board-hamburger__bar {
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

#normal_mode {
  position: relative;
}

/* Wrapper around hamburger button + dropdown — gives the dropdown
   a tight positioning context so it anchors directly below the
   hamburger button rather than #normal_mode's full-width container
   (which let the menu drop down from the far-right of the header).
   Inline-block so the wrapper hugs the button width. */
.la-board-hamburger-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.la-board-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(27, 54, 93, 0.08);
  padding: 8px;
  /* Bumped from 200 to 2000 so the dropdown clears every interactive
     layer on board-alt — the speak grid + board cells were rendering
     ON TOP of the menu at z-index 200 because the board surface
     itself paints into a higher stacking context. 2000 stays below
     true overlay layers (modal-backdrop ~1040, picker 901/900) so
     real modals still cover it correctly. */
  z-index: 2000;
  min-width: 240px;
  animation: la-board-menu-fade-in 0.15s ease;
  /* Cap the menu height to the available viewport space and scroll
     internally so users on short viewports can reach Exit Boards at
     the bottom. The 16px buffer pads against the page edge. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

@keyframes la-board-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.la-board-mobile-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease;
}

.la-board-mobile-menu__item:hover {
  background: rgba(42, 157, 143, 0.06);
}

.la-board-mobile-menu__item .glyphicon,
.la-board-mobile-menu__item img {
  font-size: 14px;
  color: #6B7280;
  flex-shrink: 0;
}

.la-board-mobile-menu__divider {
  height: 1px;
  background: rgba(27, 54, 93, 0.08);
  margin: 4px 8px;
}

.la-board-mobile-menu__item--exit {
  color: #fff;
  background: #46505F;
  border-radius: 10px;
  margin-top: 4px;
}

.la-board-mobile-menu__item--exit:hover {
  background: #374151;
}

.la-board-mobile-menu__item--exit .glyphicon {
  color: #fff !important;
}

/* ── Board page responsive: collapse action buttons into hamburger ──
   Breakpoint bumped from 1024px → 1500px so the hamburger collapse
   kicks in earlier and the right-side action cluster on board-alt
   normal mode never overruns the header. Affects both the classic
   board view (.nav-header__board-bar) and board-alt; the hamburger
   menu items themselves are unchanged. */
@media (max-width: 1500px) {
  /* Show hamburger */
  #inner_header .la-board-hamburger {
    display: flex !important;
  }
  /* Hide Exit Boards button (it's in the hamburger menu now) */
  #inner_header #board_done {
    display: none !important;
  }
  /* Hide Exit Boards and all action buttons — use class on #normal_mode children */
  .nav-header__board-bar #board_done {
    display: none !important;
  }
  .nav-header__board-bar #normal_mode .btn,
  .nav-header__board-bar #normal_mode .btn-group,
  .nav-header__board-bar #normal_mode .dropdown,
  .nav-header__board-bar #normal_mode a.btn,
  .nav-header__board-bar #normal_mode span.btn {
    display: none !important;
  }
  /* Keep visible: back button (has glyphicon-arrow-left) */
  .nav-header__board-bar #normal_mode a.btn:has(.glyphicon-arrow-left) {
    display: inline-flex !important;
  }
  /* Keep visible: speak mode button (#speak_mode) */
  .nav-header__board-bar #normal_mode #speak_mode {
    display: inline-flex !important;
    margin-left: 8px !important;
  }
  .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) {
    display: inline-flex !important;
  }
  .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) .btn {
    display: inline-flex !important;
  }
  /* Keep visible: hamburger */
  .nav-header__board-bar #normal_mode .la-board-hamburger {
    display: flex !important;
  }
  /* Shrink board ID text */
  #board_id {
    font-size: 14px !important;
  }
  /* Reduce header padding */
  .nav-header__board-bar {
    gap: 4px !important;
  }
  header #normal_mode .btn {
    padding: 6px 10px !important;
    font-size: 14px !important;
    height: 36px;
  }
}
@media (max-width: 640px) {
  #board_id {
    font-size: 14px !important;
  }
  header #normal_mode .btn {
    padding: 5px 8px;
    font-size: 14px;
    height: 34px;
  }
  .la-board-hamburger {
    width: 36px;
    height: 36px;
  }
  .la-board-hamburger__bar {
    width: 16px;
  }
  /* Reduce board container margins */
  .board {
    margin: -5px -10px;
  }
}
@media (max-width: 480px) {
  #board_id {
    font-size: 14px !important;
  }
  #board_id .user-name {
    display: none;
  }
  header #normal_mode .btn {
    padding: 4px 6px;
    font-size: 14px;
    height: 32px;
  }
  .la-board-hamburger {
    width: 32px;
    height: 32px;
    gap: 3px;
  }
  .la-board-hamburger__bar {
    width: 14px;
  }
  /* Minimal board margins */
  .board {
    margin: -2px -4px;
  }
}
/* Normal mode (after exiting speak mode): hide logo and brand name on navbar */
header:has(#normal_mode) .nav-header__brand {
  display: none !important;
}

/* Applied in: app/templates/application.hbs (line 1074), app/templates/setup-footer.hbs
   Setup wizard footer - setup_footer set via application/setup controllers */
#setup_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  background: #eee;
  padding: 5px 10px;
  z-index: 3;
  border-top: 1px solid #aaa;
}

.btn-success {
  box-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff, 5px -5px 10px #fff, -5px 5px 10px #fff;
}

.btn-success.throb {
  animation: throb-shadow 1.5s ease-in-out infinite;
}

@keyframes throb-shadow {
  0%, 100% {
    color: #fff;
    box-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff, 5px -5px 10px #fff, -5px 5px 10px #fff;
  }
  50% {
    color: #ff0;
    box-shadow: 5px 5px 10px #ff0, -5px -5px 10px #ff0, 5px -5px 10px #ff0, -5px 5px 10px #ff0;
  }
}
.bold {
  font-weight: bold;
}

h1 {
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  margin: 5px 0 0 5px;
  font-weight: normal;
  font-size: 18px;
}

h1 span {
  font-size: 25px;
  position: relative;
  top: 0px;
  left: -5px;
  display: none;
  font-weight: 200;
}

h1 span.label {
  left: 9px;
  top: 25px;
  position: relative;
  font-size: 14px;
  margin-right: -50px;
}

h1 a:focus-visible {
  text-decoration: none;
}

.hidden_link {
  color: #444;
}
.hidden_link:hover {
  text-decoration: none;
}

.fit_image {
  object-fit: contain;
  object-position: center;
}

.pointer {
  cursor: pointer;
}

.analysis_extra {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  font-size: 14px;
  vertical-align: middle;
  position: relative;
}

.safe_html {
  width: 100%;
  overflow: hidden;
  white-space: pre-line;
}
.safe_html img {
  max-width: 400px;
}

#board_canvas {
  outline: none;
}

#board_canvas:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  #board_canvas:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.really_bold {
  font-weight: bold;
  font-size: 18px;
}

.well.with_bg {
  padding: 10px 35px;
  background: #fff;
}

.well.folder {
  border-color: #aaa;
  background: #e6e6e6;
  position: relative;
}
.well.folder:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #aaa #eee;
}

.row .faded_back > div {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  border: 5px solid rgba(255, 255, 255, 0.25);
}

.row .full_back {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  margin: -10px;
  padding: 10px;
  width: 101%;
  width: calc(100% + 15px);
}

.row .full_back .icon_column {
  text-align: center;
  padding: 0 30px;
}
.row .full_back .icon_column .big_icon {
  font-size: 100px;
  vertical-align: middle;
}
.row .full_back .icon_column .icon_under {
  display: block;
  line-height: 22px;
  font-size: 17px;
  margin-top: 12px;
}

p.explanation {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 0;
}

#secondary_title {
  display: block;
}

/* Applied in: Various loading states - loading_box referenced in app-state.js */
#loading {
  position: absolute;
  top: 50%;
  display: block;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  min-height: 50px;
  margin-top: -75px;
  z-index: 9999;
  left: 50%;
  width: 500px;
  max-width: calc(100vw - 40px);
  margin-left: -250px;
  text-align: center;
}
#loading img {
  display: block;
  margin: 6px auto 0;
  width: 120px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 550px) {
  #loading {
    width: calc(100vw - 40px);
    margin-left: calc(-50vw + 20px);
  }
}
/* Applied in: app/templates/index.hbs (line 17)
   Referenced in: index controller, dashboard/authenticated-view.js */
#login_overlay {
  position: fixed;
  background: #fafafa;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: -500px;
  bottom: -500px;
  z-index: 9999;
  padding: 530px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modeling_toggle {
  float: right;
  margin-top: 5px;
}
.modeling_toggle a:focus-visible {
  text-decoration: none;
}
.modeling_toggle a {
  margin-left: 3px;
  padding: 5px 10px;
}
.modeling_toggle a.active {
  background: #337ab7;
  color: #fff;
  border-radius: 3px;
}

header .btn .skinny {
  display: inline;
  font-size: 25px;
}

header .btn .skinny.real_skinny {
  display: inline-block;
  margin-top: -14px;
  margin-bottom: -10px;
  vertical-align: middle;
}

header .btn.wide {
  display: none; /* TODO: accessibility, duh */
}

header .btn .wide {
  display: none;
}

header .wide_placeholder {
  display: none;
}

header .btn {
  padding-left: 7px;
  padding-right: 7px;
}

/* Inner header: flex row so nav_header and identity sit side-by-side */
#inner_header {
  display: flex !important;
  align-items: center !important;
  background: #F8F9FA !important;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08) !important;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.06) !important;
}

/* Boards page, not in speak mode: bottom shadow on inner_header (outside container) */
header:has(#normal_mode) #inner_header {
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08) !important;
}

/* Board-alt page in normal (non-speak) mode: pin the inner_header to a
   consistent 84px so the toolbar height doesn't fluctuate with content
   wrapping (was rendering at 72.5px before this rule). */
#within_ember.board-alt-view header:has(#normal_mode) #inner_header {
  min-height: 84px !important;
  height: auto !important;
}

/* Let the classic normal-mode nav header grow when the toolbar (now
   including the View Style toggle) wraps, instead of clipping the
   wrapped row at the global fixed 70px. Scoped to board-alt normal
   mode only so other pages keep their fixed-height header. */
#within_ember.board-alt-view header:has(#normal_mode) #nav_header {
  height: auto !important;
  min-height: 70px !important;
  align-items: center !important;
  padding: 6px 0 !important;
}

/* Board-alt SPEAK mode: the legacy _header_sizing.scss forces
   `header.new_index.speaking.medium { height: 100px }` (and 50/70/150/200
   for the other vocalization sizes). The MODERN speak bar's
   .speak-bar__button-list-wrap card has a `min-height: 88px` because
   it must fit the 72px .history_button chip plus 8px top/bottom
   padding. When the legacy CSS forced the outer header to a value
   below 88px (tiny: 50, small: 70), the modern card overflowed the
   header and the spillover sat ON TOP of the grid below. So the
   override here pins `height: auto` to let the outer header size
   to its content (the 88px card), and board/index.js's
   _updateFromSpeakBarResize measures this real height and publishes
   it as `--speak-header-height` so #content padding + grid height
   reserve exactly the measured value. Honoring the vocalization_
   height "small=70px" setting on board-alt would require shrinking
   the modern card AND its inner chip to fit — out of scope here;
   board-detail's speak bar already honors the setting via the
   .md-board-detail-sentence-bar--{size} per-row heights. */
#within_ember.board-alt-view header.speaking:has(#speak),
#within_ember.board-alt-view header.speaking:has(#speak) #inner_header {
  height: auto !important;
  min-height: 0 !important;
}

#within_ember.board-alt-view header.speaking:has(#speak) {
  background: #46505F !important;
}

/* Match #inner_header's background + suppress the light `border-bottom`
   on board-alt speak. The base `#inner_header:has(#speak)` rule above
   sets `background: #fff` and `border-bottom: 1px solid #e9ecef` —
   intended for light-themed speak pages — but on board-alt the outer
   header is charcoal-blue, so the white inner bg + light border show
   as a thin white sliver at the bottom of the speak bar against the
   dark surround. Override locally so board-alt's bar reads as one
   continuous dark surface. */
#within_ember.board-alt-view header.speaking:has(#speak) #inner_header {
  background: #46505F !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Applied in: app/templates/application.hbs (line 171), app/templates/brief.hbs (line 32)
   Navigation header - nav_header_class from app-state service */
#nav_header {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 70px !important;
}
#nav_header #board_id {
  font-size: 14px !important;
  position: absolute !important;
  left: 60px !important;
  top: 38px !important;
  max-width: 300px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nav_header #org_name {
  font-size: 14px !important;
  position: absolute !important;
  left: 70px !important;
  top: 48px !important;
  font-style: italic !important;
  color: #777 !important;
  max-width: 300px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nav_header #org_name .nav-header__org-sep {
  margin: 0 6px !important;
  opacity: 0.8 !important;
  font-style: normal !important;
}
#nav_header.board_done #board_id {
  left: 120px !important;
}
#nav_header #board_done {
  width: 115px;
  height: 65px;
  margin-top: 2px;
  margin-left: 4px;
  margin-right: -2px;
  text-align: left;
  background: linear-gradient(to right, #fff 95%, #ddd 100%);
}
#nav_header #header_search {
  display: inline-block;
  padding-left: 10px;
}
#nav_header #header_search .form-control {
  border-radius: 14px;
}
#nav_header .header-search-wrap {
  position: relative;
  display: inline-block;
  width: 180px;
}
#nav_header #header_search .header-search-input {
  padding-right: 36px;
  width: 100%;
}
#nav_header #header_search .header-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 1;
}
#nav_header #header_search .header-search-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
#nav_header #header_search .header-search-icon {
  pointer-events: none;
}
#nav_header #header_search .header-search-btn,
#nav_header #header_search .header-search-icon {
  color: rgba(255, 255, 255, 0.92);
}
.header-index-with-dark-toggle #nav_header #header_search {
  margin-left: 18px !important;
}
#nav_header.no_beta h1 {
  margin-top: 20px !important;
}
#nav_header.no_beta h1 img {
  margin-top: -15px;
}
#nav_header.no_beta h1 .label-primary {
  display: none;
}
#nav_header.no_beta h1.with_board img {
  margin-top: -10px;
}

.site-emergency {
  font-weight: bold;
  color: #a00;
}

.site-danger {
  color: rgb(204, 102, 0);
}

.site-warning {
  color: rgb(201, 204, 0);
}

/* Applied in: app/templates/application.hbs (line 6) - speak mode header area
   Referenced in: raw_events.js, scanner.js */
#inner_header #speak {
  display: block;
  float: left;
  padding: 2px 2px 3px 2px;
}

/* Carved-out home marker: distinct left section of speak-mode topbar */
.speak-header__home-marker {
  float: left;
  padding: 6px 14px 6px 12px;
  margin: 4px 10px 4px 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0 12px 12px 0;
  border-left: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), 1px 0 0 rgba(0, 0, 0, 0.04);
  min-height: 36px;
  box-sizing: border-box;
}

.speak-header__home-marker .btn {
  margin: 0;
  padding: 4px 6px 4px 4px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.speak-header__home-marker .btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

#home_button .button_icon {
  font-size: 1.2em;
  margin-left: -6px;
}

/* Speak mode header: clean white bar, subtle bottom border (target design) */
#inner_header:has(#speak) {
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid #e9ecef !important;
}

#inner_header:has(#speak) #speak {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  padding: 2px 2px !important;
  gap: 2px !important;
}

/* Evaluation toolbar + sentence strip: allow wrap on narrow viewports so inner_header height updates via ResizeObserver */
#inner_header:has(#speak) #speak:has(.speak-bar__eval-actions) {
  flex-wrap: wrap !important;
  align-items: stretch !important;
  row-gap: 4px !important;
}

#inner_header:has(#speak) .speak-header__home-marker {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* Home: square, matches button_list height (58px), white bg, slightly darker outline, no radius */
#inner_header:has(#speak) .speak-header__home-marker .btn,
#inner_header:has(#speak) #home_button.btn {
  background: #fff !important;
  border: 1px solid #c4c4c4 !important;
  border-radius: 0 !important;
  color: #5a5a5a !important;
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

#inner_header:has(#speak) .speak-header__home-marker .btn:not(#home_button):hover,
#inner_header:has(#speak) #home_button.btn:not(.board-picker-btn--open):hover {
  background: #F8F9FA !important;
  border-color: #b8b8b8 !important;
}

#inner_header:has(#speak) #home_button .button_icon {
  color: #5a5a5a !important;
  font-size: 1.6em !important;
}

/* AAC evaluation: prev / next / settings visible on speak bar (same actions as identity menu) */
#inner_header:has(#speak) .speak-bar__eval-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  margin: 0 4px 0 0 !important;
}

#inner_header:has(#speak) .speak-bar__eval-actions .speak-bar__eval-actions__label {
  margin-left: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#inner_header:has(#speak) .speak-bar__eval-actions .speak-bar__eval-btn--next {
  padding-left: 10px !important;
  padding-right: 12px !important;
}

/* Wrapper for button_list + speak_options: container outline and flex layout; grows when words wrap.
   wrap min-height + chip height + image height are driven by CSS
   custom properties so the bar scales with the user's
   vocalization_height (small/medium/large/huge — `tiny` is a legacy
   alias for small via utils/display_prefs.js). The size-class
   rules below this block (`header.speaking.small`, `.medium`, etc.)
   set the per-size values; this rule's fallbacks reproduce the
   prior hardcoded small/90 baseline so contexts that don't set the
   vars (e.g. the eval header, no size class on header) stay
   unchanged. The +2px on each pair (wrap > chip > img) is the 8+8
   wrap padding + roughly the chip's internal label/padding so the
   image fills the chip vertically without clipping. */
#inner_header:has(#speak) .speak-bar__button-list-wrap {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #6c757d !important;
  border-radius: 0;
  padding: 8px 8px;
  margin: 0;
  min-height: var(--bav-wrap-h, 88px);
  box-sizing: border-box;
  gap: 0;
}

/* Per-size CSS-var sets — applied to the speaking header so they
   cascade to the wrap + chip + img descendants. Header sizes match
   `utils/display_prefs.js`:
     small  → 90px (also the `tiny` legacy alias)
     medium → 100px
     large  → 150px
     huge   → 200px
   wrap-h = header - 2px (lets the 1px wrap border fit inside the
                          header's effective box without overflowing)
   chip-h = wrap-h - 16px (matches the 8 top + 8 bottom wrap padding)
   img-h  = chip-h - 22px (leaves room for a single-line label below
                           the image inside the chip) */
#within_ember.board-alt-view header.new_index.speaking.small,
#within_ember.board-alt-view header.new_index.speaking.tiny {
  --bav-wrap-h: 88px;
  --bav-chip-h: 72px;
  --bav-img-h: 50px;
}

#within_ember.board-alt-view header.new_index.speaking.medium {
  --bav-wrap-h: 98px;
  --bav-chip-h: 82px;
  --bav-img-h: 60px;
}

#within_ember.board-alt-view header.new_index.speaking.large {
  --bav-wrap-h: 148px;
  --bav-chip-h: 132px;
  --bav-img-h: 100px;
}

#within_ember.board-alt-view header.new_index.speaking.huge {
  --bav-wrap-h: 198px;
  --bav-chip-h: 182px;
  --bav-img-h: 140px;
}

/* Sentence bar link inside wrapper: fills space, no scroll; words wrap to next line when needed */
#inner_header:has(#speak) .speak-bar__button-list-wrap #button_list {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  color: #212529 !important;
  display: flex !important;
  align-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Button list inner wrapper: flex wrap so chips that would be cut off wrap to the next line */
#inner_header:has(#speak) #button_list > * {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  row-gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Speak options button inside wrapper: right-aligned */
#inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  border-color: #c4c4c4 !important;
}

/* Sentence bar word chips: allow full label to show; min width for symbol-only chips */
#inner_header:has(#speak) #button_list .history_button {
  height: var(--bav-chip-h, 72px) !important;
  min-width: 36px !important;
  max-width: none !important;
  margin: 0 6px !important;
  /* Legacy _header_sizing.scss adds `padding-top: 10px` to
     `.speaking.<size> #button_list .history_button`, which shoves the
     chip's image+label down inside the modern 72px chip and clips the
     bottom. The modern bar centers chip content via the flex parent, so
     this legacy top padding is unwanted — zero it out. */
  padding: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

#inner_header:has(#speak) #button_list .history_button .text {
  white-space: nowrap !important;
  overflow: visible !important;
}

#inner_header:has(#speak) #button_list .history_button img {
  height: var(--bav-img-h, 50px) !important;
  max-width: 48px !important;
}

#inner_header:has(#speak) #button_list .utterance_cursor {
  height: 35px !important;
  margin: 0 4px !important;
}

#inner_header:has(#speak) .progress {
  margin-bottom: 0 !important;
}

#inner_header:has(#speak) #speak_options {
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  min-width: 52px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* Right-side controls: square, white bg, faint border, grouped closely */
#inner_header:has(#speak) #speak_options,
#inner_header:has(#speak) #back_button,
#inner_header:has(#speak) .speak-bar__eval-actions .btn.speak-bar__eval-btn,
#inner_header:has(#speak) #backspace_button,
#inner_header:has(#speak) #clear_button,
#inner_header:has(#speak) #speak .btn.btn-default.pass_to_btn_list,
#inner_header:has(#speak) #speak .btn.btn-default.access {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  color: #333 !important;
  box-shadow: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* Backspace and clear: match button_list height (58px) */
#inner_header:has(#speak) .speak-bar__eval-actions .btn.speak-bar__eval-btn,
#inner_header:has(#speak) #backspace_button,
#inner_header:has(#speak) #clear_button {
  height: 90px !important;
  min-height: 90px !important;
}

/* Intro Start/Skip: smaller than prev/next/settings (must follow 90px eval rule) */
#inner_header:has(#speak) .speak-bar__eval-actions .btn.speak-bar__eval-btn.speak-bar__eval-btn--compact {
  height: auto !important;
  min-height: 44px !important;
  max-height: 56px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#inner_header:has(#speak) #clear_button .button_icon,
#inner_header:has(#speak) #clear_button .glyphicon {
  font-size: 1.4em !important;
}

#inner_header:has(#speak) #backspace_button {
  margin-left: 3px !important;
}

#inner_header:has(#speak) #speak_options:hover,
#inner_header:has(#speak) #back_button:hover,
#inner_header:has(#speak) .speak-bar__eval-actions .btn.speak-bar__eval-btn:hover,
#inner_header:has(#speak) #backspace_button:hover,
#inner_header:has(#speak) #clear_button:hover,
#inner_header:has(#speak) #speak .btn.btn-default.pass_to_btn_list:hover,
#inner_header:has(#speak) #speak .btn.btn-default.access:hover {
  background: #F8F9FA !important;
  border-color: #dee2e6 !important;
}

#inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options:hover {
  border-color: #b8b8b8 !important;
}

#inner_header:has(#speak) #speak .btn .button_icon,
#inner_header:has(#speak) #speak .glyphicon {
  color: #333 !important;
}

/* Backspace: keep square, constrain icon size so button isn’t oversized */
#inner_header:has(#speak) #backspace_button img[src*="delete.svg"] {
  width: 20px !important;
  height: 14px !important;
  display: block !important;
  filter: none !important;
  object-fit: contain !important;
}

#inner_header:has(#speak) #speak img[src*="delete.svg"] {
  filter: none !important;
}

/* Identity in speak bar: slight left margin */
#inner_header:has(#speak) #identity {
  padding-right: 0 !important;
  margin-left: 4px !important;
}

#inner_header:has(#speak) #identity #identity_button.btn {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 90px !important;
  min-width: 90px !important;
  height: 90px !important;
  min-height: 90px !important;
  padding: 8px 6px !important;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#inner_header:has(#speak) #identity #identity_button.btn:hover,
#inner_header:has(#speak) #identity #identity_button.btn:focus-visible {
  background: #f9fafb !important;
  background-image: none !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Tiny header (viewport height < 400px → header_size=='tiny' → header height 50px).
   The 90px identity button defined above would overflow the 50px band and visually
   shift up. Shrink the button + avatar to fit inside the tiny header. */
header.speaking.tiny #inner_header:has(#speak) #identity #identity_button.btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px !important;
}

header.speaking.tiny #inner_header:has(#speak) #identity .user_holder,
header.speaking.tiny #inner_header:has(#speak) #identity img.user {
  width: 32px !important;
  height: 32px !important;
}

/* Avatar circle: neutral slate (modern, professional).
   IMPORTANT — use `background-color`, NOT the `background` shorthand.
   The shorthand resets `background-image` to `none`, which wipes the
   data-URI silhouette painted by `.user_holder--default` further
   down (around line ~2515). That selector here is 3 IDs + 1 class so
   with `!important` it wins specificity against `.user_holder--default`'s
   `background-image: url(/...) !important`. Net effect of the previous
   shorthand was an empty slate circle on board-alt speak mode (and
   anywhere else `#inner_header:has(#speak)` matches) for users with
   the default avatar — the silhouette wasn't rendering at all.
   See docs/task-management/2026-05-28-identity-avatar-board-alt.md. */
#inner_header:has(#speak) #identity .user_holder {
  background-color: #e2e8f0 !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: none !important;
}

#inner_header:has(#speak) #identity img.user {
  border: none !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Dropdown chevron: to the right of user img, subtle */
#inner_header:has(#speak) #identity #identity_button .caret {
  border-top-color: #6B7280 !important;
  border-width: 4px 4px 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  order: 10 !important;
}

/* Logging (briefcase) badge: top-right, inverted colors, no outline, 10% larger */
#inner_header:has(#speak) #identity .logging_enabled {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: none !important;
  box-sizing: border-box !important;
}

#inner_header:has(#speak) #identity .logging_enabled.glyphicon-briefcase {
  font-size: 14px !important;
}

/* Unread/status badges: inside circle, top-left so briefcase can stay top-right */
#inner_header:has(#speak) #identity #identity_button .unread {
  top: 2px !important;
  right: auto !important;
  left: 2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 14px;
  line-height: 18px;
  border-radius: 9px;
  border: 1.5px solid #fff;
  box-sizing: border-box;
}

/* Applied in: app/templates/application.hbs (line 519) - user/identity dropdown
   Referenced in: raw_events.js, scanner.js */
#identity {
  text-align: right;
  padding: 0 20px 0 0;
  margin-left: 12px;
  display: flex;
  align-items: center;
  height: auto;
  width: auto;
  flex-shrink: 0;
}
#identity .unread {
  position: absolute;
  left: 10px;
  top: 40px;
  border-radius: 5px;
}
#identity .logging_enabled {
  position: absolute;
  top: 5px;
  right: 5px;
}
#identity .dropdown .big {
  font-size: 20px;
}
#identity .user_holder {
  display: inline-block;
  width: 90px;
  height: 90px;
  margin: -12px 0 -10px -30px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#identity img.user {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}
#identity {
  /* Default-avatar fallback was previously an inline <svg> rendered
     alongside the <img>, with a `:has()`-based CSS swap hiding one
     or the other. The inline SVG was stripped from the templates
     after production builds began mangling its `url(#gradient-id)`
     refs; the silhouette is now painted via the
     `.user_holder--default` background-image data URI further down
     in this file. No SVG element to style in this scope anymore. */
}
#identity .status {
  background: rgba(255, 0, 0, 0.5);
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
#identity #identity_button.online .status {
  background: rgba(0, 255, 0, 0.2);
  display: none;
}

/* Pure-CSS avatar swap via :has() — no helper, no template
   conditional, no dev-server restart needed. The Apple-style
   silhouette is embedded as a background-image data URI on the
   .user_holder; the <img> covers it for users with a real uploaded
   photo, and is hidden when its src matches the legacy default
   placeholder so the background SVG shows through.

   NO SVG GRADIENT REFS: the Rails production asset pipeline
   (Sprockets) normalizes every `url(/...)` in CSS through
   `asset_path`, even inside `data:` URIs. It doesn't special-case
   fragment refs, so a SOURCE `fill='url(/%23m)'` gets rewritten to
   the DEPLOYED `fill='url(/%23m)'` — a path-rooted URL with the
   fragment, which doesn't resolve to a gradient definition inside
   the same SVG. Per SVG spec the fill then becomes transparent,
   which produced the previous deployment bug: head visible (solid
   color), body invisible (broken gradient ref). The fix is to use
   solid colors throughout — no `<defs>`, no `url(#…)` refs, no
   surface area for the asset pipeline to mangle. Visual identity
   is preserved by picking colors from the original gradients'
   endpoints (periwinkle head, navy body, matching the two-tone
   LingoLinq logo). See docs/task-management/2026-05-24-identity-
   dropdown-avatar-hollow-shell.md for the diagnosis trail. */
.user_holder--default {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='42' fill='%23EAEBF6'/%3E%3Ccircle cx='48' cy='48' r='40.75' fill='none' stroke='%23FFFFFF' stroke-opacity='0.85' stroke-width='2'/%3E%3Ccircle cx='48' cy='48' r='25' fill='%23EFF1F9' stroke='%23E0E2F0' stroke-width='1' stroke-opacity='0.7'/%3E%3Ccircle cx='48' cy='38.5' r='8.5' fill='%238585E6'/%3E%3Cpath d='M31.8 62.5C34.6 53.8 40.7 49.7 48 49.7C55.3 49.7 61.4 53.8 64.2 62.5C60.5 65.8 55 67.7 48 67.7C41 67.7 35.5 65.8 31.8 62.5Z' fill='%231B1F4A'/%3E%3C/svg%3E") !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
}

.user_holder--default img.user {
  display: none !important;
}

/* (Companion rule for the now-removed inline `<svg>` was stripped —
   the data-URI background-image above paints the silhouette
   directly on `.user_holder--default`, so no inner element to
   reveal.) */
header.speaking, .board.speak {
  -webkit-touch-callout: none !important; /* iOS Safari */
  -webkit-user-select: none !important; /* Safari */
  -khtml-user-select: none !important; /* Konqueror HTML */
  -moz-user-select: none !important; /* Firefox */
  -ms-user-select: none !important; /* Internet Explorer/Edge */
  user-select: none !important; /* Non-prefixed version, currently
supported by Chrome and Opera */
}

.board.speak {
  margin-top: 32px !important;
}

.md-board-detail-grid.board.speak {
  margin-top: 0px !important;
}

/* board-alt (classic) speak mode fills the viewport like the modern
   grid; the 32px top margin above leaves a dead strip there. */
#within_ember.board-alt-view .board.speak {
  margin-top: 0px !important;
}

/* Eval intro: the bespoke intro panel replaces the board grid, so the 32px
   speak-mode top margin just opens a dead strip between the word bar and the
   intro. Remove it so the intro sits flush (matches the overrides above). */
.board.speak.eval_intro {
  margin-top: 0px !important;
}

/* Edit-mode entry fade wrapper. During the route transition into edit
   mode, `ordered_buttons` gets replaced 2-3 times (cached plain-object
   buttons → _build_from_raw rebuild → process_for_displaying rebuild).
   Each replacement renders. The intermediate frames can show level-rule
   mutations on `btn.hidden` that the user doesn't want to see (eye-slash
   badges, desaturated buttons, dashed outlines).
   This wrapper renders the grid with opacity:0 while `grid_loading` is
   true on the controller, then fades to opacity:1 once the state has
   settled. The user sees the final, correct state — not the churn. */
.md-board-detail-grid-fade {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.md-board-detail-grid-fade--loading {
  opacity: 0;
}

header.speaking #identity {
  width: auto;
  padding-right: 2px;
}

#identity .btn {
  /* Base layout/size only; background/color overridden by header rules to match Watch Demo (#la-demo) glass */
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  border: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  width: auto !important;
  transition: filter 0.15s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}
#identity .btn:hover {
  text-decoration: none;
}

/* Identity button in header: same glass as Watch Demo (#la-demo), same shadow as Try Free; no blue/teal gradient */
header:not(.header-index-with-dark-toggle) #identity #identity_button.btn {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #1B365D !important;
  font-weight: normal !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
}

header:not(.header-index-with-dark-toggle) #identity #identity_button.btn:hover,
header:not(.header-index-with-dark-toggle) #identity #identity_button.btn:focus-visible {
  background: rgba(255, 255, 255, 0.32) !important;
  background-image: none !important;
  color: #1B365D !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  filter: none !important;
}

header.speaking #identity .btn {
  width: 58px !important;
}

#identity .user_name {
  display: none !important;
  max-width: 85px !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

header.speaking #identity .user_name {
  display: none !important;
}

@keyframes nav-btn-slide-in {
  from {
    opacity: 0 !important;
    transform: translateX(28px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}
#identity.app-navbar-auth-nav--desktop .dropdown {
  animation: nav-btn-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0ms !important;
}

#identity.app-navbar-auth-nav--desktop .app-navbar__beta-feedback-link {
  animation: nav-btn-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 50ms !important;
}

#identity.app-navbar-auth-nav--desktop .ll-bento-help-btn--support {
  animation: nav-btn-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 60ms !important;
}

#identity.app-navbar-auth-nav--desktop .md-pillnav__upgrade-nav,
#identity.app-navbar-auth-nav--desktop .ll-bento-upgrade-btn--nav {
  animation: nav-btn-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 120ms !important;
}

/* Ensure the identity dropdown trigger is the positioning context for its menu so the
   popup anchors to the avatar (not the viewport) and sits above the fixed header. */
#identity .dropdown {
  position: relative;
}

/* Modern identity dropdown menu — dark slate bg, light text */
#identity .dropdown .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1050 !important;
  margin-top: 8px !important;
  padding: 8px 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  background: #374151;
  min-width: 0;
  width: max-content;
  overflow: hidden;
  animation: identityDropdownFadeIn 0.15s ease-out;
}
#identity .dropdown .dropdown-menu > li > a,
#identity .dropdown .dropdown-menu > li > .ember-view {
  padding: 10px 22px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  transition: background 0.12s ease, color 0.12s ease;
  border-radius: 0;
  display: block;
  text-decoration: none;
  line-height: 1.4;
}
#identity .dropdown .dropdown-menu > li > a:hover, #identity .dropdown .dropdown-menu > li > a:focus-visible,
#identity .dropdown .dropdown-menu > li > .ember-view:hover,
#identity .dropdown .dropdown-menu > li > .ember-view:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
}
#identity .dropdown .dropdown-menu > li > a .glyphicon,
#identity .dropdown .dropdown-menu > li > .ember-view .glyphicon {
  margin-right: 6px;
  font-size: 14px;
  opacity: 0.85;
}
#identity .dropdown .dropdown-menu > li.big > a {
  font-size: 16px;
  font-weight: 600;
  padding: 12px 22px;
  color: rgba(255, 255, 255, 0.95);
}
#identity .dropdown .dropdown-menu > li.big > a:hover, #identity .dropdown .dropdown-menu > li.big > a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
#identity .dropdown .dropdown-menu .dropdown-header {
  padding: 12px 22px 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: none;
}
#identity .dropdown .dropdown-menu .divider {
  margin: 6px 14px;
  background-color: rgba(255, 255, 255, 0.15);
  height: 1px;
  border: none;
}
#identity .dropdown .dropdown-menu > li > a .label {
  vertical-align: middle;
  margin-right: 4px;
}
#identity .dropdown .dropdown-menu a {
  color: rgba(255, 255, 255, 0.95);
}
#identity .dropdown .dropdown-menu a:hover, #identity .dropdown .dropdown-menu a:focus-visible {
  color: #ffffff;
}
#identity .dropdown .dropdown-menu .ll-theme-picker-dropdown-label.dropdown-header {
  color: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.15);
}

@keyframes identityDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#nav_header h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: var(--topbar-height) !important;
  display: inline-flex !important;
  align-items: center !important;
}

h1.with_board {
  margin-top: 10px !important;
  margin-bottom: -5px !important;
}

h1.with_board .nav-header__app-name {
  font-size: 20px !important;
  position: relative !important;
  top: 0 !important;
  left: -5px !important;
}

h1.with_board span.label {
  display: none !important;
}

h1 a {
  color: #444 !important;
}

h1 a:hover {
  text-decoration: none !important;
}

/* Nav header brand: logo and app name in separate links for independent formatting.
   Override global h1 span { display: none } so brand persists at all screen sizes. */
.nav-header__brand {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: -20px !important;
  margin-left: -16px !important;
  height: var(--topbar-height) !important;
  gap: 4px !important;
}

#nav_header h1 .nav-header__brand {
  display: inline-flex !important;
}

#nav_header h1 .nav-header__brand .nav-header__logo {
  display: inline-flex !important;
}

.nav-header__logo-svg {
  height: 22px !important;
  width: auto !important;
  display: block !important;
}

.nav-header__logo img {
  height: 22px !important;
  width: auto !important;
}

/* Push the navbar's inner content inward by 32px from the left edge so the
   brand logo doesn't sit flush against the page edge. Applied to the outer
   navbar inner wrapper rather than to the link itself, so the link's focus
   ring stays tight around just the logo content.
   Also: position: relative so .la-topbar-nav can be absolute-centered below. */
.app-navbar .app-navbar__inner {
  padding-left: 32px !important;
  position: relative !important;
}

/* Center the main nav links (Features / About / Beta feedback) horizontally
   AND vertically on the navbar, independent of the brand on the left and
   the right cluster (Try Free + identity dropdown). Absolute positioning
   relative to .app-navbar__inner (set position: relative just above)
   guarantees true page-center alignment regardless of brand or
   right-cluster widths. Mobile media query at line ~33641 hides
   .la-topbar-nav entirely (replaced by a hamburger menu), so this absolute
   positioning is only active on desktop where there's room. */
.app-navbar .la-topbar-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

#nav_header h1 .nav-header__brand .nav-header__app-name,
#nav_header h1 .nav-header__brand .nav-header__app-name span {
  display: inline !important;
}

#nav_header h1 .nav-header__brand .nav-header__app-name {
  display: inline-block !important;
}

.app-navbar .app-navbar__brand .nav-header__brand {
  display: inline-flex !important;
}

.app-navbar .app-navbar__brand .nav-header__brand .nav-header__logo {
  display: inline-flex !important;
}

.app-navbar .app-navbar__brand .nav-header__brand .nav-header__app-name,
.app-navbar .app-navbar__brand .nav-header__brand .nav-header__app-name span {
  display: inline !important;
}

.app-navbar .app-navbar__brand .nav-header__brand .nav-header__app-name {
  display: inline-block !important;
}

.nav-header__logo-link,
.nav-header__app-name-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.nav-header__logo-link:hover,
.nav-header__app-name-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

/* Keyboard-only focus indicator (mouse clicks are already quiet thanks to
   the global :focus → :focus-visible conversion). */
.nav-header__logo-link:focus-visible,
.nav-header__app-name-link:focus-visible,
#home_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #2a9d8f;
}

.nav-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
  width: 100px !important;
  height: 100px !important;
  vertical-align: middle !important;
}

.nav-header__app-name {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Lingo and Linq brand colors in nav header: both white */
#nav_header .nav-header__app-name-lingo {
  color: #ffffff !important;
}

#nav_header .nav-header__app-name-linq {
  color: #ffffff !important;
}

#nav_header .nav-header__app-name-primary {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #ffffff !important;
}

#nav_header .nav-header__app-name-accent {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #ffffff !important;
  font-style: normal !important;
}

h1 a img,
.nav-header__logo img {
  padding-top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin-top: 0 !important;
  margin-right: 4px !important;
  object-fit: contain !important;
}

h1.with_board a img,
h1.with_board .nav-header__logo img {
  padding-top: 0 !important;
  padding-bottom: 5px !important;
}

h2 {
  margin-top: 0 !important;
  font-size: 25px !important;
}

/* Applied in: All modals - modal-container in application.hbs */
.modal {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-dialog {
  background: #fff;
  border-radius: 6px;
}
.modal .modal-header .close {
  font-size: 50px;
  margin-top: -15px;
}
.modal .modal-content.auto_close .modal-header h1:before, .modal .modal-content.auto_close .modal-header h2:before, .modal .modal-content.auto_close .modal-header h3:before, .modal .modal-content.auto_close .modal-header h4:before {
  content: "⌛ ";
  display: "inline-block";
  filter: grayscale(100%);
  opacity: 0.7;
}
.modal .modal-content.auto_close .modal-header h1, .modal .modal-content.auto_close .modal-header h2, .modal .modal-content.auto_close .modal-header h3, .modal .modal-content.auto_close .modal-header h4 {
  color: #888;
}

.modal-header h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.getting-started-modal__stage {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 6px;
}

/* ── Subscribe modal: modern premium chrome ──────────────────
   Replaces the legacy split header (logo + title + trial pill
   on one row competing with the close X) with a centered hero
   composition that matches the boards-page .md-card surface
   system. Header sits on a soft surface gradient with a hairline
   bottom rule; body has generous padding + constrained intro. */
.modal .modal-dialog:has(.subscribe-modal-header) {
  border-radius: 20px;
  overflow: hidden;
  width: max-content;
  max-width: min(92vw, 1040px);
  min-width: 320px;
}

.subscribe-modal-header {
  position: relative;
  padding: 28px 76px 22px;
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.subscribe-modal-header--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.subscribe-modal-header__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.subscribe-modal-header__logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.subscribe-modal-header__title {
  margin: 0;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
  letter-spacing: -0.01em;
}

/* Canonical light-modal close button — same chip used on
   .la-features-modal-wrap, board-stats, swap-images, etc.
   48×48 circular, surface-300 fill, navy hairline, hover lifts.
   The compound `.subscribe-modal-header__close.la-modal-close`
   selector is intentional: it bumps specificity above the base
   `.la-modal-close` rule (which is dark-bg styled — white on
   translucent dark — and is defined LATER in app.scss, so a
   single-class override loses on source order). */
.subscribe-modal-header__close.la-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background-color: #E8ECF1;
  color: var(--md-muted, #1B365D);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.subscribe-modal-header__close.la-modal-close:hover {
  color: var(--md-ink, #111A2E);
  background-color: #D4DAE2;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}
.subscribe-modal-header__close.la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

/* "Start w/ 2-Month Trial" — secondary CTA below the hero title */
.subscribe-modal-header__trial-btn {
  margin-top: 2px;
}

@media (max-width: 600px) {
  .subscribe-modal-header {
    padding: 22px 56px 18px;
  }
  .subscribe-modal-header__title {
    font-size: 20px;
  }
}
/* Start w/ 2-Month Trial pill — canonical modern action-button
   palette (.md-btn--primary): soft dusty-denim wash with navy
   text. Matches the plan-select pills + activate hero so the
   whole modal speaks one button vocabulary. */
.subscribe-trial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid rgba(76, 134, 216, 0.35);
  cursor: pointer;
  color: #1B365D;
  background: rgba(76, 134, 216, 0.45);
  box-shadow: 0 4px 14px rgba(76, 134, 216, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.subscribe-trial-btn:hover {
  background: rgba(76, 134, 216, 0.6);
  border-color: rgba(76, 134, 216, 0.5);
  color: #1B365D;
  box-shadow: 0 6px 20px rgba(76, 134, 216, 0.28);
  transform: translateY(-1px);
  text-decoration: none;
}

.subscribe-trial-btn:focus-visible {
  outline: 2px solid #4C86D8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(76, 134, 216, 0.15) !important;
}
@media (forced-colors: active) {
  .subscribe-trial-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Body — generous padding, centered intro, banners */
.subscribe-modal-body {
  padding: 28px 32px 32px !important;
  background: #fff;
}

.subscribe-modal-intro {
  max-width: 60ch;
  margin: 0 auto 18px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-muted, #1B365D);
}

.subscribe-modal-banner {
  max-width: 60ch;
  margin: 0 auto 20px;
  padding: 12px 18px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.subscribe-modal-banner strong {
  font-weight: 700;
}

.subscribe-modal-banner--discount {
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid rgba(42, 157, 143, 0.22);
  color: #1A7B7A;
}

.subscribe-modal-banner--sale {
  background: rgba(242, 185, 90, 0.14);
  border: 1px solid rgba(242, 185, 90, 0.32);
  color: rgb(156.4719101124, 102.4179775281, 12.3280898876);
}

.subscribe-modal-finalizing {
  text-align: center;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 20px;
  color: var(--md-ink, #111A2E);
  margin: 28px 0;
}

.subscribe-modal-error {
  text-align: center;
  font-size: 16px;
  margin: 24px 0;
}

/* Same button in subscription table bottom row: full styling so it matches top Start button */
.subscription_table .subscribe-trial-btn {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #fff !important;
  background: #3A6BC7 !important;
  box-shadow: 0 4px 12px rgba(27, 42, 74, 0.08);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.subscription_table .subscribe-trial-btn:hover {
  background: #2f56a3 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
}

.subscription_table .subscribe-trial-btn:focus-visible {
  outline: 2px solid #3A6BC7 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(58, 107, 199, 0.15) !important;
}
@media (forced-colors: active) {
  .subscription_table .subscribe-trial-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.create-board-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.modal-footer {
  text-align: left;
  padding-top: 9px;
  padding-bottom: 10px;
}

.intro_box {
  min-height: 200px;
}
.intro_box h4 {
  margin-top: -5px;
}
.intro_box .pic {
  margin-right: -10px;
}
.intro_box .pic img {
  width: 100%;
  padding: 3px;
  border: 1px solid #ccc;
  min-height: 100px;
}

/* Applied in: page-footer component, footer templates – fixed height so it doesn’t stretch */
footer,
.page-footer {
  clear: both;
  padding: 17px 20px 6px 20px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Glass-like look without transparency: solid frosted tone + soft highlight */
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f6 50%, #eef1f6 100%);
  border-top: 1px solid rgba(17, 26, 46, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Language icon: 85% of original size (46px → 39px main bar, 30px → 26px dropdown) */
.page-footer__language-icon {
  height: 39px;
  width: auto;
  margin: -22px 0 -18px -6px;
  vertical-align: middle;
}

.page-footer__language-icon--dropdown,
footer .skinny_links .page-footer__language-icon {
  height: 26px;
  margin: -11px 0 -12px -4px;
}

footer .wide_links,
.page-footer .wide_links {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-height: 0;
}

footer .wide_links .row,
.page-footer .wide_links .row {
  width: 100%;
  margin-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Push Developers, Privacy, Terms to the right edge of the navbar */
footer .wide_links .row > .page-footer__right-links,
.page-footer .wide_links .row > .page-footer__right-links {
  margin-left: auto;
}

/* Right-hand links flush to right side of bottom navbar: bar extends to viewport edge */
footer,
.page-footer {
  padding-right: 0;
}

footer .wide_links .row > .page-footer__right-links,
footer .wide_links .row > .page-footer__right-icons,
.page-footer .wide_links .row > .page-footer__right-links,
.page-footer .wide_links .row > .page-footer__right-icons {
  padding-right: 0;
}

footer .wide_links .row > .page-footer__right-links:last-child,
footer .wide_links .row > .page-footer__right-icons:last-child,
.page-footer .wide_links .row > .page-footer__right-links:last-child,
.page-footer .wide_links .row > .page-footer__right-icons:last-child {
  padding-right: 20px;
}

/* Icons column: minimal width, just enough for the icon links */
footer .wide_links .row > .page-footer__right-icons.col-sm-2,
.page-footer .wide_links .row > .page-footer__right-icons.col-sm-2 {
  width: 1%;
  max-width: none;
  white-space: nowrap;
}

footer .icons {
  padding-left: 10px;
  opacity: 0.7;
}

footer .skinny_links {
  display: none;
}

.page-footer__app-name {
  padding-right: 10px;
  font-size: 1.2em;
  font-weight: bold;
}

.page-footer__developers-link {
  margin-left: 12px;
}

/* More Resources trigger: no underline until dropdown is open */
.page-footer .skinny_links .dropdown > .dropup > a[data-toggle=dropdown] {
  text-decoration: none;
}

.page-footer .skinny_links .dropdown.open > .dropup > a[data-toggle=dropdown] {
  text-decoration: underline;
}

/* Bottom navbar LingoLinq – dark navy (footer only) */
.page-footer .page-footer__app-name .nav-header__app-name-lingo,
.page-footer .page-footer__app-name .nav-header__app-name-linq {
  color: #1B365D !important;
}

footer a,
.page-footer a {
  color: var(--fs-navy, #1B365D) !important;
  font-weight: normal;
}

footer a:hover,
.page-footer a:hover {
  color: var(--fs-navy, #1B365D);
  opacity: 0.85;
}

/* More subtle dividers: pipe characters and dropdown separator */
.page-footer .text-muted {
  color: rgba(27, 54, 93, 0.35);
}

.page-footer .skinny_links .divider {
  background-color: rgba(27, 54, 93, 0.12);
}

.page-footer-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-footer-link-with-icon .glyphicon {
  font-size: 14px;
}

/* ── Page-footer responsive (industry collapsing: row → stacked, safe-area) ── */
/* When About/Support/Contact are visible in the footer (≥768px), hide them from the More Resources dropdown */
@media (min-width: 769px) {
  .page-footer .skinny_links .page-footer__menu-top-at-sm {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .page-footer {
    padding: 14px 16px max(8px, env(safe-area-inset-bottom)) 16px;
  }
  /* At <768px: hide About, Support, Contact from footer; they appear at top of More Resources menu */
  .page-footer .page-footer__hide-at-sm {
    display: none !important;
  }
  .page-footer .wide_links .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-footer .wide_links .row > .col-sm-6 {
    width: 100%;
    text-align: left;
    line-height: 1.8;
  }
  .page-footer .wide_links .row > .page-footer__right-icons {
    width: auto;
    padding-left: 0;
  }
  .page-footer .wide_links .row > .page-footer__right-links {
    width: 100%;
    text-align: left !important;
    margin-left: 0;
    padding-left: 0;
    line-height: 1.8;
  }
  .page-footer__app-name {
    display: block;
    padding-bottom: 4px;
  }
}
@media (max-width: 640px) {
  .page-footer {
    padding: 12px 14px max(6px, env(safe-area-inset-bottom)) 14px;
  }
  .page-footer .wide_links .row {
    gap: 8px;
  }
  .page-footer .wide_links .row > .col-sm-6 a,
  .page-footer .wide_links .row > .page-footer__right-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .page-footer {
    padding: 12px 12px max(6px, env(safe-area-inset-bottom)) 12px;
    font-size: 14px;
  }
  .page-footer .wide_links .row > .col-sm-6 a,
  .page-footer .wide_links .row > .page-footer__right-links a {
    font-size: 14px;
  }
  .page-footer__app-name {
    font-size: 1.1em;
  }
  .page-footer__language-icon {
    height: 30px;
    margin: -16px 0 -14px -4px;
  }
  .page-footer__developers-link {
    margin-left: 8px;
  }
}
/* Scanning highlight overlay panels — subtle dim */
.highlight {
  background: rgba(0, 0, 0, 0.35);
}

/* Scanning highlight box — modern high-contrast border */
.highlight.box {
  border: 5px solid #2A9D8F;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.3), 0 0 20px rgba(44, 183, 176, 0.25), 0 0 40px rgba(44, 183, 176, 0.1);
  animation: scan-glow 1.2s ease-in-out infinite alternate;
}
.highlight.box.secondary {
  border-color: #7693B9;
  box-shadow: 0 0 0 3px rgba(118, 147, 185, 0.3), 0 0 20px rgba(118, 147, 185, 0.25);
  animation: scan-glow-secondary 1.2s ease-in-out infinite alternate;
}
.highlight.box.pending {
  animation: scan-pulse 0.4s ease-in-out infinite;
}
.highlight.box.inner {
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  animation: none;
}
.highlight.box.inner .highlight_icon {
  font-size: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 10px 5px 5px;
  opacity: 0.8;
  display: inline-block;
}
.highlight.box.inner.secondary {
  border-color: #b969ff;
  box-shadow: 0 0 0 2px rgba(185, 105, 255, 0.3);
}

@keyframes scan-glow {
  from {
    box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.3), 0 0 20px rgba(44, 183, 176, 0.25), 0 0 40px rgba(44, 183, 176, 0.1);
  }
  to {
    box-shadow: 0 0 0 5px rgba(44, 183, 176, 0.4), 0 0 30px rgba(44, 183, 176, 0.35), 0 0 50px rgba(44, 183, 176, 0.15);
  }
}
@keyframes scan-glow-secondary {
  from {
    box-shadow: 0 0 0 3px rgba(118, 147, 185, 0.3), 0 0 20px rgba(118, 147, 185, 0.25);
  }
  to {
    box-shadow: 0 0 0 5px rgba(118, 147, 185, 0.4), 0 0 30px rgba(118, 147, 185, 0.35);
  }
}
@keyframes scan-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}
.skinny_bio {
  display: none;
}
.skinny_bio .btn {
  display: block;
  margin: -10px -5px 0;
  padding: 5px 10px;
  text-align: left;
  border-radius: 0;
  border-bottom: 1px solid #ccc;
  font-size: 25px;
  background-color: #4DB8C4;
  color: #fff;
}
.skinny_bio .btn .text-muted {
  color: #eee;
  font-size: 22px;
}
.skinny_bio .btn > img {
  vertical-align: top;
  margin-top: 2px;
}

.btn.thick_border {
  border-width: 3px;
}

.btn.btn-primary.active .text-muted {
  color: #ccc;
}

.filters .active {
  font-weight: bold;
}

.list-group-item.repeat {
  background-color: #ffe;
}

.wide_bio {
  display: block;
}

.button_row:after {
  clear: left;
}

/* Applied in: app/templates/application.hbs (id="button_list" line 58), app/templates/brief.hbs (line 16)
   app/templates/utterance.hbs (id="utterance" class="button_list")
   Referenced in: raw_events.js, speecher.js, utterance.js, app-state.js */
.button_list {
  font-family: arial;
  font-size: 14px;
  border: 1px solid #888;
  vertical-align: top;
  margin-top: 1px;
  background: #fff;
  text-align: center;
  display: inline-block;
  overflow-x: auto;
  overflow-y: scroll;
  position: relative;
}
.button_list#button_list.text_only {
  text-align: left;
  padding: 5px;
}
.button_list#button_list.text_only.upper .text {
  text-transform: uppercase;
}
.button_list#button_list.text_only.lower .text {
  text-transform: lowercase;
}
.button_list#button_list.text_only.arial .text {
  font-family: "Arial", sans-serif;
}
.button_list#button_list.text_only.comic_sans .text {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.button_list#button_list.text_only.open_dyslexic .text {
  font-family: "OpenDyslexic", Arial, sans-serif;
}
.button_list#button_list.text_only.architects_daughter .text {
  font-family: "ArchitectsDaughter", Arial, sans-serif;
}
.button_list#button_list.text_only .text {
  font-size: 25px;
}
.button_list#button_list.text_only.text_small .text {
  font-size: 20px;
}
.button_list#button_list.text_only.text_large .text {
  font-size: 30px;
}
.button_list#button_list.text_only.text_huge .text {
  font-size: 40px;
}
.button_list#button_list.text_only .history_button {
  max-width: none !important;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
.button_list#button_list.text_only .history_button .modeling {
  display: none;
}
.button_list#button_list.text_only .history_button img {
  display: none;
}
.button_list#button_list.text_only .history_button .text {
  white-space: pre;
  display: inline;
}
.button_list#button_list.text_only .history_button .text.modeled {
  text-decoration: underline;
}
.button_list#button_list.text_only .history_button .text::after {
  content: "";
  display: inline;
  white-space: pre;
}
.button_list#button_list.paired {
  padding-left: 55px;
}
.button_list#button_list.touched {
  background: #e6e6e6;
  border-width: 2px;
}
.button_list.high_contrast .history_button img:not(.hc) {
  filter: contrast(4) saturate(500);
}

button.btn-default.touched {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.low_for_high_contrast #button_list.high_contrast .history_button img:not(.hc) {
  filter: contrast(4) saturate(100);
}

.button_list.with_back {
  width: -webkit-calc(100% - 202px);
  width: calc(100% - 202px);
}

.button_list.ghost_utterance > * {
  opacity: 0.4;
}

.button_list.focus, .button_list:hover {
  background: #f6f6f6;
  border-color: #000;
}

tr.accuracy_mastered td:first-child {
  background: #d1ffd1;
}
tr.accuracy_mastered:hover td:first-child {
  background: #a1dda1;
}

tr.accuracy_non_mastered td:first-child {
  font-style: italic;
  background: #ffd1d1;
}
tr.accuracy_non_mastered:hover td:first-child {
  background: #dda1a1;
}

.bar_box {
  float: left;
  margin-bottom: 5px;
  margin-right: -1px;
}
.bar_box .bar_holder {
  height: 100px;
  overflow: hidden;
  position: relative;
}
.bar_box .bar_holder:before {
  content: "";
  border-top: 1px dotted #aaa;
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  top: 0;
}
.bar_box .bar {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  border: 1px solid #888;
  position: absolute;
  width: 100%;
  top: 0;
  font-size: 14px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.5);
}
.bar_box .bar:before {
  content: "";
  display: block;
  border-left-style: solid;
  border-left-width: 500px;
  border-left-color: #ccc;
  position: absolute;
  width: 0px;
  top: 0;
  left: 0;
  bottom: 0;
}
.bar_box .bar .inner {
  padding: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.bar_box .bar {
  padding: 5px;
}
.bar_box .bar.confident {
  color: #fff;
}
.bar_box .bar.confident:before {
  border-left-color: #888;
}
.bar_box .bar.unconfident:before {
  border-left-color: #eee;
}
.bar_box .bar.perfect:before {
  border-left-color: #ccddff;
}
.bar_box .bar.perfect.confident:before {
  border-left-color: #3f6fd0;
}
.bar_box .bar.perfect.unconfident:before {
  border-left-color: #e0eaff;
}
.bar_box .bar.mastered:before {
  border-left-color: #ccffcc;
}
.bar_box .bar.mastered.confident:before {
  border-left-color: #2c862c;
}
.bar_box .bar.mastered.unconfident:before {
  border-left-color: #e0fde0;
}
.bar_box .bar.non_mastered:before {
  border-left-color: #ffcccc;
}
.bar_box .bar.failure:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 -30px 30px -30px #C0392B;
}
.bar_box .bar.failure {
  border-color: #a00;
}
.bar_box .bar_label {
  height: 70px;
  overflow: hidden;
  white-space: pre-line;
  transform: translate(50%, 5px) rotate(70deg);
  width: 100%;
  font-size: 14px;
  transform-origin: 0 0;
  font-size: 14px;
}

/* Applied in: app/templates/utterance.hbs (line 31) - sentence/utterance display */
#utterance.button_list {
  width: 100%;
  margin: -5px 0 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  height: 80px;
}
#utterance.button_list .modeling {
  position: absolute;
  background: #fff;
  padding: 2px;
  border-radius: 20px;
}

#utterance_reply {
  width: 100%;
  font-size: 20px;
  height: 100px;
  border-width: 2px;
  margin-bottom: 5px;
}

/* Applied in: app/templates/application.hbs (line 109) - speak mode notification button */
#speak_mode_notification {
  width: 100px;
  margin-left: -154px;
  margin-right: 51px;
  position: relative;
  border: 0;
  background: none;
  position: relative;
}
#speak_mode_notification > span {
  position: absolute;
  width: 100%;
  top: 22px;
  left: 0;
  height: 30px;
  white-space: nowrap;
}

.grid_choices .btn {
  width: 100%;
  min-height: 100px;
  font-size: 20px;
}
.grid_choices .btn img {
  width: 100%;
  display: block;
}

.badge_earned img {
  height: 60px;
  width: 60px;
  object-fit: contain;
  object-position: center;
}

.online_marker {
  width: 15px;
  height: 15px;
  border: 2px solid #080;
  background: #0f0;
  border-radius: 20px;
  position: absolute;
  top: 5px;
  right: 10px;
  box-shadow: 0 0 3px #000;
}

/* Applied in: app/templates/application.hbs (line 144) - speak options button */
#speak_options {
  height: 40px;
  margin-left: -45px;
  margin-right: 12px;
  position: relative;
}

/* Applied in: Eye gaze tracking indicator in header */
#eyes {
  display: inline-block;
  width: 50px;
  background-color: #afa;
  height: 52px;
  vertical-align: middle;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-image: url(/../images/eye.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 5px 5px;
}

#eyes.partial_tracking {
  background-color: #ffa;
}

#eyes.not_tracking {
  background-color: #faa;
}

.button_list .history_button img {
  height: 42px;
  max-width: 60px;
}

.button_list .history_button {
  float: left;
  max-width: 60px;
  height: 62px;
  overflow: hidden;
  margin: 2px 10px;
  position: relative;
}
.button_list .history_button.ghosted {
  animation: throb 1.5s ease-in-out infinite;
}

.button_list.text_only {
  max-width: none;
}

.cursor_holder {
  position: relative;
}
.cursor_holder .cursor_navigation .up {
  z-index: 5;
  position: absolute;
  top: 2px;
  right: 2px;
}
.cursor_holder .cursor_navigation .down {
  z-index: 5;
  position: absolute;
  bottom: 2px;
  right: 2px;
}

.ghost_utterance .utterance_cursor {
  display: none;
}

.utterance_cursor {
  float: left;
  width: 10px;
  margin: 0 3px 0 1px;
}
.utterance_cursor * {
  animation: cursorblink 1s infinite;
}
.utterance_cursor .left, .utterance_cursor .right {
  display: inline-block;
  width: 5px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  overflow: hidden;
}
.utterance_cursor .left {
  border-right: 2px solid #000;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  /* box-shadow: inset -1px 0 2px #faa; */
}
.utterance_cursor .right {
  border-left: 2px solid #000;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: -2px;
  /* box-shadow: inset 1px 0 2px #faa; */
}

.cursor_area {
  padding: 5px 100px 5px 10px;
  margin: 5px 0;
  border: 2px solid #eee;
  border-radius: 10px;
  max-height: 330px;
  min-height: 220px;
  overflow: auto;
  position: relative;
}
.cursor_area.any_size {
  min-height: none;
  max-height: none;
}
.cursor_area.any_size .big_btn {
  width: calc(100% - 10px);
  height: calc(100vh - 180px);
  overflow: auto;
  white-space: normal;
  font-size: 50px;
  line-height: 55px;
  border-width: 4px;
  border-radius: 10px;
}
.cursor_area.any_size .big_btn span {
  display: inline-block;
}
.cursor_area.any_size .big_btn .medium {
  font-size: 30px;
  line-height: 35px;
}
.cursor_area.any_size .big_btn .small {
  font-size: 20px;
  line-height: 25px;
}
.cursor_area.any_size .big_btn .big {
  font-size: 80px;
  line-height: 85px;
}
.cursor_area.any_size .big_btn .huge {
  font-size: 100px;
  line-height: 105px;
}
.cursor_area .cursor_box {
  float: left;
  width: 150px;
  margin-right: -25px;
  padding-left: 20px;
}
.cursor_area .cursor_box .cursor_blink {
  display: none;
  float: left;
  margin-left: -10px;
  padding-left: 12.5px;
  margin-right: -10px;
  padding-right: 10px;
  width: 45px;
  height: 104px;
  overflow: hidden;
  padding-top: 15px;
  opacity: 0;
}
.cursor_area .cursor_box .cursor_blink * {
  animation: cursorblink 1s infinite;
}
.cursor_area .cursor_box .cursor_blink.prior {
  margin-left: -35px;
}
.cursor_area .cursor_box .cursor_blink .left, .cursor_area .cursor_box .cursor_blink .right {
  display: inline-block;
  width: 10px;
  height: 70px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.cursor_area .cursor_box .cursor_blink .left {
  border-right: 2px solid #000;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.cursor_area .cursor_box .cursor_blink .right {
  border-left: 2px solid #000;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cursor_area .cursor_box .cursor_blink .glyphicon {
  display: none;
  font-size: 21px;
}
.cursor_area .cursor_box .cursor_btn {
  padding: 2px;
  float: left;
  height: 104px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.cursor_area .cursor_box.cursor .cursor_blink.posterior {
  display: block;
  opacity: 1;
}
.cursor_area .cursor_box.cursor.prior .cursor_blink.posterior {
  display: none;
  opacity: 0;
}
.cursor_area .cursor_box.cursor.prior .cursor_blink.prior {
  display: block;
  opacity: 1;
}
.cursor_area .cursor_box.over .cursor_blink {
  opacity: 1;
}
.cursor_area .cursor_box.over .cursor_btn {
  background: rgba(0, 123, 255, 0.3);
}
.cursor_area .cursor_box.selected .cursor_blink {
  opacity: 1;
}
.cursor_area .cursor_box.selected .cursor_blink .left, .cursor_area .cursor_box.selected .cursor_blink .right {
  border-color: rgb(0, 123, 255);
}
.cursor_area .cursor_box.selected .cursor_blink .glyphicon {
  color: rgb(0, 123, 255);
}
.cursor_area .cursor_box.selected .cursor_btn {
  background: rgb(0, 123, 255);
}
.cursor_area .cursor_box.selected.internal_left .cursor_blink.prior {
  background: rgb(179, 215, 255);
}
.cursor_area .cursor_box.selected.internal_left .cursor_blink.prior * {
  opacity: 0;
  display: none;
  visibility: hidden;
}
.cursor_area .cursor_box.selected.internal_left .cursor_blink.prior {
  opacity: 1;
  display: block;
}
.cursor_area .cursor_box.selected.internal_right .cursor_blink.posterior {
  background: rgb(179, 215, 255);
}
.cursor_area .cursor_box.selected.internal_right .cursor_blink.posterior * {
  opacity: 0;
  display: none;
  visibility: hidden;
}
.cursor_area .cursor_box.selected.internal_right .cursor_blink.posterior {
  opacity: 1;
  display: block;
}
.cursor_area .cursor_box.selected.moving .cursor_blink {
  opacity: 1;
}
.cursor_area .cursor_box.selected.moving .cursor_blink .left, .cursor_area .cursor_box.selected.moving .cursor_blink .right {
  display: none;
}
.cursor_area .cursor_box.selected.moving .cursor_blink .glyphicon {
  display: block;
}

.button_list.rtl .history_button {
  float: right;
}

#setup_container {
  margin-bottom: 3rem;
  margin-top: 0;
  position: relative;
  padding: 32px !important;
}

.setup-voice-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.2));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--md-muted, #64748b);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.setup-voice-toggle:hover {
  color: var(--md-teal, #2A9D8F);
  background: rgba(44, 183, 176, 0.1);
  border-color: rgba(44, 183, 176, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.12);
}
.setup-voice-toggle:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.08);
}
.setup-voice-toggle--active {
  background: linear-gradient(135deg, var(--md-teal, #2A9D8F), rgba(91, 141, 239, 0.9));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(44, 183, 176, 0.3);
}
.setup-voice-toggle--active:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.9), rgba(91, 141, 239, 0.85));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 183, 176, 0.35);
}

.setup-voice-toggle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-voice-toggle__icon svg {
  display: block;
}

.md-shell--setup {
  min-height: auto;
}

.md-shell--setup > .md-workspace {
  flex: 0 1 auto;
  min-height: auto;
  margin-top: 0 !important;
}

.md-shell--setup .md-main--setup {
  flex: 0 1 auto;
  min-height: auto;
}

.md-main--setup {
  padding-bottom: 2rem;
}

.md-hero--setup {
  padding: 0 2px 16px;
}

.md-hero--setup__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 24px;
}

.md-hero--setup .md-hero__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.md-hero--setup__status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
}

.md-hero--setup__progress {
  flex: 1 1 auto;
  min-width: 80px;
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.08);
  overflow: hidden;
}

.md-hero--setup__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(44, 183, 176, 0.45);
  transition: width 0.25s ease;
}

.md-hero--setup__stage {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-muted);
  flex-shrink: 0;
}

.md-hero--setup__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.md-hero--setup__nav .md-btn {
  padding: 10px 18px;
  font-size: 15px;
}

.md-hero--setup__back {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.md-hero--setup__nav-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Back to Dashboard: same pill style and hover as Skip Setup */
.md-hero--setup__back-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(17, 26, 46, 0.1);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  color: var(--md-ink, #111A2E);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.md-hero--setup__back-pill:hover,
.md-hero--setup__back-pill:focus-visible {
  background: rgba(17, 26, 46, 0.06);
  border-color: rgba(17, 26, 46, 0.14);
  color: var(--md-ink, #111A2E);
}

.md-hero--setup__back-pill:active {
  transform: scale(var(--md-tap, 0.99));
}

/* Skip Setup: pill-sized to match Back to Dashboard pill */
.md-hero--setup__back .md-hero--setup__skip-pill {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(17, 26, 46, 0.1);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  color: var(--md-ink, #111A2E);
}

.md-hero--setup__back .md-hero--setup__skip-pill:hover,
.md-hero--setup__back .md-hero--setup__skip-pill:focus-visible {
  background: rgba(17, 26, 46, 0.06);
  border-color: rgba(17, 26, 46, 0.14);
  color: var(--md-ink, #111A2E);
}

/* ---------- Home Boards (search/home): same shell/workspace/hero/card as modern dashboard ---------- */
.md-shell--home-boards > .md-workspace {
  flex: 0 1 auto;
  min-height: auto;
}

.md-main--home-boards {
  padding-bottom: 2rem;
}

.md-hero--home-boards {
  padding: 0 2px 16px;
}

.md-hero--home-boards .md-hero__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--md-ink);
}

.md-hero--home-boards .md-hero__sub {
  margin: 0 0 0.5rem;
  color: var(--md-muted);
  font-size: 16px;
}

/* ── Setup core page: Bubble collage ── */
.setup-core-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  padding: 24px 32px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 25% 35%, rgba(42, 157, 143, 0.06), transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(118, 147, 185, 0.07), transparent 55%), rgba(244, 243, 240, 0.6);
}

.setup-core-bubbles__img {
  height: auto;
  width: auto;
  max-height: 75px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(27, 54, 93, 0.1));
  will-change: transform, opacity;
  transition: transform 0.25s ease, filter 0.25s ease;
  opacity: 0;
  transform: translateY(-40px) scale(0.6);
}

.setup-core-bubbles__img.setup-core-bubbles__img--loaded {
  animation: setup-bubble-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .setup-core-bubbles__img.setup-core-bubbles__img--loaded {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.setup-core-bubbles__img:hover {
  transform: scale(1.08) translateY(-3px) !important;
  filter: drop-shadow(0 5px 14px rgba(27, 54, 93, 0.16));
}

@media (prefers-reduced-motion: reduce) {
  .setup-core-bubbles__img:hover {
    transform: none !important;
  }
}
.setup-core-bubbles__img--loaded:nth-child(1) {
  animation-delay: 0s;
}

.setup-core-bubbles__img--loaded:nth-child(2) {
  animation-delay: 0.03s;
}

.setup-core-bubbles__img--loaded:nth-child(3) {
  animation-delay: 0.06s;
}

.setup-core-bubbles__img--loaded:nth-child(4) {
  animation-delay: 0.09s;
}

.setup-core-bubbles__img--loaded:nth-child(5) {
  animation-delay: 0.12s;
}

.setup-core-bubbles__img--loaded:nth-child(6) {
  animation-delay: 0.15s;
}

.setup-core-bubbles__img--loaded:nth-child(7) {
  animation-delay: 0.18s;
}

.setup-core-bubbles__img--loaded:nth-child(8) {
  animation-delay: 0.21s;
}

.setup-core-bubbles__img--loaded:nth-child(9) {
  animation-delay: 0.24s;
}

.setup-core-bubbles__img--loaded:nth-child(10) {
  animation-delay: 0.27s;
}

.setup-core-bubbles__img--loaded:nth-child(11) {
  animation-delay: 0.3s;
}

.setup-core-bubbles__img--loaded:nth-child(12) {
  animation-delay: 0.33s;
}

.setup-core-bubbles__img--loaded:nth-child(13) {
  animation-delay: 0.36s;
}

.setup-core-bubbles__img--loaded:nth-child(14) {
  animation-delay: 0.39s;
}

.setup-core-bubbles__img--loaded:nth-child(15) {
  animation-delay: 0.42s;
}

.setup-core-bubbles__img--loaded:nth-child(16) {
  animation-delay: 0.45s;
}

.setup-core-bubbles__img--loaded:nth-child(17) {
  animation-delay: 0.48s;
}

.setup-core-bubbles__img--loaded:nth-child(18) {
  animation-delay: 0.51s;
}

.setup-core-bubbles__img--loaded:nth-child(19) {
  animation-delay: 0.54s;
}

.setup-core-bubbles__img--loaded:nth-child(20) {
  animation-delay: 0.57s;
}

@keyframes setup-bubble-bounce {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.6);
  }
  45% {
    opacity: 1;
    transform: translateY(5px) scale(1.04);
  }
  65% {
    transform: translateY(-3px) scale(0.97);
  }
  80% {
    transform: translateY(1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ── Loading spinner ── */
.md-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(27, 54, 93, 0.12);
  border-top-color: #7693B9;
  border-radius: 50%;
  animation: md-spin 0.7s linear infinite;
}

@keyframes md-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Copy-Board modal loading rows — used by both the route and the
   component template. Vertically stacks the modern spinner above its
   label so the "working" signal is unmistakable (the prior bare
   "Loading…" string read as a stuck modal). Center the column within
   the modal body and give it enough vertical space that it doesn't
   look cramped against the header/footer chrome. */
.md-copying-board-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px;
  text-align: center;
}

.md-copying-board-loading__label {
  margin: 0;
  font-size: 15px;
  color: #1B365D;
  font-weight: 500;
}

/* ── Download page ── */
/* Download page — cohesive with the start_codes detail card + home mesh bg.
   .md-shell paints the mesh; a centered container holds a hero (same eyebrow →
   title language as start_codes) + a grid of platform cards built on the same
   md-org-section tile as start_codes / the org pages. */
.md-download {
  width: min(960px, 100%);
  box-sizing: border-box;
  margin: 72px auto 56px;
  padding: 0 16px;
}

.md-download__hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 0 4px;
}

.md-download__hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex-shrink: 0;
  background: rgba(76, 134, 216, 0.12);
  color: #2860C9;
}

.md-download__hero-badge svg {
  width: 28px;
  height: 28px;
}

.md-download__title {
  /* override the global `h1 { height: 60px; display: inline-block }` (app.scss
     ~1735) that otherwise leaves ~30px of dead space below the title text. */
  display: block;
  height: auto;
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-download__sub {
  margin: 3px 0 0;
  font-size: 16px;
  color: var(--md-muted, #1B365D);
}

.md-download__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.md-download__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
}

.md-download__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.md-download__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.05);
}

.md-download__icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.md-download__icon-emoji {
  font-size: 30px;
  line-height: 1;
}

.md-download__platform {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-download__devices {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
}

.md-download__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--md-ink, #111A2E);
}

.md-download__link {
  color: #1A7B7A;
  font-weight: 700;
  text-decoration: none;
}

.md-download__link:hover {
  text-decoration: underline;
}

.md-download__btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.md-download__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1B365D, #374151);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.25);
  margin-top: auto;
}

.md-download__btns .md-download__btn {
  margin-top: 0;
}

.md-download__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(70, 80, 95, 0.35);
  color: #fff;
  text-decoration: none;
}

.md-download__btn--secondary {
  background: linear-gradient(135deg, #5A6A85, #374151);
}

@media (max-width: 640px) {
  .md-download__grid {
    grid-template-columns: 1fr;
  }
}
.md-card--home-boards {
  position: relative;
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 24px 28px 2rem;
  border-radius: var(--md-r-lg, 22px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
  overflow: hidden;
  font-size: 16px;
  color: var(--md-ink);
}

.md-card--home-boards__subheader {
  margin-bottom: 1.75rem;
  padding: 1.25rem 4rem 1.75rem;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.md-card--home-boards__subheader-lead {
  margin: 0 0 0.5rem;
  font-size: 1.6575rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--md-ink);
}

.md-card--home-boards__subheader-support {
  margin: 0;
  font-size: 1.4625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--md-muted);
}

.md-card--home-boards__picker {
  margin-top: 1.5rem;
  width: 100%;
}

/* ---------- Available boards: layout (nav + content), category menu, board grid ---------- */
.md-home-boards-picker__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  align-items: flex-start;
}

.md-home-boards-picker__nav {
  flex-shrink: 0;
  width: 100%;
  max-width: 280px;
}

.md-home-boards-picker__nav-inner {
  position: sticky;
  top: 1rem;
}

.md-home-boards-picker__nav-label {
  display: block;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-muted);
  text-transform: uppercase;
}

.md-home-boards-picker__categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-home-boards-picker__category {
  display: block;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: rgba(75, 78, 92, 0.9);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  border-radius: var(--md-r-md, 12px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-home-boards-picker__category:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(17, 26, 46, 0.18);
  color: var(--md-ink);
}

.md-home-boards-picker__category.is-active {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.2) 0%, rgba(91, 141, 239, 0.16) 100%);
  border-color: rgba(44, 183, 176, 0.35);
  color: var(--md-ink);
  box-shadow: 0 2px 8px rgba(44, 183, 176, 0.12);
}

.md-home-boards-picker__category:active {
  transform: scale(var(--md-tap, 0.99));
}

.md-home-boards-picker__category:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-home-boards-picker__category:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-home-boards-picker__content {
  flex: 1 1 420px;
  min-width: 0;
}

.md-home-boards-picker__content .category_explainer {
  margin-bottom: 1.5rem;
}

.md-home-boards-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .md-home-boards-picker__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1.75rem;
  }
}
@media (min-width: 1024px) {
  .md-home-boards-picker__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2rem;
  }
}
.md-home-boards-picker__board {
  padding: 0;
  min-height: 0;
}

/* Keyboard placeholders (Keyboards category). Reuse the real card chrome
   (.btn.simple_board_icon → board-card-modern) and swap the thumbnail for a
   modern mini-keyboard preview. Non-interactive (no real board yet) — default
   cursor + a subtle "Coming soon" tag. */
.md-home-boards-picker__board .btn.simple_board_icon.md-home-boards-picker__keyboard-placeholder {
  cursor: default;
  position: relative;
}

.md-home-boards-picker__keyboard-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3A6BC7;
  background: rgba(58, 107, 199, 0.12);
  border: 1px solid rgba(58, 107, 199, 0.25);
}

.md-home-boards-picker__keyboard-preview {
  width: 100%;
  aspect-ratio: 5/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(27, 54, 93, 0.05) 0%, rgba(58, 107, 199, 0.07) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.md-home-boards-picker__keyboard-preview--qwerty {
  background: linear-gradient(160deg, rgba(42, 157, 143, 0.06) 0%, rgba(27, 54, 93, 0.05) 100%);
}

.md-home-boards-picker__keyboard-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.md-home-boards-picker__keyboard-key {
  flex: 1 1 0;
  max-width: 28px;
  aspect-ratio: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.1);
  font-size: 11px;
  font-weight: 700;
  color: #1B365D;
}

/* Board cards on the board-picker surfaces (/search/home + setup Board
   Category): client-preferred CENTERED vertical layout + the shared
   `board-card-modern` look. Only layout/centering + the in-flow pill
   positioning live here; all cosmetics come from the mixin. */
.md-home-boards-picker__board .btn.simple_board_icon {
  position: relative;
  border-radius: 28px !important;
  border: 1px solid rgba(76, 134, 216, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.82)) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 20px rgba(27, 54, 93, 0.06) !important;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease !important;
}
.md-home-boards-picker__board .btn.simple_board_icon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, rgba(42, 157, 143, 0.5) 28%, rgba(76, 134, 216, 0.5) 72%, rgba(76, 134, 216, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.md-home-boards-picker__board .btn.simple_board_icon:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 134, 216, 0.16) !important;
  box-shadow: 0 24px 48px rgba(27, 54, 93, 0.14), 0 12px 24px rgba(42, 157, 143, 0.1) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* Contained logo tile — soft rounded glass surface, faint inner glow,
     gentle elevation. width:auto + max-width centers + contains it even
     where the surface forces width:100%. */
}
.md-home-boards-picker__board .btn.simple_board_icon img {
  width: auto !important;
  max-width: 72% !important;
  height: 104px !important;
  object-fit: contain;
  object-position: center;
  margin: 2px auto 14px !important;
  padding: 11px !important;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(240, 245, 252, 0.7));
  border: 1px solid rgba(76, 134, 216, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(27, 54, 93, 0.07);
  box-sizing: border-box;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* LingoLinq default/fallback board icon: keep the tile/card (bg, border,
     radius, shadow inherited from `& img` above) but expand the image out
     to the tile's borders — zero the inner padding and fill so the logo
     uses the full tile instead of sitting inset. Vocab-icon boards keep
     the padded contained tile. */
}
.md-home-boards-picker__board .btn.simple_board_icon img[src*=lingolinq-board-icon] {
  padding: 0 !important;
  object-fit: cover !important;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* Typography — also sets the compact spacing/layout (centered, clamped
     title; tight inline `by name`) so EVERY surface reads the same as the
     board_category page, not just the colors. Font sizes carry a 12px
     floor via max() so card text never renders below 12px (e.g. if a root
     font-size shrink scales the rem values down). The title is pinned to
     14px (1.4rem at the 10px root) per design. */
}
.md-home-boards-picker__board .btn.simple_board_icon .name {
  width: 100% !important;
  font-size: max(14px, 1.4rem) !important;
  font-weight: 700 !important;
  color: #1B365D !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.md-home-boards-picker__board .btn.simple_board_icon .board-icon__credit {
  font-size: max(12px, 0.85rem) !important;
  opacity: 0.72;
  text-align: center !important;
  margin: 0 0 2px !important;
}
.md-home-boards-picker__board .btn.simple_board_icon .author {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Small breathing room after the `by …` line (the language pill /
     PREVIEW footer supply the rest of the rhythm). */
  margin: 0 0 6px !important;
  padding: 0 2px !important;
  max-width: 100% !important;
  font-size: max(12px, 0.9rem) !important;
  color: rgba(27, 54, 93, 0.72) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.55) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon .author__username, .md-home-boards-picker__board .btn.simple_board_icon .author__username--long {
  color: rgba(27, 54, 93, 0.72) !important;
  font-weight: 600 !important;
  font-size: max(12px, 0.9rem) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* Size chip — soft navy-gray glass (was a utility sticker). */
}
.md-home-boards-picker__board .btn.simple_board_icon .board-icon__info {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.md-home-boards-picker__board .btn.simple_board_icon .board-icon__info-icon, .md-home-boards-picker__board .btn.simple_board_icon .board-icon__info-size {
  color: rgba(27, 54, 93, 0.6) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* Language pill — soft verdigris glass. */
}
.md-home-boards-picker__board .btn.simple_board_icon .board-icon__lang-marker {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(42, 157, 143, 0.12) !important;
  color: #2A9D8F !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.md-home-boards-picker__board .btn.simple_board_icon {
  /* Preview pill — integrated dusty-denim glass. */
}
.md-home-boards-picker__board .btn.simple_board_icon .info {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(228, 236, 255, 0.92)) !important;
  border: 1px solid rgba(76, 134, 216, 0.14) !important;
  box-shadow: 0 8px 18px rgba(76, 134, 216, 0.16) !important;
  color: #1B365D !important;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 18px 18px 16px;
  color: var(--md-ink);
  font-size: 15px;
}

.md-home-boards-picker__board .btn.simple_board_icon:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-home-boards-picker__board .btn.simple_board_icon:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-home-boards-picker__board .btn.simple_board_icon img {
  flex-shrink: 0;
}

.md-home-boards-picker__board .btn.simple_board_icon .name {
  width: 100%;
  text-align: center;
  margin: 0 0 4px;
  max-height: 2.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.md-home-boards-picker__board .btn.simple_board_icon .board-icon__credit {
  text-align: center;
  margin: 0 0 2px;
}

.md-home-boards-picker__board .btn.simple_board_icon .author {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 2px;
  max-width: 100%;
  font-size: 0.9rem;
}

.md-home-boards-picker__board .btn.simple_board_icon .author__username,
.md-home-boards-picker__board .btn.simple_board_icon .author__username--long {
  font-size: 0.9rem;
}

/* Preview pill stays IN-FLOW, stacking below the language marker
   (cosmetics come from the mixin). */
.md-home-boards-picker__board .btn.simple_board_icon .info {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  order: 99;
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 11px;
}

.md-home-boards-picker__board .btn.simple_board_icon:has(.board-icon__lang-marker) .info {
  margin-top: 0;
}

.md-home-boards-picker__grid-message {
  grid-column: 1/-1;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 16px;
  color: var(--md-muted);
}

/* Cause and Effect category — a single centered "Coming soon" pill while the
   catalog is in development (no board grid). Mirrors the keyboard "Coming soon"
   tag's brand-blue pill language, sized up as a standalone button. */
.md-home-boards-picker__coming-soon {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.md-home-boards-picker__coming-soon-btn,
.md-home-boards-picker__coming-soon-btn[disabled] {
  cursor: default;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3A6BC7;
  background: rgba(58, 107, 199, 0.12);
  border: 1px solid rgba(58, 107, 199, 0.25);
  opacity: 1;
}

.md-home-boards-picker__search {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.md-home-boards-picker__fallback-note {
  font-size: 1rem;
  line-height: 1.45;
  color: #374151;
  margin: 0 0 0.75rem;
}

.md-home-boards-picker__search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.md-home-boards-picker__search-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.md-home-boards-picker__search-submit {
  flex: 0 0 auto;
}

.md-home-boards-picker__grid-message--error {
  color: var(--md-ink);
  font-weight: 500;
}

@media (max-width: 768px) {
  .md-home-boards-picker__nav {
    max-width: none;
  }
  .md-home-boards-picker__layout {
    gap: 1.5rem;
  }
}
/* Buttons inside home-boards card: match modern dashboard .md-btn */
.md-card--home-boards .btn {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--md-line);
  font-weight: 850;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.72);
  color: var(--md-ink);
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.md-card--home-boards .btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(17, 26, 46, 0.2);
}

.md-card--home-boards .btn-primary {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2));
  border-color: rgba(44, 183, 176, 0.18);
  color: var(--md-ink);
}

.md-card--home-boards .btn-primary:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.3), rgba(91, 141, 239, 0.25));
  border-color: rgba(44, 183, 176, 0.28);
}

.md-card--home-boards .prompt {
  font-size: 17px;
  line-height: 1.55;
  color: var(--md-ink);
  margin-bottom: 1rem;
}

/* Category explainer on search/home: modern callout so the copy gets read */
.md-card--home-boards .category_explainer {
  margin-bottom: 1rem;
  padding: 1.5rem 1.75rem 1.5rem 1.75rem;
  border-radius: 14px;
  border-left: 4px solid rgba(44, 183, 176, 0.55);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.06) 0%, rgba(91, 141, 239, 0.04) 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-card--home-boards .category_explainer p {
  font-size: 1.4763125rem;
  line-height: 1.7;
  color: var(--md-ink);
  margin: 0;
  font-weight: 500;
}
.md-card--home-boards .category_explainer.full p {
  max-height: 500px;
}
.md-card--home-boards .category_explainer .more_link {
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(248, 250, 252, 0.92) 65%);
}

/* Setup board_category step: restyled to echo the boards page — a
   centered hero-style heading + intro, then the tabbed category picker.
   (The shared wizard header chrome is hidden on this step in setup.hbs.) */
.md-card--setup .setup-board-category__page-header {
  margin: 0 0 0.5rem;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: #1B365D;
  text-align: center;
}

.setup-board-category {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
}
.setup-board-category .setup-board-category__intro {
  margin: 0 auto 1.5rem;
  max-width: 680px;
  text-align: center;
  color: #46505F;
}

/* "Assign a Home Board For Me" — primary convenience CTA that replaced
   the removed wizard header's navigation. Centered above the category
   tabs; assigns the Vocal Flair 84 board and returns to the dashboard. */
.md-card--setup .setup-board-category__assign {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 1.75rem;
}

/* Both CTAs use the boards-page Change Home Board pill style, each
   keeping its own relative background: Assign = dusty-denim wash,
   Create a New Board = teal→blue glass (same as the boards-page CTAs). */
.md-card--setup .setup-board-category__assign-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(76, 134, 216, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-card--setup .setup-board-category__assign-btn:hover, .md-card--setup .setup-board-category__assign-btn:focus-visible {
  background: rgba(76, 134, 216, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}

.md-card--setup .setup-board-category__assign-btn[disabled],
.md-card--setup .setup-board-category__assign-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.md-card--setup .setup-board-category__new-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-card--setup .setup-board-category__new-btn:hover, .md-card--setup .setup-board-category__new-btn:focus-visible {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}

/* Verdigris accent icon on both CTAs — mirrors the Change Home Board
   button's verdigris home glyph so the entrypoints read as one family. */
.md-card--setup .setup-board-category__cta-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #1A7B7A;
}

/* Brand groups under Robust Vocabularies (Quick Core, Vocal Flair) — each
   on its own boards-page glass card (mirrors `.ub-boards-page__folders-
   section`: cool-blue gradient + inset top shadow + hairline highlights). */
.setup-board-category__brand-card {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
}

.setup-board-category__brand-title {
  margin: 0 0 0.5rem;
  font-size: 18px;
  font-weight: 800;
  color: #1B365D;
}

/* Board Category page: strip the shared setup card chrome so the brand
   glass cards sit directly on the page (transparent, no border, no
   padding). Scoped to the `--bare` modifier (board_category only) so the
   other setup steps keep their card. `!important` is required because the
   base `.md-card` rule sets background/border/border-radius/overflow with
   `!important` (var(--md-surface) reads periwinkle over the page gradient). */
.md-card--setup.md-card--setup-bare {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#setup_container.md-card--setup-bare {
  padding: 0 !important;
}

.md-card--setup-bare .md-card--setup__content {
  padding-bottom: 0;
}

/* Two columns: category buttons left ~50%, selected category text + board grid right ~50% */
.md-card--setup .setup-board-category .md-home-boards-picker__layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
  width: 100%;
}

.md-card--setup .setup-board-category .md-home-boards-picker__nav {
  flex: 1 1 45%;
  min-width: 240px;
  max-width: 50%;
  width: auto;
}

.md-card--setup .setup-board-category .md-home-boards-picker__nav-inner {
  position: static;
}

/* Align right content with first category button (label + margin above buttons) */
.md-card--setup .setup-board-category .md-home-boards-picker__content {
  flex: 1 1 45%;
  min-width: 240px;
  max-width: 50%;
  padding-top: 5rem; /* nav-label height + margin-bottom so content starts flush with first button */
}

/* ---------- Tabbed variant (board_category, matches the boards page) ----------
   When board-picker is invoked with tabbed=true (setup only), the
   category sidebar is replaced by the boards-page file-folder tab row
   and the layout stacks vertically: tabs on top, board grid below. */
.md-card--setup .setup-board-category .md-home-boards-picker__layout--tabbed {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

.md-card--setup .setup-board-category .md-home-boards-picker__layout--tabbed .md-home-boards-picker__content {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  padding-top: 0; /* no sidebar to align against in tabbed mode */
}

/* Board cards expand/shrink to fit content like the boards page: instead
   of stretching to fill 1fr grid columns (which makes them oversized and
   overflows the author line), lay them out as fixed ~280px cards that
   wrap. Scoped to setup so /search/home keeps its own grid. Switching to
   flex makes the base grid's `grid-template-columns` (incl. the 768/1024
   media queries) inert. */
.md-card--setup .setup-board-category .md-home-boards-picker__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 1.25rem 1.5rem;
}

.md-card--setup .setup-board-category .md-home-boards-picker__board {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
}

/* Setup-scoped tabs-row wrapper — deliberately NOT `.ub-boards-page__tabs-row`
   so the boards page's ≤640px "swap pills for a <select>" rule (which is
   keyed on that parent) doesn't hide our tabs. The folder-baseline divider
   below mirrors `.ub-boards-page__tabs-row::after`. */
.md-home-boards-picker__tabs-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  margin: 0.25rem 0 1.5rem;
}

.md-home-boards-picker__tabs-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.45) 14%, rgba(27, 54, 93, 0.32) 42%, rgba(27, 54, 93, 0.22) 70%, rgba(26, 123, 122, 0.25) 88%, rgba(27, 54, 93, 0) 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.65), 0 2px 4px -1px rgba(27, 54, 93, 0.2), 0 6px 14px -6px rgba(26, 123, 122, 0.28), 0 12px 28px -14px rgba(27, 54, 93, 0.18);
  pointer-events: none;
  z-index: 1;
}

/* The pill look comes from the reused `.ub-boards-page__tabs--boards`
   li/a rules; here we only need the <ul> to be a wrapping flex row of
   list items (6 category tabs wrap to a second row on narrow widths
   rather than scrolling off-screen). */
.md-home-boards-picker__tabs.ub-boards-page__tabs--boards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
}

/* ===== Standalone Board Picker page (/board-picker) — premium refactor =====
   Brings this page in line with the modern Boards app-shell language. The
   tabs, board cards, and "Quick Core" headings come from the SHARED
   board-picker/board-icon components, so every override here is page-scoped
   under `.board-picker-page` / `.md-shell--board-picker` — /setup and
   /search/home are unaffected. */
/* --- Immersive glass workspace panel; atmosphere comes from the .md-shell
       base gradient behind it. --- */
.md-shell--board-picker > .md-workspace {
  background: radial-gradient(680px 380px at 50% 1%, rgba(42, 157, 143, 0.1), transparent 52%), radial-gradient(880px 460px at 12% 4%, rgba(42, 157, 143, 0.14), transparent 44%), radial-gradient(820px 460px at 92% 12%, rgba(76, 134, 216, 0.12), transparent 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.5));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.08), 0 10px 28px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.board-picker-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 8px 0 16px;
}

/* --- Final tour step: the live board-picker presented in an almost full-screen
   modal (component `tour-board-picker`). The board-picker-page markup is reused
   verbatim inside the modal body, which scrolls; the dialog itself fills most of
   the viewport. --- */
.modal-dialog.md-dialog--tour-picker {
  width: 96vw;
  max-width: 1280px;
  margin: 3vh auto;
}

.modal-content.md-modal-content--tour-picker {
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.md-modal-header--tour-picker {
  flex: 0 0 auto;
  /* Minimal header — just the close chip, top-right. */
  min-height: 0;
  padding: 8px 8px 0;
  border: 0;
}

.md-modal-body--tour-picker {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 16px;
}

/* Inside the modal the page already has its own top spacing from the header chip,
   so trim the page's own top padding a touch. */
.board-picker-page--in-tour {
  padding-top: 0;
}

/* --- Hero --- */
.board-picker-page__header {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #1B365D;
  text-align: center;
  /* Same entrance movement as the home-page hero: title in from the left. */
  opacity: 0;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.board-picker-page__intro {
  margin: 0 auto clamp(40px, 6vh, 64px);
  max-width: 660px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(43, 52, 69, 0.82);
  /* Same entrance movement as the home-page hero: subheader in from the right,
     staggered after the title. */
  opacity: 0;
  animation: md-hero-from-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
  /* "over time" reuses the landing-alt "every student" gradient
     (.hero-gradient = verdigris→denim clipped to text) — color only, not the
     1.155em emphasis bump, so it stays inline with the sentence. */
}
.board-picker-page__intro .hero-gradient {
  font-size: inherit;
}

/* Honor reduced-motion: show the header/subheader immediately, no movement. */
@media (prefers-reduced-motion: reduce) {
  .board-picker-page__header,
  .board-picker-page__intro {
    opacity: 1;
    animation: none;
  }
}
.board-picker-page__assign {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 clamp(28px, 4vh, 40px);
}

/* Modern "or" divider below the CTAs — brand verdigris→denim gradient rules
   that fade out to the edges, with a centered uppercase label. */
.board-picker-page__divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto clamp(34px, 4.5vh, 56px);
}

.board-picker-page__divider-line {
  flex: 1 1 0;
  min-width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(26, 123, 122, 0.7) 45%);
}

.board-picker-page__divider-line--right {
  background: linear-gradient(90deg, rgba(76, 134, 216, 0.7) 55%, transparent 100%);
}

.board-picker-page__divider-label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.55);
}

.board-picker-page__assign-btn {
  /* Same diagonal two-stop gradient background STYLE as the "Create My Own Board"
     button (the 135deg glass gradient), but kept in this button's own dusty-denim
     colour rather than the create button's teal→blue. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.34), rgba(76, 134, 216, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.board-picker-page__assign-btn:hover, .board-picker-page__assign-btn:focus-visible {
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.5), rgba(76, 134, 216, 0.34));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}

.board-picker-page__assign-btn[disabled],
.board-picker-page__assign-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.board-picker-page__new-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.board-picker-page__new-btn:hover, .board-picker-page__new-btn:focus-visible {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}
.board-picker-page__new-btn {
  /* The "+" icon sits on the LEFT, so give the right side more room to balance the
     label between the icon and the pill edge (mixin base is 8px 14px). */
  padding-right: 22px;
}

.board-picker-page__cta-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #1A7B7A;
}

/* --- Category tabs → glass pill segmented nav. Scoped + higher specificity +
       !important to beat the shared file-folder `.ub-boards-page__tabs--boards`
       rules (app.scss ~55970, themselves !important). Other pages keep the
       file-folder tabs. --- */
/* Category panel — the glass holds the pill tabs (top) AND the selected
   category's description (bottom) as ONE connected surface. The tabs-row and
   the sibling .category_explainer are full-width and flush in the tabbed
   column, so they're styled as the top/bottom halves of a single glass card. */
.board-picker-page .md-home-boards-picker__tabs-row {
  width: 100%;
  max-width: 100%;
  /* Now a section INSIDE the unified panel: no surface of its own, just the
     pill row with a hairline beneath separating it from the description. */
  margin: 0 0 clamp(18px, 2.5vh, 28px);
  padding: 0 0 clamp(18px, 2.5vh, 28px);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.board-picker-page .md-home-boards-picker__tabs-row::after {
  display: none; /* drop the file-folder baseline divider */
}

.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards {
  /* Always wrap overflow tabs onto the next row (never clip/overflow), with a
     touch more space between wrapped rows. */
  flex-wrap: wrap !important;
  gap: 8px 4px;
  justify-content: center;
}

/* No orphaned tab on a wrapped row: the tabs keep their natural width (base
   `> li { flex:0 0 auto }`), and when wrapping would leave a SINGLE tab alone on
   the last row, board-picker.js inserts this zero-height, full-width break <li>
   before the second-to-last tab — pulling it down so the last two tabs share the
   row (instead of one lone centred pill). flex-basis:100% forces the line wrap;
   the negative top margin cancels the extra row-gap the break would add (matches
   the container's 8px row-gap). It carries no `<a>`, so the pill rules don't
   touch it. Scoped to the board-picker page (the JS gates on `.board-picker-page`). */
.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li.md-home-boards-picker__tab-break {
  flex: 0 0 100%;
  height: 0;
  margin: -8px 0 0;
  padding: 0;
  pointer-events: none;
}

/* Every tab is a filled glass pill so they all read as tappable action
   buttons (not just the selected one). */
.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li > a {
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.9)) !important;
  color: #1B365D !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Hover/focus previews the ACTIVE look — same soft verdigris glow ring as the
   selected tab (per request) so every tab "lights up" to its active state on
   hover. Kept in sync with the .is-active rule below. */
.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li > a:hover,
.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li > a:focus-visible {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.22), 0 6px 16px rgba(26, 123, 122, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Selected tab — same pill, plus a soft subtle verdigris glow ring so it's
   clearly the active one. */
.board-picker-page .md-home-boards-picker__tabs.ub-boards-page__tabs--boards > li.is-active > a {
  padding: 9px 18px !important;
  border-radius: 999px !important;
  /* Same single rim as the other pills (no second outline) — the active state
     is marked by a soft blurred glow, not a hard ring. */
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.92)) !important;
  color: #1B365D !important;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.22), 0 6px 16px rgba(26, 123, 122, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* --- Selected category's description: the bottom half of the category panel,
       connected to the tabs-row above (shared glass, no top border, flush). --- */
.board-picker-page .category_explainer {
  /* Section inside the unified panel — text only, hairline below separating it
     from the board content. */
  margin: 0 0 clamp(24px, 3.5vh, 40px);
  padding: 0 0 clamp(24px, 3.5vh, 40px);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
}

.board-picker-page .category_explainer p {
  margin: 0 auto;
  max-width: 860px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(43, 52, 69, 0.8);
}

/* --- Quick Core / Vocal Flair: a plain section INSIDE the unified panel
       (heading + board grid), no separate glass surface of its own. --- */
.board-picker-page .setup-board-category__brand-card {
  margin: 0 0 clamp(28px, 4vh, 48px);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.board-picker-page .setup-board-category__brand-card:last-child {
  margin-bottom: 0;
}

.board-picker-page .setup-board-category__brand-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1B365D;
}

/* --- Board cards (Layer 2): softer glass surface, near-invisible border,
       atmospheric shadow + top-edge lighting. Card GEOMETRY (height, internal
       spacing) and the PREVIEW pill are left exactly as the shared boards-page
       card so names aren't clipped and the pill matches the Boards page. --- */
.board-picker-page .md-home-boards-picker__board .simple_board_icon {
  /* Flex-column layout matching the boards page: the PREVIEW pill rides the
     bottom (margin-top: auto, in-flow) instead of being absolutely positioned,
     so the author's bottom margin can actually open a gap above it. Auto height
     + min-height keeps tiles uniform without clipping the name. */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto !important;
  min-height: 268px !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

/* PREVIEW pill in-flow at the bottom (was position:absolute on this layout). */
.board-picker-page .md-home-boards-picker__board .simple_board_icon .info {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  order: 99;
  align-self: center;
  margin-top: auto !important;
}

/* When a language marker is present it owns the bottom auto-margin, so the pill
   drops its own (mirrors the boards-page :has override) — keeps them tight. */
.board-picker-page .md-home-boards-picker__board .simple_board_icon:has(.board-icon__lang-marker) .info {
  margin-top: 0 !important;
}

/* Guaranteed gap below the author line, above the bottom-anchored pill. */
.board-picker-page .md-home-boards-picker__board .simple_board_icon .author {
  margin: 0 0 16px !important;
}

/* Hover (Layer 3): wrapper lifts (motion, reduced-motion-gated below); the
   card's shadow deepens here (no motion, always on). */
.board-picker-page .md-home-boards-picker__board:hover .simple_board_icon {
  box-shadow: 0 26px 56px rgba(15, 23, 42, 0.1), 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* --- Metadata "4×6" badge (§6): whisper-weight — lower opacity, faint rim,
       calmer ink, no drop shadow so it reads as secondary, not a label. --- */
.board-picker-page .md-home-boards-picker__board .board-icon__info {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: rgba(43, 52, 69, 0.62) !important;
  box-shadow: none !important;
}

.board-picker-page .md-home-boards-picker__board .board-icon__info-icon,
.board-picker-page .md-home-boards-picker__board .board-icon__info-size {
  color: rgba(43, 52, 69, 0.6) !important;
}

/* --- Smooth category switching (SPA feel): the async grid reload would
       collapse the layout to the tiny "Loading…" message and snap back open as
       boards render. Reserve a row of height so the area stays put, and fade
       the new boards in instead of popping. --- */
.board-picker-page .md-home-boards-picker__grid-message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 280px;
}

@media (prefers-reduced-motion: no-preference) {
  .board-picker-page .md-home-boards-picker__board {
    animation: bp-board-fade 260ms ease both;
  }
}
@keyframes bp-board-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* --- Tabbed picker layout: tabs on top, board grid below as ~280px cards. --- */
.board-picker-page .md-home-boards-picker__layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
  width: 100%;
}

.board-picker-page .md-home-boards-picker__layout--tabbed {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  /* ONE unified glass panel holding the tabs, description, and board content —
     so the category browser reads as a single connected surface. */
  padding: clamp(20px, 3vw, 36px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  /* Inset/recessed look — the panel reads as carved INTO the page rather than
     floating on it: a soft neutral groove border, inner shadow at the top inner
     edge (deepest at the top, fading down), and a thin light "lip" along the
     bottom inner edge. No outer drop shadow (that read as raised). */
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: inset 0 3px 8px rgba(15, 23, 42, 0.13), inset 0 12px 26px rgba(15, 23, 42, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.board-picker-page .md-home-boards-picker__layout--tabbed .md-home-boards-picker__content {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  padding-top: 0;
}

.board-picker-page .md-home-boards-picker__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 1.5rem;
}

.board-picker-page .md-home-boards-picker__board {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
}

/* --- Gentle card hover-lift (premium, AAC-friendly: no scale/bounce/spring,
       and only when the user hasn't requested reduced motion). --- */
@media (prefers-reduced-motion: no-preference) {
  .board-picker-page .md-home-boards-picker__board {
    transition: transform 180ms ease;
  }
  .board-picker-page .md-home-boards-picker__board:hover {
    transform: translateY(-3px);
  }
}
/* ---------- Setup access step: two cards, modern radio options ---------- */
.setup-access {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Access step: large page header (same as Board Category) */
.md-card--setup .setup-access__page-header {
  margin: 0 0 1rem;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.3;
  color: var(--md-ink, #111A2E);
}

.setup-access__card {
  padding: 3rem 3.25rem;
  border-radius: var(--md-r-lg, 22px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.setup-access__card-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.75rem 2rem;
}

.setup-access__card-left {
  flex: 0 0 40%;
  min-width: 0;
}

.setup-access__card-right {
  flex: 0 0 60%;
  min-width: 0;
  padding-right: 3rem;
}

@media (max-width: 480px) {
  .setup-access__card-row {
    flex-wrap: wrap;
  }
  .setup-access__card-left,
  .setup-access__card-right {
    flex: 1 1 100%;
  }
}
/* Second card (home return): radios take 40% width on larger screens via flex */
.setup-access__card:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 481px) {
  .setup-access__card:last-child .setup-access__radios {
    width: 40%;
    min-width: 12rem;
  }
}
@media (max-width: 480px) {
  .setup-access__card:last-child .setup-access__radios {
    width: 100%;
  }
}
.setup-access__question {
  margin: 0 0 1rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink);
  line-height: 1.4;
}

.setup-access__prompt {
  margin: 0 0 1.25rem;
  font-size: 1.5rem; /* 50% larger than 1rem for readability */
  line-height: 1.55;
  color: var(--md-ink);
}

.setup-access__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-access__radio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  border-radius: var(--md-r-md, 12px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.setup-access__radio:hover,
.setup-access__radio:focus-visible {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(44, 183, 176, 0.35);
  box-shadow: 0 2px 8px rgba(44, 183, 176, 0.1);
  outline: none;
}

.setup-access__radio.is-selected {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12) 0%, rgba(91, 141, 239, 0.08) 100%);
  border-color: rgba(44, 183, 176, 0.35);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(44, 183, 176, 0.12);
}

.setup-access__radio.is-selected .setup-access__radio-dot {
  background: linear-gradient(135deg, #2A9D8F 0%, #5b8fef 100%);
  border-color: rgba(44, 183, 176, 0.5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.setup-access__radio:active {
  transform: scale(var(--md-tap, 0.99));
}

.setup-access__radio:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .setup-access__radio:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.setup-access__radio-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--md-line, rgba(17, 26, 46, 0.2));
  background: rgba(255, 255, 255, 0.95);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.setup-access__radio-label {
  flex: 1;
  min-width: 0;
}

.setup-access__display {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.setup-access__display-media {
  text-align: center;
}

.setup-access__img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.setup-access__display-p {
  margin: 0;
  font-size: 1.5rem; /* 50% larger than 1rem for readability */
  line-height: 1.55;
  color: var(--md-ink);
}

.setup-access__display-icon {
  display: block;
  float: left;
  font-size: 40px;
  margin-right: 15px;
  margin-bottom: 5px;
  color: var(--md-muted, #64748b);
}

/* Same category explainer styling on setup board_category step (setup?page=board_category) */
.md-card--setup .category_explainer {
  margin-bottom: 1rem;
  padding: 1.5rem 1.75rem 1.5rem 1.75rem;
  border-radius: 14px;
  border-left: 4px solid rgba(44, 183, 176, 0.55);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.06) 0%, rgba(91, 141, 239, 0.04) 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.md-card--setup .category_explainer p {
  font-size: 1.4763125rem;
  line-height: 1.7;
  color: var(--md-ink);
  margin: 0;
  font-weight: 500;
}
.md-card--setup .category_explainer.full p {
  max-height: 500px;
}
.md-card--setup .category_explainer .more_link {
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(248, 250, 252, 0.92) 65%);
}

/* Core words explainer on setup core step: featured callout so users want to read it */
.setup-core-callout {
  margin: 0;
  padding: 1.5rem 1.75rem 1.5rem 1.75rem;
  border-radius: 14px;
  border-left: 4px solid rgba(44, 183, 176, 0.6);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.08) 0%, rgba(91, 141, 239, 0.05) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.setup-core-callout__label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35em 0.75em;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(17, 26, 46, 0.7);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(44, 183, 176, 0.25);
}

.setup-core-callout__p {
  font-size: 14px; /* ~30% larger for low-vision accessibility (was 1.0625rem) */
  line-height: 1.65;
  color: var(--md-ink);
  margin: 0 0 1rem;
  font-weight: 500;
}
.setup-core-callout__p:last-child {
  margin-bottom: 0;
}

.setup-core-callout__p--tip {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(44, 183, 176, 0.2);
  font-weight: 600;
  color: rgba(17, 26, 46, 0.88);
}

/* Setup card: same look as modern dashboard .md-grid .md-card; padding on #setup_container */
.md-card--setup {
  position: relative;
  margin-top: 0;
  border-radius: var(--md-r-lg, 22px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.md-card--setup__content {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 60px;
}

.md-card--setup__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: absolute;
  bottom: 2rem;
  left: 0.5rem;
  right: 2rem;
  z-index: 10;
  border-top: none;
}

/* Next/Previous: opaque gradient on the button elements only (override .md-btn--ghost / .md-btn--primary) */
.md-card--setup__nav .md-btn {
  padding: 10px 18px;
  font-size: 15px;
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  color: #fff !important;
  border: 1px solid rgba(70, 80, 95, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.md-card--setup__nav .md-btn:hover,
.md-card--setup__nav .md-btn:focus-visible {
  background: linear-gradient(135deg, #8aa3c7, #566878) !important;
  border-color: rgba(70, 80, 95, 0.45);
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.md-card--setup__nav .md-btn:active {
  transform: scale(var(--md-tap, 0.99));
}

.md-card--setup__nav .setup-voice-toggle--in-nav {
  position: static;
  flex-shrink: 0;
}

.md-setup-loading,
.md-setup-error {
  max-width: 500px;
  margin: 2rem auto;
  text-align: center;
  color: var(--md-ink);
}

.md-setup-error p {
  margin: 0;
}

.md-card--setup {
  margin-bottom: 3rem;
  font-size: 16px;
  color: var(--md-ink);
  min-width: 0;
  /* Content wrapper (ember component root) */
}
.md-card--setup > div {
  min-width: 0;
}
.md-card--setup {
  /* Headings: uniform size across all setup pages.
     Uses !important to override the global h2 { font-size: 25px !important } at line 2589. */
}
.md-card--setup h1, .md-card--setup h2, .md-card--setup h3, .md-card--setup h4 {
  margin: 0 0 1rem !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  color: var(--md-ink) !important;
  line-height: 1.3 !important;
}
.md-card--setup p {
  margin-bottom: 1.25rem;
  line-height: 1.55;
  color: var(--md-ink);
}
.md-card--setup .setup-symbols-subheader {
  font-size: 2.336rem; /* 20% smaller than 2.92rem for "Set Starter Preferences" */
  font-weight: 600;
  line-height: 1.5;
  color: var(--md-ink);
  margin: 0 0 0.75rem;
}
.md-card--setup .prompt {
  font-size: 17px;
  line-height: 1.55;
  color: var(--md-ink);
  margin-bottom: 1.5rem;
}
.md-card--setup {
  /* Usage step: inherit global checklist styles (defined at root below) */
  /* Setup done page — modern action buttons */
}
.md-card--setup .setup-done-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin-top: 1.5rem;
}
.md-card--setup .setup-done-actions__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  color: #1B365D;
  background: #fff;
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
}
.md-card--setup .setup-done-actions__btn:hover {
  border-color: rgba(42, 157, 143, 0.4);
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.1);
  background: rgba(42, 157, 143, 0.03);
}
.md-card--setup .setup-done-actions__btn:active {
  transform: scale(0.98);
}
.md-card--setup .setup-done-actions__btn--primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border-color: rgba(70, 80, 95, 0.3);
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.2);
}
.md-card--setup .setup-done-actions__btn--primary:hover {
  box-shadow: 0 6px 20px rgba(70, 80, 95, 0.25);
  background: linear-gradient(135deg, #6583a9, #46505F);
}
.md-card--setup .setup-done-actions__btn svg {
  flex-shrink: 0;
}
.md-card--setup {
  /* Back button demo — image with animated circle pointing at the back button */
}
.md-card--setup .setup-back-btn-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}
.md-card--setup .setup-back-btn-demo__img {
  width: 100%;
  display: block;
}
.md-card--setup {
  /* Animated pulsing circle that highlights the back button location.
     Positioned at ~6.5% from left, ~4.5% from top (where the back chevron
     sits in the sentence bar of the board-back.png screenshot). */
}
.md-card--setup .setup-back-btn-demo__circle {
  position: absolute;
  top: 7.75%;
  left: 7.25%;
  width: 48px;
  height: 48px;
  border: 3px solid #2A9D8F;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: setup-back-pulse 5s ease-in-out infinite;
}
@keyframes setup-back-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
  15% {
    box-shadow: 0 0 0 14px rgba(42, 157, 143, 0);
    transform: translate(-50%, -50%) scale(1.15);
  }
  30% {
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
  /* pause */
  55% {
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(42, 157, 143, 0);
    transform: translate(-50%, -50%) scale(1.15);
  }
  85%, 100% {
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
}
.md-card--setup {
  /* Exit speak mode demo — two-phase animation:
     Phase 1 (0-3s): pulsing circle on the options button
     Phase 2 (3-6s): pulsing rectangle around Exit Speak Mode button
     Total cycle: 6s, repeats infinitely. */
}
.md-card--setup .setup-exit-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}
.md-card--setup .setup-exit-demo__img {
  width: 100%;
  display: block;
}
.md-card--setup {
  /* Circle over the options button (three dots, top right) */
}
.md-card--setup .setup-exit-demo__circle {
  position: absolute;
  top: 4.1%;
  right: 2.1%;
  width: 48px;
  height: 48px;
  border: 3px solid #2A9D8F;
  border-radius: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
  animation: setup-exit-circle 6s ease-in-out infinite;
}
.md-card--setup {
  /* Rectangle around Exit Speak Mode button (bottom of menu) */
}
.md-card--setup .setup-exit-demo__rect {
  position: absolute;
  bottom: 33%;
  right: 0.5%;
  width: 12.5%;
  height: 9%;
  border: 3px solid #2A9D8F;
  border-radius: 10px;
  pointer-events: none;
  animation: setup-exit-rect 6s ease-in-out infinite;
}
.md-card--setup {
  /* Phase 1: circle pulses once for 0-3s, then disappears */
}
@keyframes setup-exit-circle {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: translate(50%, -50%) scale(1);
  }
  20% {
    opacity: 1;
    box-shadow: 0 0 0 14px rgba(42, 157, 143, 0);
    transform: translate(50%, -50%) scale(1.15);
  }
  35% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.3);
    transform: translate(50%, -50%) scale(1);
  }
  45% {
    opacity: 0;
    transform: translate(50%, -50%) scale(1);
  }
  50%, 100% {
    opacity: 0;
    box-shadow: none;
  }
}
.md-card--setup {
  /* Phase 2: rectangle pulses once for 3-6s, then disappears */
}
@keyframes setup-exit-rect {
  0%, 45% {
    opacity: 0;
    box-shadow: none;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    transform: scale(1);
  }
  70% {
    opacity: 1;
    box-shadow: 0 0 0 14px rgba(42, 157, 143, 0);
    transform: scale(1.05);
  }
  85% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.3);
    transform: scale(1);
  }
  95% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    box-shadow: none;
    transform: scale(1);
  }
}
.md-card--setup {
  /* Modeling mode demo — two-phase animation matching exit-speak-mode:
     Phase 1 (0-3s): pulsing circle on the options button
     Phase 2 (3-6s): pulsing rectangle around Model for Communicator item */
}
.md-card--setup .setup-modeling-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}
.md-card--setup .setup-modeling-demo__img {
  width: 100%;
  display: block;
}
.md-card--setup .setup-modeling-demo__circle {
  position: absolute;
  top: 4.1%;
  right: 2.1%;
  width: 48px;
  height: 48px;
  border: 3px solid #2A9D8F;
  border-radius: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
  animation: setup-exit-circle 6s ease-in-out infinite;
}
.md-card--setup .setup-modeling-demo__rect {
  position: absolute;
  bottom: 50%;
  right: 0.5%;
  width: 12%;
  height: 7.5%;
  border: 3px solid #2A9D8F;
  border-radius: 10px;
  pointer-events: none;
  animation: setup-exit-rect 6s ease-in-out infinite;
}
.md-card--setup .setup_setting {
  margin-bottom: 1.75rem;
}
.md-card--setup .setup_setting > label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.md-card--setup {
  /* Setup symbols page: condensed dropdown rows (modern, dashboard-style) */
}
.md-card--setup .setup-symbols-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.md-card--setup .setup-symbols-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  min-height: 48px;
}
.md-card--setup .setup-symbols-row__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-ink);
  min-width: 0;
  flex: 0 0 calc(50% - 0.5rem);
}
.md-card--setup .setup-symbols-row__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: rgba(44, 183, 176, 0.9);
}
.md-card--setup .setup-symbols-dropdown {
  position: relative;
  flex: 0 0 calc(50% - 0.5rem);
  min-width: 0;
  max-width: 100%;
}
.md-card--setup .setup-symbols-options-group {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 1rem;
  background: rgba(17, 26, 46, 0.04);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  border-radius: var(--md-r-md, 12px);
}
.md-card--setup .setup-symbols-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.md-card--setup .setup-symbols-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  min-height: 44px; /* WCAG 2.5.5 touch target */
  font-size: 1.125rem; /* 18px — AAC requirement */
  font-weight: 500;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.2s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.md-card--setup .setup-symbols-pill:hover {
  background: rgba(44, 183, 176, 0.08);
  color: rgba(17, 70, 68, 0.95);
  border-color: rgba(44, 183, 176, 0.4);
  box-shadow: 0 2px 8px rgba(44, 183, 176, 0.12);
}
.md-card--setup {
  /* Keyboard focus: explicit 2px ring for WCAG 2.4.7 compliance.
     Previously shared hover+focus treatment which was too subtle as
     a standalone focus indicator. */
}
.md-card--setup .setup-symbols-pill:focus-visible {
  background: rgba(44, 183, 176, 0.1);
  color: rgba(17, 70, 68, 0.95);
  border-color: #1B365D;
  outline: none !important;
  box-shadow: inset 0 0 0 2px #1B365D, 0 0 0 4px rgba(27, 54, 93, 0.1) !important;
}
@media (forced-colors: active) {
  .md-card--setup .setup-symbols-pill:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}
.md-card--setup .setup-symbols-pill.is-active {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12) 0%, rgba(91, 141, 239, 0.08) 100%);
  color: var(--md-ink);
  font-weight: 600;
  border-color: rgba(44, 183, 176, 0.35);
}
.md-card--setup .setup-symbols-pill:active {
  background: rgba(44, 183, 176, 0.15);
}
.md-card--setup .setup-symbols-pill__text {
  flex: 1;
  min-width: 0;
}
.md-card--setup .setup-symbols-pill__img {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
}
.md-card--setup .setup-symbols-pill__img--pale {
  filter: brightness(1.12) saturate(0.92);
}
.md-card--setup .setup-symbols-pill__subnote {
  display: block;
  font-size: 0.9375rem; /* 15px — secondary text; increased for WCAG legibility */
  font-weight: 400;
  color: rgba(17, 26, 46, 0.85); /* passes 4.5:1 on white */
  margin-top: 2px;
}
.md-card--setup .setup-symbols-pill--expand {
  font-style: italic;
  color: var(--md-ink);
  background: #E8F2EB; /* $color-sage-pale – same file defines it later */
}
.md-card--setup .setup-symbols-pill--expand:hover,
.md-card--setup .setup-symbols-pill--expand:focus-visible {
  color: var(--md-ink);
}
.md-card--setup {
  /* Action-style pill (Limit Tones To...) – same bg as “Show more libraries” so it reads as an action, not a selection */
}
.md-card--setup .setup-symbols-pill--optional {
  font-style: italic;
  /* font-size inherited (18px) to meet AAC minimum */
  color: var(--md-ink);
  border-style: dashed;
  background: #E8F2EB; /* same as .setup-symbols-pill--expand */
}
.md-card--setup .setup-symbols-pill--optional .setup-symbols-pill__img {
  width: 22px;
  height: 22px; /* 20% smaller than base 28px */
}
.md-card--setup .setup-symbols-pill--optional:hover,
.md-card--setup .setup-symbols-pill--optional:focus-visible {
  color: var(--md-ink);
  border-style: dashed;
}
.md-card--setup .setup-symbols-pill--optional.is-active {
  border-style: solid;
  background: #E8F2EB; /* keep action bg when “active”, don’t use selection gradient */
}
.md-card--setup .setup-symbols-dropdown__trigger {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.md-card--setup .setup-symbols-dropdown__trigger:hover,
.md-card--setup .setup-symbols-dropdown__trigger:focus-visible {
  border-color: rgba(44, 183, 176, 0.4);
  box-shadow: 0 2px 8px rgba(44, 183, 176, 0.12);
  outline: none;
}
.md-card--setup .setup-symbols-dropdown.is-open .setup-symbols-dropdown__trigger {
  border-color: rgba(44, 183, 176, 0.5);
  box-shadow: 0 2px 10px rgba(44, 183, 176, 0.18);
}
.md-card--setup .setup-symbols-dropdown__trigger-label {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.md-card--setup .setup-symbols-dropdown__chevron {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(17, 26, 46, 0.5);
  transition: transform 0.2s ease;
}
.md-card--setup .setup-symbols-dropdown.is-open .setup-symbols-dropdown__chevron {
  transform: rotate(180deg);
}
.md-card--setup .setup-symbols-dropdown__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.md-card--setup .setup-symbols-dropdown.is-open .setup-symbols-dropdown__list {
  max-height: 320px;
  overflow-y: auto;
  opacity: 1;
}
.md-card--setup .setup-symbols-dropdown__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--md-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.md-card--setup .setup-symbols-dropdown__option-text {
  flex: 1;
  min-width: 0;
}
.md-card--setup .setup-symbols-skin-swatch {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.md-card--setup .setup-symbols-skin-swatch--mix {
  display: flex;
  gap: 3px;
  width: auto;
  height: 22px;
  border: none;
}
.md-card--setup .setup-symbols-skin-swatch--mix span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.md-card--setup .setup-symbols-preference-card {
  min-height: 15rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(44, 183, 176, 0.18);
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px rgba(17, 26, 46, 0.06);
}
.md-card--setup .setup-symbols-card-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.md-card--setup .setup-symbols-card-row .setup-symbols-preference-card {
  flex: 0 0 calc(75% - 0.75rem);
  min-width: 0;
  margin-bottom: 0;
}
.md-card--setup .setup-symbols-card-sample {
  min-height: 15rem;
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-card--setup {
  /* Skin-tone row: 15% taller than default card height */
}
.md-card--setup .setup-symbols-card-row--skin-tone .setup-symbols-preference-card,
.md-card--setup .setup-symbols-card-row--skin-tone .setup-symbols-card-sample {
  min-height: 17.25rem; /* 15rem * 1.15 */
}
.md-card--setup {
  /* Picture-display row: 10% taller than default card min-height */
}
.md-card--setup .setup-symbols-card-row--picture-display .setup-symbols-preference-card,
.md-card--setup .setup-symbols-card-row--picture-display .setup-symbols-card-sample {
  min-height: 16.5rem; /* 15rem * 1.10 */
}
.md-card--setup .setup-symbols-card-sample .setup-symbols-preview,
.md-card--setup .setup-symbols-card-sample .setup-symbols-preview-section {
  margin-top: 0;
  margin-bottom: 0;
}
.md-card--setup .setup-symbols-card__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.md-card--setup .setup-symbols-card__left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 200px;
  min-width: 0;
}
.md-card--setup .setup-symbols-card__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-card--setup .setup-symbols-preference-card .setup-symbols-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.md-card--setup .setup-symbols-preference-card .setup-symbols-dropdown,
.md-card--setup .setup-symbols-preference-card .setup-symbols-options-group,
.md-card--setup .setup-symbols-preference-card .setup-symbols-pills {
  width: 100%;
  max-width: 100%;
}
.md-card--setup .setup-symbols-card__left .setup-symbols-row__label {
  margin-bottom: 0;
}
.md-card--setup .md-card--setup .col-sm-10 + .col-sm-10 {
  margin-top: 1.5rem;
}
.md-card--setup .setup-symbols-preference-card .setup-symbols-rows {
  margin-bottom: 0;
}
.md-card--setup .setup-symbols-preference-card .setup-symbols-preview,
.md-card--setup .setup-symbols-preference-card .setup-symbols-preview-section {
  margin-top: 0;
}
.md-card--setup .setup-symbols-card__right .setup-symbols-preview,
.md-card--setup .setup-symbols-card__right .setup-symbols-preview-section {
  margin-top: 0;
  margin-bottom: 0;
}
.md-card--setup .setup-symbols-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-card--setup .setup-symbols-preview > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.md-card--setup .setup-symbols-preview > div > span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-card--setup .setup-symbols-preview img,
.md-card--setup .setup-symbols-preview-section img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.md-card--setup .setup-symbols-preview-bg > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-card--setup .setup-symbols-preview-bg span img {
  display: block;
}
.md-card--setup .setup-symbols-preference-card .setup-symbols-preview-section:last-child {
  margin-bottom: 0;
}
.md-card--setup .setup-symbols-sample-pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(17, 70, 68, 0.75);
  background: rgba(44, 183, 176, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.md-card--setup .setup-symbols-utterance-sample {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.md-card--setup .setup-symbols-utterance-sample__box {
  min-width: 120px;
  min-height: 80px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 70, 68, 0.08);
  border: 1px solid rgba(17, 70, 68, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.md-card--setup .setup-symbols-utterance-sample__text {
  font-size: 15px;
  color: rgba(17, 70, 68, 0.7);
  line-height: 1.35;
}
.md-card--setup .setup-symbols-utterance-sample__chip {
  width: 52px;
  text-align: center;
}
.md-card--setup .setup-symbols-utterance-sample__label {
  font-size: 14px;
  color: rgba(17, 70, 68, 0.65);
  margin-top: 2px;
}
.md-card--setup .setup-symbols-preview-section {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-card--setup .setup-symbols-preview-section__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  margin-bottom: 0.5rem;
}
.md-card--setup .setup-symbols-preview-bg {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  border: 3px solid rgba(246, 98, 0, 0.5);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 189, 144);
}
.md-card--setup .setup-symbols-preview-bg--white {
  background: #fff;
}
.md-card--setup .setup-symbols-preview-bg--black {
  background: #000;
}
.md-card--setup .setup-symbols-preview-bg__text {
  font-size: 16px;
  color: var(--md-ink);
}
.md-card--setup .setup-symbols-preview-bg--black .setup-symbols-preview-bg__text {
  color: #fff;
}
.md-card--setup .setup-symbols-preview-bg__text--high-contrast {
  color: #f8fc03;
}
.md-card--setup .setup-symbols-preview-bg span img {
  max-width: 84px;
  max-height: 84px;
  object-fit: contain;
}
.md-card--setup {
  /* High-contrast filter only when High contrast is selected, not for plain Black background */
}
.md-card--setup .setup-symbols-preview-bg--high-contrast span img {
  filter: invert(1) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.1);
}
.md-card--setup .setup-symbols-dropdown__option:hover {
  background: rgba(44, 183, 176, 0.08);
  color: rgba(17, 70, 68, 0.95);
}
.md-card--setup .setup-symbols-dropdown__option.is-active {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12) 0%, rgba(91, 141, 239, 0.08) 100%);
  color: var(--md-ink);
  font-weight: 600;
}
.md-card--setup .setup-symbols-dropdown__option:active {
  background: rgba(44, 183, 176, 0.15);
}
.md-card--setup .setup-symbols-dropdown__subnote {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(17, 26, 46, 0.65);
  margin-top: 2px;
}
.md-card--setup .setup-symbols-dropdown__option--expand {
  font-style: italic;
  color: rgba(44, 183, 176, 0.95);
}
.md-card--setup {
  /* Buttons: same as .md-btn on dashboard */
}
.md-card--setup .btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}
.md-card--setup .btn-group-vertical .btn,
.md-card--setup .btn {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--md-line);
  font-weight: 850;
  font-size: 15px;
  box-shadow: var(--md-shadow-2, 0 2px 8px rgba(0, 0, 0, 0.06));
  background: rgba(255, 255, 255, 0.72);
  color: var(--md-ink);
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.md-card--setup .btn-group-vertical .btn:hover,
.md-card--setup .btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(17, 26, 46, 0.2);
}
.md-card--setup .btn-group-vertical .btn.btn-primary,
.md-card--setup .btn.btn-primary {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2));
  border-color: rgba(44, 183, 176, 0.18);
  color: var(--md-ink);
}
.md-card--setup .btn-group-vertical .btn.btn-primary:hover,
.md-card--setup .btn.btn-primary:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.3), rgba(91, 141, 239, 0.25));
  border-color: rgba(44, 183, 176, 0.28);
}
.md-card--setup .btn-group-vertical .btn.btn-default:hover,
.md-card--setup .btn.btn-default:hover {
  background: rgba(255, 255, 255, 0.85);
}
.md-card--setup a.btn {
  text-decoration: none;
}
.md-card--setup a.btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-card--setup a.btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.md-card--setup .btn:active {
  transform: scale(var(--md-tap, 0.99));
}
.md-card--setup {
  /* Form controls: same as modern dashboard inputs */
}
.md-card--setup input,
.md-card--setup select,
.md-card--setup textarea {
  border-radius: 12px;
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.2));
  padding: 10px 12px;
  font-size: 15px;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.8);
}
.md-card--setup input:focus-visible,
.md-card--setup select:focus-visible,
.md-card--setup textarea:focus-visible {
  outline: none;
  border-color: rgba(44, 183, 176, 0.5);
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.15);
}
.md-card--setup {
  /* Grid/columns: consistent gutter with dashboard */
}
.md-card--setup .row {
  margin-left: -12px;
  margin-right: -12px;
}
.md-card--setup .col-sm-5,
.md-card--setup .col-sm-6,
.md-card--setup .col-sm-10 {
  padding-left: 12px;
  padding-right: 12px;
}
.md-card--setup {
  /* Images: keep all setup images (logo, walkthrough gifs, etc.), style to match dashboard cards */
}
.md-card--setup img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.md-card--setup {
  /* Logo / icon area next to text (e.g. intro step) */
}
.md-card--setup span[style*="float: left"] img,
.md-card--setup .app-logo img {
  border-radius: 12px;
}
.md-card--setup {
  /* Text links (not buttons): dashboard link color */
}
.md-card--setup a:not(.btn) {
  color: var(--md-ink);
  font-weight: 600;
}
.md-card--setup a:not(.btn):hover {
  color: rgba(44, 183, 176, 0.9);
}
.md-card--setup {
  /* Icon glyphicons in setup steps: match dashboard muted tone */
}
.md-card--setup .glyphicon {
  color: var(--md-muted, #64748b);
}
.md-card--setup label {
  color: var(--md-ink);
  font-weight: 700;
}
.md-card--setup {
  /* Scrollable / overflow areas: same border and bg as dashboard */
}
.md-card--setup [style*="overflow: auto"],
.md-card--setup [style*="overflow:auto"] {
  border-radius: 12px;
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  background: rgba(255, 255, 255, 0.5);
}
.md-card--setup {
  /* Lists if present in any setup step */
}
.md-card--setup ul, .md-card--setup ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  color: var(--md-ink);
  line-height: 1.55;
}
.md-card--setup li {
  margin-bottom: 0.5rem;
}

/* Setup standalone mode (Board Layout from edit mode) */
.md-card--setup-standalone {
  margin-top: 2rem;
  position: relative;
}

.md-board-layout-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36. */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(27, 54, 93, 0.04);
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-layout-close:hover {
  background: rgba(27, 54, 93, 0.1);
  color: #374151;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.12);
}

.md-card--setup__nav--centered {
  justify-content: center !important;
}

/* Setup intro step: same card style as getting started (wave, layout, font, buttons), no status bar */
.md-card--setup-intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 20px;
}

.md-card--setup-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MDAgMjIwJyB3aWR0aD0nNDAwJyBoZWlnaHQ9JzIyMCc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdhJyB4MT0nMCUnIHkxPScxMDAlJyB4Mj0nMTAwJScgeTI9JzAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojN0REM0NGO3N0b3Atb3BhY2l0eTowLjUnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNCOEU2RTM7c3RvcC1vcGFjaXR5OjAuMjUnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYicgeDE9JzAlJyB5MT0nODAlJyB4Mj0nMTAwJScgeTI9JzIwJSc+PHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6I0I4RTZFMztzdG9wLW9wYWNpdHk6MC40NScvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6I0U5RjlGODtzdG9wLW9wYWNpdHk6MC4yJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2MnIHgxPScwJScgeTE9JzYwJScgeDI9JzEwMCUnIHkyPSc0MCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMyQ0I3QjA7c3RvcC1vcGFjaXR5OjAuMicvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6IzdERDNDRjtzdG9wLW9wYWNpdHk6MC40Jy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2QnIHgxPScwJScgeTE9JzEwMCUnIHgyPScxMDAlJyB5Mj0nMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNBOEQ0RjA7c3RvcC1vcGFjaXR5OjAuMzUnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNDNUU0Rjc7c3RvcC1vcGFjaXR5OjAuMicvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdlJyB4MT0nMCUnIHkxPSc3MCUnIHgyPScxMDAlJyB5Mj0nMzAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojN0VCOEU4O3N0b3Atb3BhY2l0eTowLjI1Jy8+PHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojQThENEYwO3N0b3Atb3BhY2l0eTowLjE1Jy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2YnIHgxPScwJScgeTE9JzkwJScgeDI9JzEwMCUnIHkyPScxMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNGQkYwQzM7c3RvcC1vcGFjaXR5OjAuNCcvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6I0Y1RTZBMztzdG9wLW9wYWNpdHk6MC4yNScvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdnJyB4MT0nMCUnIHkxPSc1MCUnIHgyPScxMDAlJyB5Mj0nNTAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojRjVFNkEzO3N0b3Atb3BhY2l0eTowLjInLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNGQkYwQzM7c3RvcC1vcGFjaXR5OjAuMzUnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMCAxMDBRNTAgNjAgMTAwIDc1VDIwMCA1NVQzMDAgNzBUNDAwIDUwTDQwMCAyMjBIMFonIGZpbGw9J3VybCgjYyknLz48cGF0aCBkPSdNMCA5NVE4MCA1MCAxNjAgNzBUMzIwIDQ1VDQwMCA2NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2EpJy8+PHBhdGggZD0nTTAgODVRNjAgNDUgMTIwIDYwVDI0MCA0MFQzNjAgNTVUNDAwIDQ1TDQwMCAyMjBIMFonIGZpbGw9J3VybCgjZCknLz48cGF0aCBkPSdNMCA5MFExMDAgNTUgMjAwIDY1VDQwMCA1NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2YpJy8+PHBhdGggZD0nTTAgNzVRNzAgMzUgMTQwIDUwVDI4MCAzMFQ0MDAgNDhMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNiKScvPjxwYXRoIGQ9J00wIDcwUTkwIDQwIDE4MCA1MlQzNjAgMzhUNDAwIDQyTDQwMCAyMjBIMFonIGZpbGw9J3VybCgjZSknLz48cGF0aCBkPSdNMCA2NVE4MCAzMCAxNjAgNDVUMzIwIDI4VDQwMCA0MEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2cpJy8+PHBhdGggZD0nTTAgNThRMTAwIDI1IDIwMCAzOFQ0MDAgMzJMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNhKScvPjxwYXRoIGQ9J00wIDEyMFE4MCAxNjAgMTYwIDE0NVQzMjAgMTY1VDQwMCAxNTBMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNjKScvPjxwYXRoIGQ9J00wIDEzMFExMDAgMTcwIDIwMCAxNTVUNDAwIDE3NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2EpJy8+PHBhdGggZD0nTTAgMTQwUTYwIDE4MCAxNDAgMTY1VDMwMCAxODVUNDAwIDE3MEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2QpJy8+PHBhdGggZD0nTTAgMTUwUTkwIDE5MCAxODAgMTc1VDM2MCAxOTVUNDAwIDE4NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2YpJy8+PHBhdGggZD0nTTAgMTY1UTcwIDIwNSAxNTAgMTkwVDM1MCAyMTBUNDAwIDIwMEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2IpJy8+PC9zdmc+Cg==");
  background-size: cover;
  background-position: top center;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  filter: saturate(1.15);
}

.md-card--setup-intro .md-card--setup__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 84px;
  padding-bottom: 0;
}

.md-card--setup-intro .md-card__head--setup-intro,
.md-card--setup-intro .md-card__head--getting-started {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.md-card--setup-intro .md-card__head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.md-card--setup-intro .md-card__icon--getting-started {
  width: 92px;
  height: 92px;
}

.md-card--setup-intro .md-card__titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.setup-intro__header {
  margin: 0 0 1.5rem;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--md-navy, #1B365D);
}

.setup-intro__username {
  font-weight: 700;
  color: var(--md-navy, #1B365D);
}

.setup-intro__get-started {
  margin: 0.5rem 0 0;
  font-size: 1.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--md-navy, #1B365D);
}

.setup-intro__encourage {
  margin: 0;
  font-size: 1.125rem; /* 18px — AAC body text */
  font-weight: 400; /* was 200 (ultra-light) — unreadable for low vision */
  line-height: 1.5; /* WCAG 1.4.12 body text */
  color: rgba(17, 26, 46, 0.88); /* ~12:1 contrast on white */
}

.md-card--setup-intro .setup-intro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1.5rem;
  flex-shrink: 0;
}

/* Same glass button style as getting started card */
.md-card--setup-intro .md-card__getting-started-btn {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  flex-shrink: 0;
  transition: transform 0.22s ease-out, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--md-navy, #111A2E);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(17, 26, 46, 0.08), 0 0 0 1px rgba(44, 183, 176, 0.15), 0 0 28px rgba(44, 183, 176, 0.18);
}

.md-card--setup-intro .md-card__getting-started-btn:active {
  transform: scale(0.99);
}

.md-card--setup-intro .md-card__getting-started-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 20px rgba(17, 26, 46, 0.1), 0 0 0 1px rgba(44, 183, 176, 0.25), 0 0 32px rgba(44, 183, 176, 0.22);
}

.md-card--setup-intro .md-card__getting-started-btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-card--setup-intro .md-card__getting-started-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Secondary button (ghost) on intro: small pill, lower-right, de-emphasized */
.md-card--setup-intro .md-card__getting-started-btn--secondary,
.md-card--setup-intro .setup-intro__skip-pill {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(17, 26, 46, 0.1);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
}

.md-card--setup-intro .md-card__getting-started-btn--secondary:hover,
.md-card--setup-intro .setup-intro__skip-pill:hover {
  background: rgba(17, 26, 46, 0.06);
  border-color: rgba(17, 26, 46, 0.14);
}

/* Setup card (all steps): button row when not intro */
.md-card--setup .setup-intro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Voice toggle in workspace nav (to the right of Next button): inline, no absolute positioning */
.md-hero--setup__nav .setup-voice-toggle--in-nav {
  position: static;
  flex-shrink: 0;
}

/* Applied in: app/templates/application.hbs (id="button_list"), app/templates/utterance.hbs */
#button_list {
  color: #000;
  text-decoration: none;
}

.button {
  color: #000;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 2px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  /* Inner colored ring. Was previously rendered with
     `outline: 3px solid transparent; outline-offset: -3px;` and the
     color set inline via `outline-color`. That approach intermittently
     rendered thinner along the top edge on board-alt because of the
     interaction between negative outline-offset, rounded corners, and
     `overflow: hidden`. Switched to `box-shadow: inset` which paints a
     uniform 3px ring on all four sides regardless of overflow/radius.
     The color comes from `--btn-ring-color`, set inline by the same JS
     paths that previously set `outline-color` (bound_classes.add_rule,
     Button.computed_style, Button#fast_html). */
  box-shadow: inset 0 0 0 3px var(--btn-ring-color, transparent);
  /* Keep `outline: 3px solid transparent` for legacy back-compat —
     other rules elsewhere in the codebase still flip it for keyboard
     focus rings and the touched state (see :focus-visible / .touched
     entries below in this file). */
  outline: 3px solid transparent;
  outline-offset: -3px;
  overflow: hidden;
  opacity: 1;
}
.button:hover {
  text-decoration: none;
  color: #000;
  /* Thicken the inner ring on hover from 3px to 4px. */
  box-shadow: inset 0 0 0 4px var(--btn-ring-color, transparent);
  outline: 4px solid; /* override Bootstrap a:hover { outline: 0 } — thicken on hover */
  outline-offset: -4px;
}
.button.hover_button {
  box-shadow: 6px 6px 20px rgba(60, 60, 60, 0.7), -2px -2px 20px rgba(60, 60, 60, 0.7), 6px 6px 30px rgba(255, 255, 0, 0.8), -2px -2px 30px rgba(255, 0, 0, 0.8);
}
.button.fading {
  transition: opacity 0.5s linear 0.9s;
  opacity: 0;
}
.button.text_popup {
  transition: width 2s ease-in-out, height 2s ease-in-out, margin-left 2s ease-in-out, margin-top 2s ease-in-out, opacity 0.3s ease-in-out;
  position: relative;
  opacity: 0;
}
.button.fading.text_popup {
  transition: width 2s ease-in-out, height 2s ease-in-out, margin-left 2s ease-in-out, margin-top 2s ease-in-out, opacity 1s ease-in-out 0.9s;
}

body > .popover.bottom {
  margin-left: 120px;
  margin-top: 5px;
  font-size: 20px;
}

.popover img {
  width: 60px;
  height: 60px;
  margin-right: 5px;
  object-fit: contain;
  object-position: center;
}
.popover img.user {
  width: 30px;
  height: 30px;
}

/* Applied in: Button stash hover overlay during edit mode */
#stash_hover {
  position: absolute;
  cursor: pointer;
  left: -100px;
  z-index: 3;
  width: 162px;
  /* Was a fixed 41px with overflow:hidden, which clipped the 27px
     icon + two-line label. Auto height + visible overflow lets the
     box grow to fit its content. Positioning (left/margin-top) is
     left exactly as it was so it stays anchored to the button. */
  height: auto;
  font-size: 14px;
  padding: 0px;
  margin-top: -41px;
  margin-left: 0px;
  background: #fff;
  visibility: hidden;
  border: 1px solid #ccc;
  border-radius: 3px;
  opacity: 0;
  overflow: visible;
  transition: visibility 0s 0.9s linear, opacity 0.15s ease-in 0.9s;
  -webkit-transition: visibility 0s 0.9s linear, opacity 0.15s ease-in 0.9s;
}
#stash_hover.on_button {
  visibility: visible;
  opacity: 1;
}
#stash_hover .option {
  float: left;
  width: 80px;
  padding: 5px;
  box-sizing: border-box;
}
#stash_hover .option:hover {
  background: #eee;
}
#stash_hover .option:last-child {
  border-left: 1px solid #ccc;
  padding-left: 10px;
}
#stash_hover .glyphicon {
  float: left;
  font-size: 27px;
  margin-right: 5px;
}

.button .pending {
  position: absolute;
}

.button .pending > img {
  width: 31px;
  height: 31px;
  margin: 0;
  padding: 5px;
  min-width: 0;
}

.board.colored_icons:not(.edit) .button .action_container.folder, .board.colored_icons:not(.edit) .button .action_container.integration, .board.colored_icons:not(.edit) .button .action_container.webhook {
  top: 0;
  right: 0;
  height: 14px;
  width: 18px;
  border: none !important;
  border-radius: 0 6px 0 6px;
  /* Glass-modern surface treatment — mirrors the board-detail
     --folder-colored-corner ::after rule. The categorical button
     color is the base layer; a bright top-right radial highlight
     + opacity:0.92 give the tinted-glass / semi-transparent
     reading. Depth at the inner-bottom-left corner is now an
     INSET box-shadow rather than a wide dark radial gradient —
     a radial overlay reads as a muddy interior blob on light
     bases (yellow/mint) because the dark color is hue-blind,
     while a small directional inset shadow with crisp falloff
     reads as an edge shadow on every hue. The inset depth's
     direction matches the top-right highlight, giving a single
     coherent lit-from-upper-right reading. Reads the same
     vocabulary as the soft-borders glass effect at
     app.scss:62979 so the classic / board-alt grids visually
     match the modernized board-detail page. */
  background-color: var(--btn-bg, rgba(0, 0, 0, 0.18));
  background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0) 65%);
  /* Shadow stack mirrors the board-detail rule's 2026-05-26 v3
     fix: dropped the outer drop shadow (was projecting a black
     blur onto the colored button face that read as a smudge on
     light categorical colors), tightened the inset depth blur
     (4px→2px, alpha .18→.14) so the inner-curve shadow stays
     crisp on every hue. The rim highlight + 0.92 opacity carry
     the glass cue without needing elevation. */
  box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.35), inset 1px -1px 2px rgba(0, 0, 0, 0.14);
  opacity: 0.92;
  /* 10% chroma reduction so the colored corner reads as a
     support cue rather than competing with the category label
     for primary attention. The .home variant below inherits
     this filter (it only overrides box-shadow + opacity). */
  filter: saturate(0.9);
  z-index: 2;
  transform: scale(1.5);
  transform-origin: top right;
}
.board.colored_icons:not(.edit) .button .action_container.folder.home, .board.colored_icons:not(.edit) .button .action_container.integration.home, .board.colored_icons:not(.edit) .button .action_container.webhook.home {
  /* Home folders previously read darker via a stronger
     brightness filter. Carry that differentiation with a
     slightly deeper inset depth alpha (.14 → .22) on top of
     the inherited stack so the home folder still reads as
     visually heavier — same crisp 2px blur, just deeper. */
  box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.35), inset 1px -1px 2px rgba(0, 0, 0, 0.22);
  opacity: 0.95;
}
.board.colored_icons:not(.edit) .button .action_container.folder .action, .board.colored_icons:not(.edit) .button .action_container.integration .action, .board.colored_icons:not(.edit) .button .action_container.webhook .action {
  visibility: hidden;
}
.board.colored_icons:not(.edit) .button .action_container.webhook {
  border-radius: 10px;
  margin: 5px;
}
.board.colored_icons:not(.edit) .button .action_container.webhook.succeeded, .board.colored_icons:not(.edit) .button .action_container.webhook.pending, .board.colored_icons:not(.edit) .button .action_container.webhook.errored {
  border-style: solid;
  border-width: 3px;
  height: 20px;
  filter: none;
}
.board.colored_icons:not(.edit) .button .action_container.webhook.pending {
  animation: throb 1.5s ease-in-out infinite;
  background: transparent;
}
.board.colored_icons:not(.edit) .button .action_container.webhook.errored {
  background: #f44;
  border-radius: 0;
}
.board.colored_icons:not(.edit) .button .action_container.webhook.succeeded {
  background: #8c8;
}
.board.colored_icons:not(.edit).text_small .button .action_container.folder, .board.colored_icons:not(.edit).text_small .button .action_container.integration, .board.colored_icons:not(.edit).text_small .button .action_container.webhook {
  height: 10px;
  width: 14px;
  border-radius: 0 0 0 4px;
  /* .home variant intentionally inherits the parent rule's
     gradient-based darkening + 0.95 opacity. The previous
     brightness-filter override has been dropped because it
     would wash out the glass gradient stack the parent applies. */
}
.board.colored_icons:not(.edit).text_small .button .action_container.webhook {
  border-radius: 8px;
  margin: 3px;
}
.board.colored_icons:not(.edit).text_small .button .action_container.webhook.succeeded, .board.colored_icons:not(.edit).text_small .button .action_container.webhook.pending, .board.colored_icons:not(.edit).text_small .button .action_container.webhook.errored {
  height: 10px;
  border-width: 3px;
  filter: none;
}
.board.colored_icons:not(.edit).text_small .button .action_container.webhook.errored {
  border-radius: 0;
}
.board.colored_icons:not(.edit).text_medium .button .action_container.folder, .board.colored_icons:not(.edit).text_medium .button .action_container.integration, .board.colored_icons:not(.edit).text_medium .button .action_container.webhook {
  height: 12px;
  width: 16px;
  border-radius: 0 0 0 5px;
  /* .home variant intentionally inherits the parent rule's
     gradient-based darkening + 0.95 opacity. The previous
     brightness-filter + opacity overrides have been dropped
     because they would fight the glass gradient stack the
     parent applies. */
}
.board.colored_icons:not(.edit).text_medium .button .action_container.webhook {
  border-radius: 10px;
  margin: 5px;
}
.board.colored_icons:not(.edit).text_medium .button .action_container.webhook.succeeded, .board.colored_icons:not(.edit).text_medium .button .action_container.webhook.pending, .board.colored_icons:not(.edit).text_medium .button .action_container.webhook.errored {
  height: 15px;
  border-width: 3px;
  filter: none;
}
.board.colored_icons:not(.edit).text_medium .button .action_container.webhook.errored {
  border-radius: 0;
}
.board.colored_icons:not(.edit) {
  /* On narrow screens (≤640px — phone-portrait threshold), make
     the corner tabs ~50% more transparent (0.92 → 0.46) so the
     categorical-color wedge stays a quiet folder cue rather than
     dominating the small tile. Mirrors the parallel board-detail
     rule. */
}
@media (max-width: 640px) {
  .board.colored_icons:not(.edit) .button .action_container.folder,
  .board.colored_icons:not(.edit) .button .action_container.integration,
  .board.colored_icons:not(.edit) .button .action_container.webhook {
    opacity: 0.46;
  }
}

@keyframes throb {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
@-webkit-keyframes throb {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
@keyframes cursorblink {
  0%, 25%, 75%, 100% {
    opacity: 1;
  }
  35%, 50%, 65% {
    opacity: 0;
  }
}
@-webkit-keyframes cursorblink {
  0%, 25%, 75%, 100% {
    opacity: 1;
  }
  35%, 50%, 65% {
    opacity: 0;
  }
}
.signup_links {
  display: inline-block;
  font-size: 18px;
  padding-right: 20px;
  margin-top: 22px;
  width: calc(100% - 435px);
  text-align: right;
}

.button.link_disabled .action_container .action {
  opacity: 0.4;
}
.button.link_disabled .action_container.talk .action {
  opacity: inherit;
}

.stash_button_container {
  display: block;
  float: left;
  width: 33%;
  padding: 5px;
}
.stash_button_container .button {
  position: relative;
  display: block;
}
.stash_button_container .button img.symbol {
  height: 70px;
  min-width: inherit;
  max-width: inherit;
}

#board_description {
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #888;
  margin-bottom: 10px;
}

#board_description span {
  cursor: pointer;
}

.integration_container {
  position: relative;
}
.integration_container #integration_frame {
  width: calc(100% + 40px);
  margin: -10px -20px 0;
}
.integration_container #integration_overlay {
  width: calc(100% + 40px);
  margin: -10px -20px 0;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.integration_container #integration_overlay .status {
  visibility: hidden;
}
.integration_container #integration_overlay.pending {
  background: #fff;
}
.integration_container #integration_overlay.pending .status {
  visibility: visible;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
.integration_container #integration_overlay .integration_target {
  position: absolute;
  cursor: pointer;
  border-radius: 5px;
}
.integration_container #integration_overlay .integration_target:hover, .integration_container #integration_overlay .integration_target:focus-visible {
  border: 3px solid #444;
  outline: none;
}

/* Applied in: board templates - .board class on board container */
.board .board_status {
  margin: 20px 20px;
  font-size: 20px;
  text-align: center;
  opacity: 0;
  animation: appear-after-delay 1s forwards;
}

@keyframes appear-after-delay {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.board {
  margin: -10px -20px;
}

/* Full-bleed #board_bg is position:absolute (see board/index.hbs + bg_style). Some browsers paint
   it above grid buttons. Do NOT set position:relative on .button_row — fast_html uses position:absolute
   on buttons with top/left computed for .board as containing block; relative on .button_row would
   re-parent those coordinates and hide controls (obf/eval-*, all eval steps). */
.board.eval_mode,
.board:has(#board_bg) {
  isolation: isolate;
}

.board.eval_mode #board_bg,
.board:has(#board_bg) #board_bg {
  z-index: 0 !important;
  pointer-events: none;
}

.board.eval_mode #board_canvas,
.board:has(#board_bg) #board_canvas {
  position: relative;
  z-index: 10 !important;
  pointer-events: auto;
}

.board.eval_mode a.button,
.board.eval_mode a[data-id],
.board:has(#board_bg) a.button,
.board:has(#board_bg) a[data-id] {
  z-index: 10 !important;
  pointer-events: auto;
}

.board.finding_target .button, .board.finding_target .button input {
  cursor: copy;
}

.board .button {
  margin: 2px 2px;
}

.board .button.touched, .board .button:focus-visible {
  padding-top: 0px;
  border-width: 5px;
}
.board .button.touched.hidden_button, .board .button.touched.empty, .board .button:focus-visible.hidden_button, .board .button:focus-visible.empty {
  border-width: 1px;
}

.board .button.touched .symbol, .board .button:focus-visible .symbol {
  margin-top: -4px;
}

.board.border_none .button {
  border-width: 0;
}

.board.border_none .button.touched, .board.border_none .button:focus-visible {
  padding-top: 0px;
  border-width: 5px;
}
.board.border_none .button.touched:hidden_button, .board.border_none .button:focus-visible:hidden_button {
  border-width: 0;
}

.board.border_medium .button {
  border-width: 2px;
}

.board.border_medium .button.touched, .board.border_medium .button:focus-visible {
  padding-top: 0px;
  border-width: 5px;
}
.board.border_medium .button.touched:hidden_button, .board.border_medium .button:focus-visible:hidden_button {
  border-width: 2px;
}

.board.border_large .button {
  border-width: 5px;
}

.board.border_large .button.touched, .board.border_large .button:focus-visible {
  padding-top: 0px;
  border-width: 10px;
}
.board.border_large .button.touched:hidden_button, .board.border_large .button:focus-visible:hidden_button {
  border-width: 5px;
}

.board.border_huge .button {
  border-width: 10px;
}

.board.border_huge .button.touched, .board.border_huge .button:focus-visible {
  padding-top: 0px;
  border-width: 14px;
}
.board.border_huge .button.touched:hidden_button, .board.border_huge .button:focus-visible:hidden_button {
  border-width: 10px;
}

.board.upper .button .button-label {
  text-transform: uppercase;
}
.board.lower .button .button-label {
  text-transform: lowercase;
}
.board.arial .button .button-label {
  font-family: "Arial", sans-serif;
}
.board.comic_sans .button .button-label {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.board.open_dyslexic .button .button-label {
  font-family: "OpenDyslexic", Arial, sans-serif;
}
.board.architects_daughter .button .button-label {
  font-family: "ArchitectsDaughter", Arial, sans-serif;
}

/* Applied in: Board overlay for word suggestions / finding target */
#overlay_container {
  position: absolute;
  margin: 0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  background: rgba(100, 100, 100, 0.95);
  border-radius: 5px;
  z-index: 3;
}
#overlay_container .overlay_row {
  clear: both;
}
#overlay_container .overlay_row .overlay_button {
  position: relative;
  float: left;
}
#overlay_container .overlay_row .overlay_button .img_holder {
  position: relative;
}
#overlay_container .overlay_row .overlay_button.opposite .img_holder::before {
  position: absolute;
  content: " ";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 5px solid rgba(0, 0, 0, 0.7);
  transform: rotate(-30deg);
  z-index: 2;
}
#overlay_container .overlay_row .overlay_button.opposite .img_holder img {
  opacity: 0.7;
  filter: grayscale(0.3);
}

/* Applied in: Word suggestions overlay on boards */
#word_suggestions {
  text-align: center;
  white-space: nowrap;
  height: 55px;
  /* Image-chip variant (eval word bar): the chips otherwise sit flush against
     the header. Add top breathing room. border-box, so grow the height by the
     same 16px to keep the 105px content row un-clipped. Scoped to .with_images
     so the plain 55px row (which board sizing reserves via a hardcoded +55 in
     controllers/board/index.js) is untouched. */
}
#word_suggestions.with_images {
  height: 121px;
  padding-top: 16px;
}

#word_suggestions .suggestion {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 12px 30px;
  margin: -6px 10px 10px;
  cursor: pointer;
  border-radius: 3px;
  background: #fff;
}

#word_suggestions .suggestion:hover, #word_suggestions .suggestion:focus-visible {
  padding: 11px 29px;
  border-width: 2px;
  background: #eee;
}

#word_suggestions .suggestion .image_holder {
  display: block;
  height: 50px;
  overflow: hidden;
}
#word_suggestions .suggestion img {
  height: 50px;
  max-width: 75px;
}
#word_suggestions a.suggestion {
  color: #000;
  text-decoration: none;
}
#word_suggestions.upper .suggestion {
  text-transform: uppercase;
}
#word_suggestions.lower .suggestion {
  text-transform: lowercase;
}
#word_suggestions.arial .suggestion {
  font-family: "Arial", sans-serif;
}
#word_suggestions.comic_sans .suggestion {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
#word_suggestions.open_dyslexic .suggestion {
  font-family: "OpenDyslexic", Arial, sans-serif;
}
#word_suggestions.architects_daughter .suggestion {
  font-family: "ArchitectsDaughter", Arial, sans-serif;
}
#word_suggestions {
  font-size: 18px;
}
#word_suggestions.text_small .suggestion {
  font-size: 14px;
}
#word_suggestions.text_large .suggestion {
  font-size: 22px;
}
#word_suggestions.text_huge .suggestion {
  font-size: 35px;
}

.goal .summary {
  font-weight: bold;
  font-size: 18px;
}
.goal .details {
  font-size: 14px;
}
.goal .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  max-width: calc(100% - 200px);
  font-size: 14px;
}

.lesson.done .summary {
  font-size: 18px;
  color: #888;
}
.lesson .summary {
  font-weight: bold;
  font-size: 22px;
}
.lesson .details {
  font-size: 14px;
}
.lesson .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  max-width: calc(100% - 200px);
  font-size: 14px;
}

.big_checkbox {
  position: relative;
  display: inline-block;
  /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
  padding-left: 30px;
  padding-top: 12px;
}

.form-group .checkbox.big_checkbox {
  padding-top: 12px;
}

.form-inline .checkbox.big_checkbox input[type=checkbox] {
  position: absolute;
  margin-left: -20px;
}

.big_checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 20px;
  top: 5px;
  width: 24px;
  height: 24px;
  transition: background 0.2s 0s linear;
}

.big_checkbox label {
  padding-left: 0;
}

.big_checkbox input[type=checkbox]:checked {
  background: #3594e6;
  border-color: #444;
}

.big_checkbox input[type=checkbox]:checked::after {
  position: absolute;
  height: 8px;
  width: 18px;
  content: "";
  border-left: 3px solid;
  border-bottom: 3px solid;
  border-color: #fff;
  transform: rotate(-45deg);
  left: 2px;
  top: 5px;
}

.daily_use > div {
  float: left;
  height: 100px;
  border: 1px solid #eee;
  margin-left: -1px;
  margin-right: -1px;
  padding-left: 13px;
  font-size: 14px;
  white-space: nowrap;
}
.daily_use > div span {
  display: inline-block;
  margin-top: 40px;
  margin-left: -30px;
  transform: rotate(-90deg);
  visibility: hidden;
}
.daily_use > div.light {
  background: #bddaf3;
}
.daily_use > div.light-moderate {
  background: #9ACBF5;
}
.daily_use > div.moderate {
  background: #7AB9F0;
  color: #fff;
}
.daily_use > div.moderate-active {
  background: #4595D9;
  color: #fff;
}
.daily_use > div.active {
  background: #337ab7;
  color: #fff;
}
.daily_use > div:nth-child(5n+1) span {
  visibility: visible;
}

.daily_use::after {
  content: "";
  display: block;
  clear: both;
}

.listed_badge {
  width: 100%;
  padding: 5px;
}
.listed_badge .basics {
  text-align: center;
  width: 150px;
  float: left;
  position: relative;
}
.listed_badge .basics .badge_image {
  width: 90%;
}
.listed_badge .basics .sparkle {
  font-size: 20px;
}

.sparkle {
  font-size: 20px;
  color: #fff;
  position: absolute;
  animation: sparkle 2s infinite linear, sink-margin 2s infinite linear, jump-around 10s infinite steps(1);
}

.sparkle_list_item:nth-of-type(6n+2) .sparkle {
  animation-delay: 2.8s;
}

.sparkle_list_item:nth-of-type(6n+3) .sparkle {
  animation-delay: 4.3s;
}

.sparkle_list_item:nth-of-type(6n+4) .sparkle {
  animation-delay: 0.4s;
}

.sparkle_list_item:nth-of-type(6n+5) .sparkle {
  animation-delay: 3.3s;
}

.sparkle_list_item:nth-of-type(6n) .sparkle {
  animation-delay: 1.4s;
}

.goal_badges {
  min-width: 50%;
  max-width: 100%;
  margin-bottom: 10px;
}
.goal_badges .goal_badge {
  text-align: center;
  padding: 0 15px;
}
.goal_badges .goal_badge.dim {
  opacity: 0.5;
}
.goal_badges .goal_badge .sparkle {
  font-size: 14px;
}
.goal_badges .goal_badge .text {
  overflow: hidden;
  white-space: nowrap;
  max-width: 100px;
  margin: 0 auto;
}

@keyframes fade-in {
  0% {
    background-color: #000;
  }
  100% {
    background-color: #C0392B;
  }
}
@keyframes sink-margin {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 10%;
  }
}
@keyframes sparkle {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes jump-around {
  0% {
    top: 20%;
    left: 20%;
  }
  20% {
    top: 30%;
    left: 70%;
  }
  40% {
    top: 60%;
    left: 30%;
  }
  60% {
    top: 50%;
    left: 60%;
  }
  80% {
    top: 15%;
    left: 70%;
  }
  100% {
    top: 20%;
    left: 20%;
  }
}
.medal-holder {
  position: relative;
  width: 200px;
  margin: 0 auto;
  height: 300px;
}
.medal-holder .medal {
  position: absolute;
  margin-top: 100px;
  animation: fly-in 2s -0.5s linear, swinging 4s 1.5s infinite linear;
}
.medal-holder .medal-hanger {
  animation: swing-in 2s -0.5s linear, little-swinging 4s 1.5s infinite linear;
}
.medal-holder .medal-ribbon {
  animation: swing-in 2s -0.5s linear;
}

@keyframes swing-in {
  0% {
    transform: scaleX(0.2) scaleY(0.2) translate(-110px, 220px);
  }
  5% {
    transform: scaleX(0.3) scaleY(0.3) translate(-170px, 80px);
  }
  15% {
    transform: scaleX(0.5) scaleY(0.5) translate(-170px, -20px);
  }
  35% {
    transform: scaleX(0.5) scaleY(0.5) translate(-260px, 40px);
  }
  47% {
    transform: scaleX(0.75) scaleY(0.75) translate(-130px, 50px);
  }
  60% {
    transform: translate(10px, 0px);
  }
  70% {
    transform: translate(10px, 0px);
  }
  100% {
    transform: scaleY(1) translate(0px, 0px);
  }
}
@keyframes fly-in {
  0% {
    transform: rotate(60deg) scaleX(0.2) scaleY(0.2) translate(-500px, -100px);
  }
  60% {
    transform: rotate(-20deg) scaleX(1.2) scaleY(1.2) translate(20px, 20px);
  }
  70% {
    transform: rotate(-20deg) scaleX(1.2) scaleY(1.2) translate(20px, 20px);
  }
  100% {
    transform: scaleX(1) scaleY(1) translate(0px, 0px);
  }
}
@keyframes swinging {
  0% {
    transform: rotate(0deg);
  }
  13% {
    transform: rotate(5deg) translate(-10px, -2px);
  }
  23% {
    transform: rotate(10deg) translate(-20px, -5px);
  }
  27% {
    transform: rotate(10deg) translate(-20px, -5px);
  }
  37% {
    transform: rotate(5deg) translate(-10px, -2px);
  }
  50% {
    transform: rotate(0deg);
  }
  62% {
    transform: rotate(-5deg) translate(10px, -2px);
  }
  73% {
    transform: rotate(-10deg) translate(20px, -5px);
  }
  77% {
    transform: rotate(-10deg) translate(20px, -5px);
  }
  87% {
    transform: rotate(-5deg) translate(10px, -2px);
  }
}
@keyframes little-swinging {
  13% {
    transform: translate(-2px, -2px);
  }
  23% {
    transform: translate(-4px, -5px);
  }
  27% {
    transform: translate(-4px, -5px);
  }
  37% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: rotate(0deg);
  }
  62% {
    transform: translate(2px, -2px);
  }
  73% {
    transform: translate(4px, -5px);
  }
  77% {
    transform: translate(4px, -5px);
  }
  87% {
    transform: translate(2px, -2px);
  }
}
.dim {
  opacity: 0.5;
}

.lesson_state {
  width: 40px;
  text-align: center;
  display: inline-block;
  position: relative;
}
.lesson_state .status {
  position: absolute;
  right: -3px;
  top: 7px;
}
.lesson_state .status .face_label {
  opacity: 0.8;
}

.org_state {
  position: relative;
}
.org_state .sub_state {
  position: absolute;
  top: 10px;
  right: -10px;
  padding: 3px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 10px;
}

.semi_dim {
  opacity: 0.75;
}

.dim_glyph_until_hover .glyphicon {
  opacity: 0.8;
}
.dim_glyph_until_hover:hover .glyphicon {
  opacity: 1;
}

.confetti {
  width: 10px;
  height: 30px;
  background: #C0392B;
  border: 2px solid #888;
  animation: flutter 2s infinite linear, in-out 3s linear;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.confetti:nth-child(7n+1) {
  background: #0f0;
}
.confetti:nth-child(7n+2) {
  background: #00f;
}
.confetti:nth-child(7n+3) {
  background: #ff0;
}
.confetti:nth-child(7n+4) {
  background: #fa0;
}
.confetti:nth-child(7n+5) {
  background: #518;
}
.confetti:nth-child(7n+6) {
  background: #f6b;
}
.confetti:nth-child(6n+1) {
  animation-delay: -1s;
}
.confetti:nth-child(6n+2) {
  animation-delay: -0.8s;
}
.confetti:nth-child(6n+3) {
  animation-delay: -0.4s;
}
.confetti:nth-child(6n+4) {
  animation-delay: -0.6s;
}
.confetti:nth-child(6n+5) {
  animation-delay: -0.2s;
}

@keyframes in-out {
  1% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    margin-top: 190px;
  }
  100% {
    opacity: 0;
    margin-top: 200px;
  }
}
@keyframes flutter {
  100% {
    transform: rotate(360deg);
  }
}
.text_sample {
  font-family: serif;
}
.text_sample.upper {
  text-transform: uppercase;
}
.text_sample.lower {
  text-transform: lowercase;
}
.text_sample.arial {
  font-family: "Arial", sans-serif;
}
.text_sample.comic_sans {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.text_sample.open_dyslexic {
  font-family: "OpenDyslexic", Arial, sans-serif;
}
.text_sample.architects_daughter {
  font-family: "ArchitectsDaughter", Arial, sans-serif;
}

.button {
  background-color: #fff;
}

.button a {
  text-decoration: none;
  color: #000;
}

.button img {
  overflow: hidden;
  max-width: 100%;
  min-width: 100%;
}

.board.high_contrast .button img.symbol:not(.hc) {
  filter: contrast(4) saturate(500);
}

.low_for_high_contrast .board.high_contrast .button img.symbol:not(.hc) {
  filter: contrast(4) saturate(100);
}

.symbol_target img {
  object-fit: contain;
  object-position: center;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin: -10px 0px -10px -10px;
}
.symbol_target.small img {
  margin: -5px 0px -5px -5px;
  margin-left: -5px;
  width: 30px;
  height: 30px;
}

.extra_color_preview {
  border-radius: 5px;
  height: 25px;
  width: 25px;
  margin-top: 5px;
  border: 2px solid #888;
}

.extra_color_row_preview {
  display: inline-block;
  text-align: center;
  margin: 0 5px;
}
.extra_color_row_preview .box {
  border: 2px solid #888;
  height: 25px;
  min-width: 40px;
  border-radius: 5px;
}

.symbol_preview img {
  height: 150px;
  object-fit: contain;
  object-position: center;
}
.symbol_preview.white img {
  background: #fff;
}
.symbol_preview.black {
  background: #000;
  border-radius: 8px;
  display: inline-block;
}
.symbol_preview.black img {
  filter: invert(0.85);
}
.symbol_preview.high_contrast {
  background: #000;
  border-radius: 8px;
  display: inline-block;
}
.symbol_preview.high_contrast img {
  filter: invert(1) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.1);
}

.low_for_high_contrast .symbol_preview.high_contrast img {
  filter: contrast(4) saturate(100);
}

#word_suggestions.high_contrast .suggestion img:not(.hc) {
  filter: contrast(4) saturate(500);
}

.low_for_high_contrast #word_suggestions.high_contrast .suggestion img:not(.hc) {
  filter: contrast(4) saturate(100);
}

/* Colored mode: white backing INSIDE the symbol's own outline. The
   ll-symbol-white-backing SVG filter (index.html) floods white, clips it to
   the symbol's own alpha, then draws the symbol on top — so transparent /
   anti-aliased regions don't bleed the button fill, while white never extends
   past the symbol's outline (no halo, no square). Mirrors the board-detail
   grid treatment and replaces the prior ll-symbol-white-matte knockout filter
   (which couldn't fill genuinely transparent pixels). Works regardless of the
   object-fit letterbox — the filter acts on rendered alpha, so empty letterbox
   bars stay empty. square.svg fallback excluded (no white behind the broken-
   image placeholder). White/Black/HC modes use separate selectors. */
.symbol_background_clear .button img.symbol:not([src$="square.svg"]) {
  filter: url(#ll-symbol-white-backing);
}

.symbol_background_white .button img.symbol {
  background: #fff;
}

.symbol_background_black .button img.symbol {
  filter: invert(0.85);
}

.button.touched, .button:focus-visible {
  border-color: #888;
}

/* Public boards — kill the mouse-hover outline thickening on
   buttons, but keep the keyboard-focus ring intact. The base
   `.button:hover` rule above bumps `outline` from 3px transparent
   to 4px solid (and the inset ring from 3px → 4px) which reads as
   visual noise when a viewer can't actually edit the board. The
   `:focus-visible` rule (a few lines up) is a separate selector
   and remains unaffected, so keyboard navigation still shows a
   focus indicator. */
.md-shell--board-public .button:hover {
  outline: 3px solid transparent;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--btn-ring-color, transparent);
}

/* Level paint — slow red back-glow pulse used while
   "Remove level rules" is the armed paint action. Stops on
   its own when the section is yanked from the DOM after the
   last rule is cleared (toast fires concurrently from the
   controller observer). */
@keyframes md-level-paint-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(192, 57, 43, 0.25), 0 0 2px rgba(192, 57, 43, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(192, 57, 43, 0.55), 0 0 6px rgba(192, 57, 43, 0.65);
  }
}
.md-level-paint-pulse {
  animation: md-level-paint-pulse 1.8s ease-in-out infinite;
}

.button.hidden_button, .button.empty {
  visibility: hidden;
}

/* SPEAK MODE: a button excluded by the current Button Level (or hidden
   by the author) must NOT show at all — not dimmed, not a placeholder.
   The base rule above already makes hidden buttons invisible; the
   `hint_hidden_buttons` / `grid_hidden_buttons` preferences re-reveal
   them (opacity 0.5 / placeholder), and those overrides also fire in
   speak mode because they're only scoped `:not(.edit)`. Speak mode is
   the communicator's view, where the level filter is a real vocabulary
   restriction — the hint/grid reveal is an editing/preview affordance
   that should not leak into it. Force hidden buttons back to invisible
   in speak mode, beating the hint/grid rules regardless of source
   order. Edit / show-all are excluded so configuring levels still
   shows every button. */
.board.speak:not(.edit):not(.show_all_buttons) .button.hidden_button,
.board.speak:not(.edit):not(.show_all_buttons) .button.hidden_button * {
  visibility: hidden !important;
}

.board:not(.edit):not(.show_all_buttons) .button.hidden_button .action_container {
  visibility: hidden;
}

.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  visibility: visible;
}
.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button * {
  visibility: hidden;
}
.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  background: #fff;
  border-color: #aaa;
}

.color_black .board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  background: #000;
  border-color: #888;
}

.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.empty {
  visibility: visible;
}
.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.empty * {
  visibility: hidden;
}
.board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.empty {
  background: #fff;
  border-color: #aaa;
}

.color_black .board.grid_hidden_buttons:not(.edit):not(.show_all_buttons) .button.empty {
  background: #000;
  border-color: #888;
}

.board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  visibility: visible;
  opacity: 0.5;
}
.board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button .action_container {
  visibility: visible;
}
.board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button .action_container .action {
  display: block;
}
.board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.4;
}

.board .button.dim_button {
  opacity: 0.5;
}

/* Focus words: matched buttons — outline + glow in addition to dimming non-matches */
.board .button.focus_word_button {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(42, 157, 143, 0.92);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(42, 157, 143, 0.18), 0 4px 14px rgba(27, 54, 93, 0.14);
}

.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.7;
}
.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.6;
}
.color_black .board .button.dim_button {
  opacity: 0.7;
}

.barely_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.7;
}
.barely_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.6;
}
.barely_dim .board .button.dim_button {
  opacity: 0.7;
}
.barely_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.85;
}
.barely_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.75;
}
.barely_dim.color_black .board .button.dim_button {
  opacity: 0.85;
}

.mid_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.6;
}
.mid_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.5;
}
.mid_dim .board .button.dim_button {
  opacity: 0.6;
}
.mid_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.8;
}
.mid_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.7;
}
.mid_dim.color_black .board .button.dim_button {
  opacity: 0.8;
}

.extra_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.3;
}
.extra_dim .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.2;
}
.extra_dim .board .button.dim_button {
  opacity: 0.3;
}
.extra_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 0.5;
}
.extra_dim.color_black .board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button.dim_button {
  opacity: 0.4;
}
.extra_dim.color_black .board .button.dim_button {
  opacity: 0.5;
}

#overlay_container.board.hint_hidden_buttons:not(.edit):not(.show_all_buttons) .button.hidden_button {
  opacity: 1;
}

#overlay_container.board .button.dim_button {
  opacity: 1;
}

.board.show_all_buttons .button.hidden_button {
  visibility: visible;
  opacity: 1;
}

.button.swapping {
  opacity: 0.5;
}

.button.drop_target {
  opacity: 0.5;
}

.board_drop.drop_target {
  cursor: copy;
  opacity: 0.5;
}

.board_drop.drop_target * {
  cursor: copy;
}

.face_button {
  font-size: 14px;
  line-height: 12px;
  width: 100%;
  white-space: normal;
}
.face_button .face {
  display: block;
  margin: 0 auto 5px;
  width: 50px;
  height: 50px;
  background-image: url(/../images/faces.png);
  background-size: auto 50px;
}
.face_button .face.happy {
  background-position-x: -50px;
}
.face_button .face.neutral {
  background-position-x: -99px;
}
.face_button .face.sad {
  background-position-x: -148px;
}

.face_label .face {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(/../images/faces.png);
  background-size: auto 20px;
}
.face_label .face.happy {
  background-position-x: -20px;
}
.face_label .face.neutral {
  background-position-x: -39px;
}
.face_label .face.sad {
  background-position-x: -59px;
}
.face_label .face.gray {
  filter: grayscale(0.7);
}

.face_icon .face {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(/../images/faces.png);
  background-size: auto 40px;
}
.face_icon .face.happy {
  background-position-x: -40px;
}
.face_icon .face.neutral {
  background-position-x: -79px;
}
.face_icon .face.sad {
  background-position-x: -119px;
}

.big_face .face {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url(/../images/faces.png);
  background-size: auto 200px;
}
.big_face .face.happy {
  background-position-x: -200px;
}
.big_face .face.neutral {
  background-position-x: -398px;
}
.big_face .face.sad {
  background-position-x: -598px;
}

/* Applied in: application.hbs #content - when sidebar_visible is true */
#content.with_sidebar .board {
  width: -webkit-calc(100% - 60px - 0.1rem);
  width: calc(100% - 60px - 0.1rem);
  margin-left: 0.1rem;
}

/* Push the board down within the page (below header/nav); slight left margin, full width */
#content .board {
  margin: 1.5rem 0 0 0.1rem;
  width: -webkit-calc(100% - 0.1rem);
  width: calc(100% - 0.1rem);
}

/* Board routes: #within_ember uses overflow:hidden; padding-top + board height can exceed the visible
   viewport (e.g. DevTools docked, speak bar wrapping). Cap #content to the dynamic viewport and scroll
   so the bottom of the grid is reachable without clipping.
   Reserve EXACTLY the measured fixed-header height (`--speak-header-height`,
   published by board/index.js `_updateFromSpeakBarResize`), not the static
   `--topbar-height + --speak-bar-extra` baseline. The static 129px baseline
   over-reserves whenever the real header is shorter than 129px — e.g. the eval
   speak bar (~80px) — leaving a dead strip above the content. This mirrors the
   board-alt rule (~l.8885) which was already switched to the measured value;
   `computeHeight` subtracts the SAME measured value, so padding and grid height
   stay consistent. The calc fallback keeps the prior behavior until the first
   measurement lands. */
#within_ember.board-view #content {
  padding-top: var(--speak-header-height, calc(var(--topbar-height) + var(--speak-bar-extra, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
  box-sizing: border-box;
}

/* Eval WELCOME intro only: it shows the home AppNavbar (70px, via
   --topbar-height) instead of the taller eval speak bar, but the measured
   --speak-header-height above still reflects the speak bar and over-reserves.
   Reserve the navbar height here instead. Scoped to board-view + the
   app-navbar header (header-index-with-dark-toggle) + an eval intro board, so
   only the welcome matches — section intros keep the speak bar and the rule
   above. Once Start swaps back to the speak bar this stops matching. */
/* Hook updated 2026-07: the intro now renders `.md-eval-intro__panel` (the
   eval-intro component) rather than adding an `eval_intro` class to the board,
   so the old `:has(.board.eval_intro)` never matched and the welcome fell
   through to the speak-bar rule above (over-reserving via a stale
   --speak-header-height). Match the panel the component actually renders. */
#within_ember.board-view:has(> header.header-index-with-dark-toggle):has(.md-eval-intro__panel) #content {
  padding-top: var(--topbar-height, 70px) !important;
}

#within_ember.board-alt-view #content {
  padding-top: calc(58px + var(--speak-bar-extra, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
  box-sizing: border-box;
}

/* Speak mode: the fixed outer <header> overlays the content. Its real
   height varies with the user's vocalization_height (legacy
   `header.speaking.<size>` in _header_sizing.scss), so neither a
   constant (the old 34px under-reserved ~95px) nor `--topbar-height +
   --speak-bar-extra` (over-reserves when the header is shorter than the
   129px baseline, leaving a dead strip above the grid) is correct.
   board/index.js `_updateFromSpeakBarResize` MEASURES the real header
   and publishes `--speak-header-height`; reserve exactly that. The
   fallback (used only until the first measurement) keeps the prior
   behavior. computeHeight subtracts the SAME measured value so the grid
   clears the header with no clipped top row and no dead strip. */
#within_ember.board-alt-view:has(#speak) #content {
  padding-top: var(--speak-header-height, calc(var(--topbar-height) + var(--speak-bar-extra, 0px)));
  /* Drop the 16px bottom padding the non-speak board-alt rule adds so
     the speak-mode grid stretches flush to the bottom of the page
     instead of leaving a dead strip. Higher specificity (:has(#speak))
     wins over `#within_ember.board-alt-view #content`. */
  padding-bottom: 0;
}

/* Narrow viewports: bump the top padding by 6px so the board grid doesn't
   sit under the header action buttons that wrap/stack on smaller screens.
   Applied at both <=1200px and <=1024px (1024 inherits the same value). */
@media (max-width: 1200px) {
  #within_ember.board-alt-view #content {
    padding-top: calc(64px + var(--speak-bar-extra, 0px));
  }
}
/* Default: allow page scroll. Do not apply when bento footer layout is active (so full-height chain rules can take effect). */
html:not(:has(#within_ember.bento-page-with-footer)):not(:has(#within_ember:has(.page-footer))),
body:not(:has(#within_ember.bento-page-with-footer)):not(:has(#within_ember:has(.page-footer))) {
  overflow: auto;
}

/* Reset page scrolling when bento page with footer is shown (:has(.page-footer) path).
   Ember mount (#ember-application-root) must also fill viewport so the fixed #within_ember has a full-height chain.
   !important on html/body so they win over later generic html, body { overflow: auto }. */
html:has(#within_ember:has(.page-footer)),
body:has(#within_ember:has(.page-footer)) {
  height: 100% !important;
  overflow: hidden !important;
  margin: 0;
}

#ember-application-root:has(#within_ember:has(.page-footer)) {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body.pretty_loader {
  overflow: hidden;
}

/* Applied in: Index route when logged out - content_class adds index + no_user */
#content.index.no_user, body.pretty_loader #loading_box {
  background: #fff;
}
#content.index.no_user #intro_header, body.pretty_loader #loading_box #intro_header {
  background: rgba(0, 0, 0, 0.3);
}

#content.with_user:not(.index) {
  border-top: none;
  border-bottom: none;
}

/* Applied in: Index route when logged in - content_class adds index + with_user */
#content.index.with_user {
  background-color: #fff;
  border-top: none;
  border-bottom: none;
}
#content.index.with_user .main_columns {
  background-image: none;
  margin: -10px -20px;
  padding: 10px 5px;
}
#content.index.with_user .middle_column {
  background: transparent;
  margin-left: 5px;
  margin-right: 5px;
}
#content.index.with_user.new_index {
  border-top-width: 0;
}
#content.index.with_user.new_index .main_columns {
  background-image: none;
}
#content.index.with_user .purchase_link {
  display: block;
  width: 320px;
  height: 55px;
  font-size: 25px;
  padding: 5px 10px;
  margin-bottom: 5px;
  text-align: center;
  border: 5px solid #404;
  background: #949;
  border-radius: 10px;
  color: #fff;
  margin-left: 5px;
}
#content.index.with_user .purchase_link:hover {
  text-decoration: none;
}

body.pretty_loader #loading_box {
  width: 100%;
  margin-top: 70px;
  height: 800px;
}

#loading_box footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
}

/* Applied in: app/templates/application.hbs (line 762) - sidebar tease in speak mode */
#sidebar_tease {
  top: 0;
  margin-top: calc(100px - 3.75rem + var(--speak-bar-extra, 0px)) !important; /* override header + #content + #sidebar_tease { margin-top } from legacy header_sizing.scss */
  position: absolute;
  right: 0;
  width: 56px;
  height: 40px;
  background: #eee;
  text-align: center;
  border-bottom-left-radius: 5px;
  z-index: 2;
  padding-top: 8px;
  border-left: 1px solid #888;
  border-bottom: 1px solid #888;
  border-top: 1px solid #888;
  color: #888;
  opacity: 0.7;
  cursor: pointer;
}
#sidebar_tease.skinny {
  width: 30px;
  height: 35px;
  font-size: 14px;
}

.cursor {
  cursor: pointer;
}

#sidebar_tease:hover {
  opacity: 1;
}

/* Applied in: app/templates/application.hbs (line 696) - sidebar_boards list
   Referenced in: raw_events.js */
#sidebar {
  top: 0;
  margin-top: calc(100px - 3.75rem + var(--speak-bar-extra, 0px)) !important; /* override header + #content + #sidebar { margin-top } from legacy header_sizing.scss */
  position: absolute;
  right: 0;
  width: 100px;
  z-index: 2;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

#within_ember.board-alt-view #content {
  background: #46505F;
  padding-bottom: 16px;
}

#within_ember.board-alt-view #sidebar {
  background: #46505F;
  border-left-color: #6b737d;
  border-bottom-color: #6b737d;
  padding-top: 4px;
  padding-bottom: 8px;
}

#within_ember.board-alt-view #sidebar .sidebar_item {
  color: #1b2a4a;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

#within_ember.board-alt-view #sidebar .sidebar_item:hover {
  background: rgba(0, 0, 0, 0.06);
}

#within_ember.board-alt-view #sidebar #sidebar_close {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

#within_ember.board-alt-view #sidebar #sidebar_close:hover {
  background: rgba(255, 255, 255, 0.25);
}

#within_ember.board-alt-view #sidebar_tease {
  background: #46505F;
  border-color: #6b737d;
  color: #fff;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome and Opera */
}

#sidebar .holder {
  position: relative;
  width: 100%;
}

#sidebar a.sidebar_item {
  display: block;
  width: 90%;
  position: relative;
  height: 0;
  border: 1px solid #ccc;
  background: #eee;
  margin: 5px auto;
  border-radius: 3px;
  padding: 10px 5px 75% 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar a.sidebar_item .glyphicon {
  position: absolute;
  top: 10px;
  right: 5px;
  color: #444;
}
#sidebar a.sidebar_item .glyphicon.glyphicon-map-marker {
  left: -67px;
  font-size: 20px;
}
#sidebar a.sidebar_item .pic {
  display: block;
  width: 60%;
  margin: 0 auto;
}
#sidebar a.sidebar_item {
  /* Board Alt: colored icon above label (modern board layout – grid in teal) */
}
#sidebar a.sidebar_item .sidebar_item__icon--board-alt {
  display: block;
  width: 60%;
  margin: 0 auto;
  color: rgba(44, 183, 176, 0.95);
  background: linear-gradient(145deg, rgba(44, 183, 176, 0.25) 0%, rgba(91, 141, 239, 0.2) 100%);
  border-radius: 6px;
  padding: 4px;
  box-sizing: border-box;
}
#sidebar a.sidebar_item .sidebar_item__icon--board-alt svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
#sidebar a.sidebar_item.sidebar_item--board-alt-active .sidebar_item__icon--board-alt {
  color: #fff;
  background: #374151;
}

#sidebar > a:hover {
  text-decoration: none;
}

.board.edit.paint .button, .board.edit.paint .button * {
  cursor: crosshair;
}

.board.edit:not(.hide_hidden_buttons) .button.hidden_button {
  visibility: visible;
  opacity: 0.5;
}
.board.edit:not(.hide_hidden_buttons) .button.hidden_button .action_container .action {
  display: block;
}

/* When the user has chosen "Hide completely", preview the end-user view even
   while editing — hidden buttons render as dark placeholders in the grid so
   the user can still see their position without any content showing. */
.board.edit.hide_hidden_buttons .button.hidden_button {
  visibility: visible;
  opacity: 1;
  background: #1b2838 !important;
  border-color: #2a3a4e !important;
}
.board.edit.hide_hidden_buttons .button.hidden_button * {
  visibility: hidden;
}

.board.edit .button.empty {
  visibility: visible;
  opacity: 0.5;
}

.board.edit .button.empty .action, .board.edit .button.empty .symbol {
  visibility: hidden;
}

.board.edit .button.empty:hover .action, .board.edit .button.empty:hover .symbol {
  visibility: visible;
}

.board.edit .button.empty:hover {
  opacity: 1;
}

.button .button-label-holder {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.button .button-label-holder.no_image {
  display: block;
  position: relative;
  bottom: 50%;
  transform: translateY(50%);
  left: 0;
  width: 100%;
}

.button .button-label-holder.top {
  bottom: inherit;
  top: -2px;
}

.board:not(.show_labels) .button .button-label-holder:not(.no_image) span.button-label.hide-label {
  display: none;
}

.button span.button-label {
  height: 23px;
  font-family: serif;
  font-size: 18px;
  vertical-align: top;
  white-space: normal;
  overflow: hidden;
  display: block;
  max-width: 100%;
  line-height: 1.1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Short viewports (<=800px tall): grow the button label area by 15% so
   the label has more breathing room when the board grid is vertically
   compressed. Achieved via line-height + height bumps so text doesn't get
   clipped in the holder div. Overrides the auto-applied `.small_text` /
   `.really_small_text` / `.board.text_small` rules so the bump persists
   when the JS shrinks buttons below 40/80px — otherwise those rules would
   clamp label height back to 12-20px on very short viewports. */
@media (max-height: 800px) {
  /* !important is required — the .small_text / .really_small_text rules
     further down in this stylesheet have equal specificity but appear after
     this @media block, so they'd otherwise win the cascade. */
  .button span.button-label,
  .board.text_small .button .button-label,
  .board .button.small_text span.button-label,
  .board .button.really_small_text span.button-label {
    line-height: 1.265 !important;
    height: 27px !important;
  }
  .button input.button-label,
  .board.text_small .button input.button-label,
  .button.small_text input.button-label,
  .button.really_small_text input.button-label {
    height: 31px !important;
  }
  .board .button.really_small_text .button-label-holder {
    height: auto !important;
    min-height: 27px !important;
  }
  /* Continuously scale down the button images as the viewport height
     shrinks below 800px — helps free up vertical space for the label and
     keeps the image from cropping against the taller label below.
     Scale ramps linearly from 1.0 at 800px viewport down to 0.6 at 400px
     and below. Uses transform so layout (img_holder box size set inline by
     JS positioning) stays the same — only the visual image shrinks. */
  .button img.symbol {
    transform: scale(clamp(0.6, 0.6 + (100vh - 400px) / 1000px, 1));
    transform-origin: center;
  }
}
.board.text_huge .button .button-label-holder.top {
  top: -10px;
}
.board.text_huge .button .button-label-holder {
  padding-left: 0;
  padding-right: 0;
}
.board.text_huge .button .button-label {
  font-size: 35px;
  height: 35px;
  padding-left: 0;
  padding-right: 0;
}

.board.text_huge .button input.button-label {
  height: 42px;
  padding-left: 0;
  padding-right: 0;
}

.board.text_large .button .button-label-holder.top {
  top: -7px;
}
.board.text_large .button .button-label {
  font-size: 25px;
  height: 25px;
}

.board.text_large .button input.button-label {
  height: 33px;
}

.board.text_small .button .button-label {
  font-size: 14px;
  height: 14px;
}

.board.text_small .button input.button-label {
  height: 21px;
}

.board.text_none .button .button-label {
  display: none;
}

/* Keyboard / symbol-free rows: the label *is* the button content; device "text none" must not hide it. */
.board.text_none .button .button-label-holder.no_image .button-label {
  display: block !important;
}

/* fast_html applies large inline font-size; default span height + overflow:hidden clips glyphs entirely. */
.button .button-label-holder.no_image span.button-label {
  height: auto !important;
  max-height: none;
  overflow: visible !important;
  line-height: 1.05;
}

.board .button.small_text span.button-label {
  vertical-align: top;
  font-size: 14px;
  height: 12px;
}

.board .button.really_small_text .button-label-holder {
  height: 16px;
}
.board .button.really_small_text span.button-label {
  font-size: 14px;
  height: 12px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.button input.button-label {
  background: rgba(0, 0, 0, 0);
  text-align: center;
  width: 80%;
  height: 25px;
  font-family: serif;
  font-size: 18px;
  margin-top: 0px;
  margin-left: 0px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sound-hover {
  padding: 5px;
  margin-bottom: 5px;
}
.sound-hover:hover {
  background: #f5f5f5;
  border-radius: 5px;
}

.board.edit .button .sound_container {
  position: absolute;
  left: calc(10% + 5px);
  padding: 3px;
}

.board.edit .button .levels {
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 14px;
}

.button .label_dropdown {
  width: calc(20% + 1px);
  height: 20px;
  padding: 0;
  margin-left: -5px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-radius: 0;
  margin-top: -3px;
}

.board.edit .button.touched input.button-label, .board.edit .button:hover input.button-label {
  border: 1px solid #888;
}

.button.small_text input.button-label {
  font-size: 14px;
  height: 20px;
}

.button.small_text .action_container, .button.small_text .action_container .action {
  width: 20px;
  height: 20px;
}

.button.really_small_text input.button-label {
  font-size: 14px;
  height: 20px;
  display: block;
  margin-left: 10%;
}

.button.small_text .action_container, .button.small_text .action_container .action, .button.really_small_text .action_container, .button.really_small_text .action_container .action {
  width: 10px;
  height: 10px;
}

.button .action_container {
  position: absolute;
  height: 30px;
  right: 2px;
  top: 0px;
  visibility: hidden;
  z-index: 2;
}

.button .action_container .action {
  height: 30px;
  width: 30px;
  display: inline-block;
}
.button .action_container .action img {
  vertical-align: top;
}

.hidden_button .action_container .action {
  display: none;
}

.button .action_container.folder, .button .action_container.app, .button .action_container.link, .button .action_container.integration, .button .action_container.webhook {
  visibility: visible;
}

.button.link_disabled .action_container.folder, .button.link_disabled .action_container.app, .button.link_disabled .action_container.link, .button.link_disabled .action_container.integration, .button.link_disabled .action_container.webhook {
  visibility: hidden;
}

.board.edit .button .action_container {
  visibility: visible;
  margin: 5px 3px;
}

.board.edit .button .action_container .action {
  border: 2px solid #aaa;
  padding: 3px;
  background: rgba(255, 255, 255, 0.5);
}

.board.edit .button.small_text .action_container .action {
  line-height: 10px;
  padding: 0;
}

.board.edit .button.really_small_text .action_container .action {
  line-height: 5px;
  padding: 0;
}

/* Applied in: app/templates/application.hbs (line 997), app/templates/brief.hbs (line 374)
   Main content area - content_class adds index, with_user, no_user, etc. */
#content {
  padding: 0;
}

/* Restore top padding so content starts below fixed navbar (overrides #content { padding: 0 } above) */
#within_ember:has(header.header--unauthenticated) #content {
  padding-top: var(--topbar-height) !important;
}

/* Beta onboarding: beat unauthenticated top padding / content--no-top-padding; reserve footer clearance */
#within_ember:has(.beta-welcome-page) #content {
  padding-top: 2.5rem !important;
  padding-bottom: calc(var(--bottombar-height) + 2.5rem) !important;
}

.btn-default .badge {
  color: #ffffff;
  background-color: #aaa;
}

.cell > div {
  margin: 2px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.cell {
  padding: 0;
}

.cell.preview > div {
  border: 1px solid #444;
}

/* Applied in: Board list/grid - board icons in dashboard, search results */
.well.board_icon {
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  padding-bottom: 3px;
}

.well.board_icon:hover {
  text-decoration: none;
  background: #eee;
}

.well.board_icon .icon {
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
  min-width: 50px;
  float: left;
  margin-right: 2px;
  position: relative;
}

.well.board_icon .icon:after {
  /* awesomeness via http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout */
  /* TODO: the padding trick farther down may be even awesomer... */
  content: "";
  display: block;
  margin-top: 100%;
}

.well.board_icon .icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.well.board_icon .names {
  display: inline-block;
  height: 30px;
  overflow-y: hidden;
  margin-bottom: -5px;
}

.well.board_icon .name {
  font-size: 14px;
  display: inline-block;
  white-space: normal;
  overflow-y: hidden;
  max-height: 34px;
  margin-bottom: -5px;
  line-height: 15px;
}

.well.board_icon .user_name {
  color: #444;
  display: inline-block;
}

.well.board_icon .labels {
  color: #888;
  font-size: 14px;
  display: inline-block;
  white-space: normal;
  height: 15px;
  overflow: hidden;
  margin: -1px 0 0;
}

.comma_item_list .comma_item:after {
  content: ",";
}
.comma_item_list .comma_item:last-of-type:after {
  content: "";
}

.not_premium {
  opacity: 0.5;
  font-style: italic;
}

.form-inline .thin_select select.form-control {
  width: 100%;
}

#languages_prompt .form-group .glyphicon {
  font-size: 30px;
  vertical-align: middle;
}

.big_select {
  font-size: 20px;
  height: 50px;
}

#scanner_axis_vertical {
  width: 3px;
  background: #C0392B;
  height: 100vh;
  left: -1000px;
  position: absolute;
  top: 0;
  z-index: 3000;
  box-shadow: 2px 2px 10px rgba(60, 60, 60, 0.7), -2px -2px 10px rgba(60, 60, 60, 0.7), -2px 2px 10px rgba(60, 60, 60, 0.7), 2px -2px 10px rgba(60, 60, 60, 0.7);
}

#scanner_axis_horizontal {
  height: 3px;
  background: #C0392B;
  width: 100vw;
  top: -1000px;
  position: absolute;
  left: 0;
  z-index: 3000;
  box-shadow: 2px 2px 10px rgba(60, 60, 60, 0.7), -2px -2px 10px rgba(60, 60, 60, 0.7), -2px 2px 10px rgba(60, 60, 60, 0.7), 2px -2px 10px rgba(60, 60, 60, 0.7);
}

.board_with_action .board_action {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-bottom-width: 0;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  right: 20px;
  top: -45px;
  z-index: 3;
  padding: 12px;
  font-size: 21px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s linear, opacity 0.15s ease-in 0.3s;
  -webkit-transition: visibility 0s 0.3s linear, opacity 0.15s ease-in 0.3s;
}
.board_with_action:hover .board_action {
  visibility: visible;
  opacity: 1;
}

.video_buttons {
  padding-right: 0;
}
.video_buttons .btn {
  width: 100%;
  font-size: 25px;
  margin-bottom: 5px;
}

/* Applied in: index.hbs, dashboard/authenticated-view.hbs - main_columns class on index_view div */
.main_columns .col .wrapper {
  padding: 10px 5px;
}
.main_columns .col:first-child .wrapper {
  margin-bottom: 10px;
  padding: 0px 5px 10px;
}
.main_columns .col {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
.main_columns .col .row {
  margin-left: 0;
  margin-right: 0;
}

#new_left {
  background: #eee;
  margin: -10px 0 -10px -5px;
  padding: 10px 0;
  border-right: 1px solid #ddd;
  height: calc(100vh - 150px);
  overflow: auto;
}
#new_left .expand {
  display: none;
}

/* Nav button styles - Applied in: dashboard/authenticated-view.hbs big_buttons, various modals */
.secondary_button {
  border-color: #9b962e !important;
  background: #fffbbc !important;
}
.secondary_button.less_important {
  color: #888;
}

.lesser_button {
  border-color: #692693 !important;
  background: #eac8ff !important;
}
.lesser_button.less_important {
  color: #444;
}

.emergency_button {
  border-color: #0c6900 !important;
  background: #90ff7a !important;
}
.emergency_button.less_important {
  color: #444;
}

.modeling_button {
  background-color: #cce7ff;
  border-color: #337ab7;
}
.modeling_button.less_important {
  color: #666;
}

.alternate_button {
  border-color: #ad7332 !important;
  background: #ffd7a8 !important;
}
.alternate_button.less_important {
  color: #444;
}

.attention_button {
  background-color: #ccffcc;
  border-color: #33b73a;
}
.attention_button.less_important {
  color: #666;
}

#new_right {
  position: relative;
  width: 80% !important;
  margin-right: -20px;
  background: #fff;
  /*  overflow: auto; */
  height: calc(100vh - 150px);
  margin: -10px -10px -10px 10px;
  padding: 0 0 10px 0;
  border-left: 1px solid #ddd;
  margin-left: 0;
  padding-left: 10px;
  width: calc(75% + 10px);
}
#new_right > .big_buttons {
  overflow: auto;
  padding-top: 10px;
  height: calc(100vh - 150px);
}
#new_right .main {
  margin-top: 5px;
}
#new_right .main.short_list {
  margin-top: 50px;
}
#new_right #nav_primary {
  border-left-color: #120380;
  background: #fff;
  color: #120380;
  border-color: #e2e5ea;
  border-left: 4px solid #120380;
}
#new_right #nav_secondary {
  border-color: #e2e5ea;
  border-left: 4px solid #4DB8C4;
  background: #fff;
}
#new_right #nav_tertiary {
  background: #fff;
  border-color: #e2e5ea;
  border-left: 4px solid #8b5cf6;
}
#new_right #nav_tertiary.bottom_row {
  border-left-color: #F2B95A;
  background: #fff;
}
#new_right #nav_tertiary.middle_row {
  border-left-color: #8b5cf6;
  background: #fff;
}
#new_right #nav_extras {
  background: #fff;
  border-color: #e2e5ea;
  border-left: 4px solid #94a3b8;
}

/* #bento-main - Applied in: dashboard/authenticated-view.hbs - main content column of bento dashboard */
#bento-main {
  padding-top: 16px;
}

.new_pills {
  font-size: 18px;
}
.new_pills li a {
  color: rgba(255, 255, 255, 0.8);
  height: 44px;
  line-height: 22px;
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 11px 18px;
}
.new_pills li.active a, .new_pills li.active a:focus-visible {
  background: #fff;
  color: #444;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.new_pills li:hover a {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Applied in: dashboard/authenticated-view.hbs - board grid items */
.simple_board_holder {
  padding: 5px;
}

.simple_board_icon {
  width: 100%;
  border-radius: 20px;
  border-width: 5px;
  font-size: 25px;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
  height: 210px;
  outline: none;
}
.simple_board_icon img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin-bottom: 20px;
}
.simple_board_icon .info {
  /* "PREVIEW" pill anchored to the BOTTOM-CENTER of every board
     tile (was top-left). Centered horizontally via
     `left: 50%; transform: translateX(-50%)`. Same brushed-silver
     glass chrome as the size + heart badges in the top-right
     (cool linear gradient + backdrop blur + dual inset highlights
     + layered drop shadow) so all three badges read as a coherent
     family. Surface-specific overrides further down may shift
     padding/font-size to fit their tile dimensions but all inherit
     the silver-glass treatment from here. */
  position: absolute;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, rgba(232, 237, 243, 0.65) 55%, rgba(206, 213, 224, 0.55) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: #46505F;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(13, 36, 56, 0.06), 0 1px 2px rgba(13, 36, 56, 0.1), 0 4px 10px rgba(13, 36, 56, 0.16);
  z-index: 3;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.simple_board_icon .info:hover {
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(13, 36, 56, 0.08), 0 2px 4px rgba(13, 36, 56, 0.14), 0 6px 14px rgba(13, 36, 56, 0.2);
}
.simple_board_icon .info {
  /* The .info pill is now a horizontal flex row so the label,
     divider, and (optional) count line up cleanly. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.simple_board_icon .info .info__label {
  display: inline-block;
  line-height: 1;
}
.simple_board_icon .info {
  /* Thin vertical separator between "PREVIEW" and the child-board
     count. Subtle dark hairline against the silver-glass background
     so it reads as a divider rather than competing with the text. */
}
.simple_board_icon .info .info__divider {
  flex-shrink: 0;
  width: 1px;
  height: 12px;
  background: rgba(13, 36, 56, 0.2);
}
.simple_board_icon .info {
  /* Child-board count — same uppercase weight as the label so the
   two read as one combined chip; muted ink so the label remains
   the louder element. */
}
.simple_board_icon .info .info__count {
  display: inline-block;
  line-height: 1;
  color: rgba(13, 36, 56, 0.62);
  font-weight: 700;
}
.simple_board_icon {
  /* Info + grid-size chip — top-right of every board tile. The
     circled "i" glyph sits on the left; the board's grid size
     (e.g. "12 x 8") on the right. Whole chip is one Preview button.
     Reuses the brushed-silver glass chrome the prior grid-size
     badge used so the family vocabulary stays consistent.

     Default state (no grid metadata, rare) is a 28px circle with
     just the icon. The `--with-size` modifier (applied in the
     template whenever `board_record.grid.rows` exists) widens the
     chip to a pill that grows to fit the size text. */
}
.simple_board_icon .board-icon__info {
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, rgba(232, 237, 243, 0.65) 55%, rgba(206, 213, 224, 0.55) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: rgba(13, 36, 56, 0.7);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(13, 36, 56, 0.06), 0 1px 2px rgba(13, 36, 56, 0.1), 0 4px 10px rgba(13, 36, 56, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  z-index: 3;
  /* Whole-card drag context: the outer .board-item is draggable,
     and `user-drag: none` on inner buttons is set elsewhere to
     let the parent capture drags. The info chip stays clickable
     for its own Preview action. */
}
.simple_board_icon .board-icon__info:hover,
.simple_board_icon .board-icon__info:focus-visible {
  color: #46505F;
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(13, 36, 56, 0.06), 0 2px 4px rgba(13, 36, 56, 0.14), 0 6px 14px rgba(13, 36, 56, 0.18);
  outline: none;
}
.simple_board_icon .board-icon__info-icon {
  flex-shrink: 0;
}
.simple_board_icon {
  /* Pill modifier — applied whenever the chip is rendering the grid
     size text alongside the icon. Drops the fixed circular width
     and uses asymmetric padding (tighter on the icon side, more
     room on the text side) so the chip reads as one cohesive
     i + size unit. */
}
.simple_board_icon .board-icon__info--with-size {
  width: auto;
  padding: 0 11px 0 7px;
}
.simple_board_icon {
  /* Grid-size text inside the info chip — matches the type weight
     and color hue of the chip's "i" glyph so the two read as one
     unit. ~30% larger than the typical web default per AAC
     accessibility convention. */
}
.simple_board_icon .board-icon__info-size {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: inherit;
}
.simple_board_icon {
  /* Translated-language marker — sits ABOVE the bottom-center PREVIEW
     pill in the flex column. Was previously `position: absolute;
     bottom: 56px;` but that meant long board titles (wrapping to 2-3
     lines) grew downward into the marker's reserved space, producing
     a visual overlap between title and chip. Now an in-flow flex
     child with `order: 98` (PREVIEW pill is `order: 99`), pushed
     down to the bottom by the title's `margin-bottom: auto` chain
     just like the PREVIEW pill. Equal-height tiles in the same row
     (via the grid flex container's `align-items: stretch` default)
     keep the layout uniform when one tile has a longer title. */
}
.simple_board_icon .board-icon__lang-marker {
  order: 98;
  align-self: center;
  /* Top margin `auto` absorbs the empty space between the author
     line and the bottom-anchored pill pair, so the lang-marker
     drops to the BOTTOM of the tile instead of sitting right
     under author. The PREVIEW pill below (order: 99) drops its
     own `margin-top: auto` via the `:has()` override at the
     bottom of this block when a lang-marker is present, so the
     two pills stack tight with a 8px breathing gap between them.
     When NO lang-marker is rendered (boards without translation
     data), the PREVIEW pill keeps its original `margin-top: auto`
     and anchors itself to the bottom alone. */
  margin: auto 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 244, 241, 0.78) 55%, rgba(206, 233, 224, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #1A7B7A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(42, 157, 143, 0.12), 0 1px 2px rgba(13, 36, 56, 0.1), 0 4px 10px rgba(42, 157, 143, 0.18);
  pointer-events: none;
  z-index: 3;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.simple_board_icon .board-icon__lang-marker-icon {
  color: #2A9D8F;
  flex-shrink: 0;
}
.simple_board_icon .board-icon__lang-marker-text {
  display: inline-block;
  line-height: 1;
}
.simple_board_icon .name {
  width: 100%;
  overflow: hidden;
  /* Was `height: 53px` (a fixed two-line reservation). That forced
     single-line titles to reserve the same vertical space as
     two-line titles, leaving a visible empty gap below the text
     and pushing the PREVIEW pill further from the title.
     `max-height: 53px` still caps at ~two lines while allowing
     the box to shrink to one line's height naturally. */
  max-height: 53px;
  margin-bottom: 5px;
  margin-top: -10px;
  white-space: normal;
  /* Title pinned to 14px everywhere (per design). Proportional
     line-height replaces the old 25px (which was tuned for the
     inherited 25px card font-size). Modern mixin surfaces override
     both via board-card-modern; this is the non-mixin fallback. */
  font-size: 14px;
  line-height: 1.3;
}
.simple_board_icon .name.compact {
  margin-bottom: 0;
  font-size: 14px;
}
.simple_board_icon .author {
  font-size: 14px;
  color: #46505F;
  margin-top: -5px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.simple_board_icon .author__label {
  display: block;
  color: #147F82;
}
.simple_board_icon .author__username {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: center;
  color: #46505F;
  font-size: 14px;
}
.simple_board_icon .author__username--long {
  font-size: 14px;
}
.simple_board_icon.medium {
  height: 180px;
  font-size: 20px;
  padding: 10px 0;
}
.simple_board_icon.medium .info .size {
  top: 30px;
}
.simple_board_icon.medium img {
  margin-bottom: 5px;
  height: 100px;
}
.simple_board_icon.medium .name {
  margin-top: 0;
  line-height: 20px;
  height: 42px;
  margin-bottom: 3px;
}
.simple_board_icon.short {
  height: 150px;
  font-size: 15px;
  padding: 10px 0;
}
.simple_board_icon.short .info .size {
  top: 24px;
  font-size: 14px;
}
.simple_board_icon.short img {
  margin-bottom: 0px;
  height: 85px;
}
.simple_board_icon.short .name {
  margin-top: 0;
  line-height: 15px;
  height: 32px;
  margin-bottom: 3px;
}
.simple_board_icon.tiny {
  height: 120px;
  font-size: 14px;
  padding: 10px 0;
}
.simple_board_icon.tiny .info .size {
  top: 24px;
  font-size: 14px;
}
.simple_board_icon.tiny img {
  margin-bottom: 0px;
  height: 60px;
}
.simple_board_icon.tiny .name {
  margin-top: 0;
  line-height: 14px;
  height: 31px;
}
.simple_board_icon.tiny .author {
  font-size: 14px;
}
.simple_board_icon.folder {
  border-color: #aaa;
  background: #e6e6e6;
  position: relative;
  /* The top-right folded-corner `::before` triangle was removed —
     it conflicted with the new top-LEFT Preview pill and the
     "N boards" caption below the name already signals the tile is
     a folder, so the triangle was redundant chrome. */
}
.simple_board_icon.unlinked {
  cursor: default;
}

/* Curated vocab board tiles (Quick Core / Vocal Flair / Sequoia) are
   shipped /images/ assets routed through icon_url_with_fallback in
   models/board.js. Render them 25% larger on board cards. Using
   transform: scale (not a bigger box) so the surrounding layout
   (name / author lines) does not shift. transform-origin defaults to
   center, so the icon grows equally in both directions and stays
   visually centered in its layout box — the original bottom-origin
   version was making the icon hug the top edge of the card. Scoped by
   src prefix so this never affects user-uploaded board icons or other
   library symbols. Applies wherever .simple_board_icon is used:
   find-a-board, dashboard preview tiles, available-boards grid,
   home-boards picker. */
.simple_board_icon img[src^="/images/quick-core-"],
.simple_board_icon img[src^="/images/vocal-flair-"],
.md-copying-board-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.md-copying-board-header__title {
  flex: 0 0 auto;
  margin: 0;
}

.md-copying-board-header__copy-all {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.md-copying-board-header__close {
  flex: 0 0 auto;
  float: none;
  margin: 0;
}

.simple_board_icon img[src^="/images/sequoia-"] {
  transform: scale(1.25);
  /* scale(1.25) with the default center origin extends the rendered
     image ~12.5px below the original layout box, which eats into the
     base img margin-bottom and visually crowds the CC-By credit line
     directly below. Add ~16px to restore a comfortable gap. !important
     because some scopes (md-card--home-boards, md-user-summary, the
     responsive @media block) re-declare margin-bottom on
     .simple_board_icon img at higher specificity. */
  margin-bottom: 24px !important;
}

/* Attribution under the shipped Quick Core / Vocal Flair / Sequoia tile
   art. Rendered in board-icon.hbs only when board.has_vocab_icon is
   true (mirrors the icon_url_with_fallback override map), so this CSS
   only ever applies to those tiles. Brand-verdigris-aa is the
   AA-contrast palette token used for body-text-on-white. Small italic
   credit line, centered, with a tight top margin so it visually hugs
   the image above and leaves the board name's own spacing intact. */
.simple_board_icon .board-icon__credit {
  font-style: italic;
  font-size: 0.75em;
  line-height: 1.2;
  color: #1A7B7A;
  text-align: center;
  margin: 0 0 6px;
}

/* Applied in: dashboard/authenticated-view.hbs, user/index.hbs - main action buttons grid */
.big_buttons .big_button_holder {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
}
.big_buttons .big_button {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e2e5ea;
  border-left: 4px solid #120380;
  font-size: 22px;
  overflow: hidden;
  padding: 20px 0;
  max-height: 300px;
  outline: none;
  line-height: 25px;
  background: #fff;
  color: #2d3748;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.big_buttons .big_button:hover {
  border-left-color: #4DB8C4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.big_buttons .big_button img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin-bottom: 0px;
  margin-top: -10px;
  opacity: 0.85;
}
.big_buttons .big_button > .glyphicon {
  display: block;
  font-size: 100px;
  margin-bottom: 20px;
  color: #120380;
  opacity: 0.7;
}
.big_buttons .big_button.middle_row {
  border-left-color: #8b5cf6;
  background: #fff;
}
.big_buttons .big_button.bottom_row {
  border-left-color: #F2B95A;
  background: #fff;
}
.big_buttons .button_row_wrap {
  width: 88px;
}
.big_buttons .button_row_wrap img {
  width: 33px;
  height: 33px;
  filter: grayscale(100%);
}
.big_buttons .button_row_extras {
  height: 79px;
}
.big_buttons .button_row_extras .text {
  display: none;
}
.big_buttons .button_row_extras {
  /* h eight: 79px; */
}

.weeks_profile {
  background: #fff;
  position: relative;
}
.weeks_profile.overdue {
  background: #ffbfbf;
}
.weeks_profile.due_soon {
  background: #fffabf;
}

.profile_modal_circle {
  float: left;
  margin-right: 10px;
  vertical-align: bottom;
  height: 65px;
  min-width: 65px;
  border: 3px solid #888;
  border-radius: 65px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 7px 10px;
  cursor: pointer;
  box-shadow: inset 0 0 5px #888;
}
.profile_modal_circle.single_row {
  padding-top: 17px;
}

.profile_circle {
  border: 3px solid #888;
  background: #fff;
  border-radius: 30px;
  min-width: 50px;
  max-width: 80%;
  height: 50px;
  text-align: center;
  display: inline-block;
  padding: 9px 12px;
  overflow: hidden;
}
.profile_circle.due_soon {
  border-color: #a6990f;
  background: #fffabf;
}
.profile_circle.overdue {
  border-color: #bd5644;
  background: #ffbfbf;
}

/* Applied in: Profile/survey components - profiles.js, assessment tools */
.profile .question_header {
  padding: 10px 30px;
  min-height: 50px;
  display: flex;
  align-items: center;
  background: #cdf;
  border: 2px solid rgb(29, 61, 126);
  border-radius: 5px;
}
.profile .bottom-hr {
  border-bottom: 2px solid #aaa;
  margin: 0 10px 0 5px;
}
.profile .bottom-hr.with_more {
  border-bottom-width: 1px;
  opacity: 0.5;
  margin-left: 40px;
}
.profile .question_holder:hover {
  background: #fafafa;
  border-left: 2px solid #888;
  margin-left: -2px;
}
.profile .question {
  display: flex;
  margin: 0 10px;
  padding-left: 10px;
  align-items: stretch;
}
.profile .question.unanswered {
  box-shadow: -7px 0 5px -3px #C0392B;
}
.profile .question.inline {
  display: none;
}
.profile .question .prompt {
  width: 50%;
  min-height: 50px;
  display: flex;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
  border-right: 1px solid #ccc;
}
.profile .question .prompt.many {
  width: 30%;
}
.profile .question .manual_select {
  padding-left: 20px;
  margin: 0;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 65%;
}
.profile .question .answer_holder {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.profile .question .answer_holder.with_manual {
  height: calc(100% - 59px);
}
.profile .question .answer {
  flex: 1;
  min-height: 50px;
  min-width: 70px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-top: 0;
  margin-left: -1px;
  margin-bottom: -1px;
  cursor: pointer;
  position: relative;
  padding: 13px 10px;
  overflow: hidden;
}
.profile .question .answer:hover {
  background: #eee;
}
.profile .question .answer.selected {
  background: #cdf;
}
.profile .question .answer.selected:hover {
  background: rgb(182, 198, 231);
}
.profile .question .answer .bg {
  border-top-width: 200px;
  border-top-style: solid;
  position: absolute;
  top: 0;
  height: 100px;
  width: 100%;
}
.profile .question .text_response {
  border: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 5px;
  white-space: pre-line;
}
.profile .question .text_response.expected:placeholder-shown {
  box-shadow: inset 0px 0px 2px #000;
}
.profile .score_circle {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border-width: 5px;
  border-style: solid;
  display: flex;
  align-items: center;
  place-content: center;
  float: left;
  margin-left: 10px;
  font-size: 25px;
  background: #fff;
  box-shadow: 1px 1px 5px #888, -1px 1px 5px #888, -1px -1px 5px #888, 1px -1px 5px #888;
  position: relative;
  overflow: hidden;
}
.profile .score_circle.wide {
  width: auto;
  min-width: 100px;
  transform: rotate(-15deg);
  padding: 10px;
  display: inline-flex;
  white-space: nowrap;
}
.profile .score_circle.wide.prior {
  min-width: 80px;
}
.profile .score_circle:hover {
  z-index: 2;
}
.profile .score_circle.prior {
  opacity: 0.8;
  box-shadow: none;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  margin-left: 10px;
  margin-top: 10px;
  border-width: 2px;
  font-size: 22px;
  margin-right: -25px;
  float: left;
}
.profile .score_circle.prior .date {
  font-size: 14px;
}
.profile .score_circle.prior:hover {
  opacity: 0.9;
}
.profile .score_circle.prior.age_twoyear {
  filter: grayscale(1);
  opacity: 0.5;
}
.profile .score_circle.prior.age_year {
  filter: grayscale(0.6);
  opacity: 0.6;
}
.profile .score_circle.prior.age_halfyear {
  opacity: 0.7;
}
.profile .score_circle.prior.age_twomonth {
  opacity: 0.75;
}
.profile .score_circle.prior.age_month {
  opacity: 0.8;
}
.profile .score_circle .date {
  position: absolute;
  bottom: 10px;
  color: #888;
  font-size: 14px;
  font-style: italic;
  visibility: hidden;
  white-space: nowrap;
}
.profile .score_circle .pre_value {
  position: absolute;
  top: 10px;
  color: #888;
  font-size: 14px;
  font-style: italic;
  visibility: hidden;
  white-space: nowrap;
}
.profile .score_circle:hover .date, .profile .score_circle:hover .pre_value {
  visibility: visible;
}
.profile .score_circle .bg {
  border-top: 100px solid #fff;
  position: absolute;
  width: 100%;
}
.profile .category {
  display: flex;
  margin-bottom: 10px;
  max-width: 800px;
  padding: 10px 10px 5px;
}
.profile .category:hover {
  background: #f4f4f4;
  border-radius: 5px;
}
.profile .category .bar_holder {
  position: relative;
}
.profile .category .bar_holder .bar_tip {
  display: none;
  position: absolute;
  margin-top: -25px;
  margin-left: 20px;
  z-index: 2;
  background: #fff;
  opacity: 0.8;
  border: 1px solid #888;
  border-radius: 5px;
  padding: 5px 10px;
}
.profile .category .bar_holder:hover {
  z-index: 2;
}
.profile .category .bar_holder:hover .bar_tip {
  display: block;
}
.profile .category .bar_holder .bar {
  height: 35px;
  border-width: 3px;
  border-style: solid;
  box-shadow: 1px 1px 2px #888, -1px 1px 2px #888, -1px -1px 2px #888, 1px -1px 2px #888;
  overflow: hidden;
}
.profile .category .bar_holder .bar.prior {
  height: 30px;
  opacity: 0.8;
  box-shadow: none;
  margin-left: 2px;
  border-width: 1px;
  margin-bottom: -10px;
  overflow: hidden;
}
.profile .category .bar_holder .bar .bg {
  border-top-width: 30px;
  border-top-style: solid;
}

@media (max-width: 1366px) and (min-width: 1200px) {
  .big_buttons .button_row_wrap {
    margin-left: 80px;
    width: 180px;
  }
  .big_buttons .button_row_wrap img {
    width: 35px;
    height: 35px;
    margin: -4px -5px;
    float: left;
  }
  .big_buttons .button_row_extras {
    height: 44px;
    width: 88px;
  }
  .big_buttons .button_row_extras .text {
    display: inline;
  }
}
@media (max-width: 900px) and (min-width: 768px) {
  .big_buttons .button_row_wrap {
    margin-left: 80px;
    width: 180px;
  }
  .big_buttons .button_row_wrap img {
    width: 25px;
    height: 25px;
    float: left;
  }
  .big_buttons .button_row_extras {
    height: 44px;
    width: 88px;
  }
  .big_buttons .button_row_extras .text {
    display: inline;
  }
}
@media (max-width: 550px) and (min-width: 481px) {
  .big_buttons .button_row_wrap {
    margin-left: 80px;
    width: 180px;
  }
  .big_buttons .button_row_wrap img {
    width: 25px;
    height: 25px;
    float: left;
  }
  .big_buttons .button_row_extras {
    height: 44px;
    width: 88px;
  }
  .big_buttons .button_row_extras .text {
    display: inline;
  }
}
@media (max-width: 480px) {
  .big_buttons .button_row_mini_wrap {
    margin-left: 80px;
  }
  .big_buttons .button_row_wrap {
    margin-left: 0px;
  }
  .big_buttons .btn-group > .btn.button_row_extras {
    margin-left: 80px;
    height: 44px;
    width: 180px;
  }
  .big_buttons .btn-group > .btn.button_row_extras .text {
    display: inline;
  }
}
/* Applied in: dashboard/authenticated-view.hbs - left sidebar links */
.left_links .list-group-item {
  height: 60px;
  padding-top: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.left_links .list-group-item .glyphicon {
  float: left;
  font-size: 40px;
  margin: 0px 15px 5px 5px;
}
.left_links .list-group-item.half_size {
  height: 40px;
  padding-top: 10px;
}
.left_links .list-group-item.half_size .glyphicon {
  font-size: 25px;
  margin: -5px 20px 5px 15px;
}
.left_links .list-group-item.subtle > * {
  opacity: 0.5;
}
.left_links .list-group-item.subtle:hover > *, .left_links .list-group-item.subtle:focus-visible > * {
  opacity: 1;
}
.left_links .list-group-item .expired {
  color: #800;
}
.left_links.no_curve .list-group-item {
  background: transparent;
  border-radius: 0;
  border-right: 0;
  border-left: 0;
}

.spinning {
  animation: spinningAnimation 2s infinite linear;
  -webkit-animation: spinningAnimation 2s infinite linear;
}

@keyframes spinningAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1);
  }
  to {
    -webkit-transform: rotate(359deg) scale(1);
  }
}
@-webkit-keyframes spinningAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1);
  }
  to {
    -webkit-transform: rotate(359deg) scale(1);
  }
}
.reveal.reveal_1 {
  opacity: 1;
}
.reveal.reveal_2 {
  opacity: 0;
  animation: reveal2 20s ease-in infinite;
}
.reveal.reveal_3 {
  opacity: 0;
  animation: reveal3 20s ease-in infinite;
}
.reveal.reveal_4 {
  opacity: 0;
  animation: reveal4 20s ease-in infinite;
}

@keyframes reveal2 {
  0%, 20%, 55% {
    opacity: 0;
  }
  25%, 50% {
    opacity: 1;
  }
}
@-webkit-keyframes reveal2 {
  0%, 20%, 55% {
    opacity: 0;
  }
  25%, 50% {
    opacity: 1;
  }
}
@keyframes reveal3 {
  0%, 45%, 80% {
    opacity: 0;
  }
  50%, 75% {
    opacity: 1;
  }
}
@-webkit-keyframes reveal3 {
  0%, 45%, 80% {
    opacity: 0;
  }
  50%, 75% {
    opacity: 1;
  }
}
@keyframes reveal4 {
  0%, 70%, 100% {
    opacity: 0;
  }
  75%, 95% {
    opacity: 1;
  }
}
@-webkit-keyframes reveal4 {
  0%, 70%, 100% {
    opacity: 0;
  }
  75%, 95% {
    opacity: 1;
  }
}
.reactions {
  overflow: auto;
  max-height: 185px;
}
.reactions img {
  width: 73px;
  height: 73px;
  margin: 2px;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
.reactions img:hover {
  background: #eee;
}
.reactions img.sending {
  background: rgb(155, 182, 255);
}

/* Applied in: app/templates/application.hbs - reply/modeling/follower indicators in header */
#reply_icon {
  border-radius: 20px;
  width: 25px;
  height: 25px;
  padding: 4px;
  font-size: 14px;
  color: #000;
  display: inline-block;
  vertical-align: top;
}
#reply_icon.clear {
  background: transparent;
}
#reply_icon.pair {
  width: 50px;
  height: 50px;
  padding-left: 4px;
  border-radius: 50px;
  padding-top: 5px;
  border: 2px solid #444;
  background: #eee;
  transition: color 1s, background-color 1s;
  color: #888;
}
#reply_icon.pair span {
  font-size: 30px;
  transform: scaleX(-1);
}
#reply_icon.pair img {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  object-fit: contain;
  object-position: center;
  right: 0;
  bottom: 0;
}
#reply_icon.pair.online {
  color: #fff;
  background: #337ab7;
}
#reply_icon.over {
  position: relative;
  top: 3px;
  left: 3px;
  z-index: 2;
  opacity: 0.7;
  margin-right: -30px;
}
#reply_icon.over.pair {
  margin-right: -54px;
}
#reply_icon.over .follower {
  width: 30px;
  height: 30px;
  margin-right: -15px;
  margin-top: -5px;
  border-radius: 30px;
}

.home_links {
  margin-bottom: 10px;
}

.home_links > div {
  padding: 0 5px 0 0;
}

.home_links .btn {
  /* TODO: looks ugly on long board name */
  width: 100%;
  height: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home_links:afer {
  clear: left;
}

.button_image {
  border: 1px solid #ccc;
  padding: 2px;
  height: 200px;
  max-width: 400px;
  margin: 0;
}

video.button_image {
  width: 200px;
}

#alert_message {
  white-space: pre-line;
  padding: 20px 0 20px;
  font-size: 20px;
}
#alert_message.big {
  font-size: 40px;
  padding: 30px 0 20px;
}
#alert_message.medium {
  font-size: 30px;
}

.alerts .btn.unread {
  font-weight: bold;
}
.alerts .btn.msg {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Applied in: FlashOutlet in application.hbs - flash messages */
@keyframes flash-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes flash-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.flash {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: min(480px, 90vw);
  min-width: 260px;
  opacity: 1;
  z-index: 1050;
  pointer-events: none;
  transition: opacity 1.2s ease, visibility 0s 1.2s linear;
}
.flash .alert {
  pointer-events: auto;
  position: relative;
  border: none;
  border-radius: 14px;
  padding: 12px 44px 12px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: flash-slide-up 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.flash .alert .shadow {
  display: none;
}
.flash .alert .close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin: 0;
  float: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.flash .alert .close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}
.flash .alert .btn[data-dismiss=alert] {
  margin: 0;
  float: none;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
}
.flash .alert.alert-info {
  background: rgba(225, 242, 246, 0.97);
  color: #0c4a55;
  border-left: 3px solid #4aabb8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flash .alert.alert-success {
  background: rgba(226, 242, 224, 0.97);
  color: #1a4a22;
  border-left: 3px solid #5aaa62;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flash .alert.alert-warning {
  background: rgba(255, 245, 220, 0.97);
  color: #5a3e00;
  border-left: 3px solid #e0a830;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flash .alert.alert-danger {
  background: rgba(252, 232, 232, 0.97);
  color: #5a1a1a;
  border-left: 3px solid #d9534f;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flash .alert.below_header {
  border-radius: 0 0 14px 14px;
  animation-name: flash-slide-down;
}
.flash:has(.below_header) {
  bottom: auto;
}

.flash.fade {
  opacity: 0;
  visibility: hidden;
}

#share_links a img {
  width: 40px;
  height: 40px;
}

.category_explainer {
  position: relative;
}
.category_explainer p {
  max-height: calc(77px + 15rem);
  overflow: hidden;
  display: block;
}
.category_explainer .more_link {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  padding-top: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
}
.category_explainer.full p {
  max-height: 500px;
}
.category_explainer.full .more_link {
  display: none;
}

/* Applied in: Eye gaze tracking UI - dwell_for_* classes for dwell duration */
#eye_gaze {
  position: absolute;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 30px;
  background: #C0392B;
  opacity: 0.4;
  z-index: 99999;
}

#eye_gaze.dwell_for_1 {
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-radius: 28px;
  opacity: 0.46;
}

#eye_gaze.dwell_for_2 {
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 26px;
  opacity: 0.52;
}

#eye_gaze.dwell_for_3 {
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 24px;
  opacity: 0.58;
}

#eye_gaze.dwell_for_4 {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 22px;
  opacity: 0.64;
}

#eye_gaze.dwell_for_5 {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 20px;
  opacity: 0.7;
}

#eye_gaze.dwell_for_6 {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 18px;
  opacity: 0.76;
}

#eye_gaze.dwell_for_7 {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border-radius: 16px;
  opacity: 0.82;
}

#eye_gaze.dwell_for_8 {
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  border-radius: 14px;
  opacity: 0.88;
}

#eye_gaze.dwell_for_9 {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 12px;
  opacity: 0.94;
}

#eye_gaze.dwell_for_10 {
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 10px;
  opacity: 1;
}

#eye_gaze.dwell_for_11,
#eye_gaze.dwell_for_12,
#eye_gaze.dwell_for_13,
#eye_gaze.dwell_for_14,
#eye_gaze.dwell_for_15 {
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 10px;
  opacity: 1;
}

/* Applied in: Recording/voice input status indicator */
#recording_status {
  display: block;
  background: none;
  width: 100px;
  height: 100px;
  border: 2px solid #f66;
  border-radius: 50px;
  margin: 50px auto;
  padding: 0;
}

#recording_status .sub_status {
  display: block;
  width: 90px;
  height: 90px;
  margin: 3px;
  background: #f66;
  border-radius: 45px;
  border: 0;
}

@keyframes recording_throb {
  0% {
    width: 94px;
    height: 94px;
    border-radius: 47px;
    margin: 1px 1.5px;
  }
  80% {
    width: 82px;
    height: 82px;
    border-radius: 41px;
    margin: 7px 7.5px;
  }
}
@-webkit-keyframes recording_throb {
  0% {
    width: 94px;
    height: 94px;
    border-radius: 47px;
    margin: 1px 1.5px;
  }
  80% {
    width: 82px;
    height: 82px;
    border-radius: 41px;
    margin: 7px 7.5px;
  }
}
#recording_status:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  #recording_status:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

#recording_status:hover, #recording_status.recording {
  border-color: #C0392B;
}

#recording_status:hover .sub_status, #recording_status.recording .sub_status {
  background-color: #C0392B;
}

#recording_status.recording .sub_status {
  -webkit-animation-name: recording_throb;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-name: recording_throb;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#recording_status .sub_status span {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@keyframes target {
  0% {
    transform: scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.5);
    opacity: 0.7;
  }
}
@-webkit-keyframes target {
  0% {
    transform: scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.5);
    opacity: 0.7;
  }
}
@keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
#linger {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #C0392B;
  opacity: 0.3;
  position: absolute;
  top: -100px;
  left: -100px;
  z-index: 999999;
  border-radius: 100px;
  animation-duration: 2000ms;
}
#linger.temp_hide {
  display: none;
  left: -100px;
}
#linger.cursor {
  border: 3px solid rgba(0, 0, 0, 0.5);
}
#linger.targeting.shrink {
  -webkit-animation-name: target;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-name: target;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
#linger.targeting.pie {
  background: #ccc;
  opacity: 0.6;
}
#linger.targeting.pie .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #C0392B;
  border: rgba(0, 0, 0, 0.1);
}
#linger.targeting.pie .spinner {
  border-radius: 100% 0 0 100%/50% 0 0 50%;
  z-index: 200;
  border-right: none;
  -webkit-animation: rota ease-in-out;
  -webkit-animation-duration: inherit;
  animation: rota ease-in-out;
  animation-duration: inherit;
  animation-iteration-count: 1;
}
#linger.targeting.pie .filler {
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  -webkit-animation: opa steps(1, end) reverse;
  -webkit-animation-duration: inherit;
  animation: opa steps(1, end) reverse;
  animation-duration: inherit;
  animation-iteration-count: 1;
  border-left: none;
}
#linger.targeting.pie .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  -webkit-animation: opa steps(1, end);
  -webkit-animation-duration: inherit;
  animation: opa steps(1, end);
  animation-duration: inherit;
  animation-iteration-count: 1;
}

#dwell_icon {
  position: absolute;
  z-index: 300;
  border-radius: 10px;
  border: 2px solid #fff;
  background: #000;
  opacity: 0.5;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
}
#dwell_icon.with_transition {
  transition: left 0.1s, top 0.1s;
  transition-timing-function: ease-in-out;
}
#dwell_icon.big, #dwell_icon.arrow {
  opacity: 1;
  background: radial-gradient(rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.8));
  border: 2px solid rgb(17, 112, 255);
  margin-left: -15px;
  margin-top: -15px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
}
#dwell_icon.big:after, #dwell_icon.arrow:after {
  margin-left: 15px;
  margin-top: 15px;
  content: "";
  display: block;
  width: 24px;
  height: 36px;
  background: url(/../images/cursor.png);
  background-size: 24px 36px;
  border: 0;
  border-radius: 0;
  opacity: 1;
}
#dwell_icon.red_circle {
  border-radius: 30px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  background: rgba(255, 0, 0, 0.5);
  border: 2px solid #fff;
  box-shadow: 0px 0px 20px #000;
  opacity: 1;
}
#dwell_icon.circle {
  opacity: 1;
  border: 0;
  background: radial-gradient(closest-side, rgba(55, 55, 55, 0.8), rgba(55, 55, 55, 0));
  margin-left: -15px;
  margin-top: -15px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
}
#dwell_icon.ball {
  opacity: 1;
  border: 0;
  background: radial-gradient(closest-side, rgba(55, 55, 55, 0.8), rgba(55, 55, 55, 0));
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 30px;
  width: 60px;
  height: 60px;
}

.label_count.too_many {
  color: #800;
}

#grid_selection {
  height: 30px;
  padding-right: 30px;
  margin-top: -50px;
  padding-left: 30px;
}

.icon_urls {
  padding-top: 10px;
  margin-top: 2px;
  overflow: auto;
  width: -webkit-calc(100% - 42px);
  width: calc(100% - 42px);
  height: 60px;
}

.icon_urls img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.button_field {
  display: inline-block;
  width: -webkit-calc(100% - 75px);
  width: calc(100% - 75px);
}

.picture_search_field {
  display: inline-block;
  width: -webkit-calc(100% - 170px);
  width: calc(100% - 170px);
}

.picture_search_input_full,
.picture_search_input_with_locale {
  display: inline-block;
  vertical-align: middle;
}

.picture_search_input_full {
  width: 100%;
}

.picture_search_input_with_locale {
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
}

.board_search_field {
  display: inline-block;
  width: -webkit-calc(100% - 150px);
  width: calc(100% - 150px);
}

.vocalization_field {
  display: inline-block;
  width: -webkit-calc(100% - 100px);
  width: calc(100% - 100px);
}

.modifier_example_field {
  display: inline-block;
  width: -webkit-calc(100% - 100px);
  width: calc(100% - 100px);
  margin-top: 10px;
}

.dropdown-menu {
  font-size: 18px;
}

.dropdown-menu > li > a,
.dropdown-menu > li > button {
  padding-top: 10px;
  padding-bottom: 10px;
  /* WCAG AA touch target — was 7px (~22px tall, below 24px floor). */
  min-height: 44px;
}

/* Dropdown menu button styles match the Bootstrap <a> defaults so a
   converted <button> looks identical (added 2026-04-11 per WCAG audit). */
.dropdown-menu > li > button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
}

.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus-visible {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.dropdown-menu__language-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dropdown-menu__language-icon {
  width: auto;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 8px;
}

#grid_menuitem .btn {
  height: 40px;
}
#grid_menuitem .btn span {
  vertical-align: middle;
}
#grid_menuitem .btn {
  width: 50px;
}

.file_select_holder {
  position: relative;
  overflow: hidden;
}

.file_select_holder input {
  cursor: pointer;
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  width: 100%;
  opacity: 0;
}

#button_settings .options button[disabled] {
  opacity: 0.5;
}

#button_settings .options button[disabled] img {
  opacity: 0.3;
}

#button_settings .options .form-control.inline {
  display: inline;
}

/* ── Modern button-settings modal restyle ────────────── */
.modal-dialog:has(#button_settings) {
  width: 780px;
  max-width: 94vw;
}

.modal-content:has(#button_settings) {
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 12px 48px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  background: #fff;
  overflow: hidden;
}

.modal-content:has(#button_settings) > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
}

.modal-content:has(#button_settings) > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.modal-content:has(#button_settings) > .modal-header .close {
  order: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.modal-content:has(#button_settings) > .modal-header .close:hover {
  background: #fff;
  color: #C0392B;
}

/* Nav pills sidebar */
#button_settings .nav-pills.nav-stacked {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.03));
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(27, 54, 93, 0.06);
}

#button_settings .nav-pills.nav-stacked > li {
  margin: 0;
}

#button_settings .nav-pills.nav-stacked > li > a {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #4a5568;
  transition: background 0.12s ease, color 0.12s ease;
  border: none;
  margin: 2px 0;
}

#button_settings .nav-pills.nav-stacked > li > a:hover {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

#button_settings .nav-pills.nav-stacked > li.active > a,
#button_settings .nav-pills.nav-stacked > li.active > a:hover,
#button_settings .nav-pills.nav-stacked > li.active > a:focus-visible {
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.25);
}

/* Stronger keyboard focus ring for all interactive elements in button settings modal.
   Uses outline instead of box-shadow so it doesn't conflict with existing box-shadow on active tabs. */
.modal-content:has(#button_settings) *:focus-visible {
  outline: 3px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .modal-content:has(#button_settings) *:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.modal-content:has(#button_settings) *:focus-visible {
  border-radius: 6px;
}

/* Form controls */
#button_settings .form-control {
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 14px;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
  background: #fff;
}

#button_settings .form-control:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

#button_settings .control-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  padding-top: 10px;
}

#button_settings .checkbox label,
#button_settings .radio label {
  font-size: 14px;
  color: #4a5568;
}

/* Quick action buttons (Help tab) */
#button_settings .btn-group-vertical .btn {
  border-radius: 10px !important;
  border: 1px solid rgba(27, 54, 93, 0.1);
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  text-align: left;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
  margin-bottom: 6px;
}

#button_settings .btn-group-vertical .btn:hover {
  background: rgba(42, 157, 143, 0.06);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.08);
  transform: translateX(2px);
}

#button_settings .btn-group-vertical .btn .glyphicon {
  color: #2A9D8F;
  margin-right: 10px;
}

/* General buttons inside the modal body */
#button_settings .btn-default {
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #374151;
  font-weight: 500;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

#button_settings .btn-default:hover {
  background: #F0F4F8;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

#button_settings .btn-primary {
  border-radius: 10px;
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: box-shadow 0.12s ease, transform 0.1s ease;
}

#button_settings .btn-primary:hover {
  box-shadow: 0 2px 10px rgba(42, 157, 143, 0.3);
  transform: translateY(-1px);
}

/* Content area headings */
#button_settings h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 12px;
}

/* Image search results / options grid */
#button_settings .options {
  border-radius: 10px;
}

/* Footer */
.modal-content:has(#button_settings) > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-content:has(#button_settings) > .modal-footer .btn {
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.modal-content:has(#button_settings) > .modal-footer .btn-lg {
  padding: 10px 22px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
}

.modal-content:has(#button_settings) > .modal-footer .btn-lg:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

/* Arrow nav buttons in footer */
.modal-content:has(#button_settings) > .modal-footer > span .btn {
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #4a5568;
}

.modal-content:has(#button_settings) > .modal-footer > span .btn:hover {
  background: #F0F4F8;
  color: #2A9D8F;
}

/* Tab content spacing */
#button_settings .content .form-group {
  margin-bottom: 16px;
}

/* Image search area */
#button_settings .image_search,
#button_settings .sound_search {
  border-radius: 12px;
}

/* Close button — fixed top-right corner of the modal */
.modal-content:has(#button_settings) > .modal-header {
  position: relative;
}

.modal-content:has(#button_settings) > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
}

/* Dropdowns (select elements via bound-select) */
#button_settings select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  line-height: 1.4;
  height: auto;
}

#button_settings select.form-control:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

#button_settings select.form-control:hover {
  border-color: rgba(27, 54, 93, 0.25);
}

#button_settings select.form-control option {
  padding: 6px 12px;
  font-size: 14px;
  color: #374151;
  background: #fff;
}

#button_settings select.form-control option:checked {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.12), rgba(76, 134, 216, 0.08));
  color: #1B365D;
  font-weight: 600;
}

/* Short dropdowns (image library, skin, etc.) */
#button_settings select.form-control.skip_select {
  padding: 4px 28px 4px 10px;
  font-size: 14px;
}

/* Responsive: stack sidebar on small screens */
@media (max-width: 768px) {
  .modal-dialog:has(#button_settings) {
    width: auto;
    margin: 10px;
  }
  #button_settings .nav-pills.nav-stacked {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }
  #button_settings .nav-pills.nav-stacked > li > a {
    padding: 8px 12px;
    font-size: 14px;
  }
}
/* ── Modern board-details modal restyle ───────────────── */
.modal-dialog:has(.la-board-details-wrap) {
  width: 680px;
  max-width: 94vw;
}

.la-board-details-wrap {
  color: #374151;
}

.la-board-details-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-board-details-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-board-details-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-board-details-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-board-details-wrap > .modal-body {
  padding: 8px 24px 24px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
  /* Force left-alignment everywhere inside the modal body — overrides
     any inherited `text-align: center` that Bootstrap or legacy
     stylesheets apply at the .modal / .modal-content level. */
  text-align: left;
}

.la-board-details-wrap .modal-body * {
  text-align: inherit;
}

/* Sections — compact card-like clusters. Quiet hairlines between
   them rather than heavy borders so the eye flows down the panel
   without speed-bumps. Modeled on the Linear / GitHub "About"
   sidebar pattern: left-aligned eyebrow heading, tight rows of
   property labels + values below. */
.la-board-details-section {
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.06);
  max-width: 100%;
  min-width: 0;
}

.la-board-details-section:first-of-type {
  padding-top: 4px;
}

.la-board-details-section:last-child {
  border-bottom: none;
}

.la-board-details-section__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A7B7A;
  margin: 0 0 10px 0;
  /* Left-aligned eyebrow — replaces the centered "OVERVIEW /
     LANGUAGE / VISIBILITY & LICENSE" headings that floated in the
     middle of the modal and broke the visual rhythm. */
  text-align: left;
}

/* Definition list grid — proper two-column layout with values
   left-aligned at a consistent left edge. Bootstrap's legacy
   `dl-horizontal` (right-aligned dt + floated dd) is replaced
   with a CSS grid; explicit text-align: left on dt and dd fights
   off any global centering. */
.la-board-details-wrap .dl-horizontal {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 0;
  margin: 0;
  max-width: 100%;
}

.la-board-details-wrap .dl-horizontal dt {
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
  padding: 8px 0;
  text-align: left !important;
  margin: 0;
  white-space: normal;
  width: auto;
  float: none;
  min-width: 0;
  line-height: 1.4;
  /* Subtle hairline between rows for scanability — Linear /
     Stripe Dashboard style. Skips the very last row in each
     section via :has() below. */
  border-top: 1px solid rgba(27, 54, 93, 0.05);
}

.la-board-details-wrap .dl-horizontal dt:first-of-type,
.la-board-details-wrap .dl-horizontal dt:first-of-type + dd {
  border-top: none;
}

.la-board-details-wrap .dl-horizontal dd {
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  padding: 8px 0;
  margin: 0;
  margin-left: 0;
  text-align: left !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  line-height: 1.55;
  border-top: 1px solid rgba(27, 54, 93, 0.05);
}

/* Description block — full-width prominent content under the dl,
   not center-aligned, no decorative left border. Just clean body
   typography with preserved line breaks for the prose. */
.la-board-details-wrap .la-board-details__description {
  white-space: pre-line;
  font-size: 14px;
  color: #1B365D;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  text-align: left !important;
}

/* When the description sits in the dd column, give it the same
   row treatment as siblings but allow its content to scroll
   internally if it's exceptionally long. */
.la-board-details-wrap .dl-horizontal dd .la-board-details__description,
.la-board-details-wrap .dl-horizontal dd.la-board-details__description {
  max-height: none;
}

/* Overview head — name + description block sitting prominently
   above the property grid. Replaces the previous "Name" / "Description"
   rows in the dl so the descriptive content reads like a card
   header rather than two more entries in a metadata table. */
.la-board-details-overview-head {
  margin: 4px 0 14px;
  padding: 0;
}

.la-board-details-overview-head__name {
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  margin: 0 0 8px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stat tiles — replaces the dl rows for "Stats & Connections" so
   numeric metadata reads as glanceable cards rather than a list
   of small text values. Pattern mirrors GitHub's "Insights"
   tiles + Linear's project metrics row. */
.la-board-details-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}

.la-board-details-stat {
  padding: 12px 14px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.la-board-details-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.la-board-details-stat__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.la-board-details-stat__link {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

.la-board-details-stat__link a {
  color: #1A7B7A;
  text-decoration: none;
}

.la-board-details-stat__link a:hover {
  text-decoration: underline;
}

@media (max-width: 540px) {
  .la-board-details-wrap .dl-horizontal {
    grid-template-columns: 1fr;
  }
  .la-board-details-wrap .dl-horizontal dt {
    padding: 10px 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(27, 54, 93, 0.5);
    border-top: 1px solid rgba(27, 54, 93, 0.06);
  }
  .la-board-details-wrap .dl-horizontal dt:first-of-type {
    border-top: none;
  }
  .la-board-details-wrap .dl-horizontal dd {
    padding: 2px 0 12px;
    border-top: none;
  }
}
.la-board-details-wrap .dl-horizontal a {
  /* WCAG AA fix — was $brand-verdigris on $surface-100 = 3.15:1. */
  color: #1A7B7A;
  text-decoration: none;
  font-weight: 500;
}

.la-board-details-wrap .dl-horizontal a:hover {
  color: #146462;
  text-decoration: underline;
}

/* Actions section */
.la-board-details-section--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.la-board-details-wrap .btn-default {
  border-radius: 24px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #374151;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 20px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.la-board-details-wrap .btn-default:hover {
  background: #F0F4F8;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
  transform: translateY(-1px);
}

.la-board-details-wrap .dl-horizontal a.la-board-details-rename-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: #46505F !important;
  opacity: 1;
  transition: color 0.15s ease;
  vertical-align: middle;
  font-weight: normal;
}

.la-board-details-rename-link svg {
  stroke-width: 2.5;
}

.la-board-details-wrap .dl-horizontal a.la-board-details-rename-link:hover {
  /* WCAG AA fix — hover was $brand-verdigris (3.15:1 on light bg). */
  color: #1A7B7A !important;
}

.la-board-details-delete-btn {
  color: #C0392B !important;
  border-color: rgba(192, 57, 43, 0.2) !important;
}

.la-board-details-delete-btn:hover {
  background: rgba(192, 57, 43, 0.06) !important;
  color: #a93226 !important;
}

/* Edit Board Details button (top-right of modal body) */
.la-board-details-edit-btn-wrap,
.md-board-details-edit-btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.la-board-details-edit-btn,
.md-board-details-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(42, 157, 143, 0.25);
  background: rgba(42, 157, 143, 0.06);
  color: #1A7B7A; /* WCAG AA fix — was $brand-verdigris (3.32:1). */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.la-board-details-edit-btn:hover,
.md-board-details-edit-btn:hover {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.4);
}

.la-board-details-edit-btn svg,
.md-board-details-edit-btn svg {
  flex-shrink: 0;
}

/* Footer */
.la-board-details-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
}

.la-board-details-wrap > .modal-footer .btn-lg {
  border-radius: 10px;
  padding: 10px 22px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-board-details-wrap > .modal-footer .btn-lg:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

@media (max-width: 640px) {
  .la-board-details-wrap .dl-horizontal {
    grid-template-columns: 1fr;
  }
  .la-board-details-wrap .dl-horizontal dt {
    text-align: left;
    padding-bottom: 2px;
    border-bottom: none;
  }
  .la-board-details-wrap .dl-horizontal dd {
    padding-top: 0;
    padding-bottom: 12px;
  }
}
/* ── Modern board-actions modal restyle ───────────────── */
.modal-dialog:has(.la-board-actions-wrap) {
  width: 680px;
  max-width: 94vw;
}

.la-board-actions-wrap {
  color: #374151;
}

.la-board-actions-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-board-actions-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-board-actions-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-board-actions-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-board-actions-wrap > .modal-body {
  padding: 12px 24px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Permission notice */
.la-board-actions-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(76, 134, 216, 0.06);
  border: 1px solid rgba(76, 134, 216, 0.15);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.la-board-actions-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #4C86D8;
}

/* Action items list */
.la-board-actions-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.la-board-actions-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.la-board-actions-item:hover {
  background: rgba(42, 157, 143, 0.05);
  border-color: rgba(42, 157, 143, 0.15);
}

.la-board-actions-item:active {
  background: rgba(42, 157, 143, 0.1);
}

.la-board-actions-item[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.la-board-actions-item[disabled]:hover {
  background: transparent;
  border-color: transparent;
}

/* Icon circle */
.la-board-actions-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(42, 157, 143, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A9D8F;
  transition: background 0.12s ease;
}

.la-board-actions-item:hover .la-board-actions-item__icon {
  background: rgba(42, 157, 143, 0.14);
}

/* View Style — a STATIC (non-interactive) board-actions item: no hover/cursor and
   a top-aligned icon (it has multi-line content + the segmented toggle). The
   toggle's own buttons stay interactive; the panel itself isn't clickable. */
.la-board-actions-item--static {
  cursor: default;
  align-items: flex-start;
}

.la-board-actions-item--static:hover {
  background: transparent;
  border-color: transparent;
}

.la-board-actions-item--static:hover .la-board-actions-item__icon {
  background: rgba(42, 157, 143, 0.08);
}

/* Breathing room between the explainer text and the moved View Style toggle. */
.la-board-actions-view-style__toggle {
  margin-top: 10px;
}

/* Content */
.la-board-actions-item__content {
  flex: 1;
  min-width: 0;
}

.la-board-actions-item__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  line-height: 1.3;
}

.la-board-actions-item__desc {
  display: block;
  font-size: 14px;
  color: #6B7280;
  line-height: 1.4;
  margin-top: 2px;
}

/* Chevron arrow */
.la-board-actions-item__arrow {
  flex-shrink: 0;
  /* WCAG AA fix — was $brand-cool-steel (2.84:1). */
  color: #6B7280;
  transition: color 0.12s ease, transform 0.12s ease;
}

.la-board-actions-item:hover .la-board-actions-item__arrow {
  /* WCAG AA fix — was $brand-verdigris (3.32:1). */
  color: #1A7B7A;
  transform: translateX(2px);
}

/* Danger variant (delete) */
.la-board-actions-item--danger .la-board-actions-item__icon {
  background: rgba(192, 57, 43, 0.08);
  color: #C0392B;
}

.la-board-actions-item--danger:hover {
  background: rgba(192, 57, 43, 0.04);
  border-color: rgba(192, 57, 43, 0.15);
}

.la-board-actions-item--danger:hover .la-board-actions-item__icon {
  background: rgba(192, 57, 43, 0.12);
}

.la-board-actions-item--danger .la-board-actions-item__label {
  color: #C0392B;
}

.la-board-actions-item--danger:hover .la-board-actions-item__arrow {
  color: #C0392B;
}

/* Footer */
.la-board-actions-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
}

.la-board-actions-wrap > .modal-footer .btn-lg {
  border-radius: 10px;
  padding: 10px 22px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-board-actions-wrap > .modal-footer .btn-lg:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

@media (max-width: 640px) {
  .la-board-actions-item {
    padding: 12px 12px;
    gap: 10px;
  }
  .la-board-actions-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .la-board-actions-item__icon svg {
    width: 18px;
    height: 18px;
  }
  .la-board-actions-item__desc {
    display: none;
  }
}
/* ── Modern confirm-edit-board modal restyle ──────────── */
.modal-dialog:has(.la-confirm-edit-wrap) {
  width: 540px;
  max-width: 94vw;
}

.la-confirm-edit-wrap {
  color: #374151;
}

.la-confirm-edit-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-confirm-edit-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-confirm-edit-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-confirm-edit-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-confirm-edit-wrap > .modal-body {
  padding: 20px 24px 24px;
}

.la-confirm-edit__notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(246, 178, 58, 0.08);
  border: 1px solid rgba(246, 178, 58, 0.2);
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
}

.la-confirm-edit__notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #d97706;
}

.la-confirm-edit__notice p {
  margin: 0;
}

.la-confirm-edit-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.la-confirm-edit__btn {
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-confirm-edit__btn--primary {
  background: #5A6A85;
  color: #fff;
}

.la-confirm-edit__btn--primary:hover {
  background: rgb(73.533632287, 86.6062780269, 108.666367713);
  box-shadow: 0 2px 10px rgba(90, 106, 133, 0.3);
}

.la-confirm-edit__btn--default {
  background: #46505F;
  color: #fff;
}

.la-confirm-edit__btn--default:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

.la-confirm-edit__btn--secondary {
  background: transparent;
  color: #6B7280;
  border: 1px solid rgba(27, 54, 93, 0.15);
}

.la-confirm-edit__btn--secondary:hover {
  background: rgba(27, 54, 93, 0.04);
  color: #374151;
}

.la-confirm-edit__cant-copy {
  font-size: 14px;
  color: #6B7280;
  align-self: center;
}

/* ── Modern rename-board modal restyle ───────────────── */
.modal-dialog:has(.la-rename-board-wrap) {
  width: 540px;
  max-width: 94vw;
}

.la-rename-board-wrap {
  color: #374151;
}

.la-rename-board-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-rename-board-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-rename-board-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-rename-board-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-rename-board-wrap > .modal-body {
  padding: 24px;
}

.la-rename-board-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(42, 157, 143, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
}

.la-rename-board-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  object-fit: cover;
  flex-shrink: 0;
}

.la-rename-board-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  display: block;
}

.la-rename-board-dims {
  font-size: 14px;
  color: #6B7280;
}

.la-rename-board-desc {
  font-size: 15.5px;
  color: #374151;
  margin-bottom: 8px;
}

.la-rename-board-hint {
  font-size: 14.5px;
  color: #6B7280;
  margin-bottom: 20px;
  line-height: 1.5;
}

.la-rename-board-hint b {
  color: #1B365D;
  font-weight: 700;
}

.la-rename-board-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.la-rename-board-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.la-rename-board-label {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.la-rename-board-input {
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 14px;
  font-size: 15px;
  color: #1B365D;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-rename-board-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-rename-board-input::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

/* Footer */
.la-rename-board-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.la-rename-board-submit {
  border-radius: 10px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  font-weight: 600;
  font-size: 15px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-rename-board-submit:hover {
  background: linear-gradient(135deg, #8aa3c9, #46505F);
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

.la-rename-board-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.la-rename-board-close {
  border-radius: 10px;
  padding: 10px 22px;
  background: rgba(107, 114, 128, 0.08);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-rename-board-close:hover {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
  text-decoration: none;
}

/* ── Modern swap-images modal restyle ────────────────── */
.modal-dialog:has(.la-swap-images-wrap) {
  width: 620px;
  max-width: 94vw;
}

.la-swap-images-wrap {
  color: #374151;
}

.la-swap-images-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-swap-images-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-swap-images-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-swap-images-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-swap-images-wrap > .modal-body {
  padding: 24px;
}

.la-swap-images-desc {
  font-size: 15px;
  color: #374151;
  margin-bottom: 20px;
  line-height: 1.5;
}

.la-swap-images-section {
  margin-bottom: 20px;
}

.la-swap-images-section:last-child {
  margin-bottom: 0;
}

.la-swap-images-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2A9D8F;
  margin-bottom: 8px;
}

.la-swap-images-boards {
  padding: 12px 16px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.la-swap-images-loading,
.la-swap-images-empty {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}

.la-swap-images-error {
  font-size: 14px;
  color: #C0392B;
}

.la-swap-images-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-swap-images-select:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-swap-images-warning {
  margin-top: 8px;
  font-size: 14px;
  color: #C0392B;
  font-weight: 500;
}

/* Footer */
.la-swap-images-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.la-swap-images-submit {
  border-radius: 24px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-swap-images-submit:hover {
  background: linear-gradient(135deg, #8aa3c9, #46505F);
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

.la-swap-images-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.la-swap-images-cancel {
  border-radius: 24px;
  padding: 10px 24px;
  background: rgba(107, 114, 128, 0.08);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-swap-images-cancel:hover {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
  text-decoration: none;
}

/* ── Modern tag-board (categorize) modal restyle ─────── */
.modal .modal-dialog:has(.la-tag-board-wrap) {
  width: 100%;
  max-width: 500px;
  border-radius: var(--md-r-lg);
  /* Visible overflow so the Categories dropdown can render past
     the modal's bottom edge instead of getting clipped — the
     modal still appears clipped because the rounded corners use
     the inner element's border-radius. */
  overflow: visible;
}

.modal-content:has(.la-tag-board-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  /* Same reason as above — let dropdowns overflow the rounded
     content card. The header/body backgrounds keep the rounded
     visual corners via their own border-radius. */
  overflow: visible;
}

.la-tag-board-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-tag-board-wrap .la-modal-header,
.la-tag-board-wrap > .la-modal-header,
.modal-content:has(.la-tag-board-wrap) .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  /* Tightened from 20px → 12px top/bottom per Traci's tweak.
     Multiple selectors here defeat any cached or higher-specificity
     rule that was forcing 28px. */
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-tag-board-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-tag-board-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.la-tag-board-wrap .la-modal-close:hover {
  color: var(--md-ink);
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}
.la-tag-board-wrap .la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

.la-tag-board-body {
  padding: 24px;
}

.la-tag-board-desc {
  font-size: 14px;
  color: var(--md-muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

.la-tag-board-section {
  margin-bottom: 18px;
}

.la-tag-board-section:last-child {
  margin-bottom: 0;
}

.la-tag-board-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-muted);
  margin-bottom: 8px;
}

.la-tag-board-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.la-tag-board-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2);
  outline: none;
}

.la-tag-board-input::placeholder {
  color: #9CA3AF;
}

/* Modernize the native <select> variant — Bootstrap was overriding
   our base .la-tag-board-input with a thick navy border + the
   browser's default chevron, which broke the modal's modern
   dropdown family (matches .modern-select treatment used by the
   New Board modal). Higher-specificity selector (`select.la-tag-
   board-input` + `.la-tag-board-body select.la-tag-board-input`
   for the modal scope) wins against Bootstrap's `select.form-
   control` rules without resorting to !important. The dropdown
   panel itself is the browser-native one (native <option>
   rendering); only the closed-trigger appearance is modernized
   so we keep keyboard / accessibility / scroll behaviors for
   free. */
select.la-tag-board-input,
.la-tag-board-body select.la-tag-board-input {
  /* Kill the native chevron so we can paint our own — matches the
     SVG used by .modern-select__trigger in the new-board modal. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  /* Bigger touch target + bigger radius matching the new-board
     modern-select trigger, so the two modal dropdowns read as one
     family. Extra right padding reserves space for the chevron. */
  min-height: 48px;
  padding: 12px 44px 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.14);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  cursor: pointer;
  /* Bootstrap's form-control comes in with its own line-height +
     height; reset so the chevron centers and the trigger lines up
     with the category text input beneath. */
  line-height: 1.4;
  height: auto;
  box-shadow: none;
}

select.la-tag-board-input:hover,
.la-tag-board-body select.la-tag-board-input:hover {
  border-color: rgba(17, 26, 46, 0.22);
}

select.la-tag-board-input:focus,
select.la-tag-board-input:focus-visible,
.la-tag-board-body select.la-tag-board-input:focus,
.la-tag-board-body select.la-tag-board-input:focus-visible {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
}

/* IE / Edge legacy fallback — hide the native arrow that
   `appearance: none` doesn't always suppress. */
select.la-tag-board-input::-ms-expand,
.la-tag-board-body select.la-tag-board-input::-ms-expand {
  display: none;
}

/* Inline category chips — replaces the Bootstrap dropdown that
   was getting clipped by modal overflow contexts. Renders as a
   wrap-flex row below the input; the modal grows naturally to
   contain a long category list and the page scrolls if needed. */
.la-tag-board-chips-hint {
  font-size: 13px;
  color: var(--md-muted);
  margin: 12px 0 8px;
}

.la-tag-board-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.la-tag-board-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: #1B365D;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.la-tag-board-chip:hover,
.la-tag-board-chip:focus-visible {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.32);
  color: #5A6A85;
  outline: none;
}

.la-tag-board-chip--active {
  background: rgba(90, 106, 133, 0.14);
  border-color: rgba(90, 106, 133, 0.5);
  color: #5A6A85;
  font-weight: 600;
}

/* ── Find a Button modal ── */
.modal .modal-dialog:has(.la-find-button-wrap) {
  /* 30% wider than the original 520px, and fills the viewport height minus
     a 4px gutter top + bottom. Use flex so the intermediate <span>
     touch-listener + .modal-content chain stretch to the full dialog
     height — otherwise the inline span breaks height:100% propagation. */
  max-width: 676px;
  height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  margin: 4px auto;
  display: flex;
  flex-direction: column;
}

.modal .modal-dialog:has(.la-find-button-wrap) > * {
  /* touch-listener span sits between .modal-dialog and .modal-content */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.modal-content:has(.la-find-button-wrap) {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 26, 46, 0.18), 0 8px 24px rgba(17, 26, 46, 0.1);
  flex: 1 1 auto;
  min-height: 0;
  /* modal-dialog.js unconditionally sets inline max-height: window.height()-50px
     on .modal-content for all modals. Our modal-dialog reaches nearly the
     viewport edge (calc(100vh - 8px)), so that 50px cap leaves ~42px of dead
     space below the footer. Override it for this modal. */
  max-height: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.la-find-button-wrap {
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.la-find-button-wrap .la-find-button-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.la-find-button-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  background: rgba(255, 255, 255, 0.6);
}

.la-find-button-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink, #1B365D);
  flex: 1 1 auto;
  min-width: 0;
}

.la-find-button-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: var(--md-muted, #6B7280);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.la-find-button-wrap .la-modal-close:hover {
  color: var(--md-ink, #1B365D);
  background: #D4DAE2;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}

.la-find-button-wrap .la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

.la-find-button-body {
  padding: 24px;
}

.la-find-button-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  font-size: 16px;
  background: #F8F9FA;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-find-button-input:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

.la-find-button-results {
  margin-top: 4px;
}

.la-find-button-result {
  /* Now a <button> element (was <div>) per WCAG 2.1.1.
     Reset button defaults so the visual is identical to the prior <div>. */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  /* Bump padding from 10×12 to 12×14 to meet WCAG 2.5.5 / AAC touch targets. */
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.la-find-button-result:hover {
  background: rgba(42, 157, 143, 0.06);
}

.la-find-button-result__images {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.la-find-button-result__img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  object-fit: contain;
  background: #fff;
}

.la-find-button-result__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.la-find-button-result__label {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
}

.la-find-button-result__path {
  font-size: 14px;
  color: #6B7280;
}

.la-find-button-result__crumb {
  display: inline;
}

.la-find-button-result__crumb::after {
  content: " → ";
  color: #b0b8c4;
}

.la-find-button-result__crumb:last-child::after {
  content: "";
}

.la-find-button-result__crumb--current {
  font-weight: 700;
  color: #2A9D8F;
}

.la-find-button-empty {
  padding: 24px 0;
  text-align: center;
  color: #6B7280;
  font-size: 14px;
}

.la-find-button-footer {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
}

.la-find-button-cancel {
  /* WCAG 2.5.5 + AAC touch target — was 10px 20px (~34×32). */
  padding: 14px 28px;
  min-height: 44px;
  border-radius: 10px;
  border: none;
  background: #46505F;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-find-button-cancel:hover {
  background: #3a4350;
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.25);
}

/* ── Eval Status modal ── */
.modal .modal-dialog:has(.la-eval-status-wrap) {
  max-width: 560px;
}

.modal-content:has(.la-eval-status-wrap) {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 26, 46, 0.18), 0 8px 24px rgba(17, 26, 46, 0.1);
}

.la-eval-status-wrap {
  background: #fff;
}

.la-eval-status-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  background: rgba(255, 255, 255, 0.6);
}

.la-eval-status-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink, #1B365D);
  flex: 1 1 auto;
}

.la-eval-status-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: var(--md-muted, #6B7280);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.la-eval-status-wrap .la-modal-close:hover {
  color: var(--md-ink, #1B365D);
  background: #D4DAE2;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14);
}

.la-eval-status-body {
  padding: 24px;
}

.la-eval-status-desc {
  font-size: 15px;
  /* WCAG AA fix — was $brand-charcoal-blue (4.04:1, borderline). */
  color: #374151;
  line-height: 1.6;
  margin: 0 0 16px;
}

.la-eval-status-info {
  text-align: center;
  margin-bottom: 20px;
}

.la-eval-status-info__icon {
  margin-bottom: 12px;
}

.la-eval-status-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.la-eval-status-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-eval-status-choice-btn:hover {
  background: #F0F4F8;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

.la-eval-status-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.la-eval-status-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.la-eval-status-field__label {
  font-size: 14px;
  font-weight: 700;
  color: #46505F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.la-eval-status-field__input {
  /* WCAG 2.5.5 AAA touch target — was 10px 14px (~35-38 tall). */
  padding: 12px 14px;
  min-height: 44px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  font-size: 15px;
  background: #F8F9FA;
}

.la-eval-status-field__input:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

.la-eval-status-field__value {
  font-size: 15px;
  color: #1B365D;
  font-weight: 600;
  padding: 10px 0;
}

.la-eval-status-error {
  font-size: 14px;
  color: #C0392B;
  font-weight: 500;
  margin: 4px 0 0;
}

.la-eval-status-footer {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.la-eval-status-submit {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: rgba(76, 134, 216, 0.3);
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}

.la-eval-status-submit:hover {
  background: rgba(76, 134, 216, 0.4);
}

.la-eval-status-cancel {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.la-eval-status-cancel:hover {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
}

.la-eval-status-close {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: #46505F;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-eval-status-close:hover {
  background: #3a4350;
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.25);
}

.la-tag-board-error {
  margin: 4px 0 0;
  font-size: 14px;
  color: #C0392B;
  font-weight: 500;
}

.la-tag-board-info {
  margin: 4px 0 0;
  font-size: 14px;
  color: #1a7a6e;
  font-weight: 500;
}

.la-tag-board-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--md-ink);
  cursor: pointer;
  padding: 12px 16px;
  background: rgba(17, 26, 46, 0.02);
  border: 1px solid var(--md-line);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.la-tag-board-checkbox:hover {
  background: rgba(17, 26, 46, 0.04);
}

.la-tag-board-check {
  margin-top: 2px;
  accent-color: var(--md-teal);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.la-tag-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  /* Right-align the action cluster so the primary action sits at
     the bottom-right of the modal (Cancel left of it, per the
     standard confirm-on-right pattern). */
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--md-line);
}

.la-tag-board-submit {
  /* Brand slate-blue primary — matches the rest of the modernized
     primary CTAs (back-to-boards, save) so the entire app's
     "confirm" verb reads with the same color + weight. */
  background: #5A6A85;
  color: #ffffff;
  border: 1px solid #5A6A85;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.2);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.la-tag-board-submit:hover:not(:disabled), .la-tag-board-submit:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  border-color: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.3);
  color: #ffffff;
  outline: none;
}
.la-tag-board-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.la-tag-board-cancel {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.la-tag-board-cancel:hover {
  background: rgba(17, 26, 46, 0.1);
  border-color: rgba(17, 26, 46, 0.18);
  text-decoration: none;
}

/* ── Modern translate-board modal restyle ─────────────── */
.modal-dialog:has(.la-translate-board-wrap) {
  width: 620px;
  max-width: 94vw;
}

.la-translate-board-wrap {
  color: #374151;
}

.la-translate-board-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-translate-board-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-translate-board-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-translate-board-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-translate-board-wrap > .modal-body {
  padding: 24px;
}

.la-translate-board-section {
  margin-bottom: 18px;
}

.la-translate-board-section:last-child {
  margin-bottom: 0;
}

.la-translate-board-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2A9D8F;
  margin-bottom: 8px;
}

.la-translate-board-boards {
  padding: 12px 16px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.la-translate-board-loading,
.la-translate-board-empty {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}

.la-translate-board-error {
  font-size: 14px;
  color: #C0392B;
}

.la-translate-board-error-card {
  font-size: 15px;
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.18);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.5;
  margin: 0;
}

.la-translate-board-copy-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
}

.la-translate-board-copy-card svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #d97706;
}

.la-translate-board-copy-card p {
  margin: 0;
}

.la-translate-board-cant-copy {
  font-size: 14px;
  color: #6B7280;
  align-self: center;
}

.la-translate-board-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-translate-board-select:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-translate-board-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  padding: 12px 16px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 10px;
}

.la-translate-board-check {
  margin-top: 2px;
  accent-color: #2A9D8F;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.la-translate-board-info {
  font-size: 14px;
  color: #2A9D8F;
  background: rgba(42, 157, 143, 0.06);
  border: 1px solid rgba(42, 157, 143, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.5;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.la-translate-board-info__text {
  margin: 0;
  flex: 1 1 auto;
}

.la-translate-board-retranslate {
  border-radius: 20px;
  padding: 8px 16px;
  background: #fff;
  color: #374151;
  border: 1px solid rgba(42, 157, 143, 0.28);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.la-translate-board-retranslate:hover {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

.la-translate-board-retranslate:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Footer */
.la-translate-board-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.la-translate-board-submit {
  border-radius: 24px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-translate-board-submit:hover {
  background: linear-gradient(135deg, #8aa3c9, #46505F);
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

.la-translate-board-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.la-translate-board-alt-btn {
  border-radius: 24px;
  padding: 10px 24px;
  background: #fff;
  color: #374151;
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-translate-board-alt-btn:hover {
  background: #F0F4F8;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

.la-translate-board-cancel {
  border-radius: 24px;
  padding: 10px 24px;
  background: rgba(107, 114, 128, 0.08);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-translate-board-cancel:hover {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
  text-decoration: none;
}

/* ── Modern batch-recording modal restyle ─────────────── */
.modal-dialog:has(.la-batch-recording-wrap) {
  width: 620px;
  max-width: 94vw;
}

.la-batch-recording-wrap {
  color: #374151;
}

.la-batch-recording-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-batch-recording-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-batch-recording-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-batch-recording-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-batch-recording-wrap > .modal-body {
  padding: 24px;
}

.la-batch-recording-section {
  margin-bottom: 18px;
}

.la-batch-recording-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A7B7A;
  margin-bottom: 8px; /* WCAG AA fix. */
}

.la-batch-recording-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.la-batch-recording-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}

.la-batch-recording-back-btn:hover {
  background: #F0F4F8;
  color: #1A7B7A;
} /* WCAG AA fix — was $brand-verdigris (~3.8:1 on $surface-200). */
.la-batch-recording-phrase-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
}

.la-batch-recording-breadcrumb {
  font-size: 0.9375rem;
  color: #6B7280;
}

.la-batch-recording-breadcrumb--dim {
  color: #6B7280;
} /* WCAG AA fix — was $brand-cool-steel (2.84:1). */
.la-batch-recording-repo-title {
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  margin: 0 0 4px;
}

.la-batch-recording-repo-desc {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 8px;
}

.la-batch-recording-repo-desc a {
  color: #1A7B7A;
} /* WCAG AA fix — was $brand-verdigris on white. */
.la-batch-recording-progress {
  font-size: 0.9375rem;
  color: #6B7280;
  text-align: right;
  margin-bottom: 12px;
}

.la-batch-recording-loading {
  font-size: 1rem;
  color: #6B7280;
  font-style: italic;
}

.la-batch-recording-error {
  font-size: 1rem;
  color: #C0392B;
}

.la-batch-recording-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la-batch-recording-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-batch-recording-list-item:hover {
  background: #F8F9FA;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.08);
}

.la-batch-recording-list-item--add {
  color: #6B7280;
  font-weight: 400;
}

.la-batch-recording-list-item--add:hover {
  color: #2A9D8F;
}

.la-batch-recording-list-item--input {
  gap: 8px;
}

.la-batch-recording-input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 8px 12px;
  font-size: 14px;
  color: #1B365D;
}

.la-batch-recording-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-batch-recording-add-btn {
  border-radius: 8px;
  padding: 8px 16px;
  background: #2A9D8F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.la-batch-recording-add-btn:hover {
  background: #238b7f;
}

.la-batch-recording-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.la-batch-recording-icon--ok {
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
} /* WCAG AA fix. */
.la-batch-recording-icon--warning {
  background: rgba(212, 168, 75, 0.15);
  color: #c49a3a;
}

.la-batch-recording-count {
  margin-left: auto;
  font-size: 0.9375rem;
  color: #6B7280;
  font-weight: 400;
}

.la-batch-recording-next {
  text-align: right;
  margin-top: 14px;
}

.la-batch-recording-next-btn {
  border-radius: 24px;
  padding: 10px 20px;
  background: #fff;
  color: #374151;
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease;
}

.la-batch-recording-next-btn:hover {
  background: #F0F4F8;
}

/* Footer */
.la-batch-recording-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
}

.la-batch-recording-close {
  border-radius: 24px;
  padding: 10px 24px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-batch-recording-close:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
  color: #fff;
  text-decoration: none;
}

/* ── Modern delete-board modal restyle ────────────────── */
.modal-dialog:has(.la-delete-board-wrap) {
  width: 560px;
  max-width: 94vw;
}

.la-delete-board-wrap {
  color: #374151;
}

.la-delete-board-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.06), rgba(192, 57, 43, 0.03)), #F8F9FA;
  border-bottom: 1px solid rgba(192, 57, 43, 0.1);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-delete-board-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #C0392B;
  letter-spacing: -0.3px;
}

.la-delete-board-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(192, 57, 43, 0.15);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-delete-board-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-delete-board-wrap > .modal-body {
  padding: 24px;
}

.la-delete-board-desc {
  font-size: 15px;
  color: #374151;
  margin-bottom: 16px;
}

.la-delete-board-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(192, 57, 43, 0.03);
  border: 1px solid rgba(192, 57, 43, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
}

.la-delete-board-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  object-fit: cover;
  flex-shrink: 0;
}

.la-delete-board-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  display: block;
}

.la-delete-board-dims {
  font-size: 0.9375rem;
  color: #6B7280;
}

.la-delete-board-warning {
  font-size: 14px;
  color: #374151;
  background: rgba(212, 168, 75, 0.08);
  border: 1px solid rgba(212, 168, 75, 0.15);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.la-delete-board-users {
  margin: 8px 0 0 16px;
  max-height: 60px;
  overflow: auto;
  font-size: 0.9375rem;
  color: #6B7280;
}

.la-delete-board-section {
  margin-bottom: 16px;
}

.la-delete-board-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  padding: 12px 16px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 10px;
}

.la-delete-board-check {
  margin-top: 2px;
  accent-color: #C0392B;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.la-delete-board-danger {
  font-size: 14px;
  color: #C0392B;
  background: rgba(192, 57, 43, 0.05);
  border: 1px solid rgba(192, 57, 43, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  line-height: 1.5;
}

.la-delete-board-danger p {
  margin: 0;
}

.la-delete-board-boards {
  padding: 12px 16px;
  background: rgba(192, 57, 43, 0.02);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 12px;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 12px;
}

.la-delete-board-loading {
  font-size: 1rem;
  color: #6B7280;
  font-style: italic;
}

.la-delete-board-error {
  font-size: 1rem;
  color: #C0392B;
}

.la-delete-board-status {
  font-size: 1rem;
  color: #6B7280;
  padding: 16px;
  font-style: italic;
}

.la-delete-board-status-key {
  color: #9CA3AF;
}

.la-delete-board-status--error {
  color: #C0392B;
  font-style: normal;
}

/* Footer */
.la-delete-board-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.03), rgba(192, 57, 43, 0.02)), #F8F9FA;
  border-top: 1px solid rgba(192, 57, 43, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.la-delete-board-submit {
  border-radius: 24px;
  padding: 10px 24px;
  background: #C0392B;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-delete-board-submit:hover {
  background: #a93226;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.3);
}

.la-delete-board-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.la-delete-board-cancel {
  border-radius: 24px;
  padding: 10px 24px;
  background: rgba(107, 114, 128, 0.08);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
  font-weight: 500;
  font-size: 15px;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}

.la-delete-board-cancel:hover {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
}

/* ── Modern board-privacy modal restyle ──────────────── */
.modal-dialog:has(.la-board-privacy-wrap) {
  width: 620px;
  max-width: 94vw;
}

.la-board-privacy-wrap {
  color: #374151;
}

.la-board-privacy-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-board-privacy-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-board-privacy-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-board-privacy-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-board-privacy-wrap > .modal-body {
  padding: 24px;
}

.la-board-privacy-desc {
  font-size: 15px;
  color: #374151;
  margin-bottom: 20px;
  line-height: 1.5;
}

.la-board-privacy-section {
  margin-bottom: 18px;
}

.la-board-privacy-section:last-child {
  margin-bottom: 0;
}

.la-board-privacy-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A7B7A;
  margin-bottom: 8px; /* WCAG AA fix. */
}

.la-board-privacy-boards {
  padding: 12px 16px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 12px;
  /* Removed `max-height: 240px; overflow-y: auto` — instead the
     modal-body below caps height with its own scroll, so expanding
     the hierarchy grows the modal up to viewport height before any
     scrollbar appears. */
}

/* Body grows with the boards hierarchy / privacy dropdown content —
   no fixed max-height. Modal stretches naturally up to viewport.
   Browser-level page scrolling kicks in if the dialog ever exceeds
   viewport height, which is the desired fall-back behavior. */
.la-board-privacy-wrap > .modal-body {
  max-height: none;
  overflow: visible;
}

/* Privacy dropdown's option list is `position: absolute` by default
   (so it floats over surrounding content and doesn't push siblings).
   Inside this modal we want the opposite — the list should occupy
   flow space below the trigger so the modal-body's height grows to
   contain it. position:static + auto offsets returns the list to
   normal flow; the list's existing styling (rounded card, shadow,
   max-height with internal scroll) is preserved. */
.la-board-privacy-wrap .bound-select__list {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 6px;
}

/* Modern action links inside the board hierarchy (Select All | Expand
   All | Collapse All). Default browser link styling reads dated; pill
   chrome with verdigris accent matches the rest of the modal. */
.la-board-privacy-boards .board_hierarchy_actions,
.la-board-privacy-boards > div > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin: 0 2px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1A7B7A;
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid rgba(42, 157, 143, 0.18);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.la-board-privacy-boards > div > a:hover,
.la-board-privacy-boards > div > a:focus-visible {
  background: rgba(42, 157, 143, 0.16);
  color: #1B365D;
  border-color: rgba(42, 157, 143, 0.4);
  text-decoration: none;
  outline: none;
}

/* Modern custom checkboxes inside the boards hierarchy — replaces the
   default browser appearance with a 18px rounded square that fills with
   verdigris when checked. Matches the `.md-edit-profile__form` pattern
   used elsewhere in the modern modal restyles. */
.la-board-privacy-boards input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  border: 1.5px solid rgba(27, 54, 93, 0.3);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.la-board-privacy-boards input[type=checkbox]:hover {
  border-color: rgba(42, 157, 143, 0.55);
}

.la-board-privacy-boards input[type=checkbox]:checked {
  background: #2A9D8F;
  border-color: #2A9D8F;
}

.la-board-privacy-boards input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.la-board-privacy-boards input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.5);
  outline-offset: 1px;
}

.la-board-privacy-boards input[type=checkbox]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tighter list rhythm for the recursive board hierarchy items. */
.la-board-privacy-boards .board_hierarchy ul {
  list-style: none;
  /* Indent comes from each node's content (depth padding), not the list, so
     the checkboxes line up in one column here too. */
  padding-left: 0;
  margin: 0;
}

.la-board-privacy-boards .board_hierarchy > ul {
  padding-left: 0;
}

.la-board-privacy-boards .board_hierarchy .recursive-board__row {
  padding: 4px 0;
  font-size: 14px;
  color: #374151;
}

.la-board-privacy-loading {
  font-size: 1rem;
  color: #6B7280;
  font-style: italic;
}

.la-board-privacy-error {
  font-size: 1rem;
  color: #C0392B;
}

.la-board-privacy-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-board-privacy-select:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

/* Footer */
.la-board-privacy-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.la-board-privacy-submit {
  border-radius: 24px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-board-privacy-submit:hover {
  background: linear-gradient(135deg, #8aa3c9, #46505F);
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

.la-board-privacy-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.la-board-privacy-cancel {
  border-radius: 24px;
  padding: 10px 24px;
  background: rgba(107, 114, 128, 0.08);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-board-privacy-cancel:hover {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
  text-decoration: none;
}

/* ── Modern edit-board-details modal restyle ──────────── */
.modal-dialog:has(.la-edit-board-details-wrap) {
  width: 680px;
  max-width: 94vw;
}

.la-edit-board-details-wrap {
  color: #374151;
}

.la-edit-board-details-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-edit-board-details-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-edit-board-details-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-edit-board-details-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-edit-board-details-wrap > .modal-body {
  padding: 8px 24px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Sections */
.la-edit-board-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

.la-edit-board-section:last-child {
  border-bottom: none;
}

.la-edit-board-section__heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A7B7A;
  margin: 0 0 12px; /* WCAG AA fix. */
}

/* Fields */
.la-edit-board-field {
  margin-bottom: 14px;
}

.la-edit-board-field:last-child {
  margin-bottom: 0;
}

.la-edit-board-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 5px;
}

.la-edit-board-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 14px;
  font-size: 15px;
  color: #1B365D;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-edit-board-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-edit-board-input::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

.la-edit-board-textarea {
  min-height: 80px;
  resize: vertical;
}

.la-edit-board-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-edit-board-select:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-edit-board-field-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.la-edit-board-field--half {
  flex: 1;
}

.la-edit-board-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  padding: 8px 12px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 10px;
  margin-bottom: 6px;
}

.la-edit-board-checkbox:last-child {
  margin-bottom: 0;
}

.la-edit-board-check {
  margin-top: 2px;
  accent-color: #2A9D8F;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.la-edit-board-hint {
  font-size: 0.9375rem;
  color: #6B7280;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Icon picker */
.la-edit-board-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.la-edit-board-icon-preview {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.la-edit-board-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.la-edit-board-icon-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.la-edit-board-icon-option {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 8px;
  cursor: pointer;
  object-fit: cover;
  transition: border-color 0.12s ease, transform 0.1s ease;
}

.la-edit-board-icon-option:hover {
  border-color: #2A9D8F;
  transform: scale(1.08);
}

/* Background preview */
.la-edit-board-bg-preview {
  width: 120px;
  height: 80px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0;
}

.la-edit-board-bg-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.la-edit-board-color-swatch {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(27, 54, 93, 0.15);
  border-radius: 8px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.la-edit-board-dropdown-btn {
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #F8F9FA;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.la-edit-board-dropdown-btn:hover {
  background: #F0F4F8;
}

/* Intro sections */
.la-edit-board-intro-section {
  position: relative;
  padding: 12px;
  background: rgba(42, 157, 143, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}

.la-edit-board-intro-section .la-edit-board-input {
  margin-bottom: 6px;
}

.la-edit-board-intro-section .la-edit-board-input:last-of-type {
  margin-bottom: 0;
}

.la-edit-board-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(192, 57, 43, 0.15);
  background: #fff;
  color: #C0392B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.la-edit-board-remove-btn:hover {
  background: rgba(192, 57, 43, 0.06);
}

.la-edit-board-add-btn {
  border-radius: 24px;
  padding: 8px 18px;
  background: #fff;
  color: #374151;
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.la-edit-board-add-btn:hover {
  background: #F0F4F8;
}

/* Advanced link */
.la-edit-board-advanced-link {
  color: #1A7B7A;
  font-size: 1rem;
  font-weight: 500;
} /* WCAG AA fix. */
.la-edit-board-advanced-link:hover {
  color: #146462;
  text-decoration: underline;
}

/* Footer */
.la-edit-board-details-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
}

.la-edit-board-close {
  border-radius: 24px;
  padding: 10px 24px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-edit-board-close:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
  color: #fff;
  text-decoration: none;
}

/* ── Modern board-ideas modal restyle ─────────────────── */
.modal-dialog:has(.la-board-ideas-wrap) {
  width: 660px;
  max-width: 94vw;
}

.la-board-ideas-wrap {
  color: #374151;
}

.la-board-ideas-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-board-ideas-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-board-ideas-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-board-ideas-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-board-ideas-wrap > .modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.la-board-ideas-desc {
  font-size: 1rem;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 12px;
}

.la-board-ideas-desc a {
  color: #1A7B7A;
} /* WCAG AA fix — was $brand-verdigris (3.32:1). */
.la-board-ideas-status {
  font-size: 0.9375rem;
  color: #1A7B7A;
  font-weight: 600;
  margin-bottom: 12px;
} /* WCAG AA fix. */
.la-board-ideas-warning {
  font-size: 1rem;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.la-board-ideas-warning--danger {
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.12);
  color: #C0392B;
}

.la-board-ideas-user-select {
  margin-bottom: 14px;
}

.la-board-ideas-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 5px;
}

/* Tabs */
.la-board-ideas-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding-bottom: 0;
}

.la-board-ideas-tab {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-board-ideas-tab:hover {
  background: rgba(42, 157, 143, 0.06);
  color: #1A7B7A;
} /* WCAG AA fix. */
.la-board-ideas-tab--active {
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  font-weight: 600;
}

.la-board-ideas-tab--active:hover {
  background: linear-gradient(135deg, #238b7f, #3e74c0);
  color: #fff;
}

/* Explainer */
.la-board-ideas-explainer {
  font-size: 0.9375rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Search */
.la-board-ideas-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.la-board-ideas-search-input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 10px 14px;
  font-size: 15px;
  color: #1B365D;
}

.la-board-ideas-search-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-board-ideas-search-btn {
  border-radius: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.la-board-ideas-search-btn:hover {
  background: linear-gradient(135deg, #8aa3c9, #46505F);
}

/* Navigation */
.la-board-ideas-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.la-board-ideas-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.la-board-ideas-back-btn:hover {
  background: #F0F4F8;
  color: #1A7B7A;
} /* WCAG AA fix. */
.la-board-ideas-cat-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1B365D;
}

.la-board-ideas-breadcrumb {
  font-size: 0.9375rem;
  color: #6B7280;
} /* WCAG AA fix — was $brand-cool-steel (2.84:1). */
.la-board-ideas-progress {
  font-size: 0.9375rem;
  color: #6B7280;
  margin-bottom: 10px;
}

.la-board-ideas-loading {
  font-size: 1rem;
  color: #6B7280;
  font-style: italic;
}

.la-board-ideas-error {
  font-size: 1rem;
  color: #C0392B;
}

/* Item list */
.la-board-ideas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la-board-ideas-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-board-ideas-item:hover {
  background: #F8F9FA;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.08);
}

.la-board-ideas-item--with-image {
  min-height: 80px;
}

.la-board-ideas-item-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.la-board-ideas-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.la-board-ideas-item-text {
  flex: 1;
  font-size: 15px;
  white-space: normal;
}

.la-board-ideas-item-text--used {
  color: #6B7280;
} /* WCAG AA fix — was $brand-cool-steel (2.84:1). */
.la-board-ideas-item-check {
  color: #1A7B7A;
  margin-right: 6px;
  font-weight: 700;
} /* WCAG AA fix. */
.la-board-ideas-item-count {
  font-size: 0.9375rem;
  color: #6B7280;
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
}

.la-board-ideas-add-btn {
  border-radius: 24px;
  padding: 6px 16px;
  background: #fff;
  color: #374151;
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease;
}

.la-board-ideas-add-btn:hover {
  background: #F0F4F8;
}

.la-board-ideas-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Modern button-stash modal restyle ────────────────── */
.modal-dialog:has(.la-button-stash-wrap) {
  width: 620px;
  max-width: 94vw;
}

.la-button-stash-wrap {
  color: #374151;
}

.la-button-stash-wrap > .modal-header {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 18px 24px;
  padding-right: 56px;
  position: relative;
}

.la-button-stash-wrap > .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

.la-button-stash-wrap > .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  float: none;
  margin: 0;
  padding: 0;
}

.la-button-stash-wrap > .modal-header .close:hover {
  background: #fff;
  color: #374151;
}

.la-button-stash-wrap > .modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.la-button-stash-desc {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 16px;
}

.la-button-stash-grid {
  margin-bottom: 12px;
}

/* Footer */
.la-button-stash-wrap > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
}

.la-button-stash-close {
  border-radius: 24px;
  padding: 10px 24px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.la-button-stash-close:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
  color: #fff;
  text-decoration: none;
}

.form-control.inline-masquerade {
  width: 150px;
  display: inline;
}

.form-control.inline-licenses {
  width: 50px;
  display: inline;
}

/* Speak Mode PIN entry modal — modern modal styling (matches pin-settings /
   md-modal-* shells). Keypad keeps id="pin" + .advanced_selection for
   eye-gaze/scanning; the look is modernized here. */
.speak-mode-pin__body {
  text-align: center;
}

.speak-mode-pin-entry {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 16px;
}

.speak-mode-pin-entry__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 38px;
  height: 56px;
  text-align: center;
  letter-spacing: 0.18em;
  line-height: 1;
  padding: 0 12px;
  margin-bottom: 0;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: #fafbfc;
  color: #1B365D;
}

.speak-mode-pin-entry__submit {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 56px;
  justify-content: center;
  white-space: nowrap;
}

.speak-mode-pin-entry__error {
  color: #c0392b;
  font-size: 1rem;
  margin: 0 auto 12px;
  max-width: 360px;
}

table#pin {
  table-layout: fixed;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  /* gap-style spacing between keys instead of a hard table grid */
  border-collapse: separate;
  border-spacing: 8px;
}

table#pin td {
  width: 33.33%;
  border: none;
  padding: 0;
}

table#pin td a,
table#pin td button.pin-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 100%;
  cursor: pointer;
  color: #1B365D;
  font-size: 28px;
  font-weight: 600;
  padding: 0;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  background: #fff;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

table#pin td button.pin-key:hover {
  background: rgba(70, 80, 95, 0.06);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

table#pin td button.pin-key:active {
  transform: scale(0.96);
  background: rgba(70, 80, 95, 0.1);
}

table#pin td button.pin-key:focus-visible {
  outline: 2px solid #46505F;
  outline-offset: 2px;
}

table#pin td a.pin-key__icon,
table#pin td button.pin-key__icon {
  color: #46505F;
}

table#pin td a.pin-key__icon svg,
table#pin td button.pin-key__icon svg {
  display: block;
}

/* Modern text-link styling for the "Reveal PIN" footer action */
.speak-mode-pin__reveal-link {
  background: none;
  border: none;
  padding: 0;
  color: #46505F;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.speak-mode-pin__reveal-link:hover {
  text-decoration: underline;
  color: #3a4350;
}

.speak-mode-pin__revealed {
  font-weight: 600;
  color: #1B365D;
}

table#pin tr:first-child td {
  border-top-color: #bbb;
}

table#pin tr td:first-child {
  border-left-color: #bbb;
}

table#pin tr td:last-child {
  border-right-color: #bbb;
}

table#pin tr:last-child td {
  border-bottom-color: #bbb;
}

table#pin td a:hover,
table#pin td button.pin-key:hover {
  text-decoration: none;
}

table#pin td:hover, table#pin td:focus-visible, table#pin td a.touched, table#pin td button.pin-key.touched {
  background-color: #eee;
}

table > tbody > tr.voice_pad > td {
  padding-top: 15px;
  padding-bottom: 15px;
}

#checklist li.text-muted a {
  color: rgb(153, 153, 153);
}

.swatch {
  width: 18px;
  height: 18px;
  border: 1px solid #888;
  background: #fff;
  display: inline-block;
  margin-bottom: -2px;
}

/* Applied in: Button search results - content grabbers, button settings */
#button_results {
  margin-top: 10px;
}

#button_results .result {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 3px;
}

#button_results .result:hover {
  background: #eee;
  border-color: #aaa;
}

#button_results .result:after {
  content: "";
  display: block;
  clear: left;
}

#button_results .img_holder {
  float: left;
  margin-right: 10px;
  width: 80px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
}

#button_results .img_holder img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 3px;
}
#button_results .img_holder img:first-child {
  margin-left: 0;
}
#button_results .img_holder img {
  margin-left: -25px;
}

#button_results .location {
  font-size: 14px;
}

#button_results .location .link_list {
  padding-right: 5px;
}

.panel.summary {
  text-align: center;
}
.panel.summary .panel-body {
  font-size: 28px;
  font-weight: normal;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel.summary .panel-heading {
  padding: 3px 5px;
}
.panel.summary.smaller .panel-body {
  font-size: 16px;
}
.panel.summary.smaller .panel-body .sub_link {
  font-size: 14px;
}

.spoken_log_event {
  font-weight: bold;
}

.video_box {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.video_box_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.video_box:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.book_box iframe {
  margin: -15px -15px -5px -15px;
  width: calc(100% + 30px);
  height: calc(100vh + 5px - 125px);
}

.supervisee_list.tall {
  max-height: 200px;
  overflow: auto;
}
.supervisee_list.tall .supervisee_nav {
  position: static;
}
.supervisee_list.tall .supervisee_nav .dropdown-menu {
  left: inherit;
  top: calc(100% - 20px);
  width: 80%;
}

.supervisee_nav {
  width: 100%;
}
.supervisee_nav a.btn {
  height: 51px;
  width: 80%;
  width: calc(100% - 60px);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.supervisee_nav button.btn {
  height: 51px;
  width: 20%;
  width: 60px;
}
.supervisee_nav .dropdown-menu {
  width: 100%;
}

.user_weeks .week {
  width: 10%;
  height: 50px;
  float: left;
  border: 1px solid #ddd;
  margin-left: -1px;
  margin-bottom: -1px;
  margin-top: -1px;
  padding: 5px;
}
.user_weeks .week.level_0 {
  background: #fff;
}
.user_weeks .week.level_1, .user_weeks .week.level_2 {
  background: #dee8ef;
}
.user_weeks .week.level_2 {
  background: #D1E1EE;
}
.user_weeks .week.level_3 {
  background: #b9d1e5;
}
.user_weeks .week.level_4 {
  background: #A4C5E1;
}
.user_weeks .week.level_5 {
  background: #7ca7cc;
}
.user_weeks .week.level_6 {
  background: #6a9ac4;
  color: #fff;
}
.user_weeks .week.level_7, .user_weeks .week.level_8 {
  background: #6195C2;
  color: #fff;
}
.user_weeks .week.level_9, .user_weeks .week.level_10 {
  background: #337ab7;
  color: #fff;
}
.user_weeks .week.level_11, .user_weeks .week.level_12, .user_weeks .week.level_13, .user_weeks .week.level_14, .user_weeks .week.level_15 {
  background: #0f6175;
  color: #fff;
}
.user_weeks .week.level_16, .user_weeks .week.level_17, .user_weeks .week.level_18, .user_weeks .week.level_19, .user_weeks .week.level_20 {
  background: #0c6e49;
  color: #fff;
}
.user_weeks .week:hover {
  border-width: 3px;
  padding: 3px;
}
.user_weeks .week_label {
  width: 10%;
  float: left;
  border: 1px solid rgba(255, 255, 255, 0);
  margin-left: -1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 5px;
  padding-bottom: 10px;
  rotate: -15deg;
  color: #888;
}

table tr.long_delay td {
  border-top-width: 4px;
}

.small-placeholder:placeholder-shown {
  font-size: 14px;
}

.btn .sub_note {
  color: #a65151;
  font-size: 14px;
  margin-left: 55px;
  height: 0;
  margin-top: -2px;
  height: 2px;
  font-style: italic;
}
.btn.active .sub_note, .btn:focus-visible .sub_note, .btn.btn-primary .sub_note {
  color: #ff9a9a;
}

.setup_setting {
  margin: 20px 0 30px;
}
.setup_setting label {
  font-weight: bold;
  font-size: 18px;
  display: block;
  margin-bottom: 5px;
}
.setup_setting .btn-group-vertical .btn {
  padding-top: 20px;
  padding-bottom: 20px;
}

.btn-group.quick_money .btn {
  z-index: inherit;
  height: 110px;
  min-width: 180px;
}
.btn-group.quick_money.discount .btn {
  padding-top: 35px;
  padding-bottom: 35px;
  height: 130px;
}
.btn-group.quick_money .suggested {
  position: absolute;
  width: 100%;
  width: calc(100% + 2.5px);
  color: #000;
  border: 1px solid #ccc;
  z-index: 3;
  top: -1px;
  left: -1px;
  background: #afa;
  padding: 3px 0;
  text-shadow: 1px 1px 2px #ccc;
  font-size: 16px;
}
.btn-group.quick_money .btn.active .suggested {
  text-shadow: 1px 1px 2px #888;
  background: #32B16D;
  color: #fff;
}

.btn.active a {
  color: #fff;
}

.btn-group.money .btn {
  z-index: inherit;
  font-size: 35px;
  padding-top: 45px;
  padding-bottom: 35px;
}
.btn-group.money .btn .money-smaller {
  font-size: 14px;
}
.btn-group.money .btn.active .money-smaller {
  color: #bbb;
}
.btn-group.money.two-line .btn {
  line-height: 21px;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 65px;
}
.btn-group.money.thick .btn {
  padding-right: 50px;
  padding-left: 50px;
}
.btn-group.money .suggested {
  position: absolute;
  width: 100%;
  width: calc(100% + 3px);
  color: #000;
  border: 1px solid #ccc;
  z-index: 3;
  top: -1px;
  left: -1px;
  background: #afa;
  padding: 3px 0;
  text-shadow: 1px 1px 2px #ccc;
  font-size: 16px;
}
.btn-group.money .sponsor {
  position: absolute;
  color: #000;
  border: 1px solid #ccc;
  border-top-right-radius: 4px;
  z-index: 3;
  top: -1px;
  left: -1px;
  background: #cdf;
  padding: 3px 0;
  text-shadow: 1px 1px 2px #ccc;
  font-size: 16px;
}
.btn-group.money .sponsor_1 {
  width: 406px;
}
.btn-group.money .sponsor_2 {
  width: 358px;
}
.btn-group.money .sponsor_3 {
  width: 495px;
}
.btn-group.money .sponsor_4 {
  width: 526px;
}

.skinny_subscription .btn-group.money .btn {
  z-index: inherit;
  font-size: 30px;
}
.skinny_subscription .btn-group.money .btn .money-smaller {
  font-size: 14px;
  display: block;
}
.skinny_subscription .btn-group.money.two-line .btn {
  padding-right: 20px;
  padding-left: 20px;
}
.skinny_subscription .btn-group.money.thick .btn {
  padding-right: 30px;
  padding-left: 30px;
}
.skinny_subscription .btn-group.money .suggested {
  font-size: 14px;
  padding: 6px 0;
}
.skinny_subscription .btn-group.money .sponsor {
  font-size: 14px;
  padding: 6px 0;
}
.skinny_subscription .btn-group.money .sponsor_1 {
  width: 283px;
}
.skinny_subscription .btn-group.money .sponsor_2 {
  width: 257px;
}
.skinny_subscription .btn-group.money .sponsor_3 {
  width: 285px;
}
.skinny_subscription .btn-group.money .sponsor_4 {
  width: 384px;
}

.subscription_table {
  border-collapse: separate;
  border-spacing: 0;
  max-width: 720px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1), 0 0 0 1px rgba(27, 42, 74, 0.04);
}
.subscription_table .glyphicon {
  font-size: 20px;
}
.subscription_table th {
  padding: 8px 12px;
}
.subscription_table {
  /* ── Base cell styles ── */
}
.subscription_table td {
  padding: 16px 20px;
  border-bottom: 1px solid #EDE9E0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #1b2a4a;
  transition: background 0.12s ease;
  vertical-align: middle;
}
.subscription_table td .sale {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  position: absolute;
  top: 0;
  width: 100%;
  margin-left: -20px;
  border-bottom: 1px solid #EDE9E0;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.subscription_table {
  /* ── Column dividers ── */
  /* Supporter column: strong left border */
}
.subscription_table td.separator {
  border-left: 2px solid #c5bfb3;
}
.subscription_table {
  /* Eval column: left border to separate from Supporter */
}
.subscription_table td:last-child {
  border-left: 2px solid #c5bfb3;
}
.subscription_table {
  /* Don't double-border when separator IS the last child */
}
.subscription_table td.separator:last-child {
  border-left: 2px solid #c5bfb3;
}
.subscription_table td.dim {
  background: #FAFAF7;
}
.subscription_table td.dim div.middle {
  background: #FAFAF7;
}
.subscription_table {
  /* ── "- or -" divider badge ── */
}
.subscription_table div.middle {
  background: #fff;
  position: absolute;
  right: -25px;
  width: 50px;
  height: 36px;
  padding-top: 6px;
  z-index: 2;
  top: 50px;
  font-size: 18px;
  color: #6B7280;
  font-weight: 500;
}
.subscription_table {
  /* ── Currency & lifetime labels ── */
}
.subscription_table .subscription-currency-us {
  color: var(--fs-dark-teal, #2A9D8F);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.subscription_table .subscription-table__lifetime-purchase {
  color: var(--fs-navy, #1B365D);
  font-weight: 600;
}
.subscription_table {
  /* ── Cloud extras links ── */
}
.subscription_table td a[href*="blog.mylingolinq.com"] {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.subscription_table td a[href*="blog.mylingolinq.com"]:hover {
  color: var(--fs-dark-teal, #2A9D8F);
  border-bottom-color: var(--fs-dark-teal, #2A9D8F);
}
.subscription_table td.subscription-table__cloud-extras-right a[href*="blog.mylingolinq.com"] {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.subscription_table td.subscription-table__cloud-extras-right a[href*="blog.mylingolinq.com"]:hover {
  border-bottom-color: var(--fs-dark-teal, #2A9D8F);
}
.subscription_table .btn-primary .subscription-currency-us {
  color: rgba(255, 255, 255, 0.85);
}
.subscription_table {
  /* ── Default row hover ── */
}
.subscription_table tr:hover td {
  background: rgba(58, 107, 199, 0.03);
}
.subscription_table tr:hover div.middle {
  background: rgba(58, 107, 199, 0.03);
}
.subscription_table {
  /* ── Header row ── */
}
.subscription_table tbody tr:first-child td {
  padding: 20px;
  border-bottom: 2px solid #EDE9E0;
}
.subscription_table {
  /* Pin header cells to their default bg on hover — no hover effect */
}
.subscription_table tbody tr:first-child:hover td.subscription-table__communicator-header {
  background: #2c5282;
}
.subscription_table tbody tr:first-child:hover td.subscription-table__supporter-header {
  background: rgb(85.4005714286, 132.4673296703, 183.2994285714);
}
.subscription_table tbody tr:first-child:hover td.subscription-table__eval-header {
  background: rgb(169.1038297872, 173.8012765957, 183.1961702128);
}
.subscription_table tbody tr:first-child td:first-child {
  border-top-left-radius: 20px;
}
.subscription_table tbody tr:first-child td:last-child {
  border-top-right-radius: 20px;
}
.subscription_table .subscription-table__communicator-header {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: #2c5282;
  letter-spacing: 0.01em;
}
.subscription_table .subscription-table__supporter-header {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: rgb(96.1542857143, 140.2367032967, 187.8457142857); /* 15% lighter than sign-in button */
}
.subscription_table .subscription-table__eval-header {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--fs-medium-gray, #6B7280);
}
.subscription_table {
  /* ── Subtle column background tints (skip header row) ── */
  /* Communicator columns (default cells) */
}
.subscription_table tbody tr:not(:first-child) td {
  background: rgba(44, 82, 130, 0.02);
}
.subscription_table {
  /* Supporter column */
}
.subscription_table tbody tr:not(:first-child) td.separator {
  background: rgba(26, 122, 110, 0.04);
}
.subscription_table {
  /* Eval column */
}
.subscription_table tbody tr:not(:first-child) td:last-child {
  background: rgba(139, 111, 58, 0.04);
}
.subscription_table {
  /* ── Plan buttons row hover ── */
}
.subscription_table tr.subscription-table__row--plan-buttons:hover td {
  background: rgba(78, 205, 196, 0.08);
}
.subscription_table {
  /* ── Last row rounding ── */
}
.subscription_table tbody tr:last-child td {
  border-bottom: none;
  padding: 12px;
}
.subscription_table tbody tr:last-child td .btn {
  width: 100%;
}
.subscription_table tbody tr:first-child td:first-child {
  border-top-left-radius: 20px;
}
.subscription_table tbody tr:first-child td.separator {
  border-left-color: rgba(255, 255, 255, 0.25);
}
.subscription_table tbody tr:first-child td:last-child {
  border-top-right-radius: 20px;
  border-left-color: rgba(255, 255, 255, 0.25);
}
.subscription_table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}
.subscription_table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}
.subscription_table {
  /* ── Plan buttons ── */
}
.subscription_table .btn {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: all 0.25s ease;
  border: none;
}
.subscription_table .btn-primary {
  background: var(--fs-navy, #1B365D);
  color: #fff;
  box-shadow: 0 4px 12px rgba(27, 42, 74, 0.08);
}
.subscription_table .btn-primary:hover {
  background: #243F6B;
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
  transform: translateY(-2px);
}
.subscription_table .btn-default {
  background: transparent;
  border: 2px solid var(--fs-navy, #1B365D);
  color: var(--fs-navy, #1B365D);
  box-shadow: 0 1px 4px rgba(27, 42, 74, 0.06);
}
.subscription_table {
  /* Right plan buttons: white bg when unselected */
}
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(2) .btn-default,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(3) .btn-default,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(4) .btn-default {
  background: #fff;
}
.subscription_table {
  /* Right plan buttons hover */
}
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(2) .btn-default:hover,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(3) .btn-default:hover,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(4) .btn-default:hover {
  background: #243F6B;
  border-color: #243F6B;
  color: #fff;
}
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(2) .btn:hover,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(3) .btn:hover,
.subscription_table tr.subscription-table__row--plan-buttons td:nth-child(4) .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
}
.subscription_table {
  /* First plan button: same outline ring */
}
.subscription_table td.subscription-table__cell--first-plan .btn-default,
.subscription_table td.subscription-table__cell--first-plan .btn-default:hover {
  box-shadow: 0 1px 4px rgba(27, 42, 74, 0.06) !important;
}
.subscription_table td.subscription-table__cell--first-plan .btn-primary {
  border: 2px solid var(--fs-navy, #1B365D);
  background: var(--fs-navy, #1B365D);
  color: #fff;
  box-shadow: 0 4px 12px rgba(27, 42, 74, 0.08);
}
.subscription_table td.subscription-table__cell--first-plan .btn-primary:hover {
  border-color: #243F6B;
  background: #243F6B;
  color: #fff;
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
}
.subscription_table tr.subscription-table__row--plan-buttons:hover td.subscription-table__cell--first-plan .btn-primary {
  background: var(--fs-navy, #1B365D) !important;
  color: #fff;
}
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(2):hover) td.subscription-table__cell--first-plan .btn-primary,
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(3):hover) td.subscription-table__cell--first-plan .btn-primary,
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(4):hover) td.subscription-table__cell--first-plan .btn-primary {
  background: #fff !important;
  color: var(--fs-navy, #1B365D);
}
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(2):hover) td.subscription-table__cell--first-plan .btn-primary .subscription-currency-us,
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(3):hover) td.subscription-table__cell--first-plan .btn-primary .subscription-currency-us,
.subscription_table tr.subscription-table__row--plan-buttons:has(td:nth-child(4):hover) td.subscription-table__cell--first-plan .btn-primary .subscription-currency-us {
  color: var(--fs-dark-teal, #2A9D8F);
}
.subscription_table .btn-default:hover {
  background: var(--fs-navy, #1B365D);
  border: 2px solid var(--fs-navy, #1B365D);
  color: #fff;
  box-shadow: 0 4px 12px rgba(27, 42, 74, 0.08);
  transform: translateY(-2px) !important;
}
.subscription_table td .btn:hover {
  transform: translateY(-2px) !important;
}
.subscription_table {
  /* ── Feature rows: alternating light bg ── */
}
.subscription_table tr.subscription-table__row--light-gray-bg td {
  background: #FAFAF7;
}
.subscription_table tr.subscription-table__row--light-gray-bg:hover td {
  background: #f5f5f0;
}
.subscription_table {
  /* ── Pricing row ── */
}
.subscription_table tr.subscription-table__row--pricing td {
  vertical-align: middle;
  padding-top: 24px;
  padding-bottom: 24px;
}
.subscription_table tr.subscription-table__row--pricing div.middle {
  top: 50%;
  transform: translateY(-50%);
}
.subscription_table {
  /* Large price amounts */
}
.subscription_table tr.subscription-table__row--pricing td span[style*="font-size: 40px"],
.subscription_table tr.subscription-table__row--pricing td span[style*="font-size: 25px"] {
  font-weight: 700 !important;
  color: var(--fs-navy, #1B365D) !important;
}
.subscription_table {
  /* ── No-hover rows ── */
}
.subscription_table tr.subscription-table__row--no-hover:hover td {
  background: #fff;
}
.subscription_table tr.subscription-table__row--no-hover:hover div.middle {
  background: #fff;
}
.subscription_table {
  /* ── Blue accent row (supervisor credits / bulk) ── */
}
.subscription_table tr.subscription-table__row--blue-bg td {
  background: rgba(58, 107, 199, 0.08);
  border-bottom-color: rgba(58, 107, 199, 0.12);
}
.subscription_table tr.subscription-table__row--blue-bg:hover td {
  background: rgba(58, 107, 199, 0.12);
}
.subscription_table tr.subscription-table__row--blue-bg td a {
  color: var(--fs-dark-teal, #2A9D8F);
  font-weight: 600;
  text-decoration: none;
}
.subscription_table tr.subscription-table__row--blue-bg td a:hover {
  text-decoration: underline;
}
.subscription_table {
  /* ── Navy CTA row (trial / gift / modeling) ── */
}
.subscription_table tbody tr.subscription-table__row--navy-bg td {
  background: var(--fs-navy, #1B365D);
  color: #F2B95A;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.subscription_table tbody tr.subscription-table__row--navy-bg td a {
  color: #F2B95A;
  text-decoration: none;
  font-weight: 600;
}
.subscription_table tbody tr.subscription-table__row--navy-bg td a:hover {
  text-decoration: underline;
}
.subscription_table tbody tr.subscription-table__row--navy-bg td .btn-default {
  border-color: var(--fs-teal, #4ECDC4);
  color: var(--fs-teal, #4ECDC4);
}
.subscription_table tbody tr.subscription-table__row--navy-bg td .btn-default:hover {
  background: rgba(78, 205, 196, 0.15);
  border-color: var(--fs-teal, #4ECDC4);
  color: var(--fs-teal, #4ECDC4);
}
.subscription_table tbody tr.subscription-table__row--navy-bg td .btn-primary {
  background: var(--fs-teal, #4ECDC4);
  color: var(--fs-navy, #1B365D);
  font-weight: 700;
}
.subscription_table tbody tr.subscription-table__row--navy-bg td .btn-primary:hover {
  background: #2A9D8F;
  color: #fff;
}
.subscription_table tr.subscription-table__row--navy-bg:hover td {
  background: #243F6B;
  color: #F2B95A;
}
.subscription_table tr.subscription-table__row--navy-bg:hover td a {
  color: #F2B95A;
}

/* ── Subscription form card layout (replaces table on subscription-form) ── */
form.row.subscription-form-with-cards {
  width: 100%;
  max-width: 960px;
}

/* ── Subscribe modal: pricing card grid (modern) ─────────────
   Each card is now an elevated rounded tile that mirrors the
   boards-page .md-card aesthetic: white vertical gradient
   surface, hairline border, navy-tinted bottom border for
   weight, soft shadow, hover lift. Replaces the legacy flat
   table look (flush border-left dividers, dense 16/20 padding,
   colored stripe rows) that competed with .la-about-glass-card. */
.subscription-form-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.subscription-form-card {
  display: flex;
  flex-direction: column;
  border: none;
}
.subscription-form-card:first-child {
  border-left: none;
}

/* Override .la-about-glass-card from dark-theme landing variant to
   light-theme modal variant (still scoped to subscription form). */
.subscription-form-cards .la-about-glass-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.95));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  border-bottom: 2px solid rgba(27, 54, 93, 0.1);
  border-radius: 16px;
  padding: 24px 22px 0;
  box-shadow: 0 6px 24px rgba(27, 54, 93, 0.06), 0 1px 3px rgba(27, 54, 93, 0.04);
  transform: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  overflow: hidden;
}
.subscription-form-cards .la-about-glass-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #fff, rgb(245, 248, 252));
  box-shadow: 0 12px 32px rgba(27, 54, 93, 0.12), 0 2px 6px rgba(27, 54, 93, 0.06);
}

.subscription-form-cards .la-about-glass-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.subscription-form-cards .la-about-glass-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(76, 134, 216, 0.12);
  color: #1B365D;
}
.subscription-form-cards .la-about-glass-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.subscription-form-cards .la-about-glass-card__icon--communicator {
  background: rgba(44, 82, 130, 0.1);
  color: #2c5282;
}

.subscription-form-cards .la-about-glass-card__icon--supporter {
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
}

.subscription-form-cards .la-about-glass-card__icon--eval {
  background: rgba(107, 114, 128, 0.14);
  color: #6B7280;
}

.subscription-form-cards .la-about-glass-card__title {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  margin: 0;
  text-align: center;
}

.subscription-form-cards .la-about-glass-card__text {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  line-height: 1.55;
  margin: 0 0 4px;
  text-align: center;
}
.subscription-form-cards .la-about-glass-card__text strong {
  color: var(--md-ink, #111A2E);
}

/* la-pricing-card (centered column inside each glass card) */
.subscription-form-cards .la-pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: none;
  transition: none;
  flex: 1;
}
.subscription-form-cards .la-pricing-card:hover {
  transform: none;
}

.subscription-form-cards .la-pricing-card__prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 14px 0;
  padding: 14px 0;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.subscription-form-cards .la-pricing-card__price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subscription-form-cards .la-pricing-card__amount {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.subscription-form-cards .la-pricing-card__currency {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  vertical-align: middle;
  margin-right: 1px;
}

.subscription-form-cards .la-pricing-card__term {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
  margin-top: 4px;
}

.subscription-form-cards .la-pricing-card__or {
  font-size: 13px;
  color: rgba(55, 65, 81, 0.5);
  padding: 4px 0;
}

/* Sale badge — used for "sale! 50% off" / "save 25%" */
.subscription-form-cards .la-pricing-card .sale {
  display: inline-block;
  background: linear-gradient(135deg, #2A9D8F 0%, rgb(33.3889447236, 124.8110552764, 113.6814070352) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Strikethrough price (when sale active) */
.subscription-form-cards .la-pricing-card__amount span[style*=line-through] {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  margin-right: 6px;
}

/* Features list — clean rows with hairline dividers */
.subscription-form-cards .la-pricing-card__features {
  list-style: none;
  margin: 6px 0 14px;
  padding: 0;
  text-align: left;
  width: 100%;
  font-size: 14px;
  line-height: 1.45;
  color: var(--md-ink, #111A2E);
}
.subscription-form-cards .la-pricing-card__features li {
  padding: 10px 0;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.06));
}
.subscription-form-cards .la-pricing-card__features li:last-child {
  border-bottom: none;
}

/* "Cloud extras" inline-link/button inside features */
.subscription-form__cloud-extras-link {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: #1A7B7A;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.subscription-form__cloud-extras-link:hover {
  border-bottom-color: #1A7B7A;
}

/* Card body — plan-select buttons row + sub-rows. Pulled to the
   card's edges so backgrounds (sub-rows, navy-bg) extend full-width. */
.subscription-form-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 -22px;
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  background: transparent;
}

.subscription-form-cards .subscription-form-card--communicator .subscription-form-card__body,
.subscription-form-cards .subscription-form-card--supporter .subscription-form-card__body,
.subscription-form-cards .subscription-form-card--eval .subscription-form-card__body {
  background: transparent;
}

/* Plan-select buttons row (one per card) */
.subscription-form-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  background: transparent;
}
.subscription-form-card__buttons > div {
  flex: 1;
  min-width: 110px;
}

.subscription-form-card__buttons button,
.subscription-form-cards button[rel=monthly],
.subscription-form-cards button[rel=long_term],
.subscription-form-cards button[rel=slp_paid],
.subscription-form-cards button[rel=eval_paid] {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 999px;
  /* Canonical modern action button palette — same as
     .md-btn--primary (rgba dusty-denim 0.3 + navy text). */
  background: rgba(76, 134, 216, 0.3);
  border: 1.5px solid rgba(76, 134, 216, 0.22);
  color: #1B365D;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.subscription-form-card__buttons button b,
.subscription-form-cards button[rel=monthly] b,
.subscription-form-cards button[rel=long_term] b,
.subscription-form-cards button[rel=slp_paid] b,
.subscription-form-cards button[rel=eval_paid] b {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
.subscription-form-card__buttons button:hover:not(:disabled),
.subscription-form-cards button[rel=monthly]:hover:not(:disabled),
.subscription-form-cards button[rel=long_term]:hover:not(:disabled),
.subscription-form-cards button[rel=slp_paid]:hover:not(:disabled),
.subscription-form-cards button[rel=eval_paid]:hover:not(:disabled) {
  background: rgba(76, 134, 216, 0.45);
  border-color: rgba(76, 134, 216, 0.35);
  box-shadow: 0 4px 14px rgba(76, 134, 216, 0.15);
  transform: translateY(-1px);
}
.subscription-form-card__buttons button,
.subscription-form-cards button[rel=monthly],
.subscription-form-cards button[rel=long_term],
.subscription-form-cards button[rel=slp_paid],
.subscription-form-cards button[rel=eval_paid] {
  /* Selected plan (Subscription.update_classes adds .active / .btn-primary).
     Bumps to a stronger denim wash so the chosen plan reads as committed
     without leaving the action-button palette. */
}
.subscription-form-card__buttons button.active, .subscription-form-card__buttons button.btn-primary,
.subscription-form-cards button[rel=monthly].active,
.subscription-form-cards button[rel=monthly].btn-primary,
.subscription-form-cards button[rel=long_term].active,
.subscription-form-cards button[rel=long_term].btn-primary,
.subscription-form-cards button[rel=slp_paid].active,
.subscription-form-cards button[rel=slp_paid].btn-primary,
.subscription-form-cards button[rel=eval_paid].active,
.subscription-form-cards button[rel=eval_paid].btn-primary {
  background: rgba(76, 134, 216, 0.65);
  border-color: rgba(76, 134, 216, 0.55);
  color: #1B365D;
  box-shadow: 0 6px 18px rgba(76, 134, 216, 0.3);
}
.subscription-form-card__buttons button.active b, .subscription-form-card__buttons button.btn-primary b,
.subscription-form-cards button[rel=monthly].active b,
.subscription-form-cards button[rel=monthly].btn-primary b,
.subscription-form-cards button[rel=long_term].active b,
.subscription-form-cards button[rel=long_term].btn-primary b,
.subscription-form-cards button[rel=slp_paid].active b,
.subscription-form-cards button[rel=slp_paid].btn-primary b,
.subscription-form-cards button[rel=eval_paid].active b,
.subscription-form-cards button[rel=eval_paid].btn-primary b {
  color: #1B365D;
  font-weight: 800;
}
.subscription-form-card__buttons button .subscription-currency-us,
.subscription-form-cards button[rel=monthly] .subscription-currency-us,
.subscription-form-cards button[rel=long_term] .subscription-currency-us,
.subscription-form-cards button[rel=slp_paid] .subscription-currency-us,
.subscription-form-cards button[rel=eval_paid] .subscription-currency-us {
  font-size: 10px;
  font-weight: 500;
  color: inherit;
  opacity: 0.75;
}

/* Sub-rows (premium symbols, supervisor credits, navy/gift-trial) */
.subscription-form-card__row {
  padding: 12px 18px;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  font-size: 13px;
  line-height: 1.45;
  color: var(--md-ink, #111A2E);
}
.subscription-form-card__row:empty {
  display: none;
}

.subscription-form-card__row.subscription-table__row--light-gray-bg {
  background: rgba(107, 114, 128, 0.05);
}
.subscription-form-card__row.subscription-table__row--light-gray-bg label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

.subscription-form-card__row.subscription-table__row--blue-bg {
  background: rgba(76, 134, 216, 0.06);
}
.subscription-form-card__row.subscription-table__row--blue-bg a {
  color: #1A7B7A;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.subscription-form-card__row.subscription-table__row--blue-bg a:hover {
  border-bottom-color: #1A7B7A;
}
.subscription-form-card__row.subscription-table__row--blue-bg .text-muted {
  color: #6B7280;
  font-style: italic;
}

/* Navy CTA row at bottom of each card — gift code, trial button,
   modeling-only link. Grounds the card with a brand-color base. */
.subscription-form-card__row.subscription-table__row--navy-bg {
  margin-top: auto;
  margin: auto -22px -1px -22px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #1B365D 0%, rgb(21.2625, 42.525, 73.2375) 100%);
  color: #fff;
  border: none;
  border-radius: 0;
  text-align: center;
}
.subscription-form-card__row.subscription-table__row--navy-bg a {
  color: #F2B95A;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.subscription-form-card__row.subscription-table__row--navy-bg a:hover {
  border-bottom-color: #F2B95A;
}
.subscription-form-card__row.subscription-table__row--navy-bg {
  /* Trial pill on dark bg flips to white surface */
}
.subscription-form-card__row.subscription-table__row--navy-bg .subscribe-trial-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  color: #1B365D;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.subscription-form-card__row.subscription-table__row--navy-bg .subscribe-trial-btn:hover {
  background: #fff;
  color: #1B365D;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.subscription-form-card__row.subscription-table__row--navy-bg {
  /* Gift code input + Check button */
}
.subscription-form-card__row.subscription-table__row--navy-bg .form-control {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #1B365D;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
}
.subscription-form-card__row.subscription-table__row--navy-bg .btn {
  border-radius: 10px;
  background: #F2B95A;
  color: #1B365D;
  border: none;
  font-weight: 600;
  padding: 10px 14px;
}
.subscription-form-card__row.subscription-table__row--navy-bg .btn:hover {
  background: rgb(239.7651685393, 172.9662921348, 61.6348314607);
  color: #1B365D;
}

/* Premium-symbol image (LessonPix/PCS preview) */
.subscription-form__premium-symbol-image {
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  flex-shrink: 0;
}

/* Bulk purchase explainer card */
.subscription-form-with-cards .form-group:has(.glyphicon-paperclip) {
  margin-top: 24px;
}
.subscription-form-with-cards .form-group:has(.glyphicon-paperclip) p {
  background: rgba(242, 185, 90, 0.08);
  border: 1px solid rgba(242, 185, 90, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--md-ink, #111A2E);
}
.subscription-form-with-cards .form-group:has(.glyphicon-paperclip) .glyphicon-paperclip {
  color: #F2B95A;
  font-size: 22px !important;
  margin: 2px 12px 0 0 !important;
}

/* Expiration-notes explanation block */
.subscribe-modal-body .explanation {
  max-width: 60ch;
  margin: 16px auto 0 !important;
  padding: 12px 18px;
  background: rgba(107, 114, 128, 0.06);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
  text-align: center;
}

/* Trial-choice rare 2-button mode (trial vs purchasing) */
.subscription-form-trial-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.subscription-form-trial-choice__btn {
  min-height: 90px;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.subscription-form-trial-choice__btn--trial {
  background: #fff;
  border: 1.5px solid var(--md-line, rgba(17, 26, 46, 0.15));
  color: var(--md-ink, #111A2E);
}
.subscription-form-trial-choice__btn--trial:hover {
  background: #F8F9FA;
  border-color: rgba(17, 26, 46, 0.25);
  transform: translateY(-1px);
}

.subscription-form-trial-choice__btn--pricing {
  /* Modern action-button palette (.md-btn--primary) — dusty
     denim wash with navy text, slightly stronger than the
     plan-select rest state since this is the primary choice. */
  background: rgba(76, 134, 216, 0.6);
  border: 1.5px solid rgba(76, 134, 216, 0.55);
  color: #1B365D;
  box-shadow: 0 6px 18px rgba(76, 134, 216, 0.28);
}
.subscription-form-trial-choice__btn--pricing:hover {
  background: rgba(76, 134, 216, 0.75);
  border-color: rgba(76, 134, 216, 0.7);
  box-shadow: 0 8px 24px rgba(76, 134, 216, 0.38);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .subscription-form-trial-choice {
    grid-template-columns: 1fr;
  }
}
/* Stack cards on narrow viewports */
.skinny_subscription .subscription-form-cards {
  grid-template-columns: 1fr;
}

@media (max-width: 950px) {
  .subscription-form-cards {
    grid-template-columns: 1fr;
  }
}
/* ── Activate row (hero CTA + secondary actions) ─────────────
   Replaces the old white outlined activate button + cramped
   trial link with a hero pill gradient + softer outlined
   secondary actions. */
.subscription-activate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
}

/* Hero activate CTA — strongest variant of the canonical
   .md-btn--primary action-button palette (dusty-denim + navy).
   Stays on-brand with the plan-select pills but uses a 60%
   fill + thicker border + stronger shadow to read as the
   primary action of the modal. */
.subscription-activate-btn {
  flex: 1 1 280px;
  max-width: 480px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(76, 134, 216, 0.55) !important;
  background: rgba(76, 134, 216, 0.6) !important;
  color: #1B365D !important;
  box-shadow: 0 8px 24px rgba(76, 134, 216, 0.28) !important;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.subscription-activate-btn:hover:not(:disabled) {
  background: rgba(76, 134, 216, 0.75) !important;
  border-color: rgba(76, 134, 216, 0.7) !important;
  box-shadow: 0 12px 32px rgba(76, 134, 216, 0.38) !important;
  transform: translateY(-1px);
}

.subscription-activate-btn__heading-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.subscription-activate-btn__heading {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.01em;
}

.subscription-activate-btn__arrow {
  color: #1B365D;
  font-size: 18px;
}

.subscription-activate-btn__icon {
  color: #1B365D;
}

.subscription-activate-btn__discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.subscription-activate-btn__discount .subscription-activate-btn__icon {
  color: #1B365D;
}

.subscription-activate-btn__price {
  color: rgba(27, 54, 93, 0.88);
  font-size: 13px;
  font-weight: 500;
}

.subscription-activate-btn__paren {
  color: rgba(27, 54, 93, 0.78);
  font-weight: 600;
}

.subscription-activate-btn__paying-line {
  color: #1B365D;
  font-weight: 600;
}

.subscription-activate-btn__subtext {
  display: block;
  margin-top: 4px;
  color: rgba(27, 54, 93, 0.75);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
}

/* Secondary actions in activate row (trial link, cancel, reload, log out, need-more-time) */
.subscription-activate-row .subscribe-trial-btn {
  flex: 0 1 auto;
  margin-left: 0;
  font-size: 14px;
  background: transparent;
  color: var(--md-muted, #1B365D);
  border: 1.5px solid var(--md-line, rgba(17, 26, 46, 0.15));
  box-shadow: none;
}
.subscription-activate-row .subscribe-trial-btn:hover {
  background: rgba(27, 54, 93, 0.05);
  color: var(--md-ink, #111A2E);
  border-color: rgba(27, 54, 93, 0.35);
  box-shadow: none;
  transform: translateY(-1px);
}

.subscription-activate-row > .btn,
.subscription-activate-row > a:not(.subscribe-trial-btn) {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--md-line, rgba(17, 26, 46, 0.15));
  color: var(--md-muted, #1B365D);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.subscription-activate-row > .btn:hover,
.subscription-activate-row > a:not(.subscribe-trial-btn):hover {
  background: rgba(27, 54, 93, 0.05);
  border-color: rgba(27, 54, 93, 0.35);
  color: var(--md-ink, #111A2E);
  text-decoration: none;
}

/* Supporter / Eval secondary states */
.subscription-form-card .semi_dim {
  opacity: 0.85;
}

.subscription-form-cards .subscription-table__cloud-extras-right a[href*="blog.mylingolinq.com"],
.subscription-form-cards a[href*="blog.mylingolinq.com"] {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}

.subscription-form-cards a[href*="blog.mylingolinq.com"]:hover {
  border-bottom-color: var(--fs-dark-teal, #2A9D8F);
}

/* Applied in: speak-menu component - speak options dropdown */
/* ── Modern Speak Menu ─────────────────────────────────── */
.modal-content:has(.md-speak-menu) {
  border-radius: 20px;
  border: none;
  overflow: hidden;
  background: #ffffff;
}

.md-speak-menu {
  padding: 16px 20px 12px !important;
  font-size: 16px;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
}

/* Header */
.md-speak-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.15);
}

.md-speak-menu__title {
  font-size: 1.25rem; /* 20px — meets AAC ~30% larger than web default */
  font-weight: 700;
  color: #1B365D;
}

.md-speak-menu__close {
  width: 44px; /* WCAG 2.5.5 — minimum touch target 44×44 */
  height: 44px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(27, 54, 93, 0.05);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  padding: 0;
}

.md-speak-menu__close:hover {
  background: rgba(27, 54, 93, 0.1);
  color: #374151;
  transform: scale(1.05);
}

/* Sections */
.md-speak-menu__section {
  margin-bottom: 20px;
}

.md-speak-menu__section--punctuation {
  /* Punctuation is the FIRST section now — separator sits UNDERNEATH it. */
  border-bottom: 1px solid rgba(27, 54, 93, 0.15);
  padding-bottom: 16px;
}

.md-speak-menu__section-label {
  font-size: 1rem; /* 16px — large enough with uppercase treatment */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.85); /* ~7.8:1 contrast on white — passes AAA */
  margin-bottom: 8px;
  padding-left: 2px;
}

/* Button rows */
.md-speak-menu__row {
  display: grid;
  gap: 8px;
}

.md-speak-menu__row--1 {
  grid-template-columns: 1fr;
}

.md-speak-menu__row--2 {
  grid-template-columns: repeat(2, 1fr);
}

.md-speak-menu__row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.md-speak-menu__row--5 {
  grid-template-columns: repeat(5, 1fr);
}

.md-speak-menu__row--locale {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

/* Speak menu: board tools (speak mode + languages) above main actions */
.md-speak-menu__section-wrap--board-tools {
  border-bottom: 1px solid rgba(27, 54, 93, 0.15);
  margin-bottom: 16px;
  padding-bottom: 4px;
}

/* No separator beneath this wrap — used on the Speak Mode section (the LAST
   section), so there's no divider line trailing the bottom of the modal. */
.md-speak-menu__section-wrap--no-divider {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.md-speak-menu__btn--text-row {
  min-height: 52px;
  justify-content: center;
  padding: 12px 10px;
}

.md-speak-menu__btn--locale-chip {
  min-height: 48px;
  padding: 10px 8px;
}

.md-speak-menu__btn-label--locale {
  font-size: 1rem; /* 16px — meets WCAG AA body text, bold compensates for slightly under 18px */
  line-height: 1.35;
  font-weight: 600;
  word-break: break-word;
}

/* Individual buttons */
.md-speak-menu__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  cursor: pointer;
  text-align: center;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: #E9EBED;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  color: #1B365D;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.md-speak-menu__btn:hover {
  background: #F2F3F5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.md-speak-menu__btn:active {
  background: #DFE1E4;
  transform: scale(0.97);
}

.md-speak-menu__btn svg {
  flex-shrink: 0;
  /* Flat duotone base: every icon's primary shapes are AA-contrast teal; accent
     paths set their own stroke="#46505F" (charcoal) inline. Uses the AA token
     ($brand-verdigris-aa, 4.73:1 on white) rather than the dashboard's #2A9D8F
     so the icons clear WCAG 1.4.11 on the grey speak-menu button background.
     (Per-path stroke attrs win over this inherited value.) */
  stroke: #1A7B7A;
}

.md-speak-menu__btn-label {
  font-size: 1.125rem; /* 18px — AAC requirement */
  font-weight: 600;
  line-height: 1.35;
  color: #374151;
}

.md-speak-menu__badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: #C0392B;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
}

.md-speak-menu__punctuation {
  font-size: 42px;
  line-height: 36px;
  display: block;
  color: #374151;
  font-weight: 700;
}

.md-speak-menu__punctuation--sm {
  font-size: 22px;
  line-height: 28px;
}

#menu_punctuation_button .md-speak-menu__punctuation--sm {
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bottom actions */
.md-speak-menu__bottom {
  padding-top: 8px;
  margin-top: 4px;
}

.md-speak-menu__bottom-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  transition: background 0.12s ease;
  text-align: left;
}

.md-speak-menu__bottom-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.md-speak-menu__bottom-btn--remember {
  color: #2A9D8F;
  font-weight: 600;
}

.md-speak-menu__bottom-btn--action {
  /* WCAG AA fix — was $brand-dusty-denim on white = 3.49:1. */
  color: #2860C9;
  font-weight: 600;
}

.md-speak-menu__bottom-btn--remembered {
  font-size: 14px;
  color: #374151;
}

.md-speak-menu__bottom-btn--remembered .md-speak-menu__remembered-text {
  font-size: 16px;
  font-weight: 600;
  color: #1B365D;
}

.md-speak-menu__bottom-btn svg {
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
}

/* Legacy list fallback */
.md-speak-menu__legacy-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.md-speak-menu__legacy-list li {
  padding: 0;
}

.md-speak-menu__legacy-list a {
  display: block;
  padding: 12px 16px;
  color: #1B365D;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.12s ease;
}

.md-speak-menu__legacy-list a:hover {
  background: rgba(42, 157, 143, 0.06);
}

.md-speak-menu__legacy-context {
  padding: 12px 16px 4px;
  font-size: 14px;
  color: rgba(75, 78, 92, 0.55);
}

@media (max-width: 768px) {
  .md-speak-menu__row--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Keep old #speak_menu selector for backward compat with button-listener IDs */
#speak_menu .row {
  width: 100%;
  margin: 0;
}
#speak_menu .speak_menu_button {
  height: 80px;
  padding: 10px 0;
  border: 1px solid #000;
  font-size: 14px;
  text-align: center;
}
#speak_menu .speak_menu_button .glyphicon {
  font-size: 40px;
  display: block;
  margin-bottom: 9px;
}
#speak_menu .speak_menu_button {
  cursor: pointer;
}
#speak_menu .speak_menu_button:hover {
  background: #444;
  color: #eee;
}

.share_buttons .btn {
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
}
.share_buttons .btn .glyphicon {
  font-size: 60px;
  display: block;
  margin-bottom: 5px;
  margin-top: -3px;
}
.share_buttons .btn img {
  height: 60px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  margin-top: -3px;
  object-fit: contain;
  object-position: center;
}

.repair_buttons .btn {
  font-size: 14px;
  width: 100px;
}
.repair_buttons .btn .glyphicon {
  font-size: 40px;
  display: block;
  margin-bottom: 5px;
}
.repair_buttons .btn img {
  height: 40px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  object-fit: contain;
  object-position: center;
}

.part_of_speech_box {
  display: inline-block;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-bottom: -5px;
}
.part_of_speech_box.conjunction {
  border-color: #ccc;
  background-color: #fff;
}
.part_of_speech_box.pronoun {
  background-color: #ffa;
  border-color: #ffff11;
}
.part_of_speech_box.verb {
  background-color: #cfa;
  border-color: #70ff11;
}
.part_of_speech_box.noun, .part_of_speech_box.nominative {
  background-color: #fca;
  border-color: #ff7011;
}
.part_of_speech_box.adjective {
  background-color: #acf;
  border-color: #1170ff;
}
.part_of_speech_box.question {
  background-color: #caf;
  border-color: #7011ff;
}
.part_of_speech_box.negation, .part_of_speech_box.interjection, .part_of_speech_box.expletive {
  background-color: #faa;
  border-color: #ff1111;
}
.part_of_speech_box.preposition {
  background-color: #fac;
  border-color: #ff1170;
}
.part_of_speech_box.adverb {
  background-color: #ca8;
  border-color: #835d38;
}
.part_of_speech_box.article {
  background-color: #ccc;
  border-color: #808080;
}
.part_of_speech_box.unknown {
  background-color: #fff;
  border-color: #ccc;
}

.time_block_rows .time_block {
  float: left;
  display: block;
  width: calc(2% + 1px);
  overflow: hidden;
  margin-left: -1px;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
}
.time_block_rows .time_block:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 100px solid #fff;
  width: 0px;
  height: 100px;
}
.time_block_rows .time_block:nth-child(2n+2) {
  border-left-color: #aaa;
}
.time_block_rows .time_block:nth-child(49) {
  border-right-color: #aaa;
}
.time_block_rows .time_block.level_10:before {
  border-left-color: #428bca !important;
}
.time_block_rows .time_block.level_9:before {
  border-left-color: #428bca !important;
}
.time_block_rows .time_block.level_8:before {
  border-left-color: #5195cf !important;
}
.time_block_rows .time_block.level_7:before {
  border-left-color: #60a0d6 !important;
}
.time_block_rows .time_block.level_6:before {
  border-left-color: #71ade0 !important;
}
.time_block_rows .time_block.level_5:before {
  border-left-color: #84b7e3 !important;
}
.time_block_rows .time_block.level_4:before {
  background: #9ac7ed !important;
}
.time_block_rows .time_block.level_3:before {
  border-left-color: #a8ceed !important;
}
.time_block_rows .time_block.level_2:before {
  border-left-color: #bddaf3 !important;
}
.time_block_rows .time_block.level_1:before {
  border-left-color: #d7e8f7 !important;
}
.time_block_rows .time_block_top {
  float: left;
  text-align: center;
  width: 4%;
  color: #aaa;
}
.time_block_rows .time_block_left {
  float: left;
  width: 4%;
  color: #aaa;
  overflow: hidden;
}
.time_block_rows .time_block_row {
  margin-bottom: -1px;
}
.time_block_rows .time_block_row:hover .time_block_left {
  color: #444;
  font-weight: bold;
}
.time_block_rows .time_block_row:hover .time_block {
  border-top-color: #aaa;
}
.time_block_rows .time_block_row:hover + .time_block_row .time_block {
  border-top-color: #aaa;
}
.time_block_rows .time_block_row:last-child:hover .time_block {
  border-bottom-color: #aaa;
}
.time_block_rows.wider .time_block_row .face {
  opacity: 0.5;
}
.time_block_rows.wider .time_block_row:hover .face {
  opacity: 1;
}
.time_block_rows.wider .time_block_left {
  width: 16%;
  line-height: 30px;
}
.time_block_rows.wider .time_block_left .face {
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  background-image: url(/../images/faces.png);
  background-size: auto 35px;
}
.time_block_rows.wider .time_block_left .face.happy {
  background-position-x: -35px;
}
.time_block_rows.wider .time_block_left .face.neutral {
  background-position-x: -69px;
}
.time_block_rows.wider .time_block_left .face.sad {
  background-position-x: -103px;
}
.time_block_rows.wider .time_block {
  width: calc(6% + 1px);
  border-left-color: #eee;
  line-height: 35px;
}
.time_block_rows.wider .dates .time_block {
  color: #aaa;
  border: 0;
}
.time_block_rows.wider .dates .time_block:nth-child(2n+1) {
  visibility: hidden;
}

.weighted_word {
  color: #aaa;
  text-decoration: none;
}
.weighted_word.weight_10, .weighted_word.weight_9 {
  font-size: 19px;
  font-weight: bold;
  color: #444;
}
.weighted_word.weight_8, .weighted_word.weight_7 {
  font-size: 18px;
  font-weight: bold;
  color: #666;
}
.weighted_word.weight_6, .weighted_word.weight_5 {
  font-size: 16px;
  color: #666;
}
.weighted_word.weight_4, .weighted_word.weight_3 {
  font-size: 15px;
  color: #888;
}
.weighted_word.weight_0 {
  color: #eee;
}
.weighted_word:hover {
  cursor: pointer;
  color: #444;
}

.compare.table > tbody > tr > td {
  vertical-align: middle;
  text-align: center;
}
.compare.table > tbody > tr > td:first-child {
  text-align: left;
}

.user_select {
  box-shadow: inset 1px 1px 8px -2px #000;
}
.user_select:disabled {
  box-shadow: none;
}

.select-lg {
  height: 45px;
  font-size: 18px;
}

.board_hierarchy > ul {
  padding-left: 0;
}
.board_hierarchy ul {
  list-style-type: none;
  /* No list indent — every row (and thus every checkbox) starts at the same
     left edge. Hierarchy is shown by indenting each node's CONTENT by depth
     (.recursive-board__content), so all checkboxes line up in one column. */
  padding-left: 0;
  margin: 0;
}
.board_hierarchy .recursive-board__item {
  padding: 0;
  opacity: 0.65;
}
.board_hierarchy .recursive-board__item.selected {
  opacity: 1;
}
.board_hierarchy {
  /* The row (checkbox + toggle + label) is its OWN flex line so the nested
     <ul> stays a block below it — the checkbox/toggle/label line up while the
     children indent normally. */
}
.board_hierarchy .recursive-board__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 15px;
}
.board_hierarchy {
  /* The content (toggle + label) carries the depth indent via inline
     padding-left, leaving the checkbox before it fixed in a single column. */
}
.board_hierarchy .recursive-board__content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.board_hierarchy {
  /* Fixed-width toggle column (chevron for folders, empty for leaves) so leaf
     rows align with folder rows. */
}
.board_hierarchy .recursive-board__toggle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7683;
  text-decoration: none;
}
.board_hierarchy .recursive-board__chevron {
  transition: transform 0.15s ease;
}
.board_hierarchy .recursive-board__chevron--open {
  transform: rotate(90deg);
}
.board_hierarchy .recursive-board__label {
  min-width: 0;
  word-break: break-word;
}
.board_hierarchy {
  /* Modern custom checkbox (verdigris fill) — same treatment the board-privacy
     hierarchy already used, now shared by every board-hierarchy consumer. */
}
.board_hierarchy .recursive-board__check {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(27, 54, 93, 0.3);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.board_hierarchy .recursive-board__check:hover {
  border-color: rgba(42, 157, 143, 0.55);
}
.board_hierarchy .recursive-board__check:checked {
  background: #2A9D8F;
  border-color: #2A9D8F;
}
.board_hierarchy .recursive-board__check:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.board_hierarchy .recursive-board__check:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.5);
  outline-offset: 1px;
}
.board_hierarchy .recursive-board__check:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

span.hidden-xs {
  display: inline !important;
}

body:fullscreen {
  width: 100%;
  background: #fff;
}

body:-webkit-full-screen {
  width: 100%;
  background: #fff;
}

body:-moz-full-screen {
  width: 100%;
  background: #fff;
}

body:-ms-fullscreen {
  width: 100%;
  background: #fff;
}

@media (min-width: 1000px) {
  h1 span, h1 span.label {
    display: inline;
  }
  h1 span.label {
    left: -80px;
    top: 18px;
  }
  #secondary_title {
    display: none;
  }
}
@media (max-width: 1024px) {
  #index_boards_toggle {
    margin-left: -15px;
    padding-left: 15px;
    background-color: #f2d7b6;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  #content.index.with_user .main_columns {
    background-size: 50% !important;
    background-position: right !important;
    background-repeat: repeat-y !important;
  }
  footer .skinny_links {
    display: block;
  }
  footer .wide_links {
    display: none;
  }
  .skinny_bio {
    display: block;
  }
  .skinny_bio .dropdown-menu a.active {
    background-color: #f5f5f5;
  }
  .wide_bio {
    display: none;
  }
  .skinny-right {
    left: auto;
    right: 0;
  }
  .signup_links {
    visibility: hidden;
  }
  .flash {
    left: -webkit-calc(100% / 8);
    left: 12.5%;
    right: -webkit-calc(100% / 8);
    right: 12.5%;
  }
}
/* When More Resources dropdown is shown: keep left content, put dropdown on far right, hide language/privacy/terms */
@media (max-width: 1024px) {
  .page-footer:has(.skinny_links) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
  }
  .page-footer:has(.skinny_links) .wide_links {
    display: flex !important;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
    justify-content: flex-start;
  }
  .page-footer:has(.skinny_links) .wide_links .row {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    margin: 0;
  }
  .page-footer:has(.skinny_links) .wide_links .row > .col-sm-6 {
    width: auto !important;
    flex: 0 1 auto;
    white-space: nowrap;
    margin: 0;
    padding-left: 0;
    text-align: left;
  }
  .page-footer:has(.skinny_links) .wide_links .page-footer__app-name {
    display: inline !important;
    padding-bottom: 0;
  }
  .page-footer:has(.skinny_links) .wide_links .page-footer__right-links,
  .page-footer:has(.skinny_links) .wide_links .page-footer__right-icons {
    display: none !important;
  }
  .page-footer:has(.skinny_links) .skinny_links {
    display: block !important;
    margin-left: auto;
    padding-left: 1rem;
    padding-right: 20px;
  }
  /* Allow dropup menu to show above footer (authenticated index and modern-dashboard use same .page-footer) */
  .page-footer:has(.skinny_links) {
    overflow: visible;
  }
}
@media (max-width: 768px) {
  span.hidden-xs {
    display: none !important;
  }
  #index_boards_toggle {
    margin-left: -20px;
    padding-left: 20px;
  }
  #content.index.no_user, body.pretty_loader #loading_box {
    background-position: 0 top !important;
    background-size: auto 700px !important;
  }
  #content.index.with_user .main_columns {
    background-size: 100% !important;
    background-position: center !important;
    background-repeat: repeat !important;
  }
  #content.index.with_user .main_columns .col:first-child {
    background: #fff !important;
    border-bottom: 15px solid #e86060 !important;
  }
  #content.index.with_user .main_columns .middle_column {
    background: rgba(255, 255, 255, 0.8);
    margin-left: 0;
    margin-right: 0;
  }
  #content.index.with_user.new_index .main_columns .col:first-child {
    border-bottom-width: 20px !important;
  }
  #content.index.with_user.new_index .main_columns .new_pills li a {
    color: rgba(255, 255, 255, 0.8);
  }
  #content.index.with_user.new_index .main_columns .new_pills li.active a, #content.index.with_user.new_index .main_columns .new_pills li:focus-visible a {
    color: #fff;
  }
  #content.index .main_columns .col:first-child {
    margin: -11px -5px 10px !important;
  }
  #content.index .main_columns .col:first-child .wrapper {
    margin-left: -5px !important;
    margin-right: -5px !important;
    padding-top: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #content.index .main_columns .col:first-child .wrapper h2 {
    position: absolute !important;
    left: -1000px !important;
  }
  #content.index .main_columns .col:first-child .wrapper .left_links {
    margin-left: -10px;
    margin-right: -10px;
  }
  #content.index .main_columns .col:first-child .wrapper .left_links .list-group-item {
    border-right: 0;
    border-left: 0;
  }
  #content.index .main_columns .col:first-child .wrapper .left_links .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
  #content.index .main_columns .col:first-child .wrapper .left_links .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  #content.index .main_columns .col:first-child .wrapper .left_links .half_size {
    padding-top: 15px;
    height: 50px;
  }
  .time_block_rows .time_block_top:nth-child(2n+1) {
    visibility: hidden;
  }
  #identity .dropdown .dropdown-menu {
    font-size: 14px;
  }
  #identity .dropdown .dropdown-menu .big {
    font-size: 16px;
  }
  #sidebar {
    width: 75px;
  }
  #sidebar .sidebar_item {
    font-size: 14px;
  }
  table#pin td a,
  table#pin td button.pin-key {
    height: 40px;
    padding-top: 5px;
  }
  .flash {
    left: -webkit-calc(100% / 20);
    left: 5%;
    right: -webkit-calc(100% / 20);
    right: 5%;
  }
  .big_buttons .big_button {
    font-size: 18px;
  }
}
.really_skinny {
  display: none;
}

@media (max-width: 480px) {
  .not_pretty_skinny {
    display: none;
  }
}
@media (max-width: 460px) {
  .really_skinny {
    display: inline;
  }
  .not_really_skinny {
    display: none;
  }
  .dropdown .dropdown-menu.skinny_right {
    left: inherit;
    right: 0;
  }
  .dropdown .dropdown-menu.skinny_grid {
    left: -130px;
  }
}
@media (max-width: 550px) {
  #speak_mode_notification {
    display: none;
  }
}
@media (max-width: 550px) {
  #nav_updates {
    display: none;
  }
}
@media (max-width: 820px) and (min-width: 768px) {
  #nav_updates .label {
    display: none;
  }
}
@media (max-height: 500px) {
  table#pin td a,
  table#pin td button.pin-key {
    height: calc((100vh - 230px) / 4);
    padding-top: 0;
    line-height: calc((100vh - 230px) / 4);
    vertical-align: middle;
  }
}
@media print {
  .hide_print {
    display: none;
  }
}
/* Dashboard refresh styles to match reference */
/* Header, sidebar, footer palette */
/* ==========================================================================
   Lingoling – Modern Bento UI (ll-bento-*)
   Scoped styles for authenticated dashboard. All classnames use ll-bento-
   prefix to avoid conflicts with existing .btn, .content, .grid, .card,
   .tab, .search, .avatar, etc. used elsewhere in the project.
   Applied in: dashboard/authenticated-view.hbs
   ========================================================================== */
/* Main app shell wrapper - centers content, provides padding.
   Design tokens (--ll-bento-*) defined here for bento components. */
.ll-bento-app-shell {
  /* Bento design tokens - clean, modern color system */
  --ll-bento-bg: #dcdde0;
  --ll-bento-ink: #1e2430;
  --ll-bento-muted: rgba(30, 36, 48, 0.62);
  --ll-bento-card: rgba(255, 252, 250, 0.88);
  --ll-bento-card-strong: rgba(255, 255, 255, 0.92);
  --ll-bento-stroke: rgba(20, 24, 36, 0.08);
  --ll-bento-shadow-lg: 0 18px 50px rgba(19, 29, 56, 0.12);
  --ll-bento-shadow-md: 0 10px 28px rgba(19, 29, 56, 0.05);
  --ll-bento-shadow-sm: 0 6px 16px rgba(19, 29, 56, 0.06);
  --ll-bento-radius-xl: 28px;
  --ll-bento-radius-lg: 22px;
  --ll-bento-radius-md: 18px;
  --ll-bento-radius-sm: 14px;
  /* Primary: Teal → Blue → Indigo */
  --ll-bento-primary-1: #4ec5c8;
  --ll-bento-primary-2: #5fb8ff;
  --ll-bento-primary-3: #7b8cff;
  /* Secondary: Soft lavender / violet */
  --ll-bento-secondary: #b8a8d8;
  /* Functional: Green (success/speak), Coral (premium/attention) */
  --ll-bento-functional-green: #5cb88a;
  --ll-bento-functional-coral: #e88a7a;
  /* Animation easing */
  --ll-bento-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ll-bento-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Icon lighting - light direction 135deg (top-left), gloss, rim */
  --ll-bento-icon-gloss: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  --ll-bento-icon-rim: inset 1px 1px 0 rgba(255, 255, 255, 0.42);
  /* Content alignment - horizontal inset to match tab row edges */
  --ll-bento-content-inset: 4px;
  /* Unified material system - blur + inner light + counter shadow for depth consistency */
  --ll-bento-material-blur: 28px;
  --ll-bento-material-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                                       inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  --ll-bento-material-counter-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.035);
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-weight: 400;
  background: transparent; /* gradient on #content fills the content viewport */
}

/* Shell fills height only when NOT in footer layout (avoids min-height in cascade when bento-page-with-footer or :has(.page-footer)). */
#within_ember:not(.bento-page-with-footer):not(:has(.page-footer)) .ll-bento-app-shell {
  min-height: 100% !important;
}

/* Bento page with footer: override grid so app shell is flex; min-height: 0 so shell can shrink in flex chain. */
#within_ember.bento-page-with-footer #content .ll-bento-app-shell,
#within_ember:has(.page-footer) #content.index.with_user .ll-bento-app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important; /* override base .ll-bento-app-shell min-height: 100% !important so shell can shrink in flex chain */
  align-items: center;
  place-items: unset;
  justify-content: flex-start;
  width: 100%;
  padding-top: 48px;
  margin-top: 0;
}

/* Decorative blurred orbs in background */
.ll-bento-bg-orbs {
  position: absolute;
  inset: -80px;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.75;
}
.ll-bento-bg-orbs .ll-bento-orb {
  position: absolute;
  border-radius: 999px;
  transform: translateZ(0);
}
.ll-bento-bg-orbs .ll-bento-orb--a {
  width: 420px;
  height: 420px;
  left: 6%;
  top: 12%;
  background: radial-gradient(circle at 30% 30%, rgba(95, 199, 255, 0.38), transparent 58%), radial-gradient(circle at 70% 70%, rgba(123, 140, 255, 0.32), transparent 60%) !important;
}
.ll-bento-bg-orbs .ll-bento-orb--b {
  width: 520px;
  height: 520px;
  right: 4%;
  top: 18%;
  background: radial-gradient(circle at 35% 35%, rgba(67, 198, 195, 0.3), transparent 60%), radial-gradient(circle at 70% 70%, rgba(183, 155, 255, 0.28), transparent 58%) !important;
}
.ll-bento-bg-orbs .ll-bento-orb--c {
  width: 560px;
  height: 560px;
  left: 20%;
  bottom: 6%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 138, 122, 0.28), transparent 58%), radial-gradient(circle at 70% 70%, rgba(95, 199, 255, 0.22), transparent 60%) !important;
}

/* Celebration burst when authenticated index view first shows - runs once then holds still */
/* Celebration icon next to username after dismissing Getting Started */
.nav-header-welcome__celebration-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  animation: nav-header-celebration-bounce 0.6s ease-out 3 !important;
}

.nav-header-welcome__celebration-icon svg {
  display: block !important;
  color: var(--ll-celebration-accent, #78c3c6) !important;
}

@keyframes nav-header-celebration-bounce {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.9;
  }
}
/* Device-style container - frosted glass card effect.
   Use ll-bento-device-frame--wide for two-column dashboard layout. */
.ll-bento-device-frame {
  width: min(480px, 96vw);
  border-radius: 36px;
  padding: 16px 16px 0;
}
.ll-bento-device-frame--wide {
  width: 100%;
  max-width: 1200px;
  overflow: clip;
  overflow-clip-margin: 20px;
  padding-bottom: 0;
}
.ll-bento-device-frame {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.52) 0%, rgba(252, 253, 255, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--ll-bento-shadow-lg);
  backdrop-filter: blur(13.5px);
  -webkit-backdrop-filter: blur(13.5px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  position: relative;
}

/* Main content: overflow visible so bar can overflow into frame's overflow-clip-margin. */
.ll-bento-main-content {
  overflow: visible;
}

/* Scroll lives inside the frame so content is clipped to rounded bottom. */
.ll-bento-main-content > .col {
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
}

/* Top bar - brand, welcome, getting started, search, profile */
.ll-bento-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 12px;
  min-height: 90px;
  margin-top: 0;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: 36px 36px 0 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 253, 0.36) 100%);
  border-bottom: 1px solid #1b2a4a;
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), 0 8px 24px rgba(19, 29, 56, 0.12), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow) !important;
}

.ll-bento-bar__section {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.ll-bento-bar__brand {
  justify-content: flex-start;
  gap: 10px;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  margin-left: -2px;
}

.ll-bento-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: background 0.2s ease, color 0.2s ease;
  width: max-content;
  background: rgba(225, 228, 238, 0.98);
}
.ll-bento-brand-link:focus:not(:focus-visible) {
  outline: none;
}
.ll-bento-brand-link:hover {
  background: #fff;
  text-decoration: none;
}

.ll-bento-bar__brand-sep {
  color: inherit;
  opacity: 0.7;
  font-size: 14px;
  flex-shrink: 0;
  margin: 0 2px;
}

.ll-bento-bar__brand-home {
  font-size: 14px;
  font-weight: 600;
  color: #3A6BC7;
}

/* Reusable app navbar: when authenticated, match unauthenticated header (solid gradient from header); no separate bar background */
.app-navbar {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  min-height: var(--topbar-height) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  background: #F8F9FA !important;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08) !important;
  box-shadow: 0 6px 20px rgba(27, 54, 93, 0.18) !important;
  /* No overflow here: the identity dropdown must escape the navbar to render
     below it. Horizontal scroll protection lives on html/body globally. */
  min-width: 0 !important;
}

.app-navbar > *,
.app-navbar-authenticated-inner > * {
  min-width: 0;
}

/* When navbar is inside main header (#inner_header), fill the bar and let navbar provide the look */
#inner_header .app-navbar {
  width: 100% !important;
  box-sizing: border-box !important;
}

.header-index-with-dark-toggle #inner_header:has(.app-navbar) {
  width: 100% !important;
  min-width: 0 !important;
}

/* Board page: when navbar and board bar (speak or nav_header) are both present, stack them and use navy bar */
.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#speak),
.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#nav_header) {
  flex-direction: column !important;
  align-items: stretch !important;
}

.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#speak) .app-navbar,
.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#nav_header) .app-navbar {
  flex-shrink: 0 !important;
}

.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#speak) #speak,
.header-index-with-dark-toggle #inner_header:has(.app-navbar):has(#nav_header) #nav_header {
  flex-shrink: 0 !important;
  min-height: 56px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Authenticated main nav: same header style as unauthenticated (gradient, height, border) */
#within_ember > header.header-index-with-dark-toggle:has(.app-navbar) {
  background: linear-gradient(180deg, #263d5c 0%, #1b2a4a 40%, #0d1525 100%) !important;
  background-color: #1b2a4a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.08) !important;
  min-height: 70px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Authenticated pages (no board bar): header, inner_header, and navbar all 70px */
#within_ember > header.header-index-with-dark-toggle:not(.header--unauthenticated):has(.app-navbar):not(:has(#speak)):not(:has(#nav_header)) {
  height: 70px !important;
  min-height: 70px !important;
}

header.header-index-with-dark-toggle:not(.header--unauthenticated) #inner_header:not(:has(#speak)):not(:has(#nav_header)),
header.header-index-with-dark-toggle:not(.header--unauthenticated) #inner_header:not(:has(#speak)):not(:has(#nav_header)) .app-navbar,
header.header-index-with-dark-toggle:not(.header--unauthenticated) #inner_header:not(:has(#speak)):not(:has(#nav_header)) .app-navbar__inner {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}

header.header-index-with-dark-toggle:not(.header--unauthenticated) #inner_header .app-navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#within_ember > header.header-index-with-dark-toggle.header--unauthenticated:has(.app-navbar) {
  min-height: 82px !important;
}

/* Board page: header needs solid background so two-row bar is visible */
#within_ember > header.header-index-with-dark-toggle:has(#inner_header #speak),
#within_ember > header.header-index-with-dark-toggle:has(#inner_header #nav_header) {
  background: #1b2a4a !important;
  background-color: #1b2a4a !important;
}

.app-navbar__inner {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  white-space: normal !important; /* override header { white-space: nowrap } from header_sizing.scss */
}

.header--unauthenticated .app-navbar,
.header--unauthenticated .app-navbar__inner {
  min-height: 82px !important;
}

.header--unauthenticated .app-navbar {
  padding-bottom: 0 !important;
}

/* Single baseline for authenticated nav inner (index + modern-dashboard). Content and styling shared; Modern Dashboard link shown only on index via @showModernDashboardLink. */
.app-navbar .app-navbar-authenticated-inner {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

.app-navbar .app-navbar-auth-nav--mobile {
  display: none !important;
}

.app-navbar__nav-header {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin-right: 1.5rem !important;
}

.app-navbar #identity,
.app-navbar .identity-with-dark-toggle {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
}

/* Identity button in navbar: flat, no shadow */
.app-navbar #identity #identity_button {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #1B365D !important;
  font-weight: normal !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

.app-navbar #identity #identity_button::before,
.app-navbar #identity #identity_button::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.app-navbar #identity #identity_button:hover,
.app-navbar #identity #identity_button:focus-visible {
  background: rgba(255, 255, 255, 0.32) !important;
  background-image: none !important;
  color: #1B365D !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  /* Removed translateY(-2px) — the lift felt jumpy. Hover state
     now just shifts the white tint + border, no position change. */
  transform: none !important;
  filter: none !important;
}

.app-navbar .md-iconbtn__label {
  font-size: 14px; /* 20% smaller than 13px */
  align-items: center !important;
  gap: 2px !important;
}

.app-navbar .bento-dark-toggle-wrap {
  padding-left: 3rem !important;
  margin-left: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Modern Dashboard link: match unauthenticated nav font and color (.la-topbar-link: rgba(white, 0.7)) */
.app-navbar .ll-bento-help-btn--nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease !important;
}

.app-navbar .ll-bento-help-btn--nav:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

.app-navbar .ll-bento-help-btn--nav .ll-bento-help-btn__icon {
  color: rgba(255, 255, 255, 0.7) !important;
  flex-shrink: 0 !important;
}

.app-navbar .ll-bento-help-btn--nav:hover .ll-bento-help-btn__icon {
  color: #ffffff !important;
}

.app-navbar .ll-bento-help-btn--nav .ll-bento-help-btn__label {
  white-space: nowrap !important;
  font-size: 14px !important;
}

.app-navbar .ll-bento-help-btn--nav-icon-only {
  padding: 9px 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Full-size inner header (≥1201px, where the help button shows): tighten the
   right-cluster spacing — no left padding on the identity dropdown trigger, no
   horizontal padding on the help button, no right margin on the settings icon. */
@media (min-width: 1201px) {
  #inner_header #identity #identity_button {
    padding-left: 0 !important;
  }
  #inner_header .ll-bento-help-btn--nav-icon-only {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #inner_header .ll-header-settings-btn {
    margin-right: 0 !important;
  }
}
.app-navbar .ll-bento-help-btn--nav-icon-only .ll-bento-help-btn__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.app-navbar .ll-bento-help-btn--nav-icon-only:hover .ll-bento-help-btn__icon {
  color: #ffffff !important;
}

.app-navbar .ll-bento-help-btn--nav-icon-only .ll-bento-help-btn__nav-icon {
  display: block !important;
}

.app-navbar .ll-bento-help-btn--support {
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
}

.app-navbar .ll-bento-help-btn--support .ll-bento-help-btn__support-icon {
  width: 20px !important;
  height: 20px !important;
}

.app-navbar .ll-bento-help-btn--support .ll-bento-help-btn__support-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Upgrade button: match unauthenticated nav font and color (Lexend, rgba(white, 0.7)) */
.app-navbar .md-pillnav__upgrade-nav {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.app-navbar .md-pillnav__upgrade-nav:hover,
.app-navbar .md-pillnav__upgrade-nav:focus-visible {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px) !important;
}

.app-navbar .md-pillnav__upgrade-nav:active {
  transform: translateY(-2px) scale(var(--md-tap, 0.99)) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.app-navbar .app-navbar__beta-feedback-link {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  top: calc(14px + 0.5rem) !important;
  padding: 6px 14px !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #374151 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  z-index: 5 !important;
}

.app-navbar .app-navbar__beta-feedback-link svg {
  color: #46505F !important;
  flex-shrink: 0 !important;
}

/* Beta feedback hero: remove top margin */
#beta-feedback-hero {
  margin-top: 2rem !important;
  padding-top: 0 !important;
}

#beta-feedback-hero select.la-contact-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346505f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding: 12px 40px 12px 16px !important;
  border: 1px solid rgba(27, 54, 93, 0.15) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  width: 100% !important;
}

#beta-feedback-hero select.la-contact-input:hover {
  border-color: rgba(42, 157, 143, 0.4) !important;
}

#beta-feedback-hero select.la-contact-input:focus-visible {
  border-color: #2A9D8F !important;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12) !important;
  outline: none !important;
}

#beta-feedback-hero select.la-contact-input option {
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  background: #fff !important;
}

/* Beta feedback pill on the board page only (when nav_header board bar is showing) */
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link {
  padding: 6px 14px !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #374151 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

#inner_header:has(#nav_header) .app-navbar__beta-feedback-link svg {
  color: #46505F !important;
  flex-shrink: 0 !important;
}

#inner_header:has(#nav_header) .app-navbar__beta-feedback-link:hover,
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link:focus-visible {
  color: #1B365D !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
}

.app-navbar .app-navbar__beta-feedback-link:hover,
.app-navbar .app-navbar__beta-feedback-link:focus-visible {
  color: #1B365D !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
}

/* Viewport-gated header cluster visibility: show the original Beta feedback pill + Help + Settings
   buttons on wide viewports (>1200px), and the circular beta-only version on narrow viewports
   (<=1200px). The hide-on-wide rule has to beat the existing circular-beta rules which include
   #inner_header:has(#nav_header) and #identity prefixes — so prefix here matches theirs + adds
   .app-navbar__small-only for a strict specificity win. */
.app-navbar__small-only,
.app-navbar__beta-feedback-link.app-navbar__small-only,
.app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
#identity .app-navbar__beta-feedback-link.app-navbar__small-only,
#identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
#inner_header .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
.app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only {
  display: none !important;
}

@media (max-width: 1200px) {
  .app-navbar__large-only,
  #identity .app-navbar__large-only,
  #inner_header .app-navbar__large-only {
    display: none !important;
  }
  /* Higher-specificity hide for the full pill — the
     `#inner_header:has(#nav_header) .app-navbar__beta-feedback-link`
     rule at ~line 16503 sets `display: inline-flex !important` on
     all beta-feedback links inside the board-alt / board-detail
     header. That rule (specificity 1,1,0) was beating the global
     `.app-navbar__large-only` hide (0,1,0) and forcing the full pill
     visible alongside the circular β at ≤1200px on board-alt. This
     selector reaches (1,3,0) by stacking `--full` + `--large-only`
     class chains so the hide wins regardless of source order. */
  #inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--full.app-navbar__large-only,
  #inner_header .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--full.app-navbar__large-only,
  #identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--full.app-navbar__large-only,
  .app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--full.app-navbar__large-only {
    display: none !important;
  }
  .app-navbar__small-only,
  .app-navbar__beta-feedback-link.app-navbar__small-only,
  .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
  #identity .app-navbar__beta-feedback-link.app-navbar__small-only,
  #identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
  #inner_header .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
  #inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only,
  .app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular.app-navbar__small-only {
    display: inline-flex !important;
  }
  /* order: -1 no longer needed — beta lives in .app-navbar__quick-actions now
     and sits to the left of settings by DOM order. */
}
/* At ≥768px, the .app-navbar__quick-actions wrapper dissolves — its children
   (settings) flow as direct flex siblings, so no empty gap is reserved where
   the hidden circular beta used to be. Baseline nav flex layout applies. */
@media (min-width: 768px) {
  .app-navbar__quick-actions {
    display: contents !important;
  }
}
/* Phone/small-tablet navbar layout (≤767px) — three absolute-positioned groups
   so overlap is impossible regardless of content widths:
   [nav-header: logo+search]  [quick-actions: β + ⚙]  ...  [identity: avatar]
   Each group is vertically centered and pinned with explicit left/right. */
@media (max-width: 767px) {
  .app-navbar-authenticated-inner {
    position: relative !important;
    min-height: 56px !important;
    display: block !important; /* absolute children take themselves out of flex flow */
  }
  .app-navbar-authenticated-inner > .app-navbar__nav-header {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  .app-navbar-authenticated-inner > .app-navbar__quick-actions {
    position: absolute !important;
    left: 220px !important; /* right of nav-header's typical width (logo ~150 + search ~40 + gap) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .app-navbar-authenticated-inner > #identity,
  .app-navbar-authenticated-inner > .identity-with-dark-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  .app-navbar__quick-actions > .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/* Beta-feedback responsive behavior is uniform across all routes:
   - >1200px: full pill (`--large-only`) shown, circular β
     (`--small-only`) hidden
   - ≤1200px: full pill hidden, circular β shown
   The handling lives entirely in the @media (max-width: 1200px) block
   above (.app-navbar__large-only → display:none, .app-navbar__small-only
   → display:inline-flex). A prior non-board-alt exception that forced
   the full pill back on at 768-1200px was removed because the user
   wants the larger pill to disappear on smaller screens regardless
   of route — keeping only the circular β as the compact entry point. */
/* Header right-cluster spacing at ≤1200px on board-alt — fix the
   visual overlap reported between the circular β, the settings cog,
   and the identity avatar by giving each element comfortable gutter
   space. Prior margin-right: 4px on the β at line 16653 left the
   β and the settings cog (just below it in DOM order) tightly
   packed; the avatar circle on the right then crowded the β. This
   block bumps the β's left+right margins and adds breathing room to
   the settings cog so the trio reads as a properly-spaced cluster
   instead of three near-overlapping circles. Scoped to board-alt
   (and speak headers) so other routes' header layouts aren't
   touched. */
@media (max-width: 1200px) {
  #within_ember.board-alt-view #inner_header .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
  #within_ember.board-alt-view #inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
  #within_ember.board-alt-view #identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  /* Identity avatar button — give it a 6px left margin so the
     β + avatar don't touch when the layout flows tight. */
  #within_ember.board-alt-view #inner_header #identity_button.btn,
  #within_ember.board-alt-view #inner_header #identity > #identity_button.btn {
    margin-left: 6px !important;
  }
}
/* Identity dropdown menu — cap height + internal scroll so the menu
   doesn't get clipped at the viewport bottom on board-alt normal
   mode (where the page itself doesn't scroll). The menu contains
   8-12 items depending on permissions (My Account / My Boards /
   Settings / Messages / Help / Try New Style / LingoLinq / language /
   Beta feedback / View Beta Feedback admin / Database / About / …)
   and tall menus were running off the bottom edge with no way to
   reach the lower items. Scoped to the identity dropdown trigger
   so other dropdowns keep their natural sizing. */
.dropdown-menu[aria-labelledby=dLabel]:has(.dropdown-menu__try-new-style-item),
#identity_button + .dropdown-menu,
.dropdown:has(> #identity_button) > .dropdown-menu {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Exit Boards entry in the identity dropdown — hidden by default
   (the hamburger menu already has Exit Boards, and the full-size
   header has Done with Boards), surfaced only on board-alt-view at
   the narrow breakpoint where the user needs a secondary
   discoverability path. Rendered above My Account so it's the
   first actionable row when the dropdown opens. */
.dropdown-menu__exit-boards-item,
.dropdown-menu__exit-boards-divider {
  display: none !important;
}

@media (max-width: 1024px) {
  #within_ember.board-alt-view .dropdown-menu__exit-boards-item {
    display: list-item !important;
  }
  #within_ember.board-alt-view .dropdown-menu__exit-boards-divider {
    display: list-item !important;
  }
}
/* "Try New Style" dropdown item: mirrors the style-switcher icon on the navbar — the icon is shown
   on wide screens (>1200px), the dropdown item is shown on narrow screens (<=1200px). */
.dropdown-menu__try-new-style-item {
  display: none !important;
}

@media (max-width: 1200px) {
  .dropdown-menu__try-new-style-item {
    display: list-item !important;
  }
}
/* Help (support) icon: 25% larger than the 20px baseline — bumps to 25×25 to match the visual weight
   of the neighboring settings gear and beta pill in the header cluster. */
.ll-bento-help-btn--support .ll-bento-help-btn__support-icon,
.app-navbar .ll-bento-help-btn--support .ll-bento-help-btn__support-icon,
#inner_header .ll-bento-help-btn--support .ll-bento-help-btn__support-icon,
#identity .ll-bento-help-btn--support .ll-bento-help-btn__support-icon,
#inner_header:has(#nav_header) .ll-bento-help-btn--support .ll-bento-help-btn__support-icon {
  width: 25px !important;
  height: 25px !important;
}

/* Settings gear color: dark on light backgrounds (default), light on dark header backgrounds.
   Only board-detail (has #nav_header) and board-alt / speak mode (has #speak) have a dark
   inner_header. All other authenticated pages default to a light $surface-100 #inner_header
   (see line 1439), where the default dark navy color applies. */
header:has(#nav_header) .ll-header-settings-btn,
#inner_header:has(#speak) .ll-header-settings-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

header:has(#nav_header) .ll-header-settings-btn:hover,
header:has(#nav_header) .ll-header-settings-btn:focus,
#inner_header:has(#speak) .ll-header-settings-btn:hover,
#inner_header:has(#speak) .ll-header-settings-btn:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.app-navbar__beta-feedback-menu-item {
  display: none !important;
}

@media (max-width: 768px) {
  .app-navbar .app-navbar__beta-feedback-link,
  #inner_header .app-navbar__beta-feedback-link {
    display: none !important;
  }
  .app-navbar__beta-feedback-menu-item {
    display: list-item !important;
  }
}
/* Circular beta feedback button: compact circular shape displaying just the Greek beta (β) symbol
   instead of the word "Beta feedback". Used in the header action cluster where horizontal space is tight. */
.app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
#identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
.app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin-left: 0 !important;
  margin-right: 4px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 0 4px 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #46505F !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(27, 54, 93, 0.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

/* Create-board-new (preview iteration) trigger — mirrors the beta-feedback
   pill so the two sit side-by-side at the top center. Full pill on wide
   viewports; circular icon on narrow viewports. */
.app-navbar .app-navbar__create-board-new-link--full,
#inner_header:has(#nav_header) .app-navbar__create-board-new-link--full {
  position: fixed !important;
  top: calc(14px + 0.5rem) !important;
  left: 50% !important;
  margin-left: 110px !important;
  right: auto !important;
  padding: 6px 14px !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #374151 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  z-index: 5 !important;
}

.app-navbar .app-navbar__create-board-new-link--full svg,
#inner_header:has(#nav_header) .app-navbar__create-board-new-link--full svg {
  color: #46505F !important;
  flex-shrink: 0 !important;
}

.app-navbar .app-navbar__create-board-new-link--full:hover,
.app-navbar .app-navbar__create-board-new-link--full:focus-visible,
#inner_header:has(#nav_header) .app-navbar__create-board-new-link--full:hover,
#inner_header:has(#nav_header) .app-navbar__create-board-new-link--full:focus-visible {
  color: #1B365D !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
}

.app-navbar .app-navbar__create-board-new-link--circular,
#inner_header:has(#nav_header) .app-navbar__create-board-new-link--circular,
#identity .app-navbar__create-board-new-link--circular,
.app-navbar__create-board-new-link--circular {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #46505F !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(27, 54, 93, 0.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

.app-navbar .app-navbar__create-board-new-link--circular:hover,
.app-navbar .app-navbar__create-board-new-link--circular:focus-visible {
  color: #1B365D !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.app-navbar__create-board-new-link.app-navbar__small-only,
.app-navbar__create-board-new-link.app-navbar__create-board-new-link--circular.app-navbar__small-only {
  display: none !important;
}

@media (max-width: 1200px) {
  .app-navbar__create-board-new-link.app-navbar__small-only,
  .app-navbar__create-board-new-link.app-navbar__create-board-new-link--circular.app-navbar__small-only {
    display: inline-flex !important;
  }
}
@media (max-width: 768px) {
  .app-navbar .app-navbar__create-board-new-link--full,
  #inner_header .app-navbar__create-board-new-link--full {
    display: none !important;
  }
}
.app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular .app-navbar__beta-feedback-symbol {
  font-family: "Times New Roman", "Cambria", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
  color: inherit !important;
  transform: translateY(1px) !important;
}

.app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:hover,
.app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:focus-visible,
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:hover,
#inner_header:has(#nav_header) .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:focus-visible,
.app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:hover,
.app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular:focus-visible {
  color: #1B365D !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .app-navbar .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
  #inner_header .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular {
    display: none !important;
  }
}
/* Narrow viewports: push the beta circle + identity dropdown tighter together and further right,
   and lift the beta circle up from the header's bottom edge for a bit of breathing room.
   The flex items inside #identity justify to flex-end so they hug the right edge even when
   a min-width on #identity would otherwise leave empty space on its right side. */
@media (max-width: 1200px) {
  #identity,
  #identity.identity-with-dark-toggle {
    padding-right: 4px !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }
  #identity .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular,
  .app-navbar__beta-feedback-link.app-navbar__beta-feedback-link--circular {
    margin-right: -2px !important;
    margin-bottom: 0 !important;
  }
  #identity .dropdown,
  #identity > .dropdown {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  #identity #identity_button,
  #identity #identity_button.btn {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.app-navbar .header-unauth-nav {
  flex: 1 !important;
  min-width: 0 !important;
}

.app-navbar .header-unauth-right {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.app-navbar #header_search {
  display: inline-block !important;
  padding-left: 10px !important;
  margin-left: 18px !important;
}

.app-navbar #header_search .form-control {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.app-navbar #header_search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.app-navbar .header-search-wrap {
  position: relative !important;
  display: inline-block !important;
  width: 180px !important;
}

.app-navbar #header_search .header-search-input {
  padding-right: 36px !important;
  width: 100% !important;
}

.app-navbar #header_search .header-search-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
}

.app-navbar #header_search .header-search-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #ffffff !important;
}

.app-navbar #header_search .header-search-icon {
  pointer-events: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.app-navbar #header_search .header-search-btn:hover .header-search-icon {
  color: #ffffff !important;
}

.app-navbar__brand {
  margin: 0 !important;
  padding: 0 !important;
  height: var(--topbar-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}

/* Nav header brand inside app-navbar: same white text and logo as #nav_header */
.app-navbar .app-navbar__brand .nav-header__brand {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  height: var(--topbar-height) !important;
  gap: 2px !important;
}

.app-navbar .nav-header__logo-link,
.app-navbar .nav-header__app-name-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.app-navbar .nav-header__logo-link:hover,
.app-navbar .nav-header__app-name-link:hover {
  text-decoration: none !important;
  color: #ffffff !important;
}

.app-navbar .nav-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  width: auto !important;
  max-height: 30px !important;
  vertical-align: middle !important;
}

/* Logo size: match unauthenticated header */
.app-navbar .nav-header__logo img {
  padding-top: 0 !important;
  height: 30px !important;
  width: auto !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  object-fit: contain !important;
}

.app-navbar .nav-header__app-name-link {
  margin-left: 0 !important;
}

/* Brand app name: Maitree 25px, same colors as unauthenticated */
.app-navbar .nav-header__app-name {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  font-family: "Maitree", serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.app-navbar .nav-header__app-name-lingo,
.app-navbar .nav-header__app-name-linq {
  color: inherit !important;
  font-style: normal !important;
}

.app-navbar .nav-header__app-name-primary {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: rgb(158.8928571429, 179.4285714286, 201.6071428571) !important;
  font-style: normal !important;
}

.app-navbar .nav-header__app-name-accent {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #F2B95A !important;
  font-style: italic !important;
}

.ll-bento-bar__welcome {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  pointer-events: auto;
}

.ll-bento-bar-welcome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-weight: 400;
  color: rgba(31, 42, 68, 0.9);
}

.ll-bento-bar-welcome__label {
  font-weight: 500;
  color: rgba(31, 42, 68, 0.8);
}

.ll-bento-bar-welcome__link {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  font-weight: 600;
}

.ll-bento-bar-welcome__link:hover {
  color: #238a7e;
  text-decoration: underline;
}

.ll-bento-bar-welcome__badge {
  color: var(--fs-dark-teal, #2A9D8F);
  font-weight: 600;
}

.ll-bento-bar-welcome__celebration-icon {
  display: inline-flex;
  color: #2A9D8F;
}

.ll-bento-bar-welcome__celebration-icon svg {
  display: block;
}

.ll-bento-bar__search {
  justify-content: flex-end;
  flex: 0.5 1 0;
  min-width: 0;
}

.ll-bento-bar__actions {
  justify-content: flex-end;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 150px;
}

.ll-bento-bar__nav-link {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
}

.ll-bento-bar__nav-link:hover {
  color: #238a7e;
  text-decoration: underline;
}

/* Topbar icon buttons: same light bg as brand, white hover */
.ll-bento-bar .ll-bento-icon-btn {
  background: rgba(225, 228, 238, 0.98);
}

.ll-bento-bar .ll-bento-icon-btn:hover {
  background: #fff;
}

/* Refresh button icon (top arrow) uses brand green in all themes */
.ll-bento-bar .ll-bento-icon-btn--refresh .glyphicon,
.ll-bento-bar .ll-bento-icon-btn--refresh .glyphicon-refresh {
  color: #3d7a5c !important;
}

.ll-bento-dark-toggle {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--ll-bento-icon-gloss), rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ll-bento-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
  font-size: 18px;
  line-height: 1;
  color: var(--ll-bento-ink);
  padding: 0;
}
.ll-bento-dark-toggle:hover {
  background: var(--ll-bento-icon-gloss), rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--ll-bento-ink);
}
.ll-bento-dark-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.06), inset 0 2px 4px rgba(19, 29, 56, 0.04) !important;
}
.ll-bento-dark-toggle[aria-pressed=true] {
  color: rgba(255, 200, 100, 0.95);
}

/* Header/navbar - 10% darker navy (index/landing when logged in) */
#within_ember > header.header-index-with-dark-toggle {
  background: rgb(20.115, 40.23, 69.285) !important;
  background-color: rgb(20.115, 40.23, 69.285) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Light mode only: navigation bar – medium-dark blue to fit light scheme */
#within_ember.bento-light-mode-active > header.header-index-with-dark-toggle {
  background: #4A7BA7 !important;
  background-color: #4A7BA7 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Brand/logo/app-name styling lives under .app-navbar (single source for both authenticated view and modern-dashboard). */
/* Ensure light text on navy navbar overrides theme-specific colors */
/* Search form in navy header – rounded to match app styling */
.header-index-with-dark-toggle #header_search .form-control {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.header-index-with-dark-toggle #header_search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Unauthenticated header – subtle gradient (same navy family) ───────────── */
#within_ember > header.header--unauthenticated {
  background: #000 !important;
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  height: auto !important;
  min-height: 82px !important;
  overflow: visible !important;
}

/* Top navbar on landing (index/landing-alt): same bg as lightest hero gradient color */
#within_ember:has(#la-main) header.header--unauthenticated:has(.la-topbar-nav),
#within_ember:has(#la-main) header.header--unauthenticated:has(.la-topbar-nav) #inner_header {
  background: hsl(45, 15.3846153846%, 104.9019607843%) !important;
  background-color: hsl(45, 15.3846153846%, 104.9019607843%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.header--unauthenticated #inner_header {
  overflow: visible !important;
}

/* Brand area: match the landing .la-logo look */
.header--unauthenticated h1 {
  margin: 0 !important;
  line-height: 1 !important;
}

.header--unauthenticated .nav-header__brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.header--unauthenticated .nav-header__logo-link,
.header--unauthenticated .nav-header__app-name-link {
  margin: 0 !important;
}

.header--unauthenticated h1 .nav-header__logo img {
  height: 60px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
}

/* Inner header logo: 50% of default size */
#inner_header .nav-header__logo {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  margin-top: 5px !important;
  margin-left: 4rem !important;
}

#inner_header .nav-header__logo img {
  width: 100% !important;
  height: 100% !important;
}

#inner_header .app-navbar .nav-header__logo {
  width: auto !important;
  max-height: 45px !important;
  margin-top: 0 !important;
}

#inner_header .app-navbar .nav-header__logo img {
  width: 67px !important;
  height: 41px !important;
}

#inner_header .header--unauthenticated h1 .nav-header__logo img {
  height: 30px !important;
  width: auto !important;
}

/* App name in inner header: slightly lighter than black; Maitree 25px */
#inner_header .nav-header__app-name-link {
  color: #1a1a1a !important;
}

#inner_header .nav-header__app-name-primary,
#inner_header .nav-header__app-name-accent {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #1a1a1a !important;
}

#inner_header .nav-header__app-name-accent {
  font-style: normal !important;
}

#inner_header .nav-header__app-name-link:hover {
  color: #1a1a1a !important;
}

/* Inner header nav links: same color as nav-header__brand */
#inner_header .la-topbar-link {
  color: rgb(51.5, 51.5, 51.5) !important;
  font-weight: 500; /* $aac-font-weight-medium — defined later in file */
}
#inner_header .la-topbar-link:hover {
  color: rgb(51.5, 51.5, 51.5) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
#inner_header .la-topbar-link.active {
  color: rgb(51.5, 51.5, 51.5) !important;
}

#inner_header .nav-header__logo-link {
  color: #1a1a1a !important;
}

/* Identity button on all unauthenticated pages (landing, landing-alt, login, register, etc.): dark slate bg to match dropdown. Pill-shaped (not circular). */
#within_ember header.header--unauthenticated #identity #identity_button,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button {
  width: auto !important;
  min-width: unset !important;
  height: 42px !important;
  padding-left: 2.2rem !important;
  padding-right: 2.2rem !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  white-space: nowrap !important;
  background: #374151 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: normal !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
#within_ember header.header--unauthenticated #identity #identity_button:hover, #within_ember header.header--unauthenticated #identity #identity_button:focus-visible,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button:hover,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button:focus-visible {
  background: rgb(71.5, 84.5, 105.3) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
  filter: none !important;
}

#within_ember header.header--unauthenticated #identity #identity_button::before,
#within_ember header.header--unauthenticated #identity #identity_button::after,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button::before,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Identity dropdown on unauthenticated pages: dark slate bg */
#within_ember header.header--unauthenticated #identity .dropdown .dropdown-menu {
  background: #374151 !important;
}

/* Authenticated pages: identity in inner_header — no bg or border */
#within_ember header:not(.header--unauthenticated) #identity #identity_button,
#within_ember header:not(.header--unauthenticated) .app-navbar #identity #identity_button,
#within_ember header:not(.header--unauthenticated) #identity.identity-with-dark-toggle #identity_button {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#within_ember header:not(.header--unauthenticated) #identity #identity_button:hover,
#within_ember header:not(.header--unauthenticated) #identity #identity_button:focus-visible,
#within_ember header:not(.header--unauthenticated) .app-navbar #identity #identity_button:hover,
#within_ember header:not(.header--unauthenticated) .app-navbar #identity #identity_button:focus-visible,
#within_ember header:not(.header--unauthenticated) #identity.identity-with-dark-toggle #identity_button:hover,
#within_ember header:not(.header--unauthenticated) #identity.identity-with-dark-toggle #identity_button:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#within_ember header:not(.header--unauthenticated) #identity #identity_button::before,
#within_ember header:not(.header--unauthenticated) #identity #identity_button::after,
#within_ember header:not(.header--unauthenticated) .app-navbar #identity #identity_button::before,
#within_ember header:not(.header--unauthenticated) .app-navbar #identity #identity_button::after,
#within_ember header:not(.header--unauthenticated) #identity.identity-with-dark-toggle #identity_button::before,
#within_ember header:not(.header--unauthenticated) #identity.identity-with-dark-toggle #identity_button::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
}

/* Authenticated pages inner_header: support (?) and upgrade font color */
#within_ember header:not(.header--unauthenticated) .app-navbar .ll-bento-help-btn--support .ll-bento-help-btn__icon,
#within_ember header:not(.header--unauthenticated) .app-navbar .ll-bento-help-btn--support .ll-bento-help-btn__support-icon {
  color: #374151 !important;
}

#within_ember header:not(.header--unauthenticated) .app-navbar .ll-bento-help-btn--support:hover .ll-bento-help-btn__icon,
#within_ember header:not(.header--unauthenticated) .app-navbar .ll-bento-help-btn--support:hover .ll-bento-help-btn__support-icon {
  color: #1a1a1a !important;
}

#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__upgrade-nav,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__upgrade-nav,
#within_ember header:not(.header--unauthenticated) #identity .ll-bento-upgrade-btn--nav {
  color: #374151 !important;
}

#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__upgrade-nav:hover,
#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__upgrade-nav:focus-visible,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__upgrade-nav:hover,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__upgrade-nav:focus-visible,
#within_ember header:not(.header--unauthenticated) #identity .ll-bento-upgrade-btn--nav:hover,
#within_ember header:not(.header--unauthenticated) #identity .ll-bento-upgrade-btn--nav:focus-visible {
  color: #374151 !important;
}

/* Authenticated pages inner_header: search boards input and magnifier font/icon color */
#within_ember header:not(.header--unauthenticated) #header_search .form-control,
#within_ember header:not(.header--unauthenticated) #header_search .form-control::placeholder,
#within_ember header:not(.header--unauthenticated) #header_search .header-search-btn,
#within_ember header:not(.header--unauthenticated) #header_search .header-search-icon {
  color: #374151 !important;
}

#within_ember header:not(.header--unauthenticated) #header_search .header-search-btn:hover .header-search-icon {
  color: #374151 !important;
}

#within_ember header:not(.header--unauthenticated) #header_search .form-control {
  font-weight: normal !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.header--unauthenticated h1 .nav-header__app-name {
  font-family: "Maitree", serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.header--unauthenticated h1 .nav-header__app-name-primary {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: rgb(158.8928571429, 179.4285714286, 201.6071428571); /* light slate: readable on dark nav, ties to hero */
}

.header--unauthenticated h1 .nav-header__app-name-accent {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #F2B95A; /* every student / logo right */
  font-style: italic !important;
}

.header--unauthenticated h1 .nav-header__logo-link:hover,
.header--unauthenticated h1 .nav-header__app-name-link:hover {
  text-decoration: none !important;
}

/* Authenticated nav brand: Maitree 25px, same colors as unauthenticated */
.app-navbar h1 .nav-header__app-name {
  font-family: "Maitree", serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.app-navbar h1 .nav-header__app-name-primary {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: rgb(158.8928571429, 179.4285714286, 201.6071428571) !important;
}

.app-navbar h1 .nav-header__app-name-accent {
  font-size: 25px !important;
  font-family: "Maitree", serif !important;
  color: #F2B95A !important;
  font-style: italic !important;
}

/* Nav links and CTA laid out inside #nav_header flex container */
.header--unauthenticated #nav_header {
  width: auto !important;
  min-width: min-content !important;
  flex: 1 0 auto !important;
  overflow: visible !important;
}

.header--unauthenticated #nav_header h1 {
  flex-shrink: 0 !important;
  overflow: visible;
}

.header--unauthenticated .nav-header__brand {
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.header--unauthenticated .header-unauth-nav {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Nav links (Features / About / Beta feedback) on the unauthenticated
   header. Layout properties (position, centering) live on
   `.app-navbar .la-topbar-nav` near the top of this file — the nav is
   absolute-centered horizontally on the page. Only the visual properties
   that don't conflict with that layout belong here. */
.header--unauthenticated .la-topbar-nav {
  gap: 16px; /* more condensed than default 32px */
}

.header--unauthenticated .la-topbar-nav .la-topbar-link {
  padding: 4px 8px;
  font-size: 14px;
}

/* Divider hidden — when the nav is absolute-centered on the page, a
   "separator between brand and nav" no longer makes sense visually. */
.header--unauthenticated .la-topbar-nav::before {
  display: none;
}

.header--unauthenticated .header-unauth-right {
  margin-left: auto;
  flex-shrink: 0;
}

/* Help icon override for dark background */
.header--unauthenticated .not_pretty_skinny a {
  color: rgba(255, 255, 255, 0.6) !important;
}

.header--unauthenticated .not_pretty_skinny a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* When app header provides landing nav, hide the landing-alt topbar to avoid duplication */
header.header--unauthenticated ~ #content .la-topbar {
  display: none;
}

/* Hide nav links on small screens, keep CTA */
@media (max-width: 768px) {
  .header--unauthenticated .header-unauth-nav {
    display: none;
  }
}
/* ── Reusable Nav Bar Component ──────────────────────────────────────────── */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 70px;
  background: #1B365D;
  border-bottom: 1px solid #4ECDC4;
  gap: 20px;
}

.nav-bar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-bar__brand .nav-bar__logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Maitree", serif;
  font-size: 22px;
  font-weight: 800;
  color: #3A6BC7;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-bar__brand .nav-bar__logo-link:hover {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

/* Branded "Lingo<span>Linq</span>" – accent color on the Linq span */
.nav-bar__brand .nav-bar__logo-link span {
  color: #F2B95A;
  font-style: italic;
}

.nav-bar__logo-img {
  height: 37px;
  width: auto;
}

.nav-bar__content {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-bar__login-btn {
  background: #3A6BC7;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.nav-bar__login-btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
  color: #FFFFFF;
}

.nav-bar__avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.nav-bar__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Hide yielded content overflow on small screens */
@media (max-width: 768px) {
  .nav-bar {
    padding: 0 12px;
    gap: 12px;
  }
}
/* Identity button - glass effect to match Upgrade button (no gradient) */
#identity.identity-with-dark-toggle #identity_button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  outline: none;
  background: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: none;
  white-space: nowrap;
  display: grid;
  place-items: center;
  /* Smooth the hover/active transitions — without these the
     :active scale(0.99) and the hover background/border swaps
     snap instantly, making the avatar feel like it jumps. */
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#identity.identity-with-dark-toggle #identity_button::before,
#identity.identity-with-dark-toggle #identity_button::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

#identity.identity-with-dark-toggle #identity_button:hover,
#identity.identity-with-dark-toggle #identity_button:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  color: #fff;
  transform: none;
  filter: none;
}

#identity.identity-with-dark-toggle #identity_button:active {
  transform: scale(var(--md-tap, 0.99));
}

/* Identity avatar — 44×44 (WCAG 2.5.5 touch target size), nudged
   up to sit higher on the navbar baseline so the larger chip
   doesn't crash into the bottom edge. */
#identity.identity-with-dark-toggle #identity_button .user_holder {
  width: 44px;
  height: 44px;
  margin: -8px 0 0 0;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
}

#identity.identity-with-dark-toggle #identity_button img.user {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  outline: none;
}

#identity.identity-with-dark-toggle #identity_button svg.user.md-identity-avatar--default {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* Broken avatar fallback: tinted circle with user silhouette */
#identity #identity_button img.user.broken_image,
#identity.identity-with-dark-toggle #identity_button img.user.broken_image {
  opacity: 0 !important;
}

#identity #identity_button .user_holder:has(img.broken_image),
#identity.identity-with-dark-toggle #identity_button .user_holder:has(img.broken_image) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(76, 134, 216, 0.15) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C86D8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#identity.identity-with-dark-toggle #identity_button .caret,
#identity.identity-with-dark-toggle #identity_button .user_name {
  display: none;
}

#identity.identity-with-dark-toggle #identity_button .unread {
  left: auto;
  right: -4px;
  top: -4px;
}

#identity.identity-with-dark-toggle #identity_button .logging_enabled {
  right: -2px;
  top: -2px;
}

/* Dark toggle in main header - same row as logo, no wrap; solid navy so bar matches card/dock */
.header-index-with-dark-toggle #inner_header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

/* Welcome username centered on main navbar (authenticated index/landing only) */
.nav-header-welcome {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  pointer-events: auto !important;
}

.nav-header-welcome__label {
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.nav-header-welcome__link {
  color: #4ECDC4 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.nav-header-welcome__link:hover {
  color: #6bd9d2 !important;
  text-decoration: underline !important;
}

.nav-header-welcome__badge {
  color: #4ECDC4 !important;
  font-weight: 600 !important;
}

.header-index-with-dark-toggle #nav_header {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Main navbar (index, landing): soft divider to the left of theme picker + identity */
.header-index-with-dark-toggle .bento-dark-toggle-wrap {
  margin-left: 8px !important;
  padding-left: 3rem !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* When returning from setup (single_org), show org name + username centered on navbar (same spot as old welcome message) */
.header-index-with-dark-toggle #nav_header #org_name {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 14px !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 60% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.header-index-with-dark-toggle #nav_header #org_name .nav-header__org-sep {
  margin: 0 6px !important;
  opacity: 0.75 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.header-index-with-dark-toggle #nav_header #org_name .nav-header__user-home {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Username: coral 50% lighter, 10% darker – slightly reduced contrast */
#nav_header #org_name .nav-header__user-name {
  color: #e8cb7e !important;
}

.header-index-with-dark-toggle #nav_header #org_name .nav-header__user-name {
  color: #e8cb7e !important;
}

/* Help link on main navbar – visible and matches other nav links */
.header-index-with-dark-toggle .ll-bento-help-btn--nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: color 0.2s ease !important;
}

.header-index-with-dark-toggle .ll-bento-help-btn--nav:hover {
  color: rgb(255, 255, 255) !important;
  text-decoration: none !important;
}

.header-index-with-dark-toggle .ll-bento-help-btn--nav .ll-bento-help-btn__icon {
  color: rgba(255, 255, 255, 0.9) !important;
  flex-shrink: 0 !important;
}

.header-index-with-dark-toggle .ll-bento-help-btn--nav:hover .ll-bento-help-btn__icon {
  color: rgb(255, 255, 255) !important;
}

.header-index-with-dark-toggle .ll-bento-help-btn--nav .ll-bento-help-btn__label {
  white-space: nowrap !important;
}

/* Help button in identity: same round container as user dropdown and theme picker (42px circle) */
.header-index-with-dark-toggle #identity .md-iconbtn--identity,
.header-index-with-dark-toggle #identity .md-iconbtn.md-iconbtn--identity {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  display: grid !important;
  place-items: center !important;
  vertical-align: middle !important;
}

.header-index-with-dark-toggle #identity .md-iconbtn--identity:hover,
.header-index-with-dark-toggle #identity .md-iconbtn.md-iconbtn--identity:hover {
  color: rgb(255, 255, 255) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.header-index-with-dark-toggle #identity .md-iconbtn--identity .md-iconbtn__icon--help,
.header-index-with-dark-toggle #identity .md-iconbtn.md-iconbtn--identity .md-iconbtn__icon--help {
  display: block !important;
  line-height: 0 !important;
}

.header-index-with-dark-toggle #identity .md-iconbtn--identity .md-iconbtn__label,
.header-index-with-dark-toggle #identity .md-iconbtn.md-iconbtn--identity .md-iconbtn__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Upgrade pill in identity bar (right of Help) – light blue pill style */
.header-index-with-dark-toggle #identity .md-pillnav__upgrade-nav {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.header-index-with-dark-toggle #identity .md-pillnav__upgrade-nav:hover,
.header-index-with-dark-toggle #identity .md-pillnav__upgrade-nav:focus-visible {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.header-index-with-dark-toggle #identity .md-pillnav__upgrade-nav:active {
  transform: scale(var(--md-tap, 0.99)) !important;
}

/* Upgrade button in header (moved from dock) – right of Help */
.ll-bento-upgrade-btn--nav {
  margin-left: 0 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

.ll-bento-upgrade-btn--nav:hover {
  text-decoration: none !important;
}

/* Upgrade in header: same light pill on dark nav in every color scheme */
.header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav {
  color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Apply same nav Upgrade styling in all themes (override theme dock CTA colors) */
.ll-bento-app-shell--midday .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav,
.ll-bento-app-shell--dark .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav,
.ll-bento-app-shell--default .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav {
  color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.ll-bento-app-shell--midday .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav:hover,
.ll-bento-app-shell--dark .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav:hover,
.ll-bento-app-shell--default .header-index-with-dark-toggle #identity .ll-bento-upgrade-btn--nav:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Landing-alt: back arrow in top-right of navbar with minimal padding */
#identity.identity-with-dark-toggle {
  flex: 0 0 auto;
  float: none;
  width: auto;
  min-width: 110px;
  white-space: nowrap;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 0;
  height: auto;
}

/* Dark toggle in main header (index/landing) – md-avatarbtn style, icon kept (theme replacement) */
.bento-dark-toggle-wrap .ll-bento-dark-toggle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bento-dark-toggle-wrap .ll-bento-dark-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
}

.bento-dark-toggle-wrap .ll-bento-dark-toggle:active {
  transform: scale(var(--md-tap, 0.99));
}

.bento-dark-toggle-wrap .ll-bento-dark-toggle .ll-bento-dark-toggle__icon {
  display: block;
  transform: scale(0.9); /* 10% smaller icon in container */
}

/* Single light gray demo circle on bento bar – opens theme/demo picker */
.ll-bento-demo-toggle__circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-bento-demo-toggle__svg {
  display: block;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.15));
  transition: filter 0.2s ease;
}

.bento-dark-toggle-wrap .ll-bento-demo-toggle:hover .ll-bento-demo-toggle__svg {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)) brightness(1.08);
}

.ll-bento-dark-toggle__moon-svg {
  display: block;
  filter: drop-shadow(0 0 1px rgba(100, 116, 139, 0.5));
}

.ll-bento-dark-toggle__light-teal-svg {
  display: block;
  filter: drop-shadow(0 0 1px rgba(42, 157, 143, 0.4));
}

.ll-bento-dark-toggle__midday-svg {
  display: block;
  filter: drop-shadow(0 0 1px rgba(100, 116, 139, 0.35));
}

.ll-bento-theme-picker__light-teal-svg,
.ll-bento-theme-picker__midday-svg {
  display: block;
}

.ll-bento-theme-picker__default-svg {
  display: block;
}

/* Theme picker popup - appears to the left of the dark toggle */
.ll-bento-theme-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  cursor: default;
}

.ll-bento-theme-picker {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  padding: 0 10px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 253, 0.92) 100%);
  border: 1px solid rgba(30, 36, 48, 0.1);
  box-shadow: 0 8px 24px rgba(19, 29, 56, 0.2), 0 0 0 1px rgba(30, 36, 48, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Theme picker inside mobile drawer: inline below Theme button, no popup positioning */
.la-mobile-drawer__panel .ll-bento-theme-picker--in-drawer {
  position: static;
  transform: none;
  margin: 8px 0 4px;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Theme picker (Color Tone) inside avatar dropdown: compact row, no popup */
.ll-bento-theme-picker-dropdown {
  padding: 6px 12px 10px;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown {
  position: static;
  transform: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown .ll-bento-theme-picker__row {
  gap: 4px;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown .ll-bento-theme-picker__options {
  gap: 2px;
  flex-wrap: nowrap;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown .ll-bento-theme-picker__option {
  min-width: 36px;
  padding: 4px 6px;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown .ll-bento-theme-picker__icon {
  width: 24px;
  height: 24px;
}

.ll-bento-theme-picker-dropdown .ll-bento-theme-picker--in-dropdown .ll-bento-theme-picker__icon svg {
  width: 24px;
  height: 24px;
}

.ll-theme-picker-dropdown-label.dropdown-header {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 4px;
  padding-top: 8px;
  /* No full-width border; partial-width divider (li.divider above) kept for separation */
}

.ll-bento-theme-picker__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ll-bento-theme-picker__options {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex-shrink: 0;
}

.ll-bento-theme-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
  min-width: 44px;
}
.ll-bento-theme-picker__option:hover {
  background: rgba(30, 36, 48, 0.14);
}
.ll-bento-theme-picker__option:active {
  transform: scale(0.97);
}
.ll-bento-theme-picker__option--active {
  background: rgba(78, 197, 200, 0.15);
}

/* Single rounded bar: light (left) | midday (center) | dark (right) - fills container width */
.ll-bento-theme-picker__swatch-bar {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.ll-bento-theme-picker__swatch {
  flex: 1;
  min-width: 0;
}
.ll-bento-theme-picker__swatch--light {
  background: linear-gradient(135deg, #e8ecf0 0%, #dcdde0 100%);
}
.ll-bento-theme-picker__swatch--midday {
  background: linear-gradient(135deg, rgb(118, 122, 130) 0%, rgb(114, 118, 126) 100%);
}
.ll-bento-theme-picker__swatch--dark {
  background: linear-gradient(135deg, rgba(63, 77, 95, 0.9) 0%, rgba(54, 68, 83, 0.85) 100%);
}

.ll-bento-theme-picker__icon {
  font-size: 18px;
  line-height: 1;
  color: var(--ll-bento-ink, #1e2430);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-bento-theme-picker__option--active .ll-bento-theme-picker__icon {
  color: var(--ll-bento-primary-1, #4ec5c8);
}

.ll-bento-brand__name {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  margin-left: 10px;
}

.ll-bento-brand__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 14px;
}

.ll-bento-logo {
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transform: scale(1.65);
}

.ll-bento-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ll-bento-welcome {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.ll-bento-welcome__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ll-bento-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ll-bento-welcome__link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.ll-bento-welcome__link:hover .ll-bento-welcome__badge {
  background: rgba(225, 228, 238, 0.98);
  border-color: rgba(195, 200, 215, 0.8);
}
.ll-bento-welcome__badge {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 36, 48, 0.9);
  background: rgba(235, 238, 245, 0.95);
  border: 1px solid rgba(210, 214, 224, 0.7);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Getting Started - progress block */
.ll-bento-getting-started {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--ll-bento-radius-md);
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  text-decoration: none;
  color: var(--ll-bento-ink);
  min-width: 140px;
  max-width: 240px;
}
.ll-bento-getting-started--main {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  margin: 0 var(--ll-bento-content-inset) 14px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(255, 252, 250, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  border-radius: var(--ll-bento-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  transition: background 0.2s ease, box-shadow 0.3s var(--ll-bento-ease-in-out), transform 0.3s var(--ll-bento-ease-in-out);
}
.ll-bento-getting-started--main:hover {
  background: linear-gradient(135deg, rgba(248, 250, 253, 0.42) 0%, rgba(240, 244, 250, 0.36) 100%);
  box-shadow: 0 8px 24px rgba(19, 29, 56, 0.08), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.ll-bento-getting-started--main:active, .ll-bento-getting-started--main:focus-visible, .ll-bento-getting-started--main:visited {
  text-decoration: none;
}
.ll-bento-getting-started--main:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(19, 29, 56, 0.06), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}
.ll-bento-getting-started__image {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}
.ll-bento-getting-started--main .ll-bento-getting-started__image {
  width: 64px;
  height: 64px;
  margin-left: -12px;
}
.ll-bento-getting-started__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ll-bento-getting-started__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ll-bento-getting-started__divider {
  display: none;
}
.ll-bento-getting-started {
  /* Base styles - exclude --main which uses action-card-style effects */
}
.ll-bento-getting-started:not(.ll-bento-getting-started--main) {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s var(--ll-bento-ease-in-out), transform 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-getting-started:not(.ll-bento-getting-started--main):active, .ll-bento-getting-started:not(.ll-bento-getting-started--main):focus-visible, .ll-bento-getting-started:not(.ll-bento-getting-started--main):visited {
  text-decoration: none;
}
.ll-bento-getting-started:not(.ll-bento-getting-started--main):focus:not(:focus-visible) {
  outline: none;
  outline-offset: 0;
}
.ll-bento-getting-started:not(.ll-bento-getting-started--main):active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.05), inset 0 1px 2px rgba(19, 29, 56, 0.04);
}
.ll-bento-getting-started:not(.ll-bento-getting-started--main):hover {
  background: rgba(248, 250, 253, 0.95);
  border-color: rgba(30, 36, 48, 0.24);
  text-decoration: none;
}
.ll-bento-getting-started__stage {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ll-bento-muted, rgba(15, 23, 42, 0.6));
  margin-bottom: 4px;
}
.ll-bento-getting-started--main .ll-bento-getting-started__stage {
  font-size: 14px;
}
.ll-bento-getting-started__title {
  font-size: 14px;
  font-weight: 600;
}
.ll-bento-getting-started--main .ll-bento-getting-started__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.ll-bento-getting-started__title {
  color: var(--ll-bento-ink);
}
.ll-bento-getting-started__hint {
  font-size: 14px;
  color: var(--ll-bento-muted);
}
.ll-bento-getting-started--main .ll-bento-getting-started__hint {
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
  color: #3D7A5C;
}
.ll-bento-getting-started--main .ll-bento-getting-started__stage {
  color: #3D7A5C;
}
.ll-bento-getting-started__btn {
  flex-shrink: 0;
  padding: 12px 20px;
  width: 260px;
  min-width: 260px;
  text-align: center;
  border-radius: 999px;
  background: rgb(137.4229249012, 166.6679841897, 221.5770750988);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(58, 107, 199, 0.25), 0 2px 6px rgba(19, 29, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(58, 107, 199, 0.5);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-getting-started--main:hover .ll-bento-getting-started__btn {
  box-shadow: 0 6px 20px rgba(58, 107, 199, 0.35), 0 2px 8px rgba(19, 29, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ll-bento-getting-started--main:active .ll-bento-getting-started__btn {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(58, 107, 199, 0.3), inset 0 2px 6px rgba(19, 29, 56, 0.08);
}

/* Home board card - same formatting and hover as Getting Started (--main) */
.ll-bento-home-board-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  margin: 0 var(--ll-bento-content-inset) 14px;
  max-width: none;
  box-sizing: border-box;
  /* Boards section - fit bento-content width with margins */
}
.ll-bento-boards-home-board-wrap .ll-bento-home-board-card {
  width: 100%;
  margin: 0 var(--ll-bento-content-inset) 14px;
  box-sizing: border-box;
}
.ll-bento-boards-home-board-wrap .ll-bento-home-board-card .ll-bento-home-board-card__btn {
  max-width: 260px;
  min-width: 0;
}
.ll-bento-home-board-card {
  background: linear-gradient(135deg, rgba(255, 252, 250, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  border-radius: var(--ll-bento-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  text-decoration: none;
  color: inherit;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background 0.2s ease, box-shadow 0.3s var(--ll-bento-ease-in-out), transform 0.3s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-home-board-card:hover {
  background: linear-gradient(135deg, rgba(248, 250, 253, 0.42) 0%, rgba(240, 244, 250, 0.36) 100%);
  box-shadow: 0 8px 24px rgba(19, 29, 56, 0.08), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.ll-bento-home-board-card:active, .ll-bento-home-board-card:focus-visible, .ll-bento-home-board-card:visited {
  text-decoration: none;
}
.ll-bento-home-board-card:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(19, 29, 56, 0.06), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}
.ll-bento-home-board-card__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}
.ll-bento-home-board-card__content {
  flex: 1;
  min-width: 0;
}
.ll-bento-home-board-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ll-bento-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.ll-bento-home-board-card__subtitle {
  font-size: 14px;
  color: var(--ll-bento-muted);
  margin: 0;
  line-height: 1.4;
}
.ll-bento-home-board-card__btn {
  flex-shrink: 0;
  padding: 12px 20px;
  width: 260px;
  min-width: 260px;
  text-align: center;
  border-radius: 999px;
  background: rgb(137.4229249012, 166.6679841897, 221.5770750988);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(58, 107, 199, 0.25), 0 2px 6px rgba(19, 29, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(58, 107, 199, 0.5);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-home-board-card:hover .ll-bento-home-board-card__btn {
  box-shadow: 0 6px 20px rgba(58, 107, 199, 0.35), 0 2px 8px rgba(19, 29, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ll-bento-home-board-card:active .ll-bento-home-board-card__btn {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(58, 107, 199, 0.3), inset 0 2px 6px rgba(19, 29, 56, 0.08);
}

.ll-bento-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 36, 48, 0.06);
  overflow: hidden;
  position: relative;
}
.ll-bento-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(78, 195, 200, 0.75), rgba(95, 185, 255, 0.7));
  transition: width 0.5s var(--ll-bento-ease-out);
}

.ll-bento-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 253, 0.36) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  min-width: 180px;
  text-decoration: none;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s var(--ll-bento-ease-in-out), transform 0.25s var(--ll-bento-ease-in-out);
}
.ll-bento-search:focus:not(:focus-visible) {
  outline: none;
}
.ll-bento-search:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.05), inset 0 1px 2px rgba(19, 29, 56, 0.04);
}
.ll-bento-search:hover {
  background: rgba(225, 228, 238, 0.98);
  text-decoration: none;
}
.ll-bento-search__icon {
  opacity: 0.65;
  font-size: 22px;
  line-height: 1;
  margin-top: -5px;
}
.ll-bento-search__input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  width: 100%;
  color: var(--ll-bento-ink);
}
.ll-bento-search__input::placeholder {
  color: rgba(30, 36, 48, 0.5);
}
.ll-bento-search__input:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .ll-bento-search__input:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.ll-bento-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--ll-bento-icon-gloss), linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 253, 0.36) 100%);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out);
  text-decoration: none;
  color: inherit;
}
.ll-bento-icon-btn:focus:not(:focus-visible) {
  outline: none;
}
.ll-bento-icon-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.06), inset 0 2px 4px rgba(19, 29, 56, 0.04);
}
.ll-bento-icon-btn:hover {
  background: rgba(225, 228, 238, 0.98);
  text-decoration: none;
}
.ll-bento-icon-btn--refresh .glyphicon-refresh {
  background: linear-gradient(to bottom, var(--fs-dark-teal, #2A9D8F) 0%, var(--fs-navy, #1B365D) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ll-bento-help-btn {
  text-decoration: none;
  color: inherit;
}
.ll-bento-help-btn:hover {
  text-decoration: none;
}
.ll-bento-help-btn .ll-bento-help-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ll-bento-muted);
  line-height: 1;
}
.ll-bento-help-btn .ll-bento-help-btn__icon svg {
  width: 18px;
  height: 18px;
}
.ll-bento-help-btn:hover .ll-bento-help-btn__icon {
  color: var(--ll-bento-ink);
}

.ll-bento-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(228, 231, 238, 0.95);
  border: 1px solid rgba(210, 214, 224, 0.6);
}

/* Header settings shortcut — sits to the left of the identity dropdown. */
.ll-header-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-right: 1rem;
  border-radius: 10px;
  color: rgba(27, 54, 93, 0.75);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  vertical-align: middle;
}

.ll-header-settings-btn:hover,
.ll-header-settings-btn:focus {
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
  text-decoration: none;
}

.ll-header-settings-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2A9D8F;
}

/* At ≤1024px, lift the settings shortcut out of the navbar flow and pin it
   into the empty space on the right side of #inner_header. The positioning
   ancestor (.app-navbar__inner) already gets `position: relative` at this
   breakpoint (see ~33389), so absolute positioning here resolves against it. */
@media (max-width: 1024px) {
  .ll-header-settings-btn {
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(calc(-50% - 2px));
    margin: 0;
  }
}
/* At ≤768px, pin all three quick-action icons (search, settings, beta) into
   the top-right of #inner_header so they sit evenly spaced instead of
   collapsing against the right edge. Positioning ancestor is
   .app-navbar__inner (position: relative at this breakpoint).

   Defensive specificity (3,0,1) via `#within_ember header #inner_header`
   chain — beats every known competing rule at narrower widths:
     - #header_search override at ~33458 (2,0,0) → position: fixed; right: 100px
     - .ll-header-settings-btn base at ~18102 (0,1,0) → margin-right: 1rem
     - beta margin override at ~15895 (1,2,0) → margin-right: -2px
   `left: auto` + `bottom: auto` neutralize any future rule using those
   properties; `!important` on every property and a high-specificity chain
   together ensure these win regardless of source-order tiebreakers. */
@media (max-width: 768px) {
  #within_ember:not(.board-alt-view) header #inner_header #header_search,
  #within_ember:not(.board-alt-view) header #inner_header .ll-header-settings-btn,
  #within_ember:not(.board-alt-view) header #inner_header .app-navbar__beta-feedback-link--circular {
    position: absolute !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(calc(-50% - 2px)) !important;
    margin: 0 !important;
  }
  /* Right offsets reduced by ~50px from the previous 152/108/58 set.
     The original spacing reserved a slot for the inline beta-feedback
     circular icon (right: 58px). With the beta-feedback drawer tab now
     docked below the navbar (and the legacy inline beta link only
     rendered when useAppNavbarInHeader is false), that slot is empty
     on most pages — leaving a visible gap between the settings icon
     and the hamburger / right edge. Shifting search + settings right
     by 50px closes that gap; beta-circular stays at 58px so layouts
     that DO render the inline beta link (legacy speak-mode boards)
     still align. Scoped to non-board-alt so board-alt's flex-flow
     header layout is preserved at small widths. */
  #within_ember:not(.board-alt-view) header #inner_header #header_search {
    right: 102px !important;
    transform: translateY(calc(-50% - 6px)) !important;
  }
  #within_ember:not(.board-alt-view) header #inner_header .ll-header-settings-btn {
    right: 58px !important;
  }
  #within_ember:not(.board-alt-view) header #inner_header .app-navbar__beta-feedback-link--circular {
    right: 12px !important;
  }
}
/* At ≤766px, neutralize rule ~15711's position: absolute + display: flex on
   .app-navbar__nav-header and .app-navbar__quick-actions so they stop being
   the (tiny) positioning ancestors and stop spreading their children. Using
   `display: contents` dissolves them — their children (search, settings,
   beta) anchor against .app-navbar-authenticated-inner (position: relative)
   instead, giving the same full-width coordinate system as ≥768px. The icon
   positioning rules above (right: 152/108/58px) then work correctly.
   Scoped to ≤766 so the existing 767/768 layouts are untouched. */
@media (max-width: 766px) {
  #within_ember:not(.board-alt-view) header #inner_header .app-navbar__nav-header,
  #within_ember:not(.board-alt-view) header #inner_header .app-navbar__quick-actions {
    display: contents !important;
  }
}
/* At ≤375px the search icon previously got pulled to the left edge
   (`left: 4px`) which broke its grouping with the settings/beta cluster
   on the right. Keep it anchored to the right with the others so the
   icon trio stays visually grouped at every width. */
@media (max-width: 375px) {
  #within_ember header #inner_header #header_search {
    left: auto !important;
  }
}
@media (max-width: 475px) {
  .md-hero__title--from-left {
    font-size: 0.8em !important;
  }
}
/* Tabs - pill-style navigation */
.ll-bento-device-frame > .row {
  padding-top: 10px;
}

/* Wrapper for tabs + single underline that pulls them together */
.ll-bento-span {
  margin: 0 var(--ll-bento-content-inset) 14px;
}

.ll-bento-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px 12px;
  margin: 0 0 14px 0;
  background: linear-gradient(135deg, rgba(255, 252, 250, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  border-radius: var(--ll-bento-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-tab {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: rgba(30, 36, 48, 0.72);
  cursor: pointer;
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  text-align: center;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background 0.35s var(--ll-bento-ease-in-out), border-color 0.35s var(--ll-bento-ease-in-out), box-shadow 0.35s var(--ll-bento-ease-in-out), transform 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-tab:hover:not(.ll-bento-tab--active) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 253, 0.36) 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.05), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}
.ll-bento-tab--active {
  background: linear-gradient(135deg, rgba(120, 195, 198, 0.72) 0%, rgba(200, 235, 240, 0.66) 50%, rgba(140, 190, 220, 0.72) 100%);
  border-color: rgba(110, 195, 200, 0.5);
  color: rgba(15, 20, 30, 0.98);
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(100, 185, 188, 0.18), 0 3px 10px rgba(130, 195, 220, 0.12), 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}
.ll-bento-tab:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.08), inset 0 2px 4px rgba(19, 29, 56, 0.06);
}
.ll-bento-tab:active.ll-bento-tab--active {
  box-shadow: 0 4px 16px rgba(100, 185, 188, 0.25), 0 2px 8px rgba(130, 195, 220, 0.12), inset 0 2px 6px rgba(19, 29, 56, 0.08);
}
.ll-bento-tab--link {
  flex: 0 1 auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Nav pills (e.g. Boards: Suggested/Mine/Community/Recent) - bento-aligned */
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 12px;
  border: none;
  padding: 0;
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li {
  margin: 0;
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 36, 48, 0.72);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 253, 0.36) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  text-decoration: none;
  transition: background 0.25s var(--ll-bento-ease-in-out), border-color 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), transform 0.25s var(--ll-bento-ease-in-out);
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li a:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(248, 250, 253, 0.42) 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: var(--ll-bento-shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: rgba(30, 36, 48, 0.85);
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li.active a {
  background: linear-gradient(135deg, rgba(100, 185, 188, 0.96) 0%, rgba(220, 248, 252, 0.85) 50%, rgba(130, 175, 220, 0.92) 100%);
  border-color: rgba(110, 195, 200, 0.55);
  color: rgba(15, 20, 30, 0.98);
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(100, 185, 188, 0.25), 0 3px 10px rgba(130, 195, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li a:active {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.08), inset 0 2px 4px rgba(19, 29, 56, 0.06);
}
.ll-bento-app-shell .nav.nav-pills:not(.nav-stacked) li.active a:active {
  box-shadow: 0 4px 16px rgba(100, 185, 188, 0.25), 0 2px 8px rgba(130, 195, 220, 0.12), inset 0 2px 6px rgba(19, 29, 56, 0.08);
}

/* Main content area - same horizontal inset as tabs for alignment */
.ll-bento-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 var(--ll-bento-content-inset) 0;
}

/* Boards section - home board card wrapper (full width of bento-content) */
.ll-bento-boards-home-board-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* Browse Boards - same styling as home board card / Getting Started for consistency */
.ll-bento-browse-boards {
  width: 100%;
  margin: 0 var(--ll-bento-content-inset) 4px;
  padding: 24px 28px;
  box-sizing: border-box;
  /* Tighter spacing before board grid (with .ll-bento-content gap) */
}
.ll-bento-browse-boards + div {
  margin-top: -10px;
}
.ll-bento-browse-boards {
  background: linear-gradient(135deg, rgba(255, 252, 250, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  border-radius: var(--ll-bento-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  transition: background 0.2s ease, box-shadow 0.3s var(--ll-bento-ease-in-out), transform 0.3s var(--ll-bento-ease-in-out);
}
.ll-bento-browse-boards:hover {
  background: linear-gradient(135deg, rgba(248, 250, 253, 0.42) 0%, rgba(240, 244, 250, 0.36) 100%);
  box-shadow: 0 8px 24px rgba(19, 29, 56, 0.08), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  transform: translateY(-3px);
}
.ll-bento-browse-boards:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(19, 29, 56, 0.06), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}
.ll-bento-browse-boards__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ll-bento-browse-boards__search {
  margin-left: auto;
}
.ll-bento-browse-boards {
  /* Icon container - same bg as Reports action card icon */
}
.ll-bento-browse-boards__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(19, 29, 56, 0.06), var(--ll-bento-icon-rim);
  border: 1px solid rgba(210, 214, 224, 0.5);
  background: var(--ll-bento-icon-gloss), rgba(220, 238, 242, 0.85);
  border-color: rgba(195, 220, 230, 0.5);
}
.ll-bento-browse-boards__icon .ll-bento-browse-boards__icon-img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}
.ll-bento-browse-boards__icon .glyphicon {
  color: rgba(50, 60, 75, 0.8);
  font-size: 22px;
}
.ll-bento-browse-boards__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ll-bento-ink);
}
.ll-bento-browse-boards__filter-group {
  margin-top: 6px;
}
.ll-bento-browse-boards__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}
.ll-bento-browse-boards__pills li {
  margin: 0;
}
.ll-bento-browse-boards__pills li a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 36, 48, 0.72);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(195, 205, 218, 0.85);
  box-shadow: 0 2px 6px rgba(19, 29, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: background 0.25s var(--ll-bento-ease-in-out), border-color 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), transform 0.25s var(--ll-bento-ease-in-out);
}
.ll-bento-browse-boards__pills li a:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(184, 168, 216, 0.5);
  box-shadow: 0 3px 10px rgba(19, 29, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-decoration: none;
  color: rgba(30, 36, 48, 0.9);
}
.ll-bento-browse-boards__pills li.active a {
  background: linear-gradient(135deg, rgba(184, 168, 216, 0.35) 0%, rgba(130, 175, 220, 0.3) 100%);
  border-color: rgba(160, 145, 210, 0.6);
  color: rgba(30, 36, 48, 0.95);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(130, 115, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ll-bento-browse-boards__pills li a:active {
  transform: translateY(1px);
}

/* Boards page – wrapper, header, toolbar, current home */
.ll-bento-boards-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 var(--ll-bento-content-inset);
}
.ll-bento-boards-page .ll-bento-boards-home-board-wrap,
.ll-bento-boards-page .ll-bento-browse-boards,
.ll-bento-boards-page .ll-bento-boards-toolbar {
  margin-left: 0;
  margin-right: 0;
}

.ll-bento-boards-page__header {
  margin: 0 0 8px;
}

.ll-bento-boards-page__title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ll-bento-ink);
}

.ll-bento-boards-page__subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--ll-bento-muted);
  line-height: 1.4;
}

/* Toolbar: search + filter pills in one row */
.ll-bento-boards-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(248, 250, 253, 0.5) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 20px rgba(19, 29, 56, 0.05), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
}

.ll-bento-boards-toolbar__search {
  flex: 1 1 200px;
  min-width: 200px;
}

.ll-bento-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ll-bento-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ll-bento-muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(30, 36, 48, 0.1);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ll-bento-filter-pill .glyphicon {
  font-size: 14px;
  opacity: 0.85;
}
.ll-bento-filter-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(58, 107, 199, 0.25);
  color: var(--ll-bento-ink);
  text-decoration: none;
}
.ll-bento-filter-pill--active {
  background: rgba(58, 107, 199, 0.14);
  border-color: rgba(58, 107, 199, 0.4);
  color: #2d5aa8;
  font-weight: 600;
}
.ll-bento-filter-pill--active .glyphicon {
  opacity: 1;
}
.ll-bento-filter-pill--active:hover {
  background: rgba(58, 107, 199, 0.2);
  border-color: rgba(58, 107, 199, 0.5);
}

.ll-bento-current-home {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 12px rgba(19, 29, 56, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ll-bento-current-home__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(78, 205, 196, 0.18);
  color: rgba(42, 157, 143, 0.95);
  font-size: 18px;
}

.ll-bento-current-home__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ll-bento-current-home__label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ll-bento-muted);
}

.ll-bento-current-home__link {
  font-size: 17px;
  font-weight: 600;
  color: var(--ll-bento-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ll-bento-current-home__link:hover {
  color: #3A6BC7;
  text-decoration: none;
}

/* Board grid – modern card layout */
.ll-bento-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 20px;
}

.ll-bento-board-grid__item {
  min-width: 0;
}

/* Ultra-modern board cards: large radius, image-first, scale + shadow on hover */
.ll-bento-board-grid .simple_board_icon {
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #fff;
  box-shadow: 0 4px 20px rgba(19, 29, 56, 0.06), 0 1px 3px rgba(19, 29, 56, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.3s var(--ll-bento-ease-in-out), box-shadow 0.3s var(--ll-bento-ease-in-out), border-color 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ll-bento-board-grid .simple_board_icon:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(19, 29, 56, 0.12), 0 8px 20px rgba(58, 107, 199, 0.08);
  border-color: rgba(58, 107, 199, 0.2);
}
.ll-bento-board-grid .simple_board_icon img {
  width: 100%;
  height: 110px;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  display: block;
  background: rgba(248, 250, 253, 0.8);
}
.ll-bento-board-grid .simple_board_icon .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 12px 14px 4px;
  color: var(--ll-bento-ink);
  box-sizing: border-box;
}
.ll-bento-board-grid .simple_board_icon .author {
  font-size: 14px;
  color: var(--ll-bento-muted);
  margin: 0;
  padding: 0 14px 14px;
}
.ll-bento-board-grid .simple_board_icon .info {
  /* BOTTOM-CENTER Preview pill (matches the boards-page treatment).
   Silver-glass background inherits from base .info. */
  position: absolute;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ll-bento-board-grid__loading,
.ll-bento-board-grid__error,
.ll-bento-board-grid__empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 15px;
  color: var(--ll-bento-muted);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  border: 1px dashed rgba(30, 36, 48, 0.1);
}

.ll-bento-boards-page__home-cta,
.ll-bento-boards-page__footer-cta {
  margin: 0;
}

.ll-bento-boards-page__home-link,
.ll-bento-boards-page__see-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #3A6BC7;
  background: rgba(58, 107, 199, 0.08);
  border: 1px solid rgba(58, 107, 199, 0.28);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ll-bento-boards-page__home-link:hover,
.ll-bento-boards-page__see-all:hover {
  background: rgba(58, 107, 199, 0.14);
  border-color: rgba(58, 107, 199, 0.4);
  color: #2d5aa8;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(58, 107, 199, 0.15);
}

.ll-bento-boards-page__see-all {
  padding: 14px 24px;
  font-size: 15px;
}

/* Section grouping - glass container with left bar to signify section */
.ll-bento-section-group {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(248, 250, 253, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ll-bento-radius-lg);
  padding: 16px 20px 18px 24px;
  border-left: 4px solid rgba(42, 157, 143, 0.55);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

/* Light theme: no left teal bar (only default theme has it, with toggle) */
.ll-bento-app-shell--light .ll-bento-section-group,
.ll-bento-app-shell--light .ll-bento-extras-expanded {
  border-left-width: 0;
  padding-left: 20px;
}

/* Section grouping labels - small uppercase, no bar (bar is on the div) */
.ll-bento-section-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #3D7A5C;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.ll-bento-browse-boards .ll-bento-section-group .ll-bento-section-label {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Filter cards grid - 2x2 like primary actions */
.ll-bento-filter-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Active filter card - subtle highlight */
.ll-bento-action-card--filter-active {
  background: rgba(240, 244, 250, 0.95);
  border-color: rgba(78, 205, 196, 0.35);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.06), 0 2px 8px rgba(78, 205, 196, 0.12);
}

.ll-bento-extras-expanded .ll-bento-section-label {
  margin: 0 0 12px 20px;
}

/* Actions section - hero + grid layout */
.ll-bento-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ll-bento-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  min-height: 88px;
  background: rgba(255, 252, 250, 0.88);
  border-radius: var(--ll-bento-radius-xl);
  border: 1px solid var(--ll-bento-stroke);
  box-shadow: var(--ll-bento-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.3s var(--ll-bento-ease-in-out), transform 0.3s var(--ll-bento-ease-in-out);
}
.ll-bento-hero-card:hover {
  background: rgba(240, 242, 245, 0.9);
  box-shadow: var(--ll-bento-shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.ll-bento-hero-card:active {
  transform: translateY(-1px);
  box-shadow: var(--ll-bento-shadow-md);
}
.ll-bento-hero-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(19, 29, 56, 0.06), var(--ll-bento-icon-rim);
  border: 1px solid rgba(210, 214, 224, 0.5);
}
.ll-bento-hero-card__icon--speak {
  background: var(--ll-bento-icon-gloss), rgba(225, 242, 235, 0.85);
  border-color: rgba(195, 225, 215, 0.5);
}
.ll-bento-hero-card__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ll-bento-hero-card__content {
  flex: 1;
  min-width: 0;
}
.ll-bento-hero-card__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ll-bento-ink);
}
.ll-bento-hero-card__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--ll-bento-muted);
  line-height: 1.4;
}
.ll-bento-hero-card__btn {
  flex-shrink: 0;
  padding: 14px 24px;
  font-size: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3db8bc 0%, #4eb5ff 50%, #5f7cff 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.98);
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(61, 184, 188, 0.32);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-hero-card__btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(61, 184, 188, 0.25);
}

.ll-bento-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Extras expanded - full width section with glass look */
.ll-bento-extras-expanded {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(235, 240, 250, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ll-bento-radius-lg);
  padding: 16px 20px 18px;
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-action-card--extras-expanded {
  background: rgba(240, 242, 245, 0.9);
  text-decoration: none;
}
.ll-bento-action-card--extras-expanded:hover {
  background: rgba(240, 242, 245, 0.9);
  text-decoration: none;
}

.ll-bento-extras-expanded-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ll-bento-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  min-height: 88px;
  background: rgba(255, 252, 250, 0.88);
  border-radius: var(--ll-bento-radius-lg);
  border: 1px solid var(--ll-bento-stroke);
  box-shadow: var(--ll-bento-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.3s var(--ll-bento-ease-in-out), transform 0.3s var(--ll-bento-ease-in-out);
}
.ll-bento-action-card:hover {
  background: rgba(240, 242, 245, 0.9);
  box-shadow: var(--ll-bento-shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.ll-bento-action-card:active {
  transform: translateY(-1px);
  box-shadow: var(--ll-bento-shadow-md);
}
.ll-bento-action-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(19, 29, 56, 0.06), var(--ll-bento-icon-rim);
  border: 1px solid rgba(210, 214, 224, 0.5);
}
.ll-bento-action-card__icon--speak {
  /* Much lighter tint of active action button color #3D7A5C */
  background: var(--ll-bento-icon-gloss), rgba(61, 122, 92, 0.14);
  border-color: rgba(61, 122, 92, 0.28);
}
.ll-bento-action-card__icon--reports {
  background: var(--ll-bento-icon-gloss), rgba(220, 238, 242, 0.85);
  border-color: rgba(195, 220, 230, 0.5);
}
.ll-bento-action-card__icon--ideas {
  background: var(--ll-bento-icon-gloss), rgba(228, 235, 250, 0.85);
  border-color: rgba(205, 218, 240, 0.5);
}
.ll-bento-action-card__icon--modeling {
  background: var(--ll-bento-icon-gloss), rgba(228, 235, 250, 0.85);
  border-color: rgba(205, 218, 240, 0.5);
}
.ll-bento-action-card__icon--extras {
  /* Lighter tint of Lingo gold – more gold, less orange */
  background: var(--ll-bento-icon-gloss), rgba(218, 198, 115, 0.26);
  border-color: rgba(218, 198, 115, 0.45);
}
.ll-bento-action-card__icon--green-yellow {
  background: var(--ll-bento-icon-gloss), rgba(245, 242, 228, 0.85);
  border-color: rgba(230, 225, 205, 0.5);
}
.ll-bento-action-card__icon--account {
  background: var(--ll-bento-icon-gloss), rgba(235, 235, 245, 0.85);
  border-color: rgba(215, 215, 230, 0.5);
}
.ll-bento-action-card__icon {
  /* Filter cards (Suggested, Mine, Community, Recent) - same palette as primary actions */
}
.ll-bento-action-card__icon--suggested {
  background: var(--ll-bento-icon-gloss), rgba(228, 235, 250, 0.85);
  border-color: rgba(205, 218, 240, 0.5);
}
.ll-bento-action-card__icon--mine {
  background: var(--ll-bento-icon-gloss), rgba(235, 235, 245, 0.85);
  border-color: rgba(215, 215, 230, 0.5);
}
.ll-bento-action-card__icon--community {
  background: var(--ll-bento-icon-gloss), rgba(245, 242, 228, 0.85);
  border-color: rgba(230, 225, 205, 0.5);
}
.ll-bento-action-card__icon--recent {
  background: var(--ll-bento-icon-gloss), rgba(220, 238, 242, 0.85);
  border-color: rgba(195, 220, 230, 0.5);
}
.ll-bento-action-card__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ll-bento-action-card__glyph {
  font-size: 22px;
  color: rgba(50, 60, 75, 0.75);
}
.ll-bento-action-card__body {
  flex: 1;
  min-width: 0;
}
.ll-bento-action-card__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ll-bento-ink);
}
.ll-bento-action-card__sub {
  margin: 0;
  font-size: 14px;
  color: var(--ll-bento-muted);
  line-height: 1.35;
}
.ll-bento-action-card__meta {
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(30, 36, 48, 0.65);
}
.ll-bento-action-card--with-btn {
  justify-content: space-between;
}
.ll-bento-action-card__action-btn {
  flex-shrink: 0;
  min-width: 100px;
  width: 100px;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: #E8ECF2;
  color: rgba(30, 36, 48, 0.9);
  box-shadow: 0 4px 12px rgba(19, 29, 56, 0.12), 0 2px 4px rgba(19, 29, 56, 0.08);
  border: 1px solid #c8d0dc;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ll-bento-action-card__action-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(19, 29, 56, 0.1), inset 0 1px 2px rgba(19, 29, 56, 0.06);
}
.ll-bento-action-card--emergency {
  background: rgba(228, 245, 240, 0.9);
  border-color: rgba(200, 230, 220, 0.6);
}

/* Card components - hero and feature tiles */
.ll-bento-card {
  border-radius: var(--ll-bento-radius-xl);
  background: var(--ll-bento-card);
  border: 1px solid var(--ll-bento-stroke);
  box-shadow: var(--ll-bento-shadow-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  overflow: hidden;
}
.ll-bento-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
}
.ll-bento-card__title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.ll-bento-card__subtitle {
  margin: 6px 0 0;
  color: var(--ll-bento-muted);
  font-size: 14px;
}
.ll-bento-card--hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.62));
}
.ll-bento-card--feature {
  padding: 0;
}

/* Primary action button - distinct from Bootstrap .btn */
.ll-bento-btn {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-btn--primary {
  color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(135deg, #3db8bc 0%, #4eb5ff 50%, #5f7cff 100%);
  box-shadow: 0 12px 28px rgba(61, 184, 188, 0.35), 0 4px 12px rgba(78, 181, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-width: 152px;
}
.ll-bento-btn--primary:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(61, 184, 188, 0.25), 0 2px 6px rgba(78, 181, 255, 0.15);
}

/* Feature grid - 2-column layout for action tiles */
.ll-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ll-bento-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 16px;
}
.ll-bento-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(19, 29, 56, 0.06), var(--ll-bento-icon-rim);
  border: 1px solid rgba(210, 214, 224, 0.5);
}
.ll-bento-feature__icon--reports {
  background: var(--ll-bento-icon-gloss), rgba(220, 238, 242, 0.85);
}
.ll-bento-feature__icon--ideas {
  background: var(--ll-bento-icon-gloss), rgba(228, 235, 250, 0.85);
}
.ll-bento-feature__icon--modeling {
  background: var(--ll-bento-icon-gloss), rgba(228, 235, 250, 0.85);
}
.ll-bento-feature__icon--extras {
  background: var(--ll-bento-icon-gloss), rgba(245, 232, 238, 0.85);
}
.ll-bento-feature__title {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.ll-bento-feature__sub {
  margin: 5px 0 0;
  color: var(--ll-bento-muted);
  font-size: 14px;
}
.ll-bento-feature__meta {
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(30, 36, 48, 0.7);
}

/* Bottom dock - primary navigation bar; fixed height so it never stretches */
.ll-bento-dock {
  position: absolute;
  left: calc(15px + var(--ll-bento-content-inset)); /* Bootstrap col padding + content inset to align with tabs */
  right: calc(15px + var(--ll-bento-content-inset));
  bottom: 12px;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(248, 250, 253, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(var(--ll-bento-material-blur));
  -webkit-backdrop-filter: blur(var(--ll-bento-material-blur));
  transform: translateZ(0);
  box-shadow: 0 4px 16px rgba(19, 29, 56, 0.04), 0 8px 24px rgba(19, 29, 56, 0.08), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow) !important;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 12px;
  padding: 8px 16px;
  overflow: hidden;
}

.ll-bento-dock__item {
  border: none;
  background: transparent;
  height: 42px;
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-dock__item .ll-bento-dock__label {
  font-size: 14px;
  color: rgba(30, 36, 48, 0.98);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ll-bento-dock__item--active {
  background: rgba(245, 247, 255, 0.85);
  border: 1px solid rgba(75, 121, 255, 0.16);
}
.ll-bento-dock__item--active .ll-bento-dock__label {
  color: rgb(30, 36, 48);
}

.ll-bento-dock__supervisor {
  flex: 0.65 1 0;
  justify-content: flex-start;
  padding: 0 16px;
}
.ll-bento-dock__supervisor .ll-bento-dock__label {
  text-align: left;
}
.ll-bento-dock__supervisor:hover {
  background: rgba(240, 242, 245, 0.9);
}

.ll-bento-dock__supervisor,
.ll-bento-dock__logging {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.ll-bento-dock__supervisor .ll-bento-dock__supervisor-label,
.ll-bento-dock__logging .ll-bento-dock__supervisor-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 36, 48, 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ll-bento-dock__supervisor .ll-bento-dock__label,
.ll-bento-dock__logging .ll-bento-dock__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-bento-dock__logging {
  flex: 1.35 1 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  gap: 8px;
}

.ll-bento-dock__logging-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 0 8px 0 16px;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-dock__logging-btn:hover {
  background: rgba(240, 242, 245, 0.9);
}

.ll-bento-dock__logging-sep {
  color: rgba(30, 36, 48, 0.9);
  font-size: 14px;
  flex-shrink: 0;
  margin-left: -8px;
}

.ll-bento-dock__logging-last {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(30, 36, 48, 0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ll-bento-dock__logging-link {
  color: rgba(75, 121, 255, 0.9);
  text-decoration: none;
}
.ll-bento-dock__logging-link:hover {
  color: rgb(75, 121, 255);
  text-decoration: underline;
}

.ll-bento-dock__logging-last-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 36, 48, 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ll-bento-dock__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(220, 180, 170, 0.5);
  background: linear-gradient(135deg, rgba(230, 165, 155, 0.95) 0%, rgba(255, 225, 205, 0.95) 100%);
  color: rgba(50, 40, 45, 0.95);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0 18px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(210, 160, 150, 0.2);
  flex-shrink: 0;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out), background 0.2s var(--ll-bento-ease-out);
}
.ll-bento-dock__cta:hover {
  outline: none;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(235, 183, 175, 0.95) 0%, rgba(255, 231, 215, 0.95) 100%);
}
.ll-bento-dock__cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(210, 160, 150, 0.15), inset 0 1px 2px rgba(19, 29, 56, 0.06);
}

/* Mid-day mode - icy blue light gray, text converted for contrast */
.ll-bento-app-shell--midday {
  color: #E8ECF2;
  transition: background 0.4s var(--ll-bento-ease-in-out), color 0.3s ease;
  --ll-bento-bg: #c4c8ce;
  --ll-bento-ink: #E8ECF2;
  --ll-bento-muted: rgba(230, 236, 242, 0.72);
  --ll-bento-card: rgba(100, 110, 125, 0.65);
  --ll-bento-card-strong: rgba(110, 120, 138, 0.75);
  --ll-bento-stroke: rgba(255, 255, 255, 0.08);
  --ll-bento-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.25);
  --ll-bento-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.15);
  --ll-bento-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.15);
  background: radial-gradient(1400px 900px at 10% 10%, rgba(189, 198, 208, 0.5) 0%, transparent 50%), radial-gradient(1200px 800px at 90% 30%, rgba(186, 200, 213, 0.4) 0%, transparent 55%), radial-gradient(1200px 800px at 40% 100%, rgba(193, 200, 212, 0.35) 0%, transparent 50%), var(--ll-bento-bg);
}

.ll-bento-app-shell--midday .ll-bento-bg-orbs {
  opacity: 0.5;
}
.ll-bento-app-shell--midday .ll-bento-bg-orbs .ll-bento-orb--a {
  background: radial-gradient(circle at 30% 30%, rgba(48, 100, 128, 0.38), transparent 58%), radial-gradient(circle at 70% 70%, rgba(62, 70, 128, 0.32), transparent 60%);
}
.ll-bento-app-shell--midday .ll-bento-bg-orbs .ll-bento-orb--b {
  background: radial-gradient(circle at 35% 35%, rgba(34, 99, 98, 0.3), transparent 60%), radial-gradient(circle at 70% 70%, rgba(92, 78, 128, 0.28), transparent 58%);
}
.ll-bento-app-shell--midday .ll-bento-bg-orbs .ll-bento-orb--c {
  background: radial-gradient(circle at 35% 35%, rgba(128, 69, 61, 0.28), transparent 58%), radial-gradient(circle at 70% 70%, rgba(48, 100, 128, 0.22), transparent 60%);
}

/* Main section lighter than bento bar for contrast (like dark mode) */
.ll-bento-app-shell--midday .ll-bento-device-frame {
  background: linear-gradient(135deg, rgba(145, 158, 175, 0.92) 0%, rgba(135, 148, 165, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Topbar modifier: applied directly on element when mid-day mode */
.ll-bento-bar.ll-bento-bar--midday {
  background: #1B365D !important;
  border-bottom: 1px solid #2A9D8F;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-brand-link,
.ll-bento-bar.ll-bento-bar--midday .ll-bento-brand__name,
.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar__brand-sep {
  color: #1B365D;
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar__brand-home {
  color: #7eb8e0;
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome {
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome__label {
  color: rgba(232, 236, 242, 0.85);
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome__link,
.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome__badge {
  color: #e8cb7e;
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome__link:hover {
  color: #f0d89e;
}

.ll-bento-bar.ll-bento-bar--midday .ll-bento-bar-welcome__celebration-icon {
  color: rgba(255, 255, 255, 0.9);
}

.ll-bento-app-shell--midday .ll-bento-welcome__label {
  color: rgba(230, 236, 242, 0.75);
}

.ll-bento-app-shell--midday .ll-bento-welcome__badge {
  background: rgba(200, 212, 228, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(40, 45, 55, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-welcome__link:hover .ll-bento-welcome__badge {
  background: rgba(212, 222, 238, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
}

.ll-bento-app-shell--midday .ll-bento-search {
  background: rgba(200, 212, 228, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.ll-bento-app-shell--midday .ll-bento-help-btn__icon {
  color: #000 !important;
}

.ll-bento-app-shell--midday .ll-bento-help-btn:hover .ll-bento-help-btn__icon {
  color: #000 !important;
}

.ll-bento-app-shell--midday .ll-bento-search__input {
  color: rgba(40, 45, 55, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-search__input::placeholder {
  color: rgba(40, 45, 55, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-icon-btn {
  background: var(--ll-bento-icon-gloss), rgba(200, 212, 228, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(40, 45, 55, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-tab:not(.ll-bento-tab--active) {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.95) 0%, rgba(188, 200, 218, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(40, 45, 55, 0.9);
}

.ll-bento-app-shell--midday .ll-bento-tab--active {
  background: linear-gradient(135deg, rgba(78, 165, 168, 0.75) 0%, rgba(100, 180, 200, 0.69) 50%, rgba(90, 140, 180, 0.75) 100%);
  border-color: rgba(120, 200, 210, 0.5);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .ll-bento-home-board-card__btn {
  background: #4ea5a8;
  border-color: rgba(120, 200, 210, 0.4);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .ll-bento-getting-started__btn {
  background: #4ea5a8;
  border-color: rgba(120, 200, 210, 0.4);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .ll-bento-boards-toolbar {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.9) 0%, rgba(188, 200, 218, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.25);
}

.ll-bento-app-shell--midday .ll-bento-filter-pill {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(40, 45, 55, 0.12);
  color: rgba(40, 45, 55, 0.85);
}

.ll-bento-app-shell--midday .ll-bento-filter-pill:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(96, 160, 168, 0.35);
}

.ll-bento-app-shell--midday .ll-bento-filter-pill--active {
  background: rgba(62, 132, 134, 0.35);
  border-color: rgba(96, 160, 168, 0.45);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .ll-bento-browse-boards {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.95) 0%, rgba(188, 200, 218, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.2);
}
.ll-bento-app-shell--midday .ll-bento-browse-boards:hover {
  background: rgba(212, 222, 238, 0.9);
}
.ll-bento-app-shell--midday .ll-bento-browse-boards .ll-bento-browse-boards__icon {
  background: var(--ll-bento-icon-gloss), rgba(165, 179, 182, 0.85);
  border-color: rgba(146, 165, 173, 0.5);
  color: rgba(50, 55, 70, 0.9);
}
.ll-bento-app-shell--midday .ll-bento-browse-boards ul.nav.nav-pills.ll-bento-browse-boards__pills li:not(.active) a {
  background: linear-gradient(135deg, rgba(160, 170, 182, 0.95) 0%, rgba(150, 160, 174, 0.9) 100%);
  border-color: rgba(120, 135, 155, 0.5);
  color: rgba(30, 36, 48, 0.95);
}
.ll-bento-app-shell--midday .ll-bento-browse-boards ul.nav.nav-pills.ll-bento-browse-boards__pills li:not(.active) a:hover {
  background: linear-gradient(135deg, rgba(170, 180, 195, 0.95) 0%, rgba(160, 170, 185, 0.9) 100%);
}
.ll-bento-app-shell--midday .ll-bento-browse-boards ul.nav.nav-pills.ll-bento-browse-boards__pills li.active a {
  background: linear-gradient(135deg, rgba(62, 132, 134, 0.55) 0%, rgba(80, 144, 160, 0.5) 50%, rgba(72, 112, 144, 0.55) 100%);
  border-color: rgba(96, 160, 168, 0.35);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .nav.nav-pills:not(.nav-stacked) li:not(.active) a {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.95) 0%, rgba(188, 200, 218, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(40, 45, 55, 0.9);
}

.ll-bento-app-shell--midday .nav.nav-pills:not(.nav-stacked) li.active a {
  background: linear-gradient(135deg, rgba(78, 165, 168, 0.5) 0%, rgba(100, 180, 200, 0.45) 50%, rgba(90, 140, 180, 0.5) 100%);
  border-color: rgba(120, 200, 210, 0.3);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--midday .ll-bento-home-board-card,
.ll-bento-app-shell--midday .ll-bento-hero-card,
.ll-bento-app-shell--midday .ll-bento-action-card,
.ll-bento-app-shell--midday .ll-bento-card,
.ll-bento-app-shell--midday .ll-bento-extras-expanded,
.ll-bento-app-shell--midday .ll-bento-getting-started--main {
  background: rgba(200, 212, 228, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}

.ll-bento-app-shell--midday .ll-bento-tabs {
  background: rgba(200, 212, 228, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--ll-bento-radius-md);
}

.ll-bento-app-shell--midday .ll-bento-progress {
  background: rgba(255, 255, 255, 0.45);
}

.ll-bento-app-shell--midday .ll-bento-progress__fill {
  background: linear-gradient(90deg, rgba(78, 195, 200, 0.85), rgba(95, 185, 255, 0.8));
}

.ll-bento-app-shell--midday .ll-bento-brand-link {
  background: rgba(212, 222, 238, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-bar .ll-bento-icon-btn {
  background: rgba(212, 222, 238, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-bar .ll-bento-icon-btn:hover {
  background: #fff;
}

.ll-bento-app-shell--midday .ll-bento-brand-link:hover {
  background: #fff;
}

.ll-bento-app-shell--midday .ll-bento-search:hover,
.ll-bento-app-shell--midday .ll-bento-icon-btn:hover {
  background: rgba(212, 222, 238, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-tab:hover:not(.ll-bento-tab--active) {
  background: linear-gradient(135deg, rgba(212, 222, 238, 0.95) 0%, rgba(202, 215, 232, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.3);
}

.ll-bento-app-shell--midday .nav.nav-pills:not(.nav-stacked) li:not(.active) a:hover {
  background: linear-gradient(135deg, rgba(212, 222, 238, 0.95) 0%, rgba(202, 215, 232, 0.9) 100%);
}

.ll-bento-app-shell--midday .ll-bento-home-board-card:hover,
.ll-bento-app-shell--midday .ll-bento-hero-card:hover,
.ll-bento-app-shell--midday .ll-bento-action-card:hover,
.ll-bento-app-shell--midday .ll-bento-getting-started--main:hover {
  background: rgba(212, 222, 238, 0.9);
}

/* Dock - icy blue light gray; Upgrade and active item keep their styling */
/* Dock matches bento bar silver gradient */
.ll-bento-app-shell--midday .ll-bento-dock {
  background: #1B365D;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

.ll-bento-app-shell--midday .ll-bento-dock__item:not(.ll-bento-dock__item--active) {
  color: rgba(40, 45, 55, 0.9);
}

.ll-bento-app-shell--midday .ll-bento-dock__item--active {
  background: rgba(108, 112, 120, 0.9);
  border-color: rgba(120, 180, 255, 0.25);
}

.ll-bento-app-shell--midday .ll-bento-section-label,
.ll-bento-app-shell--midday .ll-bento-getting-started__stage {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--midday .ll-bento-section-group {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.35) 0%, rgba(188, 200, 218, 0.28) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(42, 157, 143, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-browse-boards .ll-bento-section-group {
  background: linear-gradient(135deg, rgba(188, 200, 218, 0.32) 0%, rgba(175, 188, 208, 0.26) 100%);
}

.ll-bento-app-shell--midday .ll-bento-extras-expanded {
  background: linear-gradient(135deg, rgba(200, 212, 228, 0.35) 0%, rgba(188, 200, 218, 0.28) 100%);
  border-color: rgba(255, 255, 255, 0.3);
}

.ll-bento-app-shell--midday .ll-bento-action-card--extras-expanded {
  background: rgba(200, 212, 228, 0.85);
}

/* Action card icons - 25% darker in mid-day */
.ll-bento-app-shell--midday .ll-bento-action-card__icon--speak {
  background: var(--ll-bento-icon-gloss), rgba(169, 182, 176, 0.85);
  border-color: rgba(146, 169, 161, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--reports {
  background: var(--ll-bento-icon-gloss), rgba(165, 179, 182, 0.85);
  border-color: rgba(146, 165, 173, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--ideas,
.ll-bento-app-shell--midday .ll-bento-action-card__icon--modeling {
  background: var(--ll-bento-icon-gloss), rgba(171, 176, 188, 0.85);
  border-color: rgba(154, 164, 180, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--extras {
  background: var(--ll-bento-icon-gloss), rgba(184, 174, 179, 0.85);
  border-color: rgba(173, 158, 165, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--green-yellow {
  background: var(--ll-bento-icon-gloss), rgba(184, 182, 171, 0.85);
  border-color: rgba(173, 169, 154, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--account {
  background: var(--ll-bento-icon-gloss), rgba(176, 176, 184, 0.85);
  border-color: rgba(161, 161, 173, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--suggested {
  background: var(--ll-bento-icon-gloss), rgba(171, 176, 188, 0.85);
  border-color: rgba(154, 164, 180, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--mine {
  background: var(--ll-bento-icon-gloss), rgba(176, 176, 184, 0.85);
  border-color: rgba(161, 161, 173, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--community {
  background: var(--ll-bento-icon-gloss), rgba(184, 182, 171, 0.85);
  border-color: rgba(173, 169, 154, 0.5);
}

.ll-bento-app-shell--midday .ll-bento-action-card__icon--recent {
  background: var(--ll-bento-icon-gloss), rgba(165, 179, 182, 0.85);
  border-color: rgba(146, 165, 173, 0.5);
}

/* Upgrade button - style guide coral in mid-day, navy text */
.ll-bento-app-shell--midday .ll-bento-dock__cta {
  background: #FF6B47;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1B365D !important;
  box-shadow: 0 4px 12px rgba(255, 107, 71, 0.25);
}

.ll-bento-app-shell--midday .ll-bento-dock__cta:hover {
  background: #e85a38;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 16px rgba(255, 107, 71, 0.35);
}

/* Dock labels - light text on darkened dock */
.ll-bento-app-shell--midday .ll-bento-dock__label,
.ll-bento-app-shell--midday .ll-bento-dock__supervisor-label,
.ll-bento-app-shell--midday .ll-bento-dock__logging-sep,
.ll-bento-app-shell--midday .ll-bento-dock__logging-last,
.ll-bento-app-shell--midday .ll-bento-dock__logging-last-label {
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-dock__item--active .ll-bento-dock__label {
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-app-shell--midday h4,
.ll-bento-app-shell--midday .ll-bento-home-board-card__title,
.ll-bento-app-shell--midday .ll-bento-hero-card__title,
.ll-bento-app-shell--midday .ll-bento-action-card__title,
.ll-bento-app-shell--midday .ll-bento-action-card__glyph,
.ll-bento-app-shell--midday .ll-bento-feature__title,
.ll-bento-app-shell--midday .ll-bento-card__title {
  color: var(--ll-bento-ink);
}

/* Light gray cards need dark text for contrast */
.ll-bento-app-shell--midday .ll-bento-home-board-card .ll-bento-home-board-card__title,
.ll-bento-app-shell--midday .ll-bento-home-board-card .ll-bento-home-board-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-getting-started--main .ll-bento-getting-started__title,
.ll-bento-app-shell--midday .ll-bento-getting-started--main .ll-bento-getting-started__hint,
.ll-bento-app-shell--midday .ll-bento-hero-card .ll-bento-hero-card__title,
.ll-bento-app-shell--midday .ll-bento-hero-card .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-action-card .ll-bento-action-card__title,
.ll-bento-app-shell--midday .ll-bento-action-card .ll-bento-action-card__sub,
.ll-bento-app-shell--midday .ll-bento-action-card .ll-bento-action-card__meta,
.ll-bento-app-shell--midday .ll-bento-card .ll-bento-card__title,
.ll-bento-app-shell--midday .ll-bento-card .ll-bento-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-feature__title,
.ll-bento-app-shell--midday .ll-bento-feature__sub {
  color: rgba(40, 45, 55, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-home-board-card .ll-bento-home-board-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-getting-started--main .ll-bento-getting-started__hint,
.ll-bento-app-shell--midday .ll-bento-hero-card .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-action-card .ll-bento-action-card__sub,
.ll-bento-app-shell--midday .ll-bento-action-card .ll-bento-action-card__meta,
.ll-bento-app-shell--midday .ll-bento-card .ll-bento-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-feature__sub {
  color: rgba(40, 45, 55, 0.75);
}

.ll-bento-app-shell--midday .ll-bento-action-card__sub,
.ll-bento-app-shell--midday .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-home-board-card__subtitle,
.ll-bento-app-shell--midday .ll-bento-action-card__meta,
.ll-bento-app-shell--midday .ll-bento-feature__sub,
.ll-bento-app-shell--midday .ll-bento-card__subtitle {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--midday .simple_board_icon {
  background: rgba(200, 212, 228, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}

.ll-bento-app-shell--midday .simple_board_icon .name,
.ll-bento-app-shell--midday .simple_board_icon .author,
.ll-bento-app-shell--midday .big_button_holder .btn {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--midday .simple_board_icon .author {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--midday a {
  color: rgba(140, 200, 255, 0.95);
}

.ll-bento-app-shell--midday .ll-bento-brand-link,
.ll-bento-app-shell--midday .ll-bento-welcome__link {
  color: inherit;
}

.ll-bento-app-shell--midday .btn-default {
  background: rgba(200, 212, 228, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(40, 45, 55, 0.95);
}

/* Mid-day mode - application header and footer */
#within_ember.bento-midday-mode-active {
  background: #8a929c;
}

/* Navbar matches bento bar (ll-bento-bar--midday) only when NOT index/landing navbar */
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) {
  background: linear-gradient(135deg, rgb(118, 122, 130) 0%, rgb(114, 118, 126) 100%) !important;
  border-bottom: 1px solid #2A9D8F !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) h1 a,
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #board_id,
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #org_name,
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) .user_name {
  color: #E8ECF2 !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity_button {
  background: linear-gradient(135deg, rgb(118, 122, 130) 0%, rgb(114, 118, 126) 100%) !important;
  border: none !important;
  box-shadow: none !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity_button:hover,
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity_button:focus-visible {
  background: linear-gradient(135deg, rgb(118, 122, 130) 0%, rgb(114, 118, 126) 100%) !important;
  border: none !important;
  box-shadow: none !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: rgba(27, 54, 93, 0.9) !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button:hover,
#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button:focus-visible {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: rgba(27, 54, 93, 0.95) !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) .btn-default:not(#identity_button) {
  background: rgba(81, 87, 99, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) .btn-default:not(#identity_button):hover {
  background: rgba(87, 93, 105, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) .ll-bento-dark-toggle--header {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: rgba(27, 54, 93, 0.9) !important;
}

#within_ember.bento-midday-mode-active > header:not(.header-index-with-dark-toggle) .ll-bento-dark-toggle--header:hover {
  background: rgb(255, 255, 255) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: rgba(27, 54, 93, 0.95) !important;
}

/* Bottom navbar matches bento bar silver gradient */
#within_ember.bento-midday-mode-active .page-footer,
#within_ember.bento-midday-mode-active footer {
  background: linear-gradient(135deg, rgb(118, 122, 130) 0%, rgb(114, 118, 126) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(230, 236, 242, 0.9);
}

#within_ember.bento-midday-mode-active .page-footer a,
#within_ember.bento-midday-mode-active footer a {
  color: rgba(140, 200, 255, 0.95);
}

#within_ember.bento-midday-mode-active .page-footer .text-muted,
#within_ember.bento-midday-mode-active footer .text-muted {
  color: rgba(200, 210, 225, 0.7);
}

/* Dark mode - medium dark theme (applies only to main bento dashboard) */
.ll-bento-app-shell--dark {
  color: #E8ECF2;
  transition: background 0.4s var(--ll-bento-ease-in-out), color 0.3s ease;
  --ll-bento-bg: #6b7889;
  --ll-bento-ink: #E8ECF2;
  --ll-bento-muted: rgba(230, 236, 242, 0.72);
  --ll-bento-card: rgba(75, 85, 100, 0.65);
  --ll-bento-card-strong: rgba(85, 95, 110, 0.75);
  --ll-bento-stroke: rgba(255, 255, 255, 0.12);
  --ll-bento-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.25);
  --ll-bento-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.15);
  --ll-bento-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.15);
  --ll-bento-material-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                                       inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ll-bento-material-counter-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.035);
  background: radial-gradient(1400px 900px at 10% 10%, rgba(120, 140, 165, 0.35) 0%, transparent 50%), radial-gradient(1200px 800px at 90% 30%, rgba(110, 135, 160, 0.3) 0%, transparent 55%), radial-gradient(1200px 800px at 40% 100%, rgba(130, 135, 155, 0.25) 0%, transparent 50%), var(--ll-bento-bg);
}

.ll-bento-app-shell--dark .ll-bento-bg-orbs {
  opacity: 0.5;
}
.ll-bento-app-shell--dark .ll-bento-bg-orbs .ll-bento-orb--a {
  background: radial-gradient(circle at 30% 30%, rgba(100, 150, 190, 0.22), transparent 58%), radial-gradient(circle at 70% 70%, rgba(120, 130, 180, 0.18), transparent 60%);
}
.ll-bento-app-shell--dark .ll-bento-bg-orbs .ll-bento-orb--b {
  background: radial-gradient(circle at 35% 35%, rgba(90, 160, 160, 0.2), transparent 60%), radial-gradient(circle at 70% 70%, rgba(130, 120, 180, 0.18), transparent 58%);
}
.ll-bento-app-shell--dark .ll-bento-bg-orbs .ll-bento-orb--c {
  background: radial-gradient(circle at 35% 35%, rgba(170, 120, 120, 0.18), transparent 58%), radial-gradient(circle at 70% 70%, rgba(100, 150, 190, 0.16), transparent 60%);
}

.ll-bento-app-shell--dark .ll-bento-device-frame {
  background: linear-gradient(135deg, rgba(128, 134, 140, 0.75) 0%, rgba(124, 130, 136, 0.68) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.ll-bento-app-shell--dark .ll-bento-bar {
  background: #172E4F !important; /* navy 15% darker */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.2), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome {
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome__label {
  color: rgba(232, 236, 242, 0.85);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome__link,
.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome__badge {
  color: #e8cb7e;
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome__link:hover {
  color: #f0d89e;
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar-welcome__celebration-icon {
  color: rgba(255, 255, 255, 0.9);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-bar__brand-home {
  color: #7eb8e0;
}

.ll-bento-app-shell--dark .ll-bento-welcome__label {
  color: rgba(230, 236, 242, 0.75);
}

.ll-bento-app-shell--dark .ll-bento-welcome__badge {
  background: rgba(75, 90, 110, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-app-shell--dark .ll-bento-welcome__link:hover .ll-bento-welcome__badge {
  background: rgba(85, 100, 120, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
}

.ll-bento-app-shell--dark .ll-bento-search {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.45) 0%, rgba(55, 68, 85, 0.38) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-app-shell--dark .ll-bento-search__input {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .ll-bento-icon-btn {
  background: var(--ll-bento-icon-gloss), linear-gradient(135deg, rgba(65, 78, 95, 0.45) 0%, rgba(55, 68, 85, 0.38) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-app-shell--dark .ll-bento-brand-link {
  background: rgba(85, 100, 120, 0.9);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-icon-btn {
  background: rgba(85, 100, 120, 0.9);
}

.ll-bento-app-shell--dark .ll-bento-bar .ll-bento-icon-btn:hover {
  background: #fff;
}

.ll-bento-app-shell--dark .ll-bento-brand-link:hover {
  background: #fff;
}

.ll-bento-app-shell--dark .ll-bento-search:hover,
.ll-bento-app-shell--dark .ll-bento-icon-btn:hover {
  background: rgba(85, 100, 120, 0.9);
}

/* Dark mode - application header and footer (when on main page) */
#within_ember.bento-dark-mode-active {
  background: #3d4a5c;
}

/* Bento action card buttons in dark mode: same as Browse boards pills (Suggested, Mine, Community) */
#within_ember.bento-dark-mode-active .ll-bento-action-card__action-btn,
#within_ember.bento-dark-mode-active .ll-bento-action-card .ll-bento-action-card__action-btn {
  background: rgba(65, 78, 95, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(230, 236, 242, 0.9) !important;
}

#within_ember.bento-dark-mode-active .ll-bento-action-card a:hover .ll-bento-action-card__action-btn,
#within_ember.bento-dark-mode-active .ll-bento-action-card .ll-bento-action-card__action-btn:hover {
  background: rgba(114, 132, 156, 0.9) !important;
  border-color: rgba(160, 145, 210, 0.3) !important;
}

#within_ember.bento-dark-mode-active a:has(.ll-bento-action-card__action-btn) {
  color: rgba(230, 236, 242, 0.9) !important;
}

/* Navbar matches bento bar (dark) only when NOT index/landing navbar */
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) {
  background: linear-gradient(135deg, rgba(63, 77, 95, 0.7) 0%, rgba(54, 68, 83, 0.62) 100%) !important;
  border-bottom: 1px solid #2A9D8F !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) h1 a,
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #board_id,
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #org_name,
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) .user_name {
  color: #E8ECF2 !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity_button {
  background: linear-gradient(135deg, rgba(63, 77, 95, 0.7) 0%, rgba(54, 68, 83, 0.62) 100%) !important;
  border: none !important;
  box-shadow: none !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity_button:hover,
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity_button:focus-visible {
  background: linear-gradient(135deg, rgba(63, 77, 95, 0.7) 0%, rgba(54, 68, 83, 0.62) 100%) !important;
  border: none !important;
  box-shadow: none !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: rgba(27, 54, 93, 0.9) !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button:hover,
#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) #identity.identity-with-dark-toggle #identity_button:focus-visible {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: rgba(27, 54, 93, 0.95) !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) .btn-default:not(#identity_button) {
  background: rgba(56, 68, 84, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) .btn-default:not(#identity_button):hover {
  background: rgba(64, 76, 92, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #E8ECF2 !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) .ll-bento-dark-toggle--header {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: rgba(27, 54, 93, 0.9) !important;
}

#within_ember.bento-dark-mode-active > header:not(.header-index-with-dark-toggle) .ll-bento-dark-toggle--header:hover {
  background: rgb(255, 255, 255) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: rgba(27, 54, 93, 0.95) !important;
}

#within_ember.bento-dark-mode-active .page-footer,
#within_ember.bento-dark-mode-active footer {
  background: linear-gradient(180deg, rgba(40, 49, 61, 0.6) 0%, rgba(36, 45, 56, 0.75) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(230, 236, 242, 0.9);
}

#within_ember.bento-dark-mode-active .page-footer a,
#within_ember.bento-dark-mode-active footer a {
  color: rgba(140, 200, 255, 0.95);
}

#within_ember.bento-dark-mode-active .page-footer a:hover,
#within_ember.bento-dark-mode-active footer a:hover {
  color: rgb(170, 220, 255);
}

#within_ember.bento-dark-mode-active .page-footer .text-muted,
#within_ember.bento-dark-mode-active footer .text-muted {
  color: rgba(200, 210, 225, 0.7);
}

#within_ember.bento-dark-mode-active .page-footer span:not(.icons a span),
#within_ember.bento-dark-mode-active footer .wide_links > .row > div > span:first-child {
  color: rgba(230, 236, 242, 0.85);
}

#within_ember.bento-dark-mode-active .page-footer .page-footer__app-name .nav-header__app-name-lingo {
  color: #F2B95A !important;
}

#within_ember.bento-dark-mode-active .page-footer .page-footer__app-name .nav-header__app-name-linq {
  color: #3A6BC7 !important;
}

.ll-bento-app-shell--dark .ll-bento-tabs {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.45) 0%, rgba(55, 68, 85, 0.38) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
  border-radius: var(--ll-bento-radius-md);
}

.ll-bento-app-shell--dark .ll-bento-tab {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.9) 0%, rgba(55, 68, 85, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(230, 236, 242, 0.85);
}

.ll-bento-app-shell--dark .ll-bento-tab:hover:not(.ll-bento-tab--active) {
  background: linear-gradient(135deg, rgba(75, 90, 110, 0.9) 0%, rgba(65, 80, 98, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

.ll-bento-app-shell--dark .ll-bento-tab--active {
  background: #546886; /* 25% lighter than navy #1B365D */
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-home-board-card__btn {
  background: #1B365D;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-home-board-card:hover .ll-bento-home-board-card__btn {
  background: #243d66;
  border-color: rgba(255, 255, 255, 0.2);
}

.ll-bento-app-shell--dark .ll-bento-getting-started__btn {
  background: #1B365D;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-getting-started--main:hover .ll-bento-getting-started__btn {
  background: #243d66;
  border-color: rgba(255, 255, 255, 0.2);
}

.ll-bento-app-shell--dark .nav.nav-pills:not(.nav-stacked) li a {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.9) 0%, rgba(55, 68, 85, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(230, 236, 242, 0.85);
}

.ll-bento-app-shell--dark .nav.nav-pills:not(.nav-stacked) li a:hover {
  background: linear-gradient(135deg, rgba(75, 90, 110, 0.9) 0%, rgba(65, 80, 98, 0.85) 100%);
}

.ll-bento-app-shell--dark .nav.nav-pills:not(.nav-stacked) li.active a {
  background: linear-gradient(135deg, rgba(78, 165, 168, 0.5) 0%, rgba(100, 180, 200, 0.45) 50%, rgba(90, 140, 180, 0.5) 100%);
  border-color: rgba(120, 200, 210, 0.3);
  color: rgba(15, 25, 35, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-boards-toolbar {
  background: rgba(65, 78, 95, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.ll-bento-app-shell--dark .ll-bento-filter-pill {
  background: rgba(65, 78, 95, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(230, 236, 242, 0.85);
}

.ll-bento-app-shell--dark .ll-bento-filter-pill:hover {
  background: rgba(85, 100, 120, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}

.ll-bento-app-shell--dark .ll-bento-filter-pill--active {
  background: rgba(100, 140, 180, 0.4);
  border-color: rgba(160, 145, 210, 0.4);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-browse-boards {
  background: rgba(65, 78, 95, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}
.ll-bento-app-shell--dark .ll-bento-browse-boards:hover {
  background: rgba(75, 90, 110, 0.75);
}
.ll-bento-app-shell--dark .ll-bento-browse-boards .ll-bento-browse-boards__icon {
  background: var(--ll-bento-icon-gloss), rgba(224, 240, 243, 0.4);
  border-color: rgba(201, 224, 233, 0.35);
  color: rgba(50, 55, 70, 0.9);
}
.ll-bento-app-shell--dark .ll-bento-browse-boards .ll-bento-browse-boards__pills li a {
  background: rgba(65, 78, 95, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(230, 236, 242, 0.9);
}
.ll-bento-app-shell--dark .ll-bento-browse-boards ul.nav.nav-pills.ll-bento-browse-boards__pills li a:hover {
  background: rgba(114, 132, 156, 0.9);
  border-color: rgba(160, 145, 210, 0.3);
}
.ll-bento-app-shell--dark .ll-bento-browse-boards .ll-bento-browse-boards__pills li.active a {
  background: linear-gradient(135deg, rgba(145, 130, 180, 0.5) 0%, rgba(100, 140, 180, 0.45) 100%);
  border-color: rgba(160, 145, 210, 0.5);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--dark .ll-bento-home-board-card,
.ll-bento-app-shell--dark .ll-bento-hero-card,
.ll-bento-app-shell--dark .ll-bento-action-card,
.ll-bento-app-shell--dark .ll-bento-getting-started--main {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.45) 0%, rgba(55, 68, 85, 0.38) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-app-shell--dark .ll-bento-home-board-card:hover,
.ll-bento-app-shell--dark .ll-bento-hero-card:hover,
.ll-bento-app-shell--dark .ll-bento-action-card:hover,
.ll-bento-app-shell--dark .ll-bento-getting-started--main:hover {
  background: rgba(75, 90, 110, 0.75);
}

.ll-bento-app-shell--dark .ll-bento-home-board-card__title,
.ll-bento-app-shell--dark .ll-bento-hero-card__title,
.ll-bento-app-shell--dark .ll-bento-action-card__title,
.ll-bento-app-shell--dark .ll-bento-action-card__sub,
.ll-bento-app-shell--dark .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--dark .ll-bento-home-board-card__subtitle,
.ll-bento-app-shell--dark .ll-bento-getting-started--main .ll-bento-getting-started__title {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .ll-bento-action-card__sub,
.ll-bento-app-shell--dark .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--dark .ll-bento-home-board-card__subtitle,
.ll-bento-app-shell--dark .ll-bento-getting-started--main .ll-bento-getting-started__hint {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--dark .ll-bento-progress {
  background: rgba(255, 255, 255, 0.12);
}

.ll-bento-app-shell--dark .ll-bento-progress__fill {
  background: linear-gradient(90deg, rgba(78, 195, 200, 0.85), rgba(95, 185, 255, 0.8));
}

.ll-bento-app-shell--dark .ll-bento-dock {
  background: #172E4F; /* navy 15% darker */
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.2), var(--ll-bento-material-inner-highlight), var(--ll-bento-material-counter-shadow);
}

.ll-bento-app-shell--dark .ll-bento-dock__item--active {
  background: rgba(68, 81, 99, 0.9);
  border-color: rgba(120, 180, 255, 0.25);
}

.ll-bento-app-shell--dark .ll-bento-dock__cta {
  background: #D95B3C; /* style guide coral #FF6B47 at 15% darker */
  border-color: rgba(0, 0, 0, 0.12);
  color: #1B365D !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 0.25s var(--ll-bento-ease-in-out), background 0.25s var(--ll-bento-ease-in-out), border-color 0.25s var(--ll-bento-ease-in-out), box-shadow 0.25s var(--ll-bento-ease-in-out), outline-color 0.2s var(--ll-bento-ease-out);
}
.ll-bento-app-shell--dark .ll-bento-dock__cta:hover {
  background: #E86442; /* slightly lighter coral */
  border-color: rgba(0, 0, 0, 0.08);
}
.ll-bento-app-shell--dark .ll-bento-dock__cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ll-bento-app-shell--dark .ll-bento-dock__label,
.ll-bento-app-shell--dark .ll-bento-dock__supervisor-label,
.ll-bento-app-shell--dark .ll-bento-dock__logging-sep,
.ll-bento-app-shell--dark .ll-bento-dock__logging-last,
.ll-bento-app-shell--dark .ll-bento-dock__logging-last-label {
  color: rgba(232, 236, 242, 0.95);
}

.ll-bento-app-shell--dark .ll-bento-card {
  background: rgba(65, 78, 95, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
}

.ll-bento-app-shell--dark .ll-bento-section-label,
.ll-bento-app-shell--dark .ll-bento-getting-started__stage {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--dark .ll-bento-section-group {
  border-left-color: rgba(78, 205, 196, 0.6);
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.35) 0%, rgba(55, 68, 85, 0.28) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 2px rgba(0, 0, 0, 0.035);
}

.ll-bento-app-shell--dark .ll-bento-browse-boards .ll-bento-section-group {
  background: linear-gradient(135deg, rgba(55, 68, 85, 0.32) 0%, rgba(48, 60, 75, 0.26) 100%);
}

.ll-bento-app-shell--dark .ll-bento-extras-expanded {
  background: linear-gradient(135deg, rgba(65, 78, 95, 0.35) 0%, rgba(55, 68, 85, 0.28) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 2px rgba(0, 0, 0, 0.035);
}

.ll-bento-app-shell--dark .ll-bento-action-card--extras-expanded {
  background: rgba(65, 78, 95, 0.7);
}

/* Action card icons - glass look in dark mode */
.ll-bento-app-shell--dark .ll-bento-action-card__icon {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--speak {
  background: var(--ll-bento-icon-gloss), rgba(228, 243, 237, 0.4);
  border-color: rgba(201, 228, 219, 0.35);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--reports {
  background: var(--ll-bento-icon-gloss), rgba(224, 240, 243, 0.4);
  border-color: rgba(201, 224, 233, 0.35);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--ideas,
.ll-bento-app-shell--dark .ll-bento-action-card__icon--modeling {
  background: var(--ll-bento-icon-gloss), rgba(231, 237, 251, 0.4);
  border-color: rgba(210, 222, 242, 0.35);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--extras {
  background: var(--ll-bento-icon-gloss), rgba(246, 234, 240, 0.4);
  border-color: rgba(233, 215, 224, 0.35);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--green-yellow {
  background: var(--ll-bento-icon-gloss), rgba(246, 243, 231, 0.4);
  border-color: rgba(233, 228, 210, 0.35);
}

.ll-bento-app-shell--dark .ll-bento-action-card__icon--account {
  background: var(--ll-bento-icon-gloss), rgba(237, 237, 246, 0.4);
  border-color: rgba(220, 220, 233, 0.35);
}

/* Same as Browse boards pills (Suggested, Mine, Community) in dark mode */
.ll-bento-app-shell--dark .ll-bento-action-card .ll-bento-action-card__action-btn,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--speak,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--reports,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--ideas,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--modeling,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--extras,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--account,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--green-yellow,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--suggested,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--mine,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--community,
.ll-bento-app-shell--dark .ll-bento-action-card__action-btn--recent {
  background: rgba(65, 78, 95, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(230, 236, 242, 0.9) !important;
}

.ll-bento-app-shell--dark .ll-bento-action-card a:hover .ll-bento-action-card__action-btn,
.ll-bento-app-shell--dark .ll-bento-action-card .ll-bento-action-card__action-btn:hover {
  background: rgba(114, 132, 156, 0.9) !important;
  border-color: rgba(160, 145, 210, 0.3) !important;
}

.ll-bento-app-shell--dark .ll-bento-action-card__glyph,
.ll-bento-app-shell--dark .ll-bento-feature__title,
.ll-bento-app-shell--dark .ll-bento-card__title {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .ll-bento-action-card__meta,
.ll-bento-app-shell--dark .ll-bento-feature__sub,
.ll-bento-app-shell--dark .ll-bento-card__subtitle {
  color: var(--ll-bento-muted);
}

.ll-bento-app-shell--dark h4 {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .simple_board_icon .name,
.ll-bento-app-shell--dark .simple_board_icon .author,
.ll-bento-app-shell--dark .big_button_holder .btn {
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark a {
  color: rgba(140, 200, 255, 0.95);
}

.ll-bento-app-shell--dark a:hover {
  color: rgb(170, 220, 255);
}

.ll-bento-app-shell--dark .ll-bento-brand-link,
.ll-bento-app-shell--dark .ll-bento-welcome__link {
  color: inherit;
}

.ll-bento-app-shell--dark .btn-default {
  background: rgba(70, 85, 105, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .btn-default:hover {
  background: rgba(80, 95, 115, 0.9);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--dark .simple_board_icon {
  background: rgba(65, 78, 95, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.ll-bento-app-shell--dark .simple_board_icon .author {
  color: var(--ll-bento-muted);
}

/* Focus ring - keyboard focus only (no outline on mouse click/blur to prevent flash) */
.ll-bento-app-shell .ll-bento-tab:focus-visible,
.ll-bento-app-shell .ll-bento-btn:focus-visible,
.ll-bento-app-shell .ll-bento-brand-link:focus-visible,
.ll-bento-app-shell .ll-bento-icon-btn:focus-visible,
.ll-bento-app-shell .ll-bento-search:focus-visible,
.ll-bento-app-shell .ll-bento-getting-started:focus-visible,
.ll-bento-app-shell .ll-bento-action-card:focus-visible,
.ll-bento-app-shell .ll-bento-hero-card:focus-visible,
.ll-bento-app-shell .ll-bento-home-board-card:focus-visible,
.ll-bento-app-shell .ll-bento-dock__item:focus-visible,
.ll-bento-app-shell .ll-bento-dock__cta:focus-visible,
.ll-bento-app-shell .ll-bento-dock__logging-btn:focus-visible,
.ll-bento-app-shell .ll-bento-action-card__action-btn:focus-visible,
.ll-bento-app-shell .ll-bento-hero-card__btn:focus-visible,
.ll-bento-app-shell .ll-bento-home-board-card__btn:focus-visible,
.ll-bento-app-shell .ll-bento-getting-started__btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .ll-bento-app-shell .ll-bento-tab:focus-visible,
  .ll-bento-app-shell .ll-bento-btn:focus-visible,
  .ll-bento-app-shell .ll-bento-brand-link:focus-visible,
  .ll-bento-app-shell .ll-bento-icon-btn:focus-visible,
  .ll-bento-app-shell .ll-bento-search:focus-visible,
  .ll-bento-app-shell .ll-bento-getting-started:focus-visible,
  .ll-bento-app-shell .ll-bento-action-card:focus-visible,
  .ll-bento-app-shell .ll-bento-hero-card:focus-visible,
  .ll-bento-app-shell .ll-bento-home-board-card:focus-visible,
  .ll-bento-app-shell .ll-bento-dock__item:focus-visible,
  .ll-bento-app-shell .ll-bento-dock__cta:focus-visible,
  .ll-bento-app-shell .ll-bento-dock__logging-btn:focus-visible,
  .ll-bento-app-shell .ll-bento-action-card__action-btn:focus-visible,
  .ll-bento-app-shell .ll-bento-hero-card__btn:focus-visible,
  .ll-bento-app-shell .ll-bento-home-board-card__btn:focus-visible,
  .ll-bento-app-shell .ll-bento-getting-started__btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.ll-bento-app-shell {
  /* Topbar elements use outline: none by default; only show ring on focus-visible */
}
.ll-bento-app-shell .ll-bento-brand-link:focus-visible,
.ll-bento-app-shell .ll-bento-icon-btn:focus-visible,
.ll-bento-app-shell .ll-bento-search:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .ll-bento-app-shell .ll-bento-brand-link:focus-visible,
  .ll-bento-app-shell .ll-bento-icon-btn:focus-visible,
  .ll-bento-app-shell .ll-bento-search:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Default theme – style guide colors and typography
   Teal #4ECDC4 (accent), Dark Teal #2A9D8F (accessible), White #FFFFFF, Light Gray #F0F0F0, Coral #FF6B47
   Typography: Lexend (headings), Atkinson Hyperlegible (body), Source Code Pro (data) */
.ll-bento-app-shell--default,
.ll-bento-app-shell--default {
  --ll-bento-bg: #FFFFFF;
  --ll-bento-ink: #1e2430;
  --ll-bento-muted: rgba(30, 36, 48, 0.7);
  font-family: "Atkinson Hyperlegible", "Open Sans", Calibri, sans-serif;
  background: #FFFFFF;
  color: var(--ll-bento-ink);
}

/* Light mode (default) – brand palette */
.ll-bento-app-shell--default {
  --ll-bento-primary-1: #3d7a5c;
  --ll-bento-primary-2: #7eb8e0;
  --ll-bento-primary-3: #3A6BC7;
  --ll-bento-secondary: #eaf2fb;
  --ll-bento-functional-green: #3d7a5c;
  --ll-bento-functional-coral: #d4a84b;
}

/* Gold theme – teal/coral accent */
.ll-bento-app-shell--default {
  --ll-bento-primary-1: #4ECDC4;
  --ll-bento-functional-green: #2A9D8F;
  --ll-bento-functional-coral: #FF6B47;
}

/* #index_view only exists when the index route is active (template in app/templates/index.hbs).
   When you navigate to landing, user profile, or a board, the outlet renders
   a different template and #index_view is not in the DOM. Use white so no teal bar shows above the footer;
   the teal bar below the navbar is from #content.index.with_user { border-top: 15px solid #2A9D8F }. */
#within_ember.bento-default-mode-active #index_view {
  background: #FFFFFF;
}

#within_ember.bento-default-mode-active #index_view {
  background: #FFFFFF;
}

.ll-bento-app-shell--default .ll-bento-bg-orbs, .ll-bento-app-shell--default .ll-bento-bg-orbs,
.ll-bento-app-shell--default .ll-bento-bg-orbs {
  opacity: 0;
}

/* Default shell: active pill gradient (7eb8e0 → 3a6bc7). */
.ll-bento-app-shell--default {
  background: linear-gradient(135deg, rgba(126, 184, 224, 0.35) 0%, rgba(58, 107, 199, 0.3) 100%);
}

/* Default palette shell: top-down gradient – blue, gold (subtle), green (subtle). */
.ll-bento-app-shell--default {
  background: linear-gradient(to bottom, rgba(126, 184, 224, 0.25) 0%, rgba(212, 168, 75, 0.12) 50%, rgba(61, 122, 92, 0.14) 100%);
}

.ll-bento-app-shell--default .ll-bento-device-frame, .ll-bento-app-shell--default .ll-bento-device-frame,
.ll-bento-app-shell--default .ll-bento-device-frame {
  border-color: rgba(0, 0, 0, 0.08);
}

.ll-bento-app-shell--default .ll-bento-bar, .ll-bento-app-shell--default .ll-bento-bar,
.ll-bento-app-shell--default .ll-bento-bar {
  background: #FFFFFF;
  border-bottom: 1px solid #1b2a4a;
  font-family: "Lexend", "Nunito Sans", Calibri, sans-serif;
}

.ll-bento-app-shell--default .ll-bento-bar .ll-bento-bar-welcome__badge,
.ll-bento-app-shell--default .ll-bento-bar .ll-bento-bar-welcome__link {
  color: #3D7A5C;
}

.ll-bento-app-shell--default .ll-bento-bar .ll-bento-bar-welcome__link:hover {
  color: #2d5a45;
}

/* Demo: color circles on bento bar (default theme only) – change ll-bento-main-content bg for client preview */
.ll-bento-bar--default .ll-bento-bar__demo-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.ll-bento-demo-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ll-bento-demo-color:hover {
  transform: scale(1.12);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ll-bento-demo-color:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.35);
}

.ll-bento-demo-color--navy {
  background: #1B365D;
}

.ll-bento-demo-color--navy-light {
  background: #C6CDD7;
}

.ll-bento-demo-color--tab-light {
  background: #E9F9F8;
}

.ll-bento-demo-color--reset {
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e2430;
  font-size: 14px;
}

.ll-bento-demo-color--reset:hover {
  background: #e8e8e8;
  color: #1B365D;
}

.ll-bento-demo-color--border {
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ll-bento-demo-color--border .ll-bento-demo-color--border-icon {
  width: 8px;
  height: 14px;
  border-left: 3px solid rgba(42, 157, 143, 0.7);
  border-radius: 0 2px 2px 0;
}

.ll-bento-demo-color--border:hover .ll-bento-demo-color--border-icon {
  border-left-color: #2A9D8F;
}

.ll-bento-demo-color--border-off .ll-bento-demo-color--border-icon {
  border-left-color: rgba(30, 36, 48, 0.25);
  opacity: 0.7;
}

/* Thick state: icon shows wider bar (matches 24px section border) */
.ll-bento-demo-color--border-thick .ll-bento-demo-color--border-icon {
  border-left-width: 10px;
}

/* When border is toggled off, hide left bar on section groups (specificity must beat default-theme rule below) */
.ll-bento-device-frame--no-section-border .ll-bento-section-group,
.ll-bento-device-frame--no-section-border .ll-bento-extras-expanded {
  border-left-width: 0;
  padding-left: 20px;
}

.ll-bento-app-shell--default .ll-bento-section-group, .ll-bento-app-shell--default .ll-bento-section-group,
.ll-bento-app-shell--default .ll-bento-extras-expanded,
.ll-bento-app-shell--default .ll-bento-extras-expanded {
  background: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid rgba(42, 157, 143, 0.55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Default theme: when border toggle is off, remove teal left bar on all section groups (including Primary actions and filter) */
.ll-bento-app-shell--default .ll-bento-device-frame--no-section-border .ll-bento-section-group, .ll-bento-app-shell--default .ll-bento-device-frame--no-section-border .ll-bento-section-group,
.ll-bento-app-shell--default .ll-bento-device-frame--no-section-border .ll-bento-extras-expanded,
.ll-bento-app-shell--default .ll-bento-device-frame--no-section-border .ll-bento-extras-expanded {
  border-left-width: 0;
  border-left-color: transparent;
  padding-left: 20px;
}

/* Default theme: thick border = 4px + 20px fill to the right (24px total teal strip) */
.ll-bento-app-shell--default .ll-bento-device-frame--section-border-thick .ll-bento-section-group, .ll-bento-app-shell--default .ll-bento-device-frame--section-border-thick .ll-bento-section-group,
.ll-bento-app-shell--default .ll-bento-device-frame--section-border-thick .ll-bento-extras-expanded,
.ll-bento-app-shell--default .ll-bento-device-frame--section-border-thick .ll-bento-extras-expanded {
  border-left-width: 24px;
  border-left-color: rgba(42, 157, 143, 0.55);
  padding-left: 24px;
}

.ll-bento-app-shell--default .ll-bento-actions .ll-bento-section-group:first-child, .ll-bento-app-shell--default .ll-bento-actions .ll-bento-section-group:first-child {
  background: linear-gradient(to bottom, #E8EBED 0%, rgba(27, 54, 93, 0.06) 12%, #F5F7FA 25%, #F5F7FA 75%, rgba(27, 54, 93, 0.06) 88%, #E8EBED 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* When a demo color is selected, use light gray 5% darker instead of gradient */
/* When a demo background is set, disable backdrop-filter so the solid color matches the navbar (no blending with shell) */
.ll-bento-device-frame--demo-bg {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ll-bento-app-shell--default .ll-bento-device-frame--demo-bg .ll-bento-actions .ll-bento-section-group:first-child, .ll-bento-app-shell--default .ll-bento-device-frame--demo-bg .ll-bento-actions .ll-bento-section-group:first-child {
  background: #E8EBED;
}

.ll-bento-app-shell--default .ll-bento-getting-started--main, .ll-bento-app-shell--default .ll-bento-getting-started--main {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ll-bento-app-shell--default .ll-bento-getting-started--main:hover, .ll-bento-app-shell--default .ll-bento-getting-started--main:hover {
  background: #F0F0F0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.ll-bento-app-shell--default .ll-bento-home-board-card, .ll-bento-app-shell--default .ll-bento-home-board-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ll-bento-app-shell--default .ll-bento-home-board-card:hover, .ll-bento-app-shell--default .ll-bento-home-board-card:hover {
  background: #F0F0F0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.ll-bento-app-shell--default .ll-bento-browse-boards, .ll-bento-app-shell--default .ll-bento-browse-boards {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ll-bento-app-shell--default .ll-bento-browse-boards:hover, .ll-bento-app-shell--default .ll-bento-browse-boards:hover {
  background: #F0F0F0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.ll-bento-app-shell--default .ll-bento-browse-boards__icon, .ll-bento-app-shell--default .ll-bento-browse-boards__icon {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(78, 205, 196, 0.15);
  border-color: rgba(78, 205, 196, 0.3);
}

/* Light mode (default): Help me… buttons – solid #3D7A5C, no box-shadow */
.ll-bento-app-shell--default .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card__btn {
  background: #3D7A5C;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: none;
}

.ll-bento-app-shell--default .ll-bento-getting-started--main:hover .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card:hover .ll-bento-home-board-card__btn {
  background: #357a52;
  box-shadow: none;
}

.ll-bento-app-shell--default .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card__btn {
  background: #2A9D8F;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.2);
}

.ll-bento-app-shell--default .ll-bento-getting-started--main:hover .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card:hover .ll-bento-home-board-card__btn {
  background: #238a7e;
  box-shadow: 0 4px 10px rgba(42, 157, 143, 0.25);
}

/* Gold theme: Help me… buttons use same 20% lighter blue */
.ll-bento-app-shell--default .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card__btn {
  background: rgb(137.4229249012, 166.6679841897, 221.5770750988);
  border-color: rgba(58, 107, 199, 0.4);
  color: #fff;
  box-shadow: none;
}

.ll-bento-app-shell--default .ll-bento-getting-started--main:hover .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-getting-started--main:active .ll-bento-getting-started__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card:hover .ll-bento-home-board-card__btn,
.ll-bento-app-shell--default .ll-bento-home-board-card:active .ll-bento-home-board-card__btn {
  background: rgb(97.7114624506, 136.8339920949, 210.2885375494);
  box-shadow: none;
}

/* Lifted card shadows – action cards and hero card look elevated off the page */
.ll-bento-app-shell--default .ll-bento-hero-card, .ll-bento-app-shell--default .ll-bento-hero-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06), 0 20px 48px rgba(0, 0, 0, 0.06);
}

.ll-bento-app-shell--default .ll-bento-hero-card:hover, .ll-bento-app-shell--default .ll-bento-hero-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.08), 0 28px 56px rgba(0, 0, 0, 0.07);
}

.ll-bento-app-shell--default .ll-bento-action-card, .ll-bento-app-shell--default .ll-bento-action-card,
.ll-bento-app-shell--default .ll-bento-action-card--extras-expanded, .ll-bento-app-shell--default .ll-bento-action-card--extras-expanded {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06), 0 14px 40px rgba(0, 0, 0, 0.05);
}

.ll-bento-app-shell--default .ll-bento-action-card:hover, .ll-bento-app-shell--default .ll-bento-action-card:hover {
  background: #F0F0F0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.06);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon, .ll-bento-app-shell--default .ll-bento-action-card__icon {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--speak, .ll-bento-app-shell--default .ll-bento-action-card__icon--speak {
  /* Much lighter tint of active action button color #3D7A5C */
  background: rgba(61, 122, 92, 0.14);
  border-color: rgba(61, 122, 92, 0.28);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--reports, .ll-bento-app-shell--default .ll-bento-action-card__icon--reports {
  background: rgba(78, 205, 196, 0.15);
  border-color: rgba(78, 205, 196, 0.3);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--ideas, .ll-bento-app-shell--default .ll-bento-action-card__icon--ideas,
.ll-bento-app-shell--default .ll-bento-action-card__icon--modeling, .ll-bento-app-shell--default .ll-bento-action-card__icon--modeling {
  background: rgba(78, 205, 196, 0.12);
  border-color: rgba(78, 205, 196, 0.25);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--extras, .ll-bento-app-shell--default .ll-bento-action-card__icon--extras {
  /* Lighter tint of Lingo gold – more gold, less orange */
  background: rgba(218, 198, 115, 0.26);
  border-color: rgba(218, 198, 115, 0.45);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--green-yellow, .ll-bento-app-shell--default .ll-bento-action-card__icon--green-yellow {
  background: rgba(78, 205, 196, 0.1);
  border-color: rgba(78, 205, 196, 0.2);
}

.ll-bento-app-shell--default .ll-bento-action-card__icon--account, .ll-bento-app-shell--default .ll-bento-action-card__icon--account {
  background: #F0F0F0;
  border-color: rgba(0, 0, 0, 0.08);
}

.ll-bento-app-shell--default .ll-bento-action-card__action-btn--speak, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--speak,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--reports, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--reports,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--ideas, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--ideas,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--modeling, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--modeling,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--extras, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--extras,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--account, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--account,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--green-yellow, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--green-yellow,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--suggested, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--suggested,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--mine, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--mine,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--community, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--community,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--recent, .ll-bento-app-shell--default .ll-bento-action-card__action-btn--recent {
  background: #E2EBE7; /* #3D7A5C at 85% lighter */
  border: 1px solid rgba(61, 122, 92, 0.35);
  color: var(--ll-bento-ink);
}

/* Speak mode = main action: 20% darker than default action button */
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--speak,
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--speak {
  background: rgb(165.6326530612, 193.3673469388, 181.0408163265);
  border-color: rgba(61, 122, 92, 0.5);
}

/* Default palette: speak button bg #357a5c at 50% lighter. */
.ll-bento-app-shell--default .ll-bento-action-card__action-btn--speak {
  background: rgb(199.2285714286, 230.7714285714, 217.0571428571);
}

.ll-bento-app-shell--default .ll-bento-hero-card__btn, .ll-bento-app-shell--default .ll-bento-hero-card__btn {
  background: #2A9D8F;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.2);
}

.ll-bento-app-shell--default .ll-bento-btn--primary, .ll-bento-app-shell--default .ll-bento-btn--primary {
  background: #2A9D8F;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.2);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--default .nav.nav-pills:not(.nav-stacked) li a, .ll-bento-app-shell--default .nav.nav-pills:not(.nav-stacked) li a {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ll-bento-app-shell--default .nav.nav-pills:not(.nav-stacked) li.active a, .ll-bento-app-shell--default .nav.nav-pills:not(.nav-stacked) li.active a {
  background: #2A9D8F;
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.2);
}

.ll-bento-app-shell--default .ll-bento-dock, .ll-bento-app-shell--default .ll-bento-dock {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.06);
}

.ll-bento-app-shell--default .ll-bento-dock__cta, .ll-bento-app-shell--default .ll-bento-dock__cta {
  background: #FF6B47;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.98);
}

.ll-bento-app-shell--default .ll-bento-dock__cta:hover, .ll-bento-app-shell--default .ll-bento-dock__cta:hover {
  background: #e8573a;
}

.ll-bento-app-shell--default .ll-bento-tabs, .ll-bento-app-shell--default .ll-bento-tabs {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  border-radius: var(--ll-bento-radius-md);
}

.ll-bento-app-shell--default .ll-bento-tab, .ll-bento-app-shell--default .ll-bento-tab {
  background: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  color: var(--ll-bento-ink);
}

.ll-bento-app-shell--default .ll-bento-tab:hover:not(.ll-bento-tab--active), .ll-bento-app-shell--default .ll-bento-tab:hover:not(.ll-bento-tab--active) {
  background: #e8e8e8;
  border-color: rgba(0, 0, 0, 0.1);
}

.ll-bento-app-shell--default .ll-bento-tab--active, .ll-bento-app-shell--default .ll-bento-tab--active {
  background: #7EB8E0;
  border-color: rgba(126, 184, 224, 0.5);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Light mode: replace purplish pill colors with 3a6bc7 (darker) and 7eb8e0 (lighter) */
.ll-bento-app-shell--default .ll-bento-browse-boards__pills li a:hover {
  border-color: rgba(126, 184, 224, 0.5);
}

.ll-bento-app-shell--default .ll-bento-browse-boards__pills li.active a {
  background: linear-gradient(135deg, rgba(126, 184, 224, 0.35) 0%, rgba(58, 107, 199, 0.3) 100%);
  border-color: rgba(58, 107, 199, 0.6);
  box-shadow: 0 4px 12px rgba(58, 107, 199, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Default theme – headings use Lexend */
.ll-bento-app-shell--default .ll-bento-getting-started__title, .ll-bento-app-shell--default .ll-bento-getting-started__title,
.ll-bento-app-shell--default .ll-bento-hero-card__title, .ll-bento-app-shell--default .ll-bento-hero-card__title,
.ll-bento-app-shell--default .ll-bento-action-card__title, .ll-bento-app-shell--default .ll-bento-action-card__title,
.ll-bento-app-shell--default .ll-bento-section-label, .ll-bento-app-shell--default .ll-bento-section-label,
.ll-bento-app-shell--default .ll-bento-brand__name, .ll-bento-app-shell--default .ll-bento-brand__name {
  font-family: "Lexend", "Nunito Sans", Calibri, sans-serif;
  font-weight: 700;
}

.ll-bento-app-shell--default .ll-bento-getting-started__hint, .ll-bento-app-shell--default .ll-bento-getting-started__hint,
.ll-bento-app-shell--default .ll-bento-hero-card__subtitle, .ll-bento-app-shell--default .ll-bento-hero-card__subtitle,
.ll-bento-app-shell--default .ll-bento-action-card__sub, .ll-bento-app-shell--default .ll-bento-action-card__sub,
.ll-bento-app-shell--default .ll-bento-action-card__meta, .ll-bento-app-shell--default .ll-bento-action-card__meta {
  font-family: "Lexend", "Nunito Sans", Calibri, sans-serif;
  font-weight: 500;
}

/* Responsiveness for bento layout */
@media (max-width: 375px) {
  .ll-bento-search {
    min-width: 140px;
  }
  .ll-bento-btn--primary {
    min-width: 140px;
  }
  .ll-bento-grid {
    grid-template-columns: 1fr;
  }
}
/* Show company name in navbar on index/landing when screen is small (global h1 span is hidden below 1000px) */
@media (max-width: 1024px) {
  #within_ember.index-or-landing-view #nav_header h1 .nav-header__app-name {
    display: inline !important;
  }
}
/* Responsive */
/* 768px–900px: shift Product and Company footer columns right */
/* 768px and below: reduce section padding to expand content (not navbar) */
/* Very small screens: minimal section padding (not navbar) */
/* ── For-Schools: additional responsive refinements ── */
/* Mid-range desktop (1201px–1600px): reduce padding so hero columns aren't squeezed */
/* Intermediate desktop (901px–1200px): reduce oversized section padding */
/* Tablet (900px and below): center mockup, hide floating badges, tighten
   typography, and override the existing 12.5rem section padding */
/* Small screens (600px and below): stack footer, buttons, and a11y note */
/* Mobile (480px and below): single-column stats, smaller typography,
   re-assert tight section padding */
/* Very small screens (360px and below): minimal typography */
:root {
  --ll-surface2: rgba(255, 255, 255, 0.72);
  --ll-text: #0f172a;
  --ll-muted: rgba(15, 23, 42, 0.62);
  --ll-line: rgba(15, 23, 42, 0.1);
  --ll-teal: #2cb7b0;
  --ll-dark-teal: #2A9D8F;
  --ll-coral: #f06a5b;
  --ll-teal-tint: rgba(44, 183, 176, 0.15);
  --ll-coral-tint: rgba(240, 106, 91, 0.12);
  --ll-navy-tint: rgba(15, 23, 42, 0.08);
  --ll-blue: #5b8def;
  --ll-shadow: 0 12px 35px rgba(15, 23, 42, 0.1);
  --ll-shadow2: 0 10px 25px rgba(15, 23, 42, 0.08);
  --ll-r-lg: 22px;
  --ll-r-md: 16px;
  --ll-r-sm: 12px;
  --ll-tap: 0.98;
}

.ll-shell {
  padding-bottom: 14px;
}

.ll-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0;
  padding-bottom: 4px;
  background: var(--ll-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #2A9D8F;
}

.ll-topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
  width: 100%;
  box-sizing: border-box;
}

.ll-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

.ll-mark {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, var(--ll-teal-tint), transparent 60%), radial-gradient(circle at 70% 70%, var(--ll-coral-tint), transparent 60%), var(--ll-surface);
  box-shadow: var(--ll-shadow2);
  border: 1px solid var(--ll-line);
}

.ll-brandname {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ll-text);
}

.ll-searchpill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: var(--ll-shadow2);
}

.ll-searchicon {
  opacity: 0.65;
}

.ll-searchtext {
  color: var(--ll-muted);
}

.ll-kbd {
  margin-left: auto;
  font-size: 14px;
  color: var(--ll-muted);
  border: 1px solid var(--ll-line);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ll-surface);
}

.ll-upgrade {
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ll-coral-tint), var(--ll-teal-tint));
  border: 1px solid var(--ll-line);
  box-shadow: var(--ll-shadow2);
  font-weight: 650;
  color: var(--ll-coral);
}

.ll-upgrade:active {
  transform: scale(var(--ll-tap));
}

.ll-upgrade--topbar {
  padding: 6px 12px;
  font-size: 14px;
}

.ll-main {
  padding: 14px;
}

.ll-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--ll-shadow);
  z-index: 40;
}

.ll-dockItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  padding: 8px 8px;
  color: rgba(15, 23, 42, 0.68);
}

.ll-dockItem.is-active {
  background: rgba(44, 183, 176, 0.1);
  color: rgba(15, 23, 42, 0.92);
}

.ll-dockItem:active {
  transform: scale(var(--ll-tap));
}

.ll-dockItem--primary {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.18));
  color: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.ll-dockIcon {
  font-size: 18px;
}

.ll-dockLabel {
  font-size: 0.875rem;
  font-weight: 650;
  opacity: 1;
} /* 14px — dock labels — minimum readable with weight 650 */
.ll-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  z-index: 50;
}

.ll-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--ll-shadow);
  z-index: 60;
  padding: 10px 12px 14px;
}

.ll-sheetHandle {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
  margin: 6px auto 10px;
}

.ll-sheetGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ll-sheetItem {
  text-align: left;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.ll-sheetItem:active {
  transform: scale(var(--ll-tap));
}

.ll-sheetTitle {
  font-weight: 750;
}

.ll-sheetSub {
  font-size: 0.9375rem;
  color: var(--ll-muted);
  margin-top: 2px;
} /* 15px */
.ll-sheetFooter {
  margin-top: 10px;
}

.ll-upgrade--wide {
  width: 100%;
}

.ll-sheetRow {
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.ll-sheetRow--danger {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.14), rgba(44, 183, 176, 0.12));
}

.ll-sheetRow:active {
  transform: scale(var(--ll-tap));
}

.ll-searchOverlay {
  position: fixed;
  inset: 0;
  background: rgba(246, 247, 251, 0.95);
  backdrop-filter: blur(16px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.ll-searchTop {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ll-searchInput {
  flex: 1;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.85);
  outline: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.ll-searchInput:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .ll-searchInput:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.ll-ghost {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.65);
}

.ll-searchBody {
  margin-top: 14px;
  overflow: auto;
  padding-bottom: 100px;
}

.ll-searchGroup {
  margin-bottom: 14px;
}

.ll-searchGroupTitle {
  font-weight: 800;
  margin: 8px 2px;
}

.ll-searchRow {
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.ll-searchRow:active {
  transform: scale(var(--ll-tap));
}

.ll-muted {
  color: var(--ll-muted);
  font-size: 0.9375rem;
  padding: 8px 2px;
} /* 15px */
.ll-orbit {
  padding-top: 10px;
}

.ll-orbitStage {
  position: relative;
  height: min(440px, 58vh);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 60%, rgba(91, 141, 239, 0.18), transparent 55%), radial-gradient(circle at 35% 40%, rgba(44, 183, 176, 0.22), transparent 55%), radial-gradient(circle at 65% 45%, rgba(240, 106, 91, 0.18), transparent 55%), rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--ll-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-softGlow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.7), transparent 55%);
  filter: blur(0);
  opacity: 0.9;
}

.ll-rings {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
  opacity: 0.45;
}

.ll-orb {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.35) 70%), radial-gradient(circle at 50% 55%, rgba(91, 141, 239, 0.22), rgba(44, 183, 176, 0.18) 45%, rgba(240, 106, 91, 0.14) 80%);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
}

.ll-orb:active {
  transform: scale(var(--ll-tap));
}

.ll-orbInner {
  position: absolute;
  inset: 18px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.ll-orbTitle {
  font-weight: 900;
  font-size: 18px;
}

.ll-orbSub {
  color: var(--ll-muted);
  font-size: 0.9375rem;
} /* 15px */
.ll-chip {
  position: absolute;
  min-width: 160px;
  max-width: 190px;
  text-align: left;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
}

.ll-chip:active {
  transform: scale(var(--ll-tap));
}

.ll-chipTitle {
  font-weight: 850;
}

.ll-chipSub {
  font-size: 0.9375rem;
  color: var(--ll-muted);
  margin-top: 2px;
} /* 15px */
.ll-pos--top {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.ll-pos--right {
  right: 14px;
  top: 54%;
  transform: translateY(-50%);
}

.ll-pos--left {
  left: 14px;
  top: 64%;
  transform: translateY(-50%);
}

.ll-recents {
  margin-top: 14px;
}

.ll-sectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}

/* Line under each section header to define Actions, Your Boards, Supervisors, Reports */
.ll-shell .ll-sectionHead {
  position: relative;
  background: transparent;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: none;
}

/* Light teal shading above the line separator */
.ll-shell .ll-sectionHead::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ll-teal-tint);
  pointer-events: none;
}

.ll-shell .ll-sectionHead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ll-line);
  box-shadow: 0 4px 10px rgba(27, 54, 93, 0.22), 0 8px 24px rgba(27, 54, 93, 0.14);
}

.ll-shell .ll-sectionHead--withSupervisor {
  padding-bottom: 0;
  margin-bottom: 0;
}

.ll-shell .ll-sectionHead--withSupervisor::before,
.ll-shell .ll-sectionHead--withSupervisor::after {
  display: none;
}

.ll-sectionTitle {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--ll-text);
}

.ll-link {
  color: var(--ll-muted);
  font-weight: 750;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface);
}

.ll-link:hover {
  background: #F0F0F0;
  color: var(--ll-text);
  border-color: var(--ll-line);
}

.ll-link:active {
  transform: scale(var(--ll-tap));
}

/* Unified "See all" expansion link in section headers – subtle, consistent */
.ll-seeAll {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 4px 10px 4px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ll-muted);
}

.ll-seeAll::after {
  content: " ›";
  font-weight: 700;
  opacity: 0.9;
}

.ll-seeAll:hover {
  background: #F0F0F0;
  color: var(--ll-text);
  border-color: transparent;
}

.ll-seeAll:active {
  transform: scale(var(--ll-tap));
}

.ll-cardsRow {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.ll-miniCard {
  flex: 1;
  text-align: left;
  padding: 14px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06);
}

.ll-miniCard:active {
  transform: scale(var(--ll-tap));
}

.ll-miniTitle {
  font-weight: 850;
}

.ll-miniSub {
  color: var(--ll-muted);
  font-size: 0.9375rem;
  margin-top: 2px;
} /* 15px */
/* Stacked Spaces topbar & tabs */
.ll-topbar--stacked .ll-topbar__inner {
  justify-content: space-between;
}

.ll-topbar--stacked .ll-title {
  flex: 1;
  min-width: 0;
}

.ll-topbar--stacked .ll-actions {
  flex-shrink: 0;
}

.ll-topbar--stacked .ll-tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ll-title {
  font-weight: 950;
  font-size: 18px;
  color: var(--ll-text);
}

.ll-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
}

.ll-tab {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 750;
  color: var(--ll-muted);
}

.ll-tab:hover:not(.is-active) {
  background: var(--ll-teal);
  color: #FFFFFF;
}

.ll-tab.is-active {
  background: var(--ll-teal-tint);
  color: var(--ll-text);
}

.ll-tab:active {
  transform: scale(var(--ll-tap));
}

.ll-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ll-iconBtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  display: grid;
  place-items: center;
}

.ll-iconBtn:hover {
  background: #F0F0F0;
  color: var(--ll-text);
}

.ll-iconBtn:active {
  transform: scale(var(--ll-tap));
}

.ll-avatarBtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  display: grid;
  place-items: center;
}

.ll-avatarBtn:hover {
  background: #F0F0F0;
}

.ll-avatarDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ll-teal), var(--ll-coral));
}

/* Full-width gradient wrapper for main content – same as default shell */
.ll-stack-bg {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: radial-gradient(ellipse 100% 80% at 10% 15%, rgba(27, 54, 93, 0.06) 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 92% 88%, rgba(255, 107, 71, 0.05) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 50% 95%, rgba(78, 205, 196, 0.06) 0%, transparent 55%), linear-gradient(160deg, #F2F4F6 0%, #F5F7FA 35%, #F8F9FA 70%, #F5F7FA 100%);
}

.ll-stack {
  padding-top: 12px;
}

.ll-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.05);
}

.ll-bannerText {
  color: rgba(15, 23, 42, 0.74);
  font-weight: 650;
}

/* Grouped sections: Actions, Boards, Reports – raised */
.ll-group {
  margin-top: 14px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(to bottom, var(--ll-bg), var(--ll-surface));
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
}

.ll-groupTitle {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ll-muted);
}

.ll-group--actions .ll-sectionHead {
  margin-bottom: 10px;
}

.ll-group--actions .ll-hero {
  margin-top: 0;
}

.ll-group--actions .ll-groupActionsGrid {
  margin-top: 12px;
}

.ll-group--boards .ll-sectionHead,
.ll-group--reports .ll-sectionHead {
  margin-bottom: 10px;
}

.ll-group .ll-sectionTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ll-muted);
}

/* Speak Mode hero: same gradient as Getting Started card */
.ll-hero {
  position: relative;
  margin-top: 12px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.18) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(27, 54, 93, 0.08) 100%);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
  overflow: hidden;
  display: flex;
  gap: 14px;
  align-items: center;
}

.ll-heroBg {
  position: absolute;
  inset: -30%;
  background: transparent;
  pointer-events: none;
}

.ll-heroLeft {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px 20px;
}

.ll-heroText {
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
}

.ll-heroTitle {
  font-weight: 950;
  font-size: 22px;
}

.ll-heroSub {
  color: var(--ll-muted);
  margin-top: 4px;
}

.ll-heroActions {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ll-heroActions-pill {
  margin-top: 0;
}

.ll-heroActions-btn {
  margin-top: 0;
}

.ll-pill {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.08);
  color: var(--ll-muted);
  font-size: 14px;
}

/* Last Board pill: coral 50% lighter then 20% lighter, small so it doesn't compete with Start Speaking */
.ll-pill.ll-heroActions-pill {
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 750;
  color: var(--ll-text);
  background: #FFC4B3; /* #FFB5A0 (50% lighter coral) at 20% lighter */
  border: 1px solid rgba(27, 54, 93, 0.2);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ll-primaryBtn {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: #95E1DC; /* #7AD9D3 light teal at 20% lighter */
  border: 1px solid var(--ll-line);
  font-weight: 850;
  color: var(--ll-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(27, 54, 93, 0.1), 0 6px 16px rgba(27, 54, 93, 0.15);
}

.ll-primaryBtn:hover {
  background: #F0F0F0;
  color: var(--ll-text);
}

.ll-primaryBtn:active {
  transform: scale(var(--ll-tap));
}

.ll-heroIcon {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.06), 0 6px 16px rgba(27, 54, 93, 0.1);
  font-size: 26px;
  /* Speak mode icon: solid white bg (overrides theme/transparent) */
}
.ll-heroIcon.ll-bento-action-card__icon--speak {
  background: var(--ll-surface) !important;
  border-color: var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.06), 0 6px 16px rgba(27, 54, 93, 0.1);
}
.ll-heroIcon {
  /* Keep hero size when dashboard icon classes are applied */
}
.ll-heroIcon.ll-bento-action-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
}

.ll-heroIcon__img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.ll-section {
  margin-top: 14px;
}

.ll-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.ll-carousel--even {
  overflow-x: visible;
  scroll-snap-type: none;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.ll-carousel--even .ll-boardCard {
  scroll-snap-align: none;
  flex: 1 1 160px;
  max-width: 220px;
}

.ll-carousel::-webkit-scrollbar {
  height: 10px;
}

.ll-carousel::-webkit-scrollbar-thumb {
  background: var(--ll-line);
  border-radius: 999px;
}

.ll-boardCard {
  min-width: 180px;
  scroll-snap-align: start;
  text-align: center;
  padding: 14px 14px;
  border-radius: 22px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
}

.ll-boardCard:hover {
  background: #F0F0F0;
}

.ll-boardCard:active {
  transform: scale(var(--ll-tap));
}

.ll-boardCard--new:hover {
  background: #F0F0F0;
}

.ll-boardCard--new {
  background: #95E1DC; /* #7AD9D3 light teal at 20% lighter */
}

.ll-boardCard--new .ll-boardName {
  color: var(--ll-text);
}

.ll-boardName {
  font-weight: 900;
  color: var(--ll-text);
}

.ll-boardMeta {
  margin-top: 6px;
  color: var(--ll-muted);
  font-size: 0.9375rem;
} /* 15px */
.ll-supervisorsBox .ll-sectionTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ll-muted);
}

.ll-supervisorsBox {
  margin-top: 12px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(to bottom, var(--ll-bg), var(--ll-surface));
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
}

/* Three-column layout so supervisor names are centered over the full row */
.ll-sectionHead--withSupervisor {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.ll-sectionHead--withSupervisor .ll-sectionHeadLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ll-sectionHead--withSupervisor .ll-sectionHeadSupervisors {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ll-sectionHead--withSupervisor .ll-seeAll {
  justify-self: end;
}

/* Separator between Supervisors label and supervisor list – actual element so shadow applies */
.ll-sectionHeadLeft .ll-sectionTitle {
  margin-right: 4px;
}

.ll-sectionHeadSeparator {
  position: relative;
  display: inline-block;
  width: 1px;
  align-self: stretch;
  min-height: 1.2em;
  margin: 0 12px 0 0;
  background: var(--ll-line);
  /* Same shadow as other section lines (::after), cast to the right */
  box-shadow: 4px 0 10px rgba(27, 54, 93, 0.22), 8px 0 24px rgba(27, 54, 93, 0.14);
}

/* Light teal band to the right of the line (same as ::before above other section lines) */
.ll-sectionHeadSeparator::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ll-teal-tint);
  pointer-events: none;
}

.ll-mainSupervisor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.06), 0 4px 12px rgba(27, 54, 93, 0.1);
  font-weight: 700;
  font-size: 14px;
  color: var(--ll-text);
}

.ll-mainSupervisor:hover {
  background: #F0F0F0;
  border-color: var(--ll-line);
}

.ll-mainSupervisor:active {
  transform: scale(var(--ll-tap));
}

.ll-mainSupervisorName {
  letter-spacing: 0.01em;
}

.ll-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ll-metricCard {
  text-align: left;
  padding: 14px 14px;
  border-radius: 20px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
}

.ll-metricCard:hover {
  background: #F0F0F0;
}

.ll-metricCard:active {
  transform: scale(var(--ll-tap));
}

.ll-metricTitle {
  font-weight: 900;
  color: var(--ll-text);
}

.ll-sparkline {
  margin-top: 10px;
  width: 100%;
  aspect-ratio: 200/60;
  min-height: 52px;
  border-radius: 14px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ll-line);
}

.ll-sparklineChart {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ll-sparkline--usage {
  background: linear-gradient(180deg, var(--ll-teal-tint), transparent 70%), var(--ll-navy-tint);
}

.ll-sparkline--sessions {
  background: linear-gradient(180deg, var(--ll-coral-tint), transparent 70%), var(--ll-navy-tint);
}

.ll-softCard {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 14px;
  border-radius: 20px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(27, 54, 93, 0.06), 0 8px 24px rgba(27, 54, 93, 0.12);
}

.ll-softCard:hover {
  background: #F0F0F0;
}

.ll-softCard:active {
  transform: scale(var(--ll-tap));
}

.ll-softCard__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.06), 0 4px 12px rgba(27, 54, 93, 0.08);
}

.ll-softCard__icon--modeling,
.ll-softCard__icon--extras {
  background: var(--ll-surface) !important;
  border-color: var(--ll-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(27, 54, 93, 0.06), 0 4px 12px rgba(27, 54, 93, 0.08);
}

.ll-softCard__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ll-softCard__body {
  min-width: 0;
}

.ll-softTitle {
  font-weight: 900;
}

.ll-softSub {
  margin-top: 4px;
  color: var(--ll-muted);
  font-size: 0.9375rem;
} /* 15px */
@media (min-width: 768px) {
  .ll-main {
    padding: 18px;
    max-width: 980px;
    margin: 0 auto;
  }
  .ll-topbar__inner {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }
  .ll-shell {
    padding-bottom: 18px;
  }
  .ll-orb {
    width: 260px;
    height: 260px;
  }
  .ll-chip {
    min-width: 200px;
  }
  .ll-pos--right {
    right: 26px;
  }
  .ll-pos--left {
    left: 26px;
  }
  .ll-dock {
    max-width: 640px;
    margin: 0 auto;
    left: 0;
    right: 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: 0;
}

.app-shell {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app-shell::-webkit-scrollbar {
  width: 6px;
}
.app-shell::-webkit-scrollbar-track {
  background: transparent;
}
.app-shell::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 999px;
}
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4, .app-shell h5, .app-shell h6 {
  font-family: "Maitree", serif;
  font-weight: 400;
  line-height: 1.2;
  color: #1b2a4a;
}
.app-shell h1 {
  font-size: 32px;
}
.app-shell h2 {
  font-size: 26px;
}
.app-shell h3 {
  font-size: 22px;
}
.app-shell h4 {
  font-size: 18px;
}
.app-shell h5 {
  font-size: 15px;
}
.app-shell h6 {
  font-size: 14px;
}
.app-shell p {
  line-height: 1.7;
  color: #1b2a4a;
}

.aac-section-label {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 4px;
}

.app-shell {
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-template-columns: 220px 1fr 300px;
  grid-template-areas: "topbar  topbar  topbar" "sidebar main    panel";
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 220px 1fr;
    grid-template-areas: "topbar  topbar" "sidebar main";
  }
  .app-shell .app-panel {
    display: none;
  }
}
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas: "topbar" "main";
  }
  .app-shell .app-sidebar {
    display: none;
  }
}

.app-topbar {
  grid-area: topbar;
  background: #1b2a4a;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px;
  gap: 20px;
  border-bottom: 2px solid #1b2a4a;
  z-index: 400;
}

.topbar__logo {
  font-family: "Maitree", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #3A6BC7;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.topbar__logo span {
  color: #F2B95A;
  font-style: italic;
}

.topbar__search {
  flex: 1;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 16px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: background 0.12s ease;
}
.topbar__search::placeholder {
  color: #6B7280;
}
.topbar__search:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .topbar__search:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.topbar__badge {
  background: #F2B95A;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.topbar__badge--non-clinical {
  background: #3A6BC7;
  color: white;
}

.topbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3A6BC7, #3A6BC7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.topbar__avatar:hover {
  opacity: 0.85;
}

.app-sidebar {
  grid-area: sidebar;
  background: #F4F1EB;
  border-right: 1px solid #EDE9E0;
  padding: 20px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-sidebar::-webkit-scrollbar {
  width: 6px;
}
.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 999px;
}

.sidebar__section-label {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
  padding: 10px 12px 4px;
  margin-top: 8px;
}
.sidebar__section-label:first-child {
  margin-top: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  border: 1.5px solid transparent;
  transition: all 0.18s ease;
  user-select: none;
}
.nav-item:hover {
  background: #EDE9E0;
  color: #1b2a4a;
}
.nav-item.active {
  background: #E8F2EB;
  color: #3A6BC7;
  border-color: #3A6BC7;
}
.nav-item:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}

.nav-item__icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.app-main {
  grid-area: main;
  overflow-y: auto;
  padding: 28px;
  background: #FAFAF7;
}
.app-main::-webkit-scrollbar {
  width: 6px;
}
.app-main::-webkit-scrollbar-track {
  background: transparent;
}
.app-main::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 999px;
}

.main__title {
  font-family: "Maitree", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #1b2a4a;
  margin-bottom: 6px;
}

.main__subtitle {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}

.app-panel {
  grid-area: panel;
  background: #F4F1EB;
  border-left: 1px solid #EDE9E0;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-panel::-webkit-scrollbar {
  width: 6px;
}
.app-panel::-webkit-scrollbar-track {
  background: transparent;
}
.app-panel::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 999px;
}

.panel-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #EDE9E0;
  padding: 16px;
}
.panel-card__title {
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 12px;
}

.phrase-bar {
  background: #1b2a4a;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  min-height: 64px;
  box-shadow: 0 4px 12px rgba(27, 42, 74, 0.08);
}

.phrase-bar__tokens {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.phrase-bar__placeholder {
  font-size: 18px;
  color: #6B7280;
  font-style: italic;
  font-weight: 300;
}

.phrase-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: opacity 0.12s ease;
  position: relative;
}
.phrase-token:hover {
  opacity: 0.8;
}
.phrase-token:hover .phrase-token__remove {
  opacity: 1;
}

.phrase-token__remove {
  opacity: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.12s ease;
  cursor: pointer;
  padding: 0 2px;
}
.phrase-token__remove:hover {
  color: white;
}

.phrase-token--people {
  color: rgb(186.2112676056, 212.7887323944, 195.0704225352);
}

.phrase-token--actions {
  color: rgb(175.9315068493, 198.3698630137, 217.0684931507);
}

.phrase-token--feelings {
  color: rgb(233.4, 208.6, 208.6);
}

.phrase-token--food {
  color: rgb(225.9230769231, 208.1538461538, 165.0769230769);
}

.phrase-token--places {
  color: rgb(208.6, 212.6, 233.4);
}

.phrase-token--objects {
  color: rgb(216.575, 229.2625, 235.425);
}

.phrase-token--descriptors {
  color: rgb(231.025974026, 221.2337662338, 236.7662337662);
}

.phrase-token--social {
  color: rgb(233.4, 226.6, 208.6);
}

.phrase-bar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.btn-speak:active {
  transform: scale(0.97);
}
.btn-speak:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.btn-speak {
  background: #3A6BC7;
  color: white;
  padding: 10px 20px;
  font-size: 14px;
}
.btn-speak:hover {
  background: #3A6BC7;
}
.btn-speak:disabled {
  background: #6B7280;
  cursor: not-allowed;
  transform: none;
}
.btn-speak {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 10px;
}
.btn-speak--large {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 14px;
}

.btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.btn-clear:active {
  transform: scale(0.97);
}
.btn-clear:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.btn-clear {
  background: rgba(255, 255, 255, 0.08);
  color: #6B7280;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  padding: 8px 14px;
  font-size: 14px;
}
.btn-clear:hover {
  background: rgba(255, 255, 255, 0.14);
  color: white;
}
.btn-clear {
  padding: 8px 14px;
}

.btn-backspace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.btn-backspace:active {
  transform: scale(0.97);
}
.btn-backspace:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.btn-backspace {
  background: rgba(255, 255, 255, 0.08);
  color: #6B7280;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  padding: 8px 14px;
  font-size: 14px;
}
.btn-backspace:hover {
  background: rgba(255, 255, 255, 0.14);
  color: white;
}
.btn-backspace {
  padding: 8px 12px;
  border-radius: 10px;
}

.category-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cat-chip {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.18s ease;
  opacity: 0.72;
  user-select: none;
}
.cat-chip:hover, .cat-chip.active {
  opacity: 1;
  transform: translateY(-1px);
}
.cat-chip.all {
  background: #1b2a4a;
  color: white;
  opacity: 1;
}
.cat-chip.all:hover {
  background: #1b2a4a;
}
.cat-chip:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}

.cat-chip.people {
  background: #E8F2EB;
  color: #4A8C60;
  border-color: #7BAE8C;
}

.cat-chip.actions {
  background: #E3EEF6;
  color: #3A6A8A;
  border-color: #6B95B8;
}

.cat-chip.feelings {
  background: #F5E8E8;
  color: #9A5050;
  border-color: #C98B8B;
}

.cat-chip.food {
  background: #F6F0DC;
  color: #8A6A20;
  border-color: #C9A858;
}

.cat-chip.places {
  background: #ECEEF8;
  color: #5060A0;
  border-color: #8B95C9;
}

.cat-chip.objects {
  background: #E5EFF3;
  color: #386A80;
  border-color: #95B8C9;
}

.cat-chip.descriptors {
  background: #F3EEF8;
  color: #7050A0;
  border-color: #B89BC9;
}

.cat-chip.social {
  background: #F5F0E3;
  color: #806830;
  border-color: #C9B88B;
}

.quick-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.quick-btn:active {
  transform: scale(0.97);
}
.quick-btn:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.quick-btn {
  background: transparent;
  color: #1b2a4a;
  border: 1.5px solid #D8D2C5;
  padding: 8px 14px;
  font-size: 14px;
}
.quick-btn:hover {
  background: #F4F1EB;
  border-color: #6B7280;
  color: #1b2a4a;
}
.quick-btn {
  border-radius: 10px;
  font-size: 14px;
}
.quick-btn:hover {
  background: #E8F2EB;
  border-color: #3A6BC7;
  color: #3A6BC7;
}

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .symbol-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.symbol-card {
  background: white;
  border-radius: 16px;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 2px solid #EDE9E0;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.symbol-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
  border-color: #6B7280;
}
.symbol-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(27, 42, 74, 0.06);
}
.symbol-card:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.symbol-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.symbol-card--people::before {
  background: #7BAE8C;
}
.symbol-card--people .symbol-card__icon-wrap {
  background: #E8F2EB;
}
.symbol-card--people:hover {
  border-color: rgb(179.8901408451, 208.9098591549, 189.5633802817);
}

.symbol-card--actions::before {
  background: #6B95B8;
}
.symbol-card--actions .symbol-card__icon-wrap {
  background: #E3EEF6;
}
.symbol-card--actions:hover {
  border-color: rgb(169.0383561644, 193.4328767123, 213.7616438356);
}

.symbol-card--feelings::before {
  background: #C98B8B;
}
.symbol-card--feelings .symbol-card__icon-wrap {
  background: #F5E8E8;
}
.symbol-card--feelings:hover {
  border-color: rgb(230.16, 201.64, 201.64);
}

.symbol-card--food::before {
  background: #C9A858;
}
.symbol-card--food .symbol-card__icon-wrap {
  background: #F6F0DC;
}
.symbol-card--food:hover {
  border-color: rgb(223.4307692308, 204.1384615385, 157.3692307692);
}

.symbol-card--places::before {
  background: #8B95C9;
}
.symbol-card--places .symbol-card__icon-wrap {
  background: #ECEEF8;
}
.symbol-card--places:hover {
  border-color: rgb(201.64, 206.24, 230.16);
}

.symbol-card--objects::before {
  background: #95B8C9;
}
.symbol-card--objects .symbol-card__icon-wrap {
  background: #E5EFF3;
}
.symbol-card--objects:hover {
  border-color: rgb(209.8175, 224.73625, 231.9825);
}

.symbol-card--descriptors::before {
  background: #B89BC9;
}
.symbol-card--descriptors .symbol-card__icon-wrap {
  background: #F3EEF8;
}
.symbol-card--descriptors:hover {
  border-color: rgb(226.3233766234, 214.6103896104, 233.1896103896);
}

.symbol-card--social::before {
  background: #C9B88B;
}
.symbol-card--social .symbol-card__icon-wrap {
  background: #F5F0E3;
}
.symbol-card--social:hover {
  border-color: rgb(230.16, 222.34, 201.64);
}

.symbol-card__icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.symbol-card:hover .symbol-card__icon-wrap {
  transform: scale(1.06);
}

.symbol-card__icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.symbol-card__label {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.symbol-card--sm {
  padding: 10px 8px 8px;
  gap: 6px;
}
.symbol-card--sm .symbol-card__icon-wrap {
  width: 44px;
  height: 44px;
  font-size: 24px;
}
.symbol-card--sm .symbol-card__label {
  font-size: 14px;
}

.symbol-card--lg {
  padding: 24px 20px 16px;
  gap: 14px;
}
.symbol-card--lg .symbol-card__icon-wrap {
  width: 80px;
  height: 80px;
  font-size: 44px;
  border-radius: 16px;
}
.symbol-card--lg .symbol-card__label {
  font-size: 15px;
}

.symbol-card--skeleton {
  background: #EDE9E0;
  animation: aac-skeleton-pulse 1.4s ease-in-out infinite;
  height: 140px;
  pointer-events: none;
}
.symbol-card--skeleton::before {
  display: none;
}

@keyframes aac-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.symbol-grid__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 24px;
  color: #6B7280;
}
.symbol-grid__empty p {
  margin-bottom: 12px;
}
.symbol-grid__empty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.symbol-grid__empty button:active {
  transform: scale(0.97);
}
.symbol-grid__empty button:focus-visible {
  /* Keyboard ring: app-wide #within_ember *:focus-visible; optional accent glow */
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.4);
}
.symbol-grid__empty button {
  background: transparent;
  color: #1b2a4a;
  border: 1.5px solid #D8D2C5;
  padding: 8px 14px;
  font-size: 14px;
}
.symbol-grid__empty button:hover {
  background: #F4F1EB;
  border-color: #6B7280;
  color: #1b2a4a;
}

.recent-phrase-list {
  display: flex;
  flex-direction: column;
}

.recent-phrase {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #EDE9E0;
  cursor: pointer;
  transition: padding-left 0.18s ease;
}
.recent-phrase:last-child {
  border-bottom: none;
}
.recent-phrase:hover {
  padding-left: 4px;
}

.recent-phrase__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A6BC7;
  flex-shrink: 0;
}

.recent-phrase__text {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-phrase__time {
  margin-left: auto;
  font-size: 14px;
  color: #6B7280;
  flex-shrink: 0;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.progress-item__label {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
}

.progress-item__value {
  font-size: 14px;
  font-weight: 700;
  color: #6B7280;
}

.progress-bar {
  height: 8px;
  background: #EDE9E0;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.progress-bar__fill--people {
  background: #7BAE8C;
}

.progress-bar__fill--actions {
  background: #6B95B8;
}

.progress-bar__fill--feelings {
  background: #C98B8B;
}

.progress-bar__fill--food {
  background: #C9A858;
}

.progress-bar__fill--places {
  background: #8B95C9;
}

.progress-bar__fill--objects {
  background: #95B8C9;
}

.progress-bar__fill--descriptors {
  background: #B89BC9;
}

.progress-bar__fill--social {
  background: #C9B88B;
}

.progress-bar__fill--primary {
  background: #3A6BC7;
}

.progress-bar__fill--accent {
  background: #F2B95A;
}

.schedule-list {
  display: flex;
  flex-direction: column;
}

.schedule-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #EDE9E0;
}
.schedule-item:last-child {
  border-bottom: none;
}

.schedule-item__time {
  font-size: 14px;
  font-weight: 800;
  color: #6B7280;
  width: 44px;
  flex-shrink: 0;
  padding-top: 2px;
}

.schedule-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  margin-bottom: 4px;
}

.schedule-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}

.schedule-tag--clinical {
  background: #E8F2EB;
  color: #4A8C60;
}

.schedule-tag--practice {
  background: #E3EEF6;
  color: #3A6A8A;
}

.schedule-tag--social {
  background: #F3EEF8;
  color: #7050A0;
}

.speech-page-wrapper {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.speech-page-wrapper .app-shell {
  height: 100%;
}
.speech-page-wrapper nav.topbar {
  grid-area: topbar;
  background: #1b2a4a;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  border-bottom: 1px solid #1b2a4a;
  z-index: 400;
}
.speech-page-wrapper .logo {
  font-family: "Maitree", serif;
  font-size: 22px;
  font-weight: 800;
  color: #3A6BC7;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.speech-page-wrapper .logo span {
  color: #F2B95A;
  font-style: italic;
}
.speech-page-wrapper .topbar-search {
  flex: 1;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 16px;
  color: white;
  font-size: 14px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  outline: none;
  transition: background 0.15s ease;
}
.speech-page-wrapper .topbar-search::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.speech-page-wrapper .topbar-search:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .speech-page-wrapper .topbar-search:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.speech-page-wrapper .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.speech-page-wrapper .topbar-badge {
  background: #F2B95A;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.speech-page-wrapper .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3A6BC7, #3A6BC7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.speech-page-wrapper aside.sidebar {
  grid-area: sidebar;
  background: #F4F1EB;
  border-right: 1px solid #EDE9E0;
  padding: 16px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.speech-page-wrapper .sidebar-section-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B7280;
  padding: 10px 12px 4px;
  margin-top: 6px;
}
.speech-page-wrapper .sidebar-section-label:first-child {
  margin-top: 0;
}
.speech-page-wrapper .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}
.speech-page-wrapper .nav-item:hover {
  background: #EDE9E0;
  color: #1b2a4a;
}
.speech-page-wrapper .nav-item.active {
  background: #E8F2EB;
  color: #4E8060;
  border-color: #3A6BC7;
}
.speech-page-wrapper .nav-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.speech-page-wrapper main.main {
  grid-area: main;
  overflow-y: auto;
  padding: 28px;
  background: #FAFAF7;
}
.speech-page-wrapper .phrase-bar {
  background: #1b2a4a;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  min-height: 64px;
  box-shadow: 0 2px 12px rgba(27, 42, 74, 0.18);
  min-width: 50rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.speech-page-wrapper .phrase-text {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: white;
}
.speech-page-wrapper .phrase-text .phrase-highlight {
  color: white;
}
.speech-page-wrapper .btn-clear {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.speech-page-wrapper .btn-clear:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}
.speech-page-wrapper .btn-speak {
  background: #F2B95A;
  border: none;
  color: #1b2a4a;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Nunito", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.speech-page-wrapper .btn-speak:hover {
  background: #A07850;
  color: white;
}
.speech-page-wrapper .section-title {
  font-family: "Maitree", serif;
  font-size: 26px;
  font-weight: 800;
  color: #1b2a4a;
  margin: 0 0 4px;
}
.speech-page-wrapper .section-sub {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 16px;
}
.speech-page-wrapper .quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.speech-page-wrapper .quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1.5px solid #EDE9E0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Nunito", "Segoe UI", sans-serif;
  color: #1b2a4a;
  cursor: pointer;
  transition: all 0.15s ease;
}
.speech-page-wrapper .quick-btn:hover {
  border-color: #3A6BC7;
  color: #4E8060;
  background: #E8F2EB;
}
.speech-page-wrapper .category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.speech-page-wrapper .cat-chip {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #EDE9E0;
  background: white;
  color: #1b2a4a;
  transition: all 0.15s ease;
}
.speech-page-wrapper .cat-chip.all.active {
  background: #1b2a4a;
  color: white;
  border-color: #1b2a4a;
}
.speech-page-wrapper .cat-chip.people.active, .speech-page-wrapper .cat-chip.people:hover {
  background: #E8F2EB;
  color: #4A8C60;
  border-color: #7BAE8C;
}
.speech-page-wrapper .cat-chip.actions.active, .speech-page-wrapper .cat-chip.actions:hover {
  background: #E3EEF6;
  color: #3A6A8A;
  border-color: #6B95B8;
}
.speech-page-wrapper .cat-chip.feelings.active, .speech-page-wrapper .cat-chip.feelings:hover {
  background: #F5E8E8;
  color: #9A5050;
  border-color: #C98B8B;
}
.speech-page-wrapper .cat-chip.food.active, .speech-page-wrapper .cat-chip.food:hover {
  background: #F6F0DC;
  color: #8A6A20;
  border-color: #C9A858;
}
.speech-page-wrapper .cat-chip.places.active, .speech-page-wrapper .cat-chip.places:hover {
  background: #ECEEF8;
  color: #5060A0;
  border-color: #8B95C9;
}
.speech-page-wrapper .cat-chip.descr.active, .speech-page-wrapper .cat-chip.descr:hover {
  background: #F3EEF8;
  color: #7050A0;
  border-color: #B89BC9;
}
.speech-page-wrapper .symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
}
.speech-page-wrapper .symbol-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 12px;
  gap: 8px;
  background: white;
  border-radius: 14px;
  border: 1.5px solid #EDE9E0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.speech-page-wrapper .symbol-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(27, 42, 74, 0.1);
}
.speech-page-wrapper .symbol-card.people {
  border-color: rgb(186.2112676056, 212.7887323944, 195.0704225352);
}
.speech-page-wrapper .symbol-card.actions {
  border-color: rgb(175.9315068493, 198.3698630137, 217.0684931507);
}
.speech-page-wrapper .symbol-card.feelings {
  border-color: rgb(233.4, 208.6, 208.6);
}
.speech-page-wrapper .symbol-card.food {
  border-color: rgb(225.9230769231, 208.1538461538, 165.0769230769);
}
.speech-page-wrapper .symbol-card.places {
  border-color: rgb(208.6, 212.6, 233.4);
}
.speech-page-wrapper .symbol-card.descr {
  border-color: rgb(231.025974026, 221.2337662338, 236.7662337662);
}
.speech-page-wrapper .symbol-icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.speech-page-wrapper .symbol-icon.bg-people {
  background: #E8F2EB;
}
.speech-page-wrapper .symbol-icon.bg-actions {
  background: #E3EEF6;
}
.speech-page-wrapper .symbol-icon.bg-feelings {
  background: #F5E8E8;
}
.speech-page-wrapper .symbol-icon.bg-food {
  background: #F6F0DC;
}
.speech-page-wrapper .symbol-icon.bg-places {
  background: #ECEEF8;
}
.speech-page-wrapper .symbol-icon.bg-descr {
  background: #F3EEF8;
}
.speech-page-wrapper .symbol-label {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.speech-page-wrapper aside.panel {
  grid-area: panel;
  background: #F4F1EB;
  border-left: 1px solid #EDE9E0;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.speech-page-wrapper .panel-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #EDE9E0;
  padding: 16px;
}
.speech-page-wrapper .panel-card-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B7280;
  margin-bottom: 12px;
}
.speech-page-wrapper .recent-phrase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #EDE9E0;
  cursor: pointer;
  transition: padding-left 0.15s ease;
}
.speech-page-wrapper .recent-phrase:last-child {
  border-bottom: none;
}
.speech-page-wrapper .recent-phrase:hover {
  padding-left: 4px;
}
.speech-page-wrapper .recent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.speech-page-wrapper .recent-text {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.speech-page-wrapper .progress-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.speech-page-wrapper .progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.speech-page-wrapper .progress-label span:first-child {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
}
.speech-page-wrapper .progress-label span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: #6B7280;
}
.speech-page-wrapper .progress-bar-wrap {
  height: 8px;
  background: #EDE9E0;
  border-radius: 999px;
  overflow: hidden;
}
.speech-page-wrapper .progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.speech-page-wrapper .schedule-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #EDE9E0;
}
.speech-page-wrapper .schedule-item:last-child {
  border-bottom: none;
}
.speech-page-wrapper .schedule-time {
  font-size: 14px;
  font-weight: 800;
  color: #6B7280;
  width: 40px;
  flex-shrink: 0;
  padding-top: 2px;
}
.speech-page-wrapper .schedule-label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  margin-bottom: 4px;
}
.speech-page-wrapper .schedule-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.speech-page-wrapper .schedule-tag.clinical {
  background: #E8F2EB;
  color: #4A8C60;
}
.speech-page-wrapper .schedule-tag.practice {
  background: #E3EEF6;
  color: #3A6A8A;
}
.speech-page-wrapper .schedule-tag.social {
  background: #F3EEF8;
  color: #7050A0;
}

/* Hide the main app header on the alt page (footer is shown, sticky at bottom) */
#within_ember.landing-alt-route #setup_footer {
  display: none !important;
}

/* Show navbar on landing-alt; #content padding-top reserves space below fixed navbar */
#within_ember.landing-alt-route .la-wrapper {
  top: 0;
  height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Footer on landing-alt: sticky at bottom, reserve space in scroll area */
#within_ember.landing-alt-route .page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#within_ember.landing-alt-route .la-wrapper {
  padding-bottom: var(--bottombar-height);
  box-sizing: border-box;
}

/* Whenever landing-alt page (.la-wrapper) is shown (index or /landing-alt),
   ensure footer is above it and la-wrapper reserves space at bottom */
#within_ember:has(.la-wrapper) .page-footer {
  z-index: 1001;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex !important;
  visibility: visible !important;
}

#within_ember:has(.la-wrapper) .la-wrapper {
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Footer rendered inside landing-alt-page: fix to bottom of viewport */
.la-wrapper .la-page-footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.la-wrapper .la-page-footer-wrap .page-footer {
  margin: 0;
}

.la-wrapper .page-footer .page-footer__developers-link {
  display: none;
}

/* LA = landing-alt prefix for all new classes */
/* Page background: fluctuating gradient (replaces orbs) so content has clear contrast and hierarchy */
@keyframes la-gradient-fluctuate {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.la-wrapper {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(160deg, #f8f7f5 0%, #faf9f7 15%, #f5f4f2 30%, #fcfbf9 45%, #f7f6f4 60%, #fafaf8 75%, #f6f5f3 90%, #f8f7f5 100%);
  background-size: 200% 200%;
  animation: la-gradient-fluctuate 20s ease-in-out infinite;
  overflow-y: auto;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
}
.la-wrapper .app-shell {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  display: block;
  min-height: 100%;
  height: auto;
  overflow: visible;
  position: relative;
}

/* Landing-alt: app-shell and wrapper use same gradient as hero-background (.la-hero-card).
   :has(#la-main) matches both index and /landing-alt route. */
#within_ember:has(#la-main) .la-wrapper {
  background: linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
  background-size: auto;
  animation: none;
}

#within_ember:has(#la-main) .la-wrapper .app-shell {
  background: linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
}

#within_ember:has(#la-main) .la-wrapper .la-main {
  background: linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
}

.la-parallax-zone {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 22px; /* breathing room: feature cards → Included in every plan (~80px total) */
  background-color: #f7fafc; /* matches page gradient where image doesn’t fill */
  background-image: url(/images/aac-user-front-page.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.la-parallax-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Light blue with a slight teal tint */
  background: linear-gradient(160deg, rgba(88, 158, 200, 0.14) 0%, rgba(208, 235, 248, 0.78) 45%, rgba(238, 248, 252, 0.76) 100%);
  pointer-events: none;
}
.la-parallax-zone > .la-divider,
.la-parallax-zone > section {
  position: relative;
  z-index: 1;
}

/* Motion safety: disable parallax for users who prefer reduced motion (WCAG, AAC/neurodivergent-friendly) */
@media (prefers-reduced-motion: reduce) {
  .la-parallax-zone {
    background-attachment: scroll !important;
  }
}
.la-wrapper--about,
.la-wrapper--pricing,
.la-wrapper--contact,
.la-wrapper--privacy {
  color: #147F82;
}

/* Privacy page: same background as authenticated-view workspace (md-shell) */
.la-wrapper.la-wrapper--privacy {
  background: radial-gradient(1200px 600px at 20% 20%, rgba(44, 183, 176, 0.12), transparent 55%), radial-gradient(1200px 600px at 80% 15%, rgba(240, 106, 91, 0.1), transparent 60%), radial-gradient(1000px 700px at 60% 85%, rgba(91, 141, 239, 0.12), transparent 60%), var(--md-bg, #eef1f6);
  min-height: 100vh;
}

/* Privacy page: center all containers and hero */
.la-wrapper.la-wrapper--privacy .app-shell,
.la-wrapper.la-wrapper--privacy .la-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.la-wrapper.la-wrapper--privacy .la-main > section:not(.la-privacy-section) {
  width: 100%;
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.la-wrapper.la-wrapper--privacy .la-main > section.la-privacy-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.012), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (min-width: 768px) {
  .la-wrapper.la-wrapper--privacy .la-main > section.la-privacy-section {
    width: 60%;
    max-width: 60%;
  }
}

.la-about-hero-separator {
  width: 100%;
  max-width: 100%;
  height: 1px;
  margin: 0 auto 24px;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
}

.la-section-divider {
  width: 100%;
  max-width: 200px;
  height: 2px;
  border: none;
  margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent, #c5bfb3, transparent);
  border-radius: 2px;
}

.la-wrapper.la-wrapper--about .la-hero-card,
.la-wrapper.la-wrapper--pricing .la-hero-card,
.la-wrapper.la-wrapper--contact .la-hero-card,
.la-wrapper.la-wrapper--privacy .la-hero-card {
  width: auto;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: calc(16px - 3px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 6%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.65) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 40px -20px rgba(255, 255, 255, 0.5) inset;
}
.la-wrapper.la-wrapper--about .la-hero-card::before,
.la-wrapper.la-wrapper--pricing .la-hero-card::before,
.la-wrapper.la-wrapper--contact .la-hero-card::before,
.la-wrapper.la-wrapper--privacy .la-hero-card::before {
  background: radial-gradient(circle, rgba(242, 185, 90, 0.08) 0%, transparent 50%);
}
.la-wrapper.la-wrapper--about .la-hero-card::after,
.la-wrapper.la-wrapper--pricing .la-hero-card::after,
.la-wrapper.la-wrapper--contact .la-hero-card::after,
.la-wrapper.la-wrapper--privacy .la-hero-card::after {
  background: radial-gradient(circle, rgba(78, 205, 196, 0.07) 0%, transparent 50%);
}
.la-wrapper.la-wrapper--about .la-hero-title,
.la-wrapper.la-wrapper--pricing .la-hero-title,
.la-wrapper.la-wrapper--contact .la-hero-title,
.la-wrapper.la-wrapper--privacy .la-hero-title {
  font-size: 46px;
  color: #1b2a4a;
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--contact .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 36px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--contact .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 31px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--contact .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 27px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--contact .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 26px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--contact .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 22px;
  }
}
.la-wrapper.la-wrapper--about .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--contact .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-section-eyebrow-badge {
  color: #316F70;
  background: rgba(20, 127, 130, 0.1);
  border-color: rgba(20, 127, 130, 0.25);
}
.la-wrapper.la-wrapper--about .la-about-glass-card,
.la-wrapper.la-wrapper--pricing .la-about-glass-card,
.la-wrapper.la-wrapper--contact .la-about-glass-card,
.la-wrapper.la-wrapper--privacy .la-about-glass-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 5%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 32px -16px rgba(255, 255, 255, 0.5) inset;
}
.la-wrapper.la-wrapper--about .la-about-glass-card:hover,
.la-wrapper.la-wrapper--pricing .la-about-glass-card:hover,
.la-wrapper.la-wrapper--contact .la-about-glass-card:hover,
.la-wrapper.la-wrapper--privacy .la-about-glass-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 5%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.82) 100%);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 20px 40px -20px rgba(255, 255, 255, 0.6) inset;
}
.la-wrapper.la-wrapper--about .la-about-glass-card--cta,
.la-wrapper.la-wrapper--pricing .la-about-glass-card--cta,
.la-wrapper.la-wrapper--contact .la-about-glass-card--cta,
.la-wrapper.la-wrapper--privacy .la-about-glass-card--cta {
  background: linear-gradient(180deg, rgba(58, 107, 199, 0.14) 0%, rgba(58, 107, 199, 0.04) 5%, rgba(58, 107, 199, 0.02) 50%, rgba(58, 107, 199, 0.08) 100%);
  border-color: rgba(58, 107, 199, 0.2);
  border-top-color: rgba(58, 107, 199, 0.35);
}
.la-wrapper.la-wrapper--about .la-about-glass-card--cta:hover,
.la-wrapper.la-wrapper--pricing .la-about-glass-card--cta:hover,
.la-wrapper.la-wrapper--contact .la-about-glass-card--cta:hover,
.la-wrapper.la-wrapper--privacy .la-about-glass-card--cta:hover {
  background: linear-gradient(180deg, rgba(58, 107, 199, 0.2) 0%, rgba(58, 107, 199, 0.08) 5%, rgba(58, 107, 199, 0.04) 50%, rgba(58, 107, 199, 0.12) 100%);
}
.la-wrapper.la-wrapper--about .la-about-glass-card__title,
.la-wrapper.la-wrapper--pricing .la-about-glass-card__title,
.la-wrapper.la-wrapper--contact .la-about-glass-card__title,
.la-wrapper.la-wrapper--privacy .la-about-glass-card__title {
  font-size: 23px;
  color: #1B365D;
}
.la-wrapper.la-wrapper--about .la-about-glass-card__text,
.la-wrapper.la-wrapper--pricing .la-about-glass-card__text,
.la-wrapper.la-wrapper--contact .la-about-glass-card__text,
.la-wrapper.la-wrapper--privacy .la-about-glass-card__text {
  font-size: 18px;
  color: #374151;
}
.la-wrapper.la-wrapper--about .la-about-glass-card__text strong,
.la-wrapper.la-wrapper--pricing .la-about-glass-card__text strong,
.la-wrapper.la-wrapper--contact .la-about-glass-card__text strong,
.la-wrapper.la-wrapper--privacy .la-about-glass-card__text strong {
  color: #1b2a4a;
}
.la-wrapper.la-wrapper--about .la-about-glass-card__text .la-challenge-cta,
.la-wrapper.la-wrapper--pricing .la-about-glass-card__text .la-challenge-cta,
.la-wrapper.la-wrapper--contact .la-about-glass-card__text .la-challenge-cta,
.la-wrapper.la-wrapper--privacy .la-about-glass-card__text .la-challenge-cta {
  color: #1B365D;
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn--primary,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-btn--primary,
.la-wrapper.la-wrapper--contact .la-hero-card .la-btn--primary,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-btn--primary {
  background: #F2B95A;
  color: #1B365D;
  border-color: #F2B95A;
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn--primary:hover,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-btn--primary:hover,
.la-wrapper.la-wrapper--contact .la-hero-card .la-btn--primary:hover,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-btn--primary:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.12);
  color: #1B365D;
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn--ghost,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-btn--ghost,
.la-wrapper.la-wrapper--contact .la-hero-card .la-btn--ghost,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-btn--ghost {
  color: #1B365D;
  border-color: rgba(42, 90, 168, 0.3);
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn--ghost:hover,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-btn--ghost:hover,
.la-wrapper.la-wrapper--contact .la-hero-card .la-btn--ghost:hover,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-btn--ghost:hover {
  background: rgba(42, 90, 168, 0.08);
}
.la-wrapper.la-wrapper--about .la-cta-section,
.la-wrapper.la-wrapper--pricing .la-cta-section,
.la-wrapper.la-wrapper--contact .la-cta-section,
.la-wrapper.la-wrapper--privacy .la-cta-section {
  width: min(580px, 90%);
  margin-left: auto;
  margin-right: auto;
  padding: 32px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 6%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.65) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 40px -20px rgba(255, 255, 255, 0.5) inset;
}
.la-wrapper.la-wrapper--about .la-cta-section::before, .la-wrapper.la-wrapper--about .la-cta-section::after,
.la-wrapper.la-wrapper--pricing .la-cta-section::before,
.la-wrapper.la-wrapper--pricing .la-cta-section::after,
.la-wrapper.la-wrapper--contact .la-cta-section::before,
.la-wrapper.la-wrapper--contact .la-cta-section::after,
.la-wrapper.la-wrapper--privacy .la-cta-section::before,
.la-wrapper.la-wrapper--privacy .la-cta-section::after {
  display: none;
}
.la-wrapper.la-wrapper--about .la-cta-headline,
.la-wrapper.la-wrapper--pricing .la-cta-headline,
.la-wrapper.la-wrapper--contact .la-cta-headline,
.la-wrapper.la-wrapper--privacy .la-cta-headline {
  color: #1B365D;
}
.la-wrapper.la-wrapper--about .la-cta-description,
.la-wrapper.la-wrapper--pricing .la-cta-description,
.la-wrapper.la-wrapper--contact .la-cta-description,
.la-wrapper.la-wrapper--privacy .la-cta-description {
  color: #374151;
}
.la-wrapper.la-wrapper--about .la-cta-description .la-challenge-cta,
.la-wrapper.la-wrapper--pricing .la-cta-description .la-challenge-cta,
.la-wrapper.la-wrapper--contact .la-cta-description .la-challenge-cta,
.la-wrapper.la-wrapper--privacy .la-cta-description .la-challenge-cta {
  color: #1B365D;
}
.la-wrapper.la-wrapper--about .la-cta-section .la-btn--ghost,
.la-wrapper.la-wrapper--pricing .la-cta-section .la-btn--ghost,
.la-wrapper.la-wrapper--contact .la-cta-section .la-btn--ghost,
.la-wrapper.la-wrapper--privacy .la-cta-section .la-btn--ghost {
  color: #1B365D;
  border-color: rgba(42, 90, 168, 0.3);
}
.la-wrapper.la-wrapper--about .la-cta-section .la-btn--ghost:hover,
.la-wrapper.la-wrapper--pricing .la-cta-section .la-btn--ghost:hover,
.la-wrapper.la-wrapper--contact .la-cta-section .la-btn--ghost:hover,
.la-wrapper.la-wrapper--privacy .la-cta-section .la-btn--ghost:hover {
  background: rgba(42, 90, 168, 0.08);
}

/* Support, Contact & Troubleshooting page: hero-gradient matches base title size */
.la-wrapper--support .hero-gradient,
.la-wrapper--contact .hero-gradient {
  font-size: 1em;
}

.la-wrapper.la-wrapper--about .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--pricing .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--contact .la-hero-card .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--privacy .la-hero-card .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
}

.la-wrapper.la-wrapper--about .la-hero-title,
.la-wrapper.la-wrapper--pricing .la-hero-title,
.la-wrapper.la-wrapper--privacy .la-hero-title {
  font-size: 35px;
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--about .la-hero-title,
  .la-wrapper.la-wrapper--pricing .la-hero-title,
  .la-wrapper.la-wrapper--privacy .la-hero-title {
    font-size: 17px;
  }
}

.la-wrapper.la-wrapper--contact .la-hero-title {
  margin-bottom: 24px;
  font-size: 31.5px; /* 35px × 0.9 */
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--contact .la-hero-title {
    font-size: 24.3px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--contact .la-hero-title {
    font-size: 21.6px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--contact .la-hero-title {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--contact .la-hero-title {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--contact .la-hero-title {
    font-size: 15.3px;
  }
}

.la-wrapper.la-wrapper--about .la-section-header .la-section-title {
  font-size: 35px;
  font-weight: normal;
  color: #1b2a4a;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 24px;
}
.la-wrapper.la-wrapper--about .la-section-header .la-section-title em {
  color: #3A6BC7;
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--about .la-section-header .la-section-title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--about .la-section-header .la-section-title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--about .la-section-header .la-section-title {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--about .la-section-header .la-section-title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--about .la-section-header .la-section-title {
    font-size: 17px;
  }
}

.la-wrapper.la-wrapper--about .la-section-header .la-about-hero-separator {
  margin: 0 auto 24px;
}

.la-wrapper.la-wrapper--about .la-section .la-section-header {
  margin-bottom: 0;
}

.la-wrapper.la-wrapper--about .la-section .la-section-header + .la-feature-grid {
  margin-top: -2rem;
}

.la-wrapper.la-wrapper--about .la-cta-section .la-cta-headline {
  font-size: 34.2px; /* 38px × 0.9 */
  color: #1b2a4a;
  margin-bottom: 48px;
  line-height: 1.05;
}
.la-wrapper.la-wrapper--about .la-cta-section .la-cta-headline em {
  font-style: normal;
  color: #3A6BC7;
}

.la-wrapper.la-wrapper--about .la-cta-section .la-about-hero-separator {
  margin: 0 auto 24px;
}

.la-wrapper.la-wrapper--about .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
}

/* About page: Try LingoLinq Free / primary — same coral–soft yellow gradient */
.la-wrapper.la-wrapper--about .la-hero-card .la-btn.la-btn--primary,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn.la-btn--primary,
.la-wrapper.la-wrapper--about .la-about-hero-actions .la-btn.la-btn--primary {
  background: #F2B95A;
  color: #1B365D;
  border: 1px solid rgba(242, 185, 90, 0.5);
  border-color: rgba(242, 185, 90, 0.5);
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn.la-btn--primary:hover,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn.la-btn--primary:hover,
.la-wrapper.la-wrapper--about .la-about-hero-actions .la-btn.la-btn--primary:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #1B365D;
}

.la-wrapper.la-wrapper--about .la-hero-card .la-btn--ghost,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn--ghost {
  font-weight: 700;
  background: rgb(188.6842105263, 198.1578947368, 213.3157894737);
  color: #2c3e50;
  border: 2px solid rgb(176.1578947368, 187.4210526316, 205.4421052632);
  padding: 12px 28px;
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.la-wrapper.la-wrapper--about .la-hero-card .la-btn--ghost:hover,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn--ghost:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #2c3e50;
  text-decoration: none;
}

.la-wrapper.la-wrapper--privacy .la-pricing-hero-subtitle {
  margin-bottom: 2rem;
}

.la-wrapper.la-wrapper--contact .la-hero-card .la-hero-title-wrap {
  margin-left: auto;
  margin-right: auto;
}

.la-contact-hero-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: #374151;
  line-height: 1.75;
  letter-spacing: 0.005em;
  margin: 0 auto 2rem;
}

.la-wrapper.la-wrapper--contact .la-hero-card .la-contact-hero-subtitle {
  max-width: 478.72px; /* 598.4px × 0.8 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}

.la-wrapper.la-wrapper--contact .la-hero-card {
  margin-top: 5rem;
  margin-bottom: 48px;
}

/* Contact page divider inherits the new project-wide thin-line style. */
.la-privacy-content-card {
  max-width: 1080px;
  margin: -5rem auto;
  padding: 1.5rem;
}

/* Beta Program Notice callout on the Privacy Policy page (temporary, expires at launch) */
.la-privacy-beta-notice {
  margin: 24px 0;
  padding: 24px;
  border-left: 4px solid #1b2a4a;
  border-radius: 12px;
  background: rgba(27, 42, 74, 0.05);
}
.la-privacy-beta-notice h3 {
  margin: 0 0 12px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-weight: 800;
  color: #1b2a4a;
}
.la-privacy-beta-notice p {
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

.la-privacy-content-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}
.la-privacy-content-header .la-section-eyebrow-badge {
  display: inline-block;
  margin-bottom: 12px;
  order: 1;
}
.la-privacy-content-header .la-privacy-title {
  order: 2;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1b2a4a;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.la-privacy-content-header .la-about-hero-separator {
  order: 3;
  margin: 0 auto 12px;
}
.la-privacy-content-header .la-privacy-updated {
  order: 4;
  font-size: 15px;
  color: #374151;
  margin: 0;
}

.la-privacy-content {
  font-size: 16px;
  line-height: 1.75;
  color: #1b2a4a;
  letter-spacing: 0.01em;
}
.la-privacy-content p {
  margin: 0 0 16px;
}
.la-privacy-content p:last-child {
  margin-bottom: 0;
}
.la-privacy-content strong {
  color: #1b2a4a;
  font-weight: 700;
}
.la-privacy-content h4 {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1b2a4a;
  margin: 24px 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.la-privacy-content h4:first-of-type {
  margin-top: 0;
}
.la-privacy-content .la-privacy-link {
  color: #1B365D;
  text-decoration: underline;
  transition: color 0.15s ease;
}
.la-privacy-content .la-privacy-link:hover {
  color: #3A6BC7;
}
.la-privacy-content .la-privacy-address {
  margin-top: 8px;
  color: #374151;
}

.la-contact-form-wrapper {
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.la-contact-form-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card {
  padding: 20px 24px;
}

.la-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.la-contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.la-contact-form__row--hint {
  margin-top: -4px;
}

.la-contact-form__label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  margin: 0;
}

.la-contact-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 15px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  color: #1b2a4a;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.la-contact-input::placeholder {
  color: #6b7a8c;
}
.la-contact-input:focus-visible {
  outline: none;
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.la-contact-input--textarea {
  min-height: 88px;
  resize: vertical;
}

.la-contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__row {
  margin-bottom: 8px;
  gap: 2px;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
  height: auto;
  box-shadow: none;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2);
  background: #fff;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-input::placeholder {
  color: var(--md-muted);
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-input.la-contact-input--textarea {
  min-height: 52px;
  resize: vertical;
}

/* Contact page: modern dropdown (recipient select) — custom arrow, no native chrome */
.la-wrapper.la-wrapper--contact .la-contact-form-card select.la-contact-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111a2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}
.la-wrapper.la-wrapper--contact .la-contact-form-card select.la-contact-input:focus-visible {
  background-color: #fff;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions {
  margin-top: 8px;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn {
  min-height: 44.8px; /* 20% smaller than .la-hero-card .la-btn (56px × 0.8) */
  padding: 4.35px 20.4px;
}

/* Send Message button */
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--primary {
  background: #46505F;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  color: #fff;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--ghost {
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  border: 1px solid var(--md-line);
  transition: background 0.22s ease-in-out, border-color 0.22s ease-in-out, color 0.22s ease-in-out, transform 0.22s ease-in-out, box-shadow 0.22s ease-in-out;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--ghost:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.28), rgba(91, 141, 239, 0.24));
  border-color: rgba(44, 183, 176, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(44, 183, 176, 0.25), 0 2px 6px rgba(17, 26, 46, 0.08);
  color: var(--md-ink);
  text-decoration: none;
}
.la-wrapper.la-wrapper--contact .la-contact-form-card .la-contact-form__actions .la-btn--ghost:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(44, 183, 176, 0.15);
}

.la-contact-form__hint {
  font-size: 14px;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}

.la-contact-form__link {
  color: #1B365D;
  text-decoration: underline;
}
.la-contact-form__link:hover {
  color: #3A6BC7;
}

.la-pricing-hero-subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #374151;
  line-height: 1.75;
  letter-spacing: 0.005em;
  max-width: 680px;
  margin: 1.5rem auto 0;
}

.la-wrapper.la-wrapper--pricing .la-pricing-hero-subtitle {
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Pricing page hero: responsive on narrow screens */
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .la-wrapper.la-wrapper--pricing .la-pricing-hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-hero-title-wrap {
    padding-bottom: 1.5rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-section-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-pricing-hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-section-header .la-hero-title-wrap {
    padding-bottom: 1.5rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-section-header,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-pricing-hero-subtitle,
  .la-wrapper.la-wrapper--features #features-hero .la-pricing-hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-section-header .la-hero-title-wrap,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header .la-hero-title-wrap {
    padding-bottom: 1.5rem;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .la-wrapper.la-wrapper--pricing .la-pricing-hero-subtitle {
    font-size: 15px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-eyebrow-badge {
    margin-bottom: 1.5rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-section-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-pricing-hero-subtitle {
    font-size: 15px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .la-wrapper.la-wrapper--about #about-hero .la-section-header .la-section-eyebrow-badge {
    margin-bottom: 1.5rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-section-header,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-pricing-hero-subtitle,
  .la-wrapper.la-wrapper--features #features-hero .la-pricing-hero-subtitle {
    font-size: 15px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .la-wrapper.la-wrapper--about #features-hero .la-section-header .la-section-eyebrow-badge,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header .la-section-eyebrow-badge {
    margin-bottom: 1.5rem;
  }
}
.la-pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 2 columns: first two cards in a row, third wraps and fills the next line */
@media (max-width: 1024px) {
  .la-pricing-preview-grid,
  .pricing-wrapper.la-pricing-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 100%;
  }
  /* 3rd card spans full row when it wraps, so it's wider than each of the first two */
  .pricing-wrapper.la-pricing-preview-grid .pricing-card:nth-child(3) {
    grid-column: 1/-1;
  }
}
/* Stack all pricing cards on small screens */
@media (max-width: 768px) {
  .la-pricing-preview-grid,
  .pricing-wrapper.la-pricing-preview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .pricing-wrapper.la-pricing-preview-grid .pricing-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}
.la-pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform;
  transform: translateY(-6px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.la-pricing-card:hover {
  transform: translateY(-12px);
}

/* Bottom-align CTA button in each pricing card (grid gives equal-height cards) */
.pricing-card .cta,
.la-pricing-card .cta {
  margin-top: auto;
  padding-top: 20px;
}

.la-pricing-card__prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
}

/* Communicator card: two price options side by side with divider in the middle */
.pricing-card--communicator .price-block:not(.single).la-pricing-card__prices {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.pricing-card--communicator .price-block:not(.single) .or-divider {
  margin: 0;
}

.la-pricing-card__price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pricing page card structure (pricing-wrapper / pricing-card) */
.pricing-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card {
  position: relative;
}
.pricing-card .pricing-card__badge,
.pricing-card .badge {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 127, 130, 0.2);
  color: #316F70;
}
.pricing-card .plan-subtitle {
  margin: 0 0 1rem;
}
.pricing-card .price-block.single .price-option {
  margin: 0 auto;
}
.pricing-card .or-divider {
  margin: 0.5rem 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}
.pricing-card .feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
  width: 100%;
}
.pricing-card .feature-list li {
  padding: 0.35em 0;
  font-size: 15px;
  line-height: 1.4;
}
.pricing-card .cta {
  display: inline-block;
  margin-top: auto; /* bottom-align with other cards; padding from .pricing-card .cta, .la-pricing-card .cta */
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s ease;
}
.pricing-card .cta:hover {
  opacity: 0.9;
}
.pricing-card .cta.primary {
  background: var(--fs-dark-teal, #2A9D8F);
  color: #fff;
  border: none;
}
.pricing-card .cta.secondary {
  background: transparent;
  color: var(--fs-dark-teal, #2A9D8F);
  border: 2px solid var(--fs-dark-teal, #2A9D8F);
}

.la-pricing-card__amount {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #1b2a4a;
  line-height: 1.1;
}

.la-pricing-card__currency {
  font-size: 18px;
  font-weight: 600;
  color: #888;
  vertical-align: middle;
}

.la-pricing-card__term {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  margin-top: 2px;
}

.la-pricing-card__or {
  font-size: 16px;
  color: rgba(55, 65, 81, 0.6);
  padding: 0.25rem 0;
}

.price-strikethrough {
  text-decoration: line-through;
}

.la-pricing-table-layout {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 1024px) {
  .la-pricing-table-layout {
    grid-template-columns: 1fr;
  }
}
.la-pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
}
.la-pricing-table-wrap .subscription_table {
  max-width: 100%;
}

.la-pricing-table-wrap--full {
  width: 100%;
  margin-bottom: 3rem;
}
.la-pricing-table-wrap--full form.row {
  max-width: 760px !important;
  margin: 0 auto;
  padding: 0 16px;
}
.la-pricing-table-wrap--full .subscription_table {
  margin: 0 auto;
}
.la-pricing-table-wrap--full .la-pricing-trial-hint,
.la-pricing-table-wrap--full .la-pricing-actions {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.la-plan-text--centered {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.la-plan-text--centered .la-plan-title,
.la-plan-text--centered .la-plan-subtitle {
  max-width: 100%;
}
.la-plan-text--centered .la-plan-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; /* same width as .la-plan-subtitle (override base 90%) */
}

.la-wrapper .la-plan-text--centered .la-plan-title {
  max-width: 100%;
}

.la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
  font-size: 35px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #1b2a4a;
  margin: 0 0 16px;
}
.la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title em {
  color: #3A6BC7;
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-plan-title {
    font-size: 17px;
  }
}

.la-wrapper.la-wrapper--pricing .la-plan-text--centered .la-about-hero-separator {
  margin: 0 auto 24px;
}

.la-pricing-trial-hint {
  text-align: center;
  font-size: 18px;
  color: #6B7280;
  margin: 40px 0 8px;
}

.la-pricing-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.la-wrapper.la-wrapper--pricing .la-plan-section {
  margin-bottom: 64px;
}

.la-wrapper.la-wrapper--pricing .la-section {
  margin-top: calc(48px * 1.2);
  padding-top: 32px;
  margin-bottom: 0;
  align-items: center;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-hero-title-wrap {
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
  font-size: 35px;
  color: #1b2a4a;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}
.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title em {
  color: #3A6BC7;
}
@media (max-width: 1366px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-title {
    font-size: 17px;
  }
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-hero-title {
  margin-bottom: 16px;
  font-weight: normal;
  text-align: center;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-about-hero-separator {
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header {
  margin-bottom: 0;
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-hero-title-wrap {
  margin-left: auto;
  margin-right: auto;
}

.la-pricing-cloud-extras-cta {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 0 1rem;
  max-width: 748px;
  box-sizing: border-box;
}

/* Pricing cards: cloud extras open-modal control reads clearly as a link */
.la-wrapper.la-wrapper--pricing .la-pricing-card__cloud-extras-link {
  font-weight: 600;
  text-decoration: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgba(42, 157, 143, 0.55);
  padding-bottom: 1px;
}
.la-wrapper.la-wrapper--pricing .la-pricing-card__cloud-extras-link:hover, .la-wrapper.la-wrapper--pricing .la-pricing-card__cloud-extras-link:focus-visible {
  border-bottom-color: var(--fs-dark-teal, #2A9D8F);
  color: rgb(33.3889447236, 124.8110552764, 113.6814070352);
  outline: none;
}
.la-wrapper.la-wrapper--pricing .la-pricing-card__cloud-extras-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--fs-dark-teal, #2A9D8F);
  border-radius: 2px;
}

.la-wrapper.la-wrapper--pricing .la-section .la-pricing-preview-grid {
  margin-top: 0;
}

.la-wrapper .la-main {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(28px + 5rem);
  padding-right: calc(28px + 5rem);
  overflow-y: visible;
  background: linear-gradient(180deg, #f2f3f5 0%, #e6e8ec 50%, #d8dce0 100%);
}

.la-wrapper.la-font--atkinson {
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}
.la-wrapper.la-font--atkinson h1, .la-wrapper.la-font--atkinson h2, .la-wrapper.la-font--atkinson h3, .la-wrapper.la-font--atkinson h4, .la-wrapper.la-font--atkinson h5, .la-wrapper.la-font--atkinson h6,
.la-wrapper.la-font--atkinson p, .la-wrapper.la-font--atkinson a, .la-wrapper.la-font--atkinson span, .la-wrapper.la-font--atkinson li, .la-wrapper.la-font--atkinson blockquote,
.la-wrapper.la-font--atkinson .la-hero-title, .la-wrapper.la-font--atkinson .la-section-title, .la-wrapper.la-font--atkinson .la-stat-number,
.la-wrapper.la-font--atkinson .la-feature-card h3, .la-wrapper.la-font--atkinson .la-cta-title, .la-wrapper.la-font--atkinson .la-logo,
.la-wrapper.la-font--atkinson .la-btn, .la-wrapper.la-font--atkinson .la-topbar-link, .la-wrapper.la-font--atkinson .la-topbar-cta,
.la-wrapper.la-font--atkinson .la-plan-title, .la-wrapper.la-font--atkinson .la-cta-headline,
.la-wrapper.la-font--atkinson .la-testimonial-display-text, .la-wrapper.la-font--atkinson .la-testimonial-mark {
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}

.la-wrapper.la-font--lexend {
  font-family: "Lexend", sans-serif !important;
}
.la-wrapper.la-font--lexend h1, .la-wrapper.la-font--lexend h2, .la-wrapper.la-font--lexend h3, .la-wrapper.la-font--lexend h4, .la-wrapper.la-font--lexend h5, .la-wrapper.la-font--lexend h6,
.la-wrapper.la-font--lexend p, .la-wrapper.la-font--lexend a, .la-wrapper.la-font--lexend span, .la-wrapper.la-font--lexend li, .la-wrapper.la-font--lexend blockquote,
.la-wrapper.la-font--lexend .la-hero-title, .la-wrapper.la-font--lexend .la-section-title, .la-wrapper.la-font--lexend .la-stat-number,
.la-wrapper.la-font--lexend .la-feature-card h3, .la-wrapper.la-font--lexend .la-cta-title, .la-wrapper.la-font--lexend .la-logo,
.la-wrapper.la-font--lexend .la-btn, .la-wrapper.la-font--lexend .la-topbar-link, .la-wrapper.la-font--lexend .la-topbar-cta,
.la-wrapper.la-font--lexend .la-plan-title, .la-wrapper.la-font--lexend .la-cta-headline,
.la-wrapper.la-font--lexend .la-testimonial-display-text, .la-wrapper.la-font--lexend .la-testimonial-mark {
  font-family: "Lexend", sans-serif !important;
}

.la-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  background: rgb(18.8198019802, 29.2752475248, 51.5801980198);
  display: flex;
  align-items: center;
  min-height: 92px;
  padding: 0 24px;
  gap: 32px; /* logo to nav links */
  border-bottom: 1px solid rgb(18.8198019802, 29.2752475248, 51.5801980198);
  z-index: 400;
}

.la-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.la-logo .app-logo__lingo, .la-logo > span:first-child {
  color: rgb(22.8282208589, 30.6871165644, 38.1717791411);
}
.la-logo .app-logo__linq, .la-logo > span:last-child {
  color: rgb(63.0029447853, 95.0121232979, 125.4970552147);
  font-style: italic;
}
.la-logo:hover {
  text-decoration: none;
}

/* App-logo wordmark (footer, etc.): same two-tone */
.app-logo__lingo {
  color: rgb(22.8282208589, 30.6871165644, 38.1717791411);
}

.app-logo__linq {
  color: rgb(63.0029447853, 95.0121232979, 125.4970552147);
  font-style: italic;
}

.la-logo-img {
  height: 37px;
  width: auto;
}

.la-topbar-nav {
  display: flex;
  align-items: center;
  gap: 32px; /* nav link to nav link */
  margin-left: 0;
}
.la-topbar-nav::before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  margin-right: 0;
}

/* Logo to nav 32px when nav is inside .app-navbar (no .la-topbar gap) */
.app-navbar .la-topbar-nav {
  margin-left: 31px; /* 31px + 1px separator = 32px to first link */
}

.la-topbar-link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px; /* 20% smaller than 17px */
  font-weight: 600 !important;
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.la-topbar-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.la-topbar-link.active {
  color: white;
}

.la-topbar-link:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .la-topbar-link:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-topbar-alt-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.la-topbar-alt-link:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.la-topbar-alt-link:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .la-topbar-alt-link:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px; /* right CTA gap */
}

/* ── Hamburger button (hidden on desktop, shown ≤1024px) ── */
.la-topbar-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  margin-right: 24px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.la-topbar-hamburger:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}
.la-topbar-hamburger:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .la-topbar-hamburger:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-topbar-hamburger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
}
.la-topbar-hamburger__bar + .la-topbar-hamburger__bar {
  margin-top: 4px;
}

/* Footer hamburger sits on a light background — override the white bars from
   the base rule (designed for the dark topbar) with a dark color. */
.la-footer__hamburger .la-topbar-hamburger__bar {
  background: #374151;
}

/* ── Mobile drawer (slide-in from right) ── */
.la-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.la-mobile-drawer__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 74, 0.35);
  animation: la-drawer-fade-in 0.25s ease forwards;
}

@keyframes la-drawer-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.la-mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(27, 42, 74, 0.15);
  padding: 56px 40px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: la-drawer-slide-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  /* Scroll when content exceeds viewport height (tall footer menus on short screens). */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@keyframes la-drawer-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.la-mobile-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(27, 42, 74, 0.1);
  border-radius: 10px;
  font-size: 22px;
  color: rgba(27, 42, 74, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.la-mobile-drawer__close:hover {
  background: rgba(27, 42, 74, 0.05);
  color: rgba(27, 42, 74, 0.8);
}

.la-mobile-drawer__close:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-mobile-drawer__close:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-mobile-drawer__link {
  display: block;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.la-mobile-drawer__link:hover {
  background: rgba(27, 42, 74, 0.05);
  text-decoration: none;
  color: #1B365D;
}

.la-mobile-drawer__link:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-mobile-drawer__link:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Button-style drawer items (Upgrade, Help, Theme): match .la-mobile-drawer__link look with navy */
.la-mobile-drawer__link--button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  display: block;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.la-mobile-drawer__link--button:hover {
  background: rgba(27, 42, 74, 0.05);
  color: #1B365D;
}

.la-mobile-drawer__link--button:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-mobile-drawer__link--button:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-mobile-drawer__header {
  display: block;
  padding: 14px 16px 4px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(27, 42, 74, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.la-mobile-drawer__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 12px;
  padding: 10px 20px;
  background: rgb(235.77, 183.4425, 96.23);
  color: #1B365D;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  transition: filter 0.15s ease;
}
.la-mobile-drawer__cta:hover {
  filter: brightness(1.08);
  text-decoration: none;
  color: #1B365D;
}

.la-mobile-drawer__divider {
  height: 1px;
  background: rgba(27, 42, 74, 0.08);
  margin: 8px 0;
  /* The panel is a flex column with overflow; without this the zero-content
     divider collapses to 0 height under flex-shrink on tall menus (its margins
     stay, so a gap shows but no line). Pin its size so the hairline always paints. */
  flex-shrink: 0;
}

/* Modern divider — brand verdigris→navy gradient hairline (fades at both ends),
   matching the app's modern dividers. Used to separate the user's quick links from
   the rest of the drawer. */
.la-mobile-drawer__divider--modern {
  height: 2px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.45) 18%, rgba(27, 54, 93, 0.32) 50%, rgba(26, 123, 122, 0.35) 82%, rgba(27, 54, 93, 0) 100%);
  margin: 12px 0;
}

/* Display Style drawer link — the inner-header disc covers this above 640px, so
   the drawer entry appears ONLY at <=640px (where the disc is hidden). The
   two-class selector beats the single-class base link rules regardless of source
   order. */
.la-mobile-drawer__link.la-mobile-drawer__link--display-style {
  display: none;
}

@media (max-width: 640px) {
  .la-mobile-drawer__link.la-mobile-drawer__link--display-style {
    display: block;
  }
}
/* Modern divider — brand verdigris→navy gradient hairline (fades at both ends),
   matching the app's modern dividers. Used to separate the user's quick links from
   the rest of the drawer. */
.la-mobile-drawer__divider--modern {
  height: 2px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.45) 18%, rgba(27, 54, 93, 0.32) 50%, rgba(26, 123, 122, 0.35) 82%, rgba(27, 54, 93, 0) 100%);
  margin: 12px 0;
}

.la-mobile-drawer__footer-note {
  display: block;
  padding: 14px 16px 4px;
  font-size: 14px;
  color: rgba(27, 42, 74, 0.6);
  letter-spacing: 0.02em;
}

.la-mobile-drawer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 4px;
}

/* ── LingoLinq company sidebar (About, Pricing, Developers, etc.) ── */
.ll-company-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.ll-company-sidebar__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 74, 0.35);
  animation: la-drawer-fade-in 0.25s ease forwards;
}

.ll-company-sidebar__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(27, 42, 74, 0.15);
  padding: 72px 24px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: la-drawer-slide-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
}

.ll-company-sidebar__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(27, 42, 74, 0.1);
  border-radius: 10px;
  font-size: 22px;
  color: rgba(27, 42, 74, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ll-company-sidebar__close:hover {
  background: rgba(27, 42, 74, 0.05);
  color: rgba(27, 42, 74, 0.8);
}

.ll-company-sidebar__title {
  margin: 0 0 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  letter-spacing: -0.01em;
}

.ll-company-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ll-company-sidebar__link {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.ll-company-sidebar__link:hover {
  background: rgba(27, 42, 74, 0.06);
  text-decoration: none;
  color: #1B365D;
}

.la-topbar-compare-link {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
.la-topbar-compare-link:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.la-font-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.la-font-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}
.la-font-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}
.la-font-toggle:focus-visible {
  outline: 2px solid #4ECDC4 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15) !important;
}
@media (forced-colors: active) {
  .la-font-toggle:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.la-font-toggle--active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.la-font-toggle-letter--atkinson {
  font-family: "Atkinson Hyperlegible", sans-serif;
}

.la-font-toggle-letter--lexend {
  font-family: "Lexend", sans-serif;
}

.la-topbar-sign-in {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 6px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.la-topbar-sign-in:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

.la-topbar-cta {
  background: #F2B95A;
  color: #1B365D;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(242, 185, 90, 0.5);
  letter-spacing: 0.01em;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.la-topbar-cta:hover {
  filter: brightness(1.08);
  text-decoration: none;
  color: #1B365D;
}

/* Try Free in inner header — same bg as Try LingoLinq (hero .la-btn--primary), slightly smaller than hero CTA */
#inner_header .la-topbar-cta {
  background: #F2B95A !important;
  color: #1B365D !important;
  font-size: 14px !important;
  font-weight: 600; /* semi-bold: a bit more bold, not full bold */
  padding: 6px 16px !important;
  border: 1px solid rgba(242, 185, 90, 0.5) !important;
  filter: brightness(1.02) !important;
  box-shadow: none !important;
  transition: filter 0.15s ease, transform 0.2s ease !important;
}
#inner_header .la-topbar-cta:hover {
  filter: brightness(0.96) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  color: #1B365D !important;
  text-decoration: none !important;
}

/* Sign In (identity button) — same glass as Watch Demo, same shadow as Try Free; overrides gradient/base .btn when in header */
header #identity #identity_button.btn {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #1B365D !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}
header #identity #identity_button.btn:hover, header #identity #identity_button.btn:focus-visible {
  background: rgba(255, 255, 255, 0.32) !important;
  background-image: none !important;
  color: #1B365D !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  filter: none !important;
}

header #identity #identity_button.btn::before,
header #identity #identity_button.btn::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Unauthenticated pages: identity/Sign In button — solid dark slate to match dropdown (landing, login, register, etc.). Pill-shaped (not circular). */
#within_ember header.header--unauthenticated #identity #identity_button.btn,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button.btn {
  width: auto !important;
  min-width: unset !important;
  height: 42px !important;
  padding-left: 2.2rem !important;
  padding-right: 2.2rem !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  white-space: nowrap !important;
  background: #374151 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
#within_ember header.header--unauthenticated #identity #identity_button.btn:hover, #within_ember header.header--unauthenticated #identity #identity_button.btn:focus-visible,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button.btn:hover,
#within_ember header.header--unauthenticated .app-navbar #identity #identity_button.btn:focus-visible {
  background: rgb(71.5, 84.5, 105.3) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.la-topbar-login {
  background: #3A6BC7;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.la-topbar-login:hover {
  filter: brightness(1.08);
  text-decoration: none;
  color: #FFFFFF;
}

/* Tiny link to left of Try Free: toggles hero + sign-in/speak button colors (current vs previous slate) */
.la-hero-color-toggle {
  margin-right: 12px;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.la-hero-color-toggle:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
}

.la-sidebar {
  grid-area: sidebar;
  background: #F4F1EB;
  border-right: 1px solid #EDE9E0;
  padding: 16px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.la-sidebar > * + * {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
}

.la-sidebar-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #147F82;
  padding: 10px 12px 4px;
  margin-top: 6px;
}
.la-sidebar-label:first-child {
  margin-top: 0;
}
.la-sidebar-label.la-sidebar-label--lower {
  margin-top: 0;
}

.la-sidebar-quicklinks {
  margin: 0 0 auto 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.la-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* WCAG 2.5.5 AAA touch target — was 10×14 (~20 tall). */
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.15s ease;
  user-select: none;
}
.la-nav-item:hover {
  background: #EDE9E0;
  color: #1b2a4a;
  text-decoration: none;
}
.la-nav-item.la-active {
  background: rgba(242, 185, 90, 0.08);
  color: rgb(238.2752808989, 164.9438202247, 42.7247191011);
  border-color: rgba(242, 185, 90, 0.25);
}

.la-nav-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.la-panel-badges {
  margin: auto 0;
  padding: 16px 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.la-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  box-shadow: none;
}
.la-badge.la-badge--wcag {
  background: rgba(58, 106, 138, 0.06);
  color: #3A6A8A;
  border: 1px solid rgba(58, 106, 138, 0.08);
}
.la-badge.la-badge--oss {
  background: rgba(74, 140, 96, 0.06);
  color: #4A8C60;
  border: 1px solid rgba(74, 140, 96, 0.08);
}

.la-main {
  grid-area: main;
  overflow-y: auto;
  padding: 48px 28px;
  padding-bottom: 0;
  background: #F3F1ED;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px; /* reduced from 48 for tighter section spacing */
}

.la-bg-orbs {
  position: absolute;
  inset: -80px;
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.82;
  z-index: 0;
}

.la-bg-orb {
  position: absolute;
  border-radius: 999px;
  transform: translateZ(0);
}
.la-bg-orb--a {
  width: 500px;
  height: 500px;
  right: 5%;
  top: 3%;
  background: radial-gradient(circle at 30% 30%, rgba(58, 107, 199, 0.42), transparent 58%), radial-gradient(circle at 70% 70%, rgba(100, 140, 220, 0.34), transparent 60%);
}
.la-bg-orb--b {
  width: 420px;
  height: 420px;
  left: 4%;
  top: 8%;
  background: radial-gradient(circle at 35% 35%, rgba(242, 185, 90, 0.36), transparent 60%), radial-gradient(circle at 70% 70%, rgba(230, 180, 80, 0.28), transparent 58%);
}
.la-bg-orb--c {
  width: 480px;
  height: 480px;
  left: 15%;
  top: 45%;
  background: radial-gradient(circle at 35% 35%, rgba(78, 205, 196, 0.32), transparent 58%), radial-gradient(circle at 70% 70%, rgba(245, 140, 100, 0.26), transparent 60%);
}
.la-bg-orb--d {
  width: 540px;
  height: 540px;
  right: 8%;
  bottom: 10%;
  background: radial-gradient(circle at 30% 30%, rgba(58, 107, 199, 0.32), transparent 58%), radial-gradient(circle at 70% 70%, rgba(140, 170, 230, 0.26), transparent 60%);
}

.la-hero-card {
  position: relative;
  margin-top: clamp(0rem, 0rem + 2vw, 2rem); /* 2rem less than previous */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: radial-gradient(circle at 20% 20%, rgba(78, 205, 196, 0.05), transparent 60%), radial-gradient(circle at 80% 80%, rgba(27, 54, 93, 0.05), transparent 60%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
  border-radius: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  /* Bottom shadow to lift hero off the section below */
  box-shadow: 0 10px 18px -6px rgba(27, 42, 74, 0.22);
  transition: background 0.25s ease;
}

.hero-background {
  padding-top: 0; /* 2rem less than previous 2rem */
}
@media (max-width: 1024px) {
  .hero-background {
    padding-top: 6rem; /* 2rem less than previous 8rem */
  }
}
.hero-background::after {
  display: none;
}

/* hero-background::before overlay removed */
#within_ember.la-hero-colors-alt .la-hero-card {
  background: rgb(75.4214785276, 110.3824029627, 143.6785214724);
}

/* Alt toggle: buttons 15% lighter than rgb(75, 110, 144) (#4b6e90) */
#within_ember.la-hero-colors-alt .la-topbar-login,
#within_ember.la-hero-colors-alt .la-mockup-speak,
#within_ember.la-hero-colors-alt #identity .btn {
  background: rgb(113.9589041096, 148.2397260274, 181.5410958904);
}

/* Hero container: layout only, fully transparent (no glass panel); above wave image */
.la-hero-card .hero-container {
  position: relative;
  z-index: 1;
  max-width: min(1320px, 94%);
  margin: clamp(1.5rem, 0.5rem + 1.75vw, 3rem) auto 0;
  padding: clamp(24px, 12px + 2.5vw, 48px) clamp(28px, 12px + 3.5vw, 72px) clamp(28px, 14px + 2.9vw, 56px) clamp(20px, 4px + 3vw, 48px);
  border-radius: clamp(16px, 10px + 1.25vw, 28px);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.la-hero-card-inner {
  max-width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 6fr 4fr; /* 60% left (text), 40% right (mockup) */
  gap: clamp(24px, 8px + 3.3vw, 56px);
  align-items: start; /* let columns grow with content so mockup margin/scale have room */
  position: relative;
  background: transparent;
}
.la-hero-card-inner::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 185, 90, 0.12) 0%, transparent 55%);
  pointer-events: none;
}
.la-hero-card-inner::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 25%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.09) 0%, transparent 55%);
  pointer-events: none;
}
.la-hero-card-inner .la-section-eyebrow-badge {
  color: #0d5c5f;
  background: rgba(13, 92, 95, 0.15);
  border-color: rgba(13, 92, 95, 0.35);
}

/* Hero text: layout only, no container bg */
.la-hero-text {
  max-width: min(860px, 100%);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Dark gray text and borders on transparent hero so content reads on glass panel; Lexend font */
.la-hero-card .la-hero-text .la-hero-title,
.la-hero-card .la-hero-text .la-hero-title .la-hero-title-line1,
.la-hero-card .la-hero-text .la-hero-title .la-hero-title-line2 {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  color: #374151;
}

/* "every student" — gradient +5% saturation */
.la-hero-card .la-hero-text .la-hero-title .la-hero-highlight {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.la-hero-card .la-hero-text .la-hero-subtitle {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  color: #374151;
}

.la-hero-card .la-hero-text .la-hero-badge-label {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
}

.la-hero-card .la-hero-text .la-hero-headline {
  border-bottom-color: rgba(0, 0, 0, 0.09);
}

.la-hero-card .la-hero-text .la-hero-badges-section {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.la-hero-card .la-hero-text .la-hero-badge-label {
  color: #374151;
}

.la-hero-card .la-hero-text .la-btn--ghost {
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.11);
}

.la-hero-card .la-hero-text .la-btn--ghost:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(65, 75, 91, 0.85);
}

/* Left content block: headline max-width, vertical rhythm per spacing map */
.la-hero-headline-and-badges .la-hero-headline,
.la-hero-title-wrap {
  max-width: min(590px, 100%);
}

.la-hero-section {
  position: relative;
}

.la-hero-headline-and-badges {
  display: grid;
  grid-template-columns: 1fr;
  width: fit-content;
}

.la-hero-headline-and-badges .la-hero-headline {
  min-width: 0; /* allow column to shrink to badge width */
  width: calc(100% - 1rem);
}

.la-hero-headline {
  margin-bottom: 28px; /* 28px divider → paragraph (vertical rhythm) */
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Hero vertical rhythm: headline 24px → divider, 28px → paragraph, 32px → pills, 28px → CTA */
.la-hero-card .la-hero-headline .la-hero-title-wrap {
  padding-bottom: 24px;
}

.la-hero-trust-line {
  margin-top: 24px;
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.035em;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
}

@media (max-width: 768px) {
  .la-hero-trust-line {
    font-size: 14px;
  }
}
.la-hero-card .la-hero-text .la-hero-trust-line {
  border-top-color: rgba(0, 0, 0, 0.04);
  color: #9CA3AF;
}

.la-hero-badges-section {
  width: fit-content;
  padding: clamp(8px, 4px + 0.56vw, 12px);
  margin-bottom: 28px; /* 28px feature pills → CTA buttons */
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.la-hero-badges-section .la-hero-badges {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

.la-hero-badges-section .la-hero-badge {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 14px;
  padding-right: 22px;
  justify-content: flex-start;
}

.la-hero-badges-section .la-hero-badge-label {
  white-space: nowrap;
}

.la-hero-actions-section {
  padding-top: 16px; /* 8px more above CTAs for breathing room below pills */
}

.la-hero-eyebrow {
  font-size: clamp(11px, 8px + 0.35vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #F2B95A;
  margin-bottom: 16px;
}

.la-hero-title-wrap {
  padding-bottom: clamp(12px, 6px + 1.25vw, 24px);
}

.la-wrapper .la-hero-title {
  font-family: "Maitree", serif;
  font-size: clamp(2rem, 0.8rem + 3.47vw, 3.575rem);
  font-weight: 600; /* semi-bold: cleaner, calmer, more editorial than 700 */
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.025em; /* tight for display; keeps two-line headline feeling like one unit */
  font-kerning: normal;
  margin: 0;
  margin-bottom: 0;
  display: block;
  height: auto;
}
.la-wrapper .la-hero-title span {
  display: inline;
  position: static;
  left: auto;
  top: auto;
  font-weight: inherit;
}
.la-wrapper .la-hero-title .la-hero-title-line1 {
  color: #FFFFFF;
  font-size: 1.2em;
}
.la-wrapper .la-hero-title .la-hero-highlight {
  font-size: 1.1025em; /* 5% larger than 1.05em */
  font-weight: normal;
}
.la-wrapper .la-hero-title .la-hero-title-line2 {
  display: inline;
  /* Scale with viewport like line1 does (line1 uses 1.2em which scales via
     the parent's clamp). Floor 18px on tiny phones, ceiling 32px at 768. */
  font-size: clamp(18px, 12px + 2.5vw, 32px);
}

/* Hero title entrance: Communication from left, "access for every student" from right */
@keyframes la-hero-title-from-left {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes la-hero-title-from-right {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes ub-letter-bounce {
  0% {
    opacity: 0;
    transform: translateY(-14px);
    color: #2A9D8F;
  }
  60% {
    opacity: 1;
    transform: translateY(2px);
    color: #4C86D8;
  }
  80% {
    transform: translateY(-1px);
    color: #3a6bb0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    color: #1b2a4a;
  }
}
.la-hero-card .la-hero-title .la-hero-title--from-left {
  display: inline-block;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.la-hero-card .la-hero-title .la-hero-title--from-right {
  display: inline-block;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
  opacity: 0;
}

/* Dashboard hero: subtitle enters from the right (after title from left) */
@keyframes md-hero-from-right {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Dashboard hero: "It's great to see you" from left, "Let's continue..." from right (same timing as landing-alt); centered on page */
.md-navbar__speech-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9CA3AF;
  margin-right: 10px;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.md-navbar__speech-dot:hover {
  background: #6B7280;
  transform: scale(1.3);
}

.md-hero__speech-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9CA3AF;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.md-hero__speech-dot:hover {
  background: #6B7280;
  transform: scale(1.3);
}

.md-hero--dashboard {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 8px;
}

/* Positioning context for the absolutely-placed `.md-tour__trigger`
   pill in the top-right of the dashboard hero. NOTE the
   two-class compound selector: `.md-hero.md-hero--dashboard` is
   0,2,0 specificity, which beats the general
   `.md-hero { position: static !important }` rule (~line 38413,
   0,1,0). The earlier single-class attempt at this same site
   silently lost the cascade — `!important` does NOT override
   source order at equal specificity, so the later `.md-hero`
   rule still won. Higher specificity is the real fix.
   See LEARNINGS.md duplicate-selectors-in-app.scss pattern. */
.md-hero.md-hero--dashboard {
  position: relative !important;
}

@media (min-width: 1025px) {
  /* Lift the tour trigger onto the pill-nav row, right-aligned to the
     content gutter. The workspace becomes the containing block (scoped
     to the dashboard via :has) and the hero gives up its relative so the
     absolute trigger resolves to the workspace. */
  .md-shell > .md-workspace:has(.md-hero--dashboard) {
    position: relative !important;
  }
  .md-shell > .md-workspace:has(.md-hero--dashboard) .md-hero.md-hero--dashboard {
    position: static !important;
  }
  .md-shell > .md-workspace:has(.md-hero--dashboard) .md-tour__trigger {
    /* Same fixed top-left-below-navbar anchor as the base rule (~92966). */
    position: fixed !important;
    top: calc(var(--topbar-height, 16px) + 7.5rem) !important;
    left: 24px !important;
    right: auto !important;
    z-index: 1001 !important;
  }
}
/* Getting Started entry badge — a single gradient icon circle (reusing
   .beta-welcome-steps__num) pinned to the top-right of the home page, fixed to
   the viewport and level with the Take a tour button (same top offset).
   z-index sits just BELOW the fixed inner-header navbar (z-index:1000, ~l.442) so
   the identity dropdown — which opens from the navbar and overlaps this badge —
   renders ABOVE it. The badge can't be hidden by the navbar: the header is only
   `--topbar-height` tall and this badge sits ~7.5rem below it, so they never
   overlap; the lower z-index only matters where the dropdown extends over it. */
.md-home-steps {
  position: fixed;
  top: calc(var(--topbar-height, 16px) + 7.5rem);
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The Getting Started trigger reuses the .beta-welcome-steps__num glass circle
   as an actionable icon button — reset native button chrome, indigo icon
   (currentColor), and a subtle hover lift. */
.md-display-style__trigger {
  /* Always a pill showing the icon + "Get Started" label at EVERY width
     (overrides the .beta-welcome-steps__num fixed 36px circle to an auto-width
     pill). */
  width: auto !important;
  height: auto !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 7px 18px 7px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: #1b2a4a;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-display-style__trigger:hover {
  transform: translateY(-1px);
}

.md-display-style__trigger:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 3px;
}

/* Display Style button fill — the glassmorphism disc formerly supplied by
   `.beta-welcome-steps__num` (renamed off this control so the class reflects its
   purpose; that class still styles the beta-welcome-message steps list). Size/shape
   come from `.md-display-style__trigger` + `.app-navbar__home-actions`; this
   supplies only the translucent denim→verdigris glass fill, rim, and glow for Gentle
   View (Focused View overrides the background with the nav-pill gradient). */
.display-style {
  color: #1b2a4a;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(76, 134, 216, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 8px rgba(42, 157, 143, 0.16);
}

/* Focused layout — the Take-a-Tour + Get-Started triggers are relocated into the
   inner header (app-navbar-authenticated-inner, beside the Search field) as compact
   CIRCLE icon buttons. Here they shed their fixed positioning + text label and
   become 40px discs that keep ONLY their icon + their own glassy fill. Scoped to
   .app-navbar__home-actions, so the dashboard's own (non-focused) fixed pills are
   untouched. !important beats the triggers' base position/size/padding (which are
   !important). */
.app-navbar__home-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Sits inside nav-header right after the 180px Search field — small gap so the
     two discs read as left-aligned next to it, not flush against it. */
  margin-left: 12px;
}

.app-navbar__home-actions .md-tour__trigger,
.app-navbar__home-actions .md-display-style__trigger {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-navbar__home-actions .md-tour__trigger-label,
.app-navbar__home-actions .md-display-style__trigger-label {
  display: none !important;
}

/* Navbar circle buttons (Take a Tour + Get Started / Dashboard Design) — on
   Focused View they MATCH the active nav-pill: the same 135° blue-grey→charcoal-
   blue gradient with a white icon. Scoped to body.ll-layout-focused (set by
   dashboard/authenticated-view); Gentle View falls back to the original
   .beta-welcome-steps__num glass disc. The 40px circle SIZE/shape rule above is
   unscoped so both layouts stay circular. */
body.ll-layout-focused .app-navbar__home-actions .md-tour__trigger,
body.ll-layout-focused .app-navbar__home-actions .md-display-style__trigger {
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px rgba(27, 54, 93, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The Guided Tour disc on Focused View takes the SAME glossy desaturated-navy
   surface as the home page "Let's Communicate" hero (.md-card--speak-focused),
   so the tour entry point echoes the focal communicate button. Only the
   background changes from the shared focused-disc rule above; the Display Style
   disc keeps the blue-grey→charcoal-blue gradient. */
body.ll-layout-focused .app-navbar__home-actions .md-tour__trigger {
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) 100%) !important;
}

body.ll-layout-focused .app-navbar__home-actions .md-tour__trigger-icon,
body.ll-layout-focused .app-navbar__home-actions .md-display-style__trigger-icon {
  color: #ffffff !important;
}

/* The map (Take a Tour) glyph uses HARDCODED hex strokes (#4C86D8 / #46505F), not
   currentColor, so `color` doesn't reach it — override the strokes to white. */
body.ll-layout-focused .app-navbar__home-actions .md-tour__trigger-icon * {
  stroke: #ffffff !important;
}

/* While the Getting Started modal series is open the page chrome is dimmed
   (body.md-ds-active, set by display-style). Hide the relocated inner-header
   Take-a-Tour + Get-Started discs then, so they don't sit over the modal backdrop. */
body.md-ds-active .app-navbar__home-actions {
  display: none !important;
}

/* ≤1024px — keep the two discs in the navbar (every layout). Legacy ≤1024
   `.md-tour__trigger` rules try to re-pin the trigger to a fixed corner; re-assert
   the in-navbar circle treatment + visibility here so they stay on the navbar. */
@media (max-width: 1024px) {
  .app-navbar__home-actions {
    display: inline-flex !important;
  }
  .app-navbar__home-actions .md-tour__trigger,
  .app-navbar__home-actions .md-display-style__trigger {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  /* Left-align the discs immediately to the right of the brand. At <=1024 the
     nav-header is `display:contents`, so its children (brand, search, discs)
     flatten into the inner-header flex row; the brand `h1` is kept content-width
     (see the nav-header h1 rule below) so the discs tuck in right after it via
     `order`. `#identity`'s own `margin-left:auto` still pushes the avatar/menu to
     the far right. */
  .app-navbar .app-navbar__nav-header:has(.app-navbar__home-actions) .app-navbar__home-actions {
    order: -1 !important;
    margin-left: 12px !important;
  }
}
/* <=640px: drop the Display Style disc from the inner header — it moves into the
   mobile drawer (`.la-mobile-drawer__link--display-style`, shown only at this
   width) instead. The guided-tour disc stays in the navbar. */
@media (max-width: 640px) {
  .app-navbar__home-actions .md-display-style__trigger {
    display: none !important;
  }
}
.md-display-style__trigger-icon {
  display: block;
}

/* Trigger label — always shown, to the right of the icon. */
.md-display-style__trigger-label {
  display: inline;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  line-height: 1;
  white-space: nowrap;
}

/* Getting Started modal — a bit larger and pinned near the top of the
   viewport. Scoped via the `md-ds-modal` class on its welcome step so the
   home-tour welcome/outro keep their default size + centering. Shepherd's
   base .shepherd-element has no `position` — floating-ui sets position/top/left
   INLINE at runtime — so these `!important` rules (which beat inline styles)
   take full, explicit control: fixed, horizontally centered, near the top. */
.shepherd-element.md-ds-modal {
  position: fixed !important;
  top: 6vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  max-width: 600px;
}

.shepherd-element.md-ds-modal .shepherd-text {
  max-width: 40ch;
}

/* "Choose your display style" step — a WIDER modal to fit the three options
   side-by-side plus the Gentle Layout preview below; text uses full width. */
.shepherd-element.md-ds-modal--display {
  /* Roomy panel for the live home-page preview: 80% of the viewport on larger
     screens (centered, the dimmed page showing at the sides), full-width at
     1024px and below. Full height either way; scrolls vertically. */
  width: 80vw !important;
  max-width: 80vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 1024px) {
  .shepherd-element.md-ds-modal--display {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
  }
}
/* The "Customize your dashboard" step (the toggles variant) goes FULL viewport
   width at all sizes so the preview has room and the toggles sit as a
   content-width side panel. Scoped via :has() to the with-toggles preview, so the
   "choose your display style" step keeps its 80vw panel. */
.shepherd-element.md-ds-modal--display:has(.md-ds-preview--with-toggles) {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  transform: none !important;
}

/* Full-width content — override the centered-intro 33ch cap that otherwise
   squishes the options + preview into a narrow centre column. */
/* Full-height flex column: the text region grows so the footer sits at the END
   of the content — pushed to the bottom of the modal when content is short, and
   after all content (reached by scrolling) when it's tall. Replaces the old
   sticky footer, which floated up to the content's end and, on small screens,
   stayed pinned over the content. */
.shepherd-element.md-ds-modal--display .shepherd-content {
  max-width: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

.shepherd-element.md-ds-modal--display .shepherd-text {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
  flex: 1 0 auto;
}

.shepherd-element.md-ds-modal--display .shepherd-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

/* ── Getting Started — welcome (first) page ───────────────────────────────────
   Doubled-size intro (~600px → ~1100px wide; the stepper + two preview cards make
   it ~2× taller too). Content: a short lead, a horizontal 1→2 progress stepper
   (reusing the .beta-welcome-steps__num glass badges + a connecting line), and two
   button cards that preview the next two steps as mini-mockups. */
.shepherd-element.md-ds-modal--welcome {
  max-width: 1100px;
  width: 92vw;
  top: 4vh !important;
}

/* Override the centered-intro 40ch text cap so the cards use the full width. */
.shepherd-element.md-ds-modal--welcome .shepherd-text {
  max-width: none !important;
}

.md-ds-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 8px 0 4px;
}

.md-ds-welcome__lead {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.75);
}

/* Horizontal 1 —— 2 stepper. Side padding seats the badge centres over the two
   card columns (25% / 75%); the flexible line connects them. */
.md-ds-welcome__progress {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 calc(25% - 18px);
  box-sizing: border-box;
}

.md-ds-welcome__num {
  font-size: 16px;
}

.md-ds-welcome__line {
  flex: 1;
  height: 2px;
  margin: 0 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0.5) 0%, rgba(76, 134, 216, 0.5) 100%);
  opacity: 0.5;
}

.md-ds-welcome__cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

/* Non-actionable step label — just names a step; sits under its number. No card
   chrome (background/border/shadow/radius) so it doesn't read as a clickable card. */
.md-ds-welcome-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Pull each label up snug under its number: cancel most of the parent's 28px
     column gap and drop the vertical padding (kept only side padding). */
  margin-top: -18px;
  padding: 0 16px;
  text-align: center;
}

.md-ds-welcome-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #1b2a4a;
}

@media (max-width: 720px) {
  .md-ds-welcome__cards {
    flex-direction: column;
  }
  .md-ds-welcome__progress {
    padding: 0;
    justify-content: center;
  }
}
.md-ds-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px auto 0;
  max-width: 920px;
}

/* Stylized "— OR —" divider between the two layout-style buttons: the word OR
   flanked by short hairline dashes, so the pair reads as an either/or choice.
   A flex child of .md-ds-options, vertically centered between the cards. */
.md-ds-options__or {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.5);
}

.md-ds-options__or::before,
.md-ds-options__or::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(27, 54, 93, 0.2);
}

/* Layout option card — mirrors the dashboard Speak Mode as-button: glassy
   white surface, hairline border, layered raised shadow + hover lift. Number
   badge reuses the .beta-welcome-steps__num glass circle. */
.md-ds-option {
  /* Hug the content so there's no dead space to the right of the short bullet
     lines; cards don't grow, can shrink, and still stretch to equal HEIGHT
     (container align-items defaults to stretch). Cap the width so any future
     long line wraps instead of overflowing. */
  flex: 0 1 auto;
  max-width: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: center;
  font: inherit;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1);
  cursor: pointer;
  transition: box-shadow 180ms ease-out, transform 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.md-ds-option:hover,
.md-ds-option:focus-visible {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14);
}

.md-ds-option:active {
  transform: translateY(0.5px);
}

.md-ds-option:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 3px;
}

.md-ds-option__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #1b2a4a;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Thin intentional underline beneath each option, in the brand highlight
   gradient (matches the dashboard card dividers). */
.md-ds-option__label::after {
  content: "";
  /* Extend 4px past the label text (2px each side). Percentages don't feed
     the flex item's intrinsic width, so the label still hugs its text and the
     underline tracks each header's actual width. */
  width: calc(100% + 4px);
  margin-left: -2px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
}

/* Title + one-line descriptor stack to the right of the number circle. */
.md-ds-option__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Small, muted one-line descriptor beneath each layout title — adds decision
   clarity without raising visual priority or cognitive load. */
.md-ds-option__desc {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(27, 54, 93, 0.55);
  /* Center the lead line + bracketed bullet group on the card. The bullets keep
     their own left-to-right read inside the bracket; the whole group is centered. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Lead line above the Gentle View bullet list ("May be a good fit if you:") —
   a touch stronger/darker than the bullets so it reads as their intro. */
.md-ds-option__desc-lead {
  display: block;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.7);
}

/* Overarching bracket wrapping the bullet group — a modern "[": a soft
   verdigris left rule with short rounded top/bottom ticks, framing the three
   "good fit" items as one set. */
.md-ds-option__bracket {
  position: relative;
  margin-top: 8px;
  padding-left: 13px;
  /* The bracket group is centered as a block on the card (via the centered desc),
     but the bullets themselves read LEFT-aligned inside it. */
  text-align: left;
}

.md-ds-option__bracket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 7px;
  border: 2px solid rgba(42, 157, 143, 0.45);
  border-right: none;
  border-radius: 5px 0 0 5px;
}

/* Professional bullet list under the lead — custom verdigris dots (not the
   default browser markers) for a polished, on-brand look. */
.md-ds-option__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.md-ds-option__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(27, 54, 93, 0.55);
}

.md-ds-option__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2A9D8F;
}

@media (prefers-reduced-motion: reduce) {
  .md-ds-option {
    transition: none;
  }
  .md-ds-option:hover,
  .md-ds-option:focus-visible,
  .md-ds-option:active {
    transform: none;
  }
}
/* Selected option (set by the show hook on click) — verdigris ring. */
.md-ds-option.is-selected {
  border-color: rgba(42, 157, 143, 0.6) !important;
  /* Calm verdigris atmospheric tint layered over the white base — instantly
     identifiable at a glance, but no saturated fill or harsh "selected tab" look. */
  background: radial-gradient(130% 130% at 0% 0%, rgba(42, 157, 143, 0.1), transparent 58%), linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(243, 250, 249, 0.94) 100%) !important;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.45), 0 0 20px rgba(42, 157, 143, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 26px rgba(27, 54, 93, 0.16) !important; /* elevated surface depth */
}

/* Brighter, slightly thicker divider under the SELECTED layout's title — a small
   accent that reinforces the choice without raising overall visual volume. */
.md-ds-option.is-selected .md-ds-option__label::after {
  height: 3px;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.3);
}

/* Disabled Next button — until a layout option is chosen. */
.md-tour__btn--disabled,
.md-tour__btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Gentle Layout preview — a larger, professional miniature of THIS user's
   actual home dashboard, shown below the options. Cards are placed via inline
   grid-row/column from the component so it mirrors the real (user-type-aware)
   grid, and each is labeled with its real card name. ── */
.md-ds-preview {
  /* Page 1 (display style): clear separation from the style cards above so the
     "[ PREVIEW ]" legend reads as the start of a distinct preview region. */
  margin-top: 28px;
}

/* Two "what you can do" checklist items below the Customize step header, joined
   by an "— and/or —" divider. Pills mirror the section-toggle chips; the check
   sits in a brand gradient disc. */
.md-ds-howto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 4px auto 16px;
}

.md-ds-howto__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: linear-gradient(135deg, #ffffff, rgba(248, 250, 252, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.05), 0 5px 14px rgba(27, 54, 93, 0.05);
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
}

/* Stylish diamond bullet — a small rounded-corner square rotated 45°, filled with
   the brand denim→verdigris gradient and a soft drop shadow + inner highlight. */
.md-ds-howto__bullet {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #4C86D8, #2A9D8F);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.md-ds-howto__sep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.5);
}

.md-ds-howto__sep::before,
.md-ds-howto__sep::after {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(27, 54, 93, 0.2);
}

/* Responsive — once the two how-to pills can't sit side-by-side, stack them into
   a centered column so the "— AND/OR —" wraps onto its OWN centered row between
   them (instead of being stranded inline beside a pill). This step's modal is
   full viewport width and the pills are compact, so they fit side-by-side down
   to ~md; below that they wrap. (The container already centers via
   `align-items:center`, so just flipping to column is enough.) */
@media (max-width: 768px) {
  .md-ds-howto {
    flex-direction: column;
  }
}
/* Page 2 (Customize your dashboard): two-up layout — the live preview on the LEFT,
   the section-visibility toggles as a PANEL on the RIGHT (was a single centered
   column with the toggles stacked on top). Grid areas put the legend above the
   live preview in the left column; the toggles panel spans both rows on the right. */
.md-ds-preview--with-toggles {
  margin-top: 6px;
  display: grid;
  /* The toggles panel hugs its content (widest pill + padding); the preview takes
     the rest. The long heading is wrapped (not allowed to stretch the panel) by
     the .md-ds-sections__title rule below. */
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto minmax(0, 1fr);
  /* The legend spans BOTH columns so it centers across the full page width (its
     own justify-content:center then centers the content). sections still sits in
     the LIVE row (row 2) so the toggles panel's top lines up with the live
     preview card's top, not with the legend above it. */
  grid-template-areas: "legend   legend" "live     sections";
  align-items: start;
  column-gap: 24px;
}

.md-ds-preview--with-toggles .md-ds-preview__legend {
  grid-area: legend;
}

.md-ds-preview--with-toggles .md-ds-preview__live {
  grid-area: live;
}

/* Toggles become the right-hand panel: drop the centered-top-block max-width +
   auto margins (the inset card treatment is kept and now reads as a side panel),
   sit it at the top of its area, and stack the pills vertically in the column. */
.md-ds-preview--with-toggles .md-ds-sections {
  grid-area: sections;
  max-width: none;
  margin: 0;
  align-self: start;
}

.md-ds-preview--with-toggles .md-ds-sections__title {
  text-align: left;
  /* Wrap the heading to the pill-stack width instead of letting its long single
     line stretch the whole panel: width:min-content makes it contribute only its
     longest word to the panel's content-width (so the wider pills win), then
     min-width:100% expands it back to the resolved panel width to wrap cleanly. */
  width: min-content;
  min-width: 100%;
}

.md-ds-preview--with-toggles .md-ds-sections__list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Narrow viewports (small landscape): fall back to the original single column
   with the toggles stacked on top of the preview. */
@media (max-width: 860px) {
  .md-ds-preview--with-toggles {
    grid-template-columns: 1fr;
    grid-template-areas: "sections" "legend" "live";
    column-gap: 0;
  }
  .md-ds-preview--with-toggles .md-ds-sections {
    max-width: 920px;
    margin: 0 auto 24px;
  }
  .md-ds-preview--with-toggles .md-ds-sections__title {
    text-align: center;
  }
  .md-ds-preview--with-toggles .md-ds-sections__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
/* Combined preview legend — one professional line above the live preview that
   reads as a progression: a bracketed preview tag, a dot, then the swap
   instruction. Replaces the separate top caption + bottom drag hint. */
.md-ds-preview__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  margin: 2px 0 10px;
}

/* "Preview — Gentle Layout" framed by thin, modern brackets (drawn via
   ::before/::after in the brand accent) — uppercase, tracked, quietly muted. */
.md-ds-preview__legend-tag {
  position: relative;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.5);
}

.md-ds-preview__legend-tag::before,
.md-ds-preview__legend-tag::after {
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  font-size: 19px;
  font-weight: 300;
  line-height: 1;
  color: rgba(76, 134, 216, 0.55);
}

.md-ds-preview__legend-tag::before {
  content: "[";
  left: 0;
}

.md-ds-preview__legend-tag::after {
  content: "]";
  right: 0;
}

/* Dot connector between the tag and the instruction. */
.md-ds-preview__legend-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.26);
}

/* The swap instruction — calm sentence guidance, sized for the AAC 13px floor. */
.md-ds-preview__legend-hint {
  font-size: 14px;
  font-weight: 500;
  /* A touch more contrast than the bracketed tag's effective weight, so the
     interaction guidance scans as an equal partner to the preview context —
     without enlarging or bolding it. */
  color: rgba(27, 54, 93, 0.6);
}

/* Section visibility checklist — modern custom checkboxes that toggle which
   home-dashboard cards appear; toggling one also live-hides the matching card
   in the preview clone below. */
.md-ds-sections {
  max-width: 920px;
  /* More space below the section block so it reads as a finished step before the
     "[ PREVIEW ]" legend / live grid begins. */
  margin: 0 auto 30px;
  /* Inset grouping that reads as NESTED INTO the modal surface, not a separate
     floating slab: a very faint tint that blends with the modal background, an
     almost-invisible edge, and a soft, shallow inner shadow (softer top edge,
     gentler bottom-edge contrast) so it feels carved into the surface. */
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.035), rgba(27, 54, 93, 0.015));
  border: 1px solid rgba(27, 54, 93, 0.05);
  box-shadow: inset 0 1px 4px rgba(27, 54, 93, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

.md-ds-sections__title {
  font-size: 14px;
  /* Lighter weight + a touch less contrast so this reads as supportive guidance,
     not a heading competing with the layout titles. Size unchanged (AAC). */
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
  text-align: center;
  margin-bottom: 10px;
}

.md-ds-sections__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.md-ds-section {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Slender, fully-rounded pill. Trim vertical padding for a thinner capsule; extra
     right padding (vs left, which hosts the check) keeps the label visually centred.
     Layered shadow (crisp 1px lift + soft ambient) reads modern, not heavy. */
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  /* Always-on offset ring on EVERY pill (not just the focused/selected one) — the
     halo the browser used to draw only on click, now a consistent design element.
     `outline` (+ offset) doesn't affect layout, so it never reflows the row. */
  outline: 1.5px solid rgba(76, 134, 216, 0.28);
  outline-offset: 2px;
  background: linear-gradient(135deg, #ffffff, rgba(248, 250, 252, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.05), 0 5px 14px rgba(27, 54, 93, 0.05);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.md-ds-section:hover {
  border-color: rgba(76, 134, 216, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(27, 54, 93, 0.1);
}

/* Visually-hidden native input — keeps keyboard focus + a11y semantics while
   the styled box does the visuals. */
.md-ds-section__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.md-ds-section__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  /* Modern circle. Unchecked: a softly RECESSED well — top-down light gradient + an
     inner shadow at the top edge and a thin white catch at the bottom, so it reads
     as a dimensional concave dot rather than a flat ring. */
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.2);
  background: linear-gradient(180deg, #ffffff, #e9eef4);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  transition: background 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.md-ds-section__check {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}

.md-ds-section__input:checked ~ .md-ds-section__box {
  /* Checked: the circle pops UP — brand gradient fill, an outer drop shadow (raised
     off the pill), a glossy top highlight and a bottom inner shadow for a rounded,
     three-dimensional button feel. */
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(49, 111, 112, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(27, 54, 93, 0.2);
}

.md-ds-section__input:checked ~ .md-ds-section__box .md-ds-section__check {
  opacity: 1;
  transform: scale(1);
}

.md-ds-section__input:focus-visible ~ .md-ds-section__box {
  outline: 2px solid rgba(76, 134, 216, 0.6);
  outline-offset: 2px;
}

.md-ds-section__label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
}

/* The live preview frame holds a 1:1, non-interactive clone of the real home
   dashboard grid, injected by the show hook. */
.md-ds-preview__live {
  position: relative;
  /* Single source of truth for the preview's render scale. Applied as a CSS
     `zoom` on .md-ds-preview__page (below) so the cloned dashboard renders 20%
     smaller WITHOUT a transform's leftover layout gap, and read by JS
     (_onDisplayShow) so the drag-to-swap ghost can divide its cursor delta by the
     same factor and stay 1:1 under the pointer. */
  --md-ds-preview-zoom: 0.8;
  border-radius: 16px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: radial-gradient(1000px 460px at 6% 0%, rgba(49, 111, 112, 0.12), transparent 55%), radial-gradient(900px 460px at 96% 14%, rgba(76, 134, 216, 0.1), transparent 55%), linear-gradient(180deg, #fdfdfe, #f3f6fb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(27, 54, 93, 0.1);
  overflow: hidden;
  /* Extra top padding so the scaled grid sits lower in the frame, with breathing
     room above the first row of cards. */
  padding: 30px 0 16px;
  min-height: 188px;
}

/* Empty-state overlay — shown over the preview when no display elements are
   selected (Next is disabled until at least one is). Frosted scrim + a centered
   glass card, matching the modal's surfaces. */
.md-ds-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(248, 250, 252, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.md-ds-empty.is-visible {
  display: flex;
}

/* Placeholder box — a gray DOUBLE outline (border + offset outline), no fill or
   shadow, so it reads as an empty-state hint and is never mistaken for a
   card/button that will appear on the home page. */
.md-ds-empty__card {
  max-width: 440px;
  text-align: center;
  padding: 26px 30px 28px;
  border-radius: 16px;
  background: transparent;
  border: 2px solid rgba(100, 116, 139, 0.5);
  outline: 2px solid rgba(100, 116, 139, 0.5);
  outline-offset: 5px;
}

.md-ds-empty__icon {
  color: #4C86D8;
  margin-bottom: 14px;
}

.md-ds-empty__title {
  font-size: 19px;
  font-weight: 700;
  color: #1b2a4a;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.md-ds-empty__text {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(27, 54, 93, 0.66);
}

/* Landscape-orientation overlay reused on the display step (same visual as the
   board-detail one). Hidden by default; shown at ≤640px — rotating to landscape
   widens past 640px and auto-hides it. Lifted above the Shepherd modal content
   so it gates the step. */
.md-board-detail-portrait-overlay.md-ds-orientation {
  display: none;
  z-index: 100000;
}

@media (max-width: 640px) {
  .md-board-detail-portrait-overlay.md-ds-orientation {
    display: flex;
  }
}
/* create-board-new variant of the same landscape-rotate overlay. Same visual as
   the board-detail/display-style ones; hidden by default and shown at ≤768px
   (the build canvas is too cramped below that to create + customize a board).
   `--dismissed` (set by "Continue Anyway") beats the media query so mounted /
   non-rotatable setups can proceed. See create-board-new.hbs. */
.md-board-detail-portrait-overlay.nb-orientation-overlay {
  display: none;
  z-index: 100000;
}

@media (max-width: 768px) {
  .md-board-detail-portrait-overlay.nb-orientation-overlay {
    display: flex;
  }
}
.md-board-detail-portrait-overlay.nb-orientation-overlay.nb-orientation-overlay--dismissed {
  display: none !important;
}

/* Workspace-like wrapper so the cloned grid lays out at the same width as the
   real home page; the clone is the actual `.md-grid--dashboard`, so its
   responsive (viewport-driven) layout is identical to what the user sees. */
.md-ds-preview__page {
  /* Slightly narrower than before (1080 vs 1200, a touch more side inset) so the
     dashboard renders a bit smaller and less dominant — still well above the
     950px viewport breakpoint, so it keeps the real two-column desktop layout. */
  max-width: min(1080px, 100% - 48px);
  margin: 0 auto;
  /* Render the whole cloned workspace 20% smaller. `zoom` (not transform: scale)
     shrinks the LAYOUT box too, so there's no leftover empty space below the
     preview the way a transform would leave. Viewport media queries are unaffected,
     so the clone keeps its real two-column desktop layout — just scaled down. The
     drag math compensates for this factor (see --md-ds-preview-zoom). */
  zoom: var(--md-ds-preview-zoom, 1);
}

/* Welcome-hero banner clone — sits above the grid clone in the preview; inert and
   spaced from the cards below. Hidden/shown by syncState like the section cards. */
.md-ds-preview__hero {
  pointer-events: none;
  margin-bottom: 18px;
}

/* The clone is a pure visual preview — never interactive (looks live, isn't). */
.md-ds-preview__clone,
.md-ds-preview__clone * {
  pointer-events: none !important;
  cursor: default !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Drag-to-swap (flagged): a transparent OVERLAY hosts the pointer drag so the card
   itself keeps the clone's `pointer-events:none` and never enters :hover — i.e. no
   hover lift/glow, the only affordance is the overlay's grab cursor. JS adds these
   nodes only when the flag is on (presence IS the gate). The card is made a
   positioning context so the overlay can inset to it; the overlay re-enables
   pointer-events (compound selector 0,2,0 + !important beats the clone's inert
   `*` rule) and sets `touch-action:none` so touch drags aren't hijacked as scrolls. */
.md-ds-preview__clone .md-ds-draggable {
  position: relative;
  transition: opacity 140ms ease-out, outline-color 140ms ease-out;
}

.md-ds-preview__clone .md-ds-drag-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none !important;
}

/* The dragged card becomes a translucent "ghost" that follows the cursor (JS
   translates it). The lift shadow uses `filter: drop-shadow` rather than
   box-shadow because box-shadow is pinned inline (hover-suppression) and can't be
   overridden from CSS; filter is free and also softly clips to the card shape. */
.md-ds-preview__clone .md-ds-draggable.md-ds-dragging {
  opacity: 0.9;
  /* Lift shadow is an inline box-shadow set by JS on grab (composites cheaply on the
     will-change:transform layer) rather than `filter: drop-shadow`, which forced a
     filter render pass that re-rasterized the large gradient card as it moved. */
  transition: none !important;
  will-change: transform;
}

.md-ds-preview__clone .md-ds-draggable.md-ds-dragging .md-ds-drag-overlay {
  cursor: grabbing !important;
}

/* R2 — the user is hovering a drop the active layout forbids (Focused View: an action
   button dragged out onto a full-width row). Warning outline on the ghost + a not-allowed
   cursor on the captured overlay; the legend hint simultaneously swaps to say what IS
   allowed (reorder within the row). The denim dashed outline above = a valid target; this
   red dashed outline = blocked, so the two never read the same. */
.md-ds-preview__clone .md-ds-draggable.md-ds-dragging.md-ds-drag-blocked {
  outline: 2px dashed rgba(192, 57, 43, 0.85);
  outline-offset: 2px;
}

.md-ds-preview__clone .md-ds-draggable.md-ds-dragging.md-ds-drag-blocked .md-ds-drag-overlay {
  cursor: not-allowed !important;
}

.md-ds-preview__legend-hint--blocked {
  color: #C0392B;
  font-weight: 600;
}

/* Every card that will be SWAPPED OUT by the current drop lights up — not just the
   one under the cursor (e.g. both cards a Boards mirror displaces). Outline only (no
   background) so cards with their own wave/gradient backgrounds aren't clobbered. */
.md-ds-preview__clone .md-ds-draggable.md-ds-drop-target {
  outline: 3px dashed rgba(76, 134, 216, 0.92);
  outline-offset: 2px;
}

/* Drag affordance hint shown above the live preview when dragging is enabled. */
/* ── While the Getting Started series is active (body.md-ds-active): clear
   the page down to just the brand (logo + name) + the identity avatar dropdown
   in the header, and the dimmed page bg gradient behind the modal. Everything
   else is hidden; the Shepherd modal overlay supplies the dim. ── */
body.md-ds-active .md-workspace {
  visibility: hidden !important;
}

body.md-ds-active .header-search-wrap,
body.md-ds-active .app-navbar__quick-actions,
body.md-ds-active #identity .md-pillnav__upgrade-nav,
body.md-ds-active #identity .ll-header-settings-btn,
body.md-ds-active #identity .ll-bento-help-btn,
body.md-ds-active .app-navbar__beta-feedback-link {
  display: none !important;
}

/* Responsive — stack the three options into a centered COLUMN (Focused, then
   the OR on its OWN centered row, then Gentle) once there isn't room for the two
   420px cards + the OR to sit side-by-side. The display modal is 80vw (100vw at
   <=1024), so a full side-by-side row only fits on very wide viewports
   (>=$aac-breakpoint-xl → 80vw ≈ 1024px of content); below that the row wraps
   and the OR would otherwise be stranded inline beside a card. `align-items:
   center` centers both the cards and the OR row horizontally. */
@media (max-width: 1280px) {
  .md-ds-options {
    flex-direction: column;
    align-items: center;
  }
}
.md-hero--dashboard-user {
  padding-top: 0;
}

.md-hero--dashboard .md-hero__title .md-hero__title--from-left {
  display: inline-block;
  font-size: inherit;
  opacity: 0;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.md-hero--dashboard .md-hero__sub .md-hero__sub--from-right {
  display: inline-block;
  font-size: inherit;
  opacity: 0;
  animation: md-hero-from-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

/* ── Supervisor home header (Gentle view) ───────────────────────────────────────
   Centered stacked title ("Welcome back, …") + subheader (role · rooms · communicators).
   The title keeps its from-left motion and the subheader its from-right motion (rules
   above, since this stays inside .md-hero--dashboard). */
.md-slp-hero {
  text-align: center;
}

.md-slp-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.md-slp-hero__title {
  margin: 0;
}

/* Subheader in the brand slate blue (#5A6A85, ~5.2:1 on white — passes WCAG AA). Needs
   0,2,0 + !important to beat the base `.md-hero__sub { color: var(--md-muted) !important }`. */
.md-slp-hero .md-slp-hero__sub {
  margin: 4px 0 0 !important;
  color: #5A6A85 !important;
}

.md-slp-hero__dot {
  margin: 0 9px;
  color: rgba(90, 106, 133, 0.5);
  font-weight: 700;
}

/* ≤1024px hero layout: pull the .md-tour__trigger out of its absolute
   top-right pin (where it lives via .md-tour__trigger position:
   absolute / top:16 / right:16 at l. ~89271) and into the document
   flow above the centered hero title. The hero becomes a flex column
   only at this breakpoint; the tour trigger gets order:-1 so it
   visually leads, even though the template renders it AFTER the
   title and sub (no template change required). 2rem margin-top on
   the title creates the requested breathing room between the
   trigger and the page header text. Title and sub stretch to the
   full hero width by default (flex column items inherit
   align-items:stretch), so the existing text-align:center on the
   hero keeps the H1/sub horizontally centered exactly as they were
   above 1024px. The tour trigger uses align-self:center so the
   chip itself stays content-width and centered rather than
   stretching across the full hero. */
@media (max-width: 1024px) {
  .md-hero.md-hero--dashboard {
    display: flex !important;
    flex-direction: column !important;
  }
  .md-hero.md-hero--dashboard .md-tour__trigger {
    /* Same fixed top-left-below-navbar anchor as the base rule (~92966); the
       trigger no longer flows inside the hero column at this breakpoint. */
    position: fixed !important;
    top: calc(var(--topbar-height, 16px) + 7.5rem) !important;
    left: 24px !important;
    right: auto !important;
    align-self: auto !important;
    order: 0 !important;
    z-index: 1001 !important;
  }
  .md-hero.md-hero--dashboard .md-hero__title {
    margin-top: 2rem !important;
  }
}
.md-hero__gradient-text {
  font-style: normal;
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Reports subheader username — navy, not the blue-green gradient (which read
   as a link). Solid brand navy so it's clearly a label, not clickable. */
.md-hero__sub-user {
  font-style: normal;
  font-weight: normal;
  color: #1B365D;
}

/* Small centered divider between the report title and the Joined/Last-active
   subheader — a short brand-gradient rule for a gentle separation. */
.md-hero--org .md-hero__divider,
.md-hero--reports-dashboard .md-hero__divider {
  display: block;
  width: 84px;
  height: 2px;
  margin: 11px auto 12px;
  border-radius: 2px;
  /* Faded on both ends → solid brand color in the middle. */
  background: linear-gradient(90deg, transparent 0%, rgba(42, 157, 143, 0.55) 35%, rgba(76, 134, 216, 0.55) 65%, transparent 100%);
}

/* Reports subheader now carries the Joined / Last active meta (the title is
   the "Communication activity for…" line). Inline items at the sub's own
   size — each a calendar icon / verdigris status dot + label + bold value. */
/* Compound `.md-hero__sub.md-hero__sub--meta` (0,4,0) beats the base
   `.md-hero--dashboard .md-hero__sub .md-hero__sub--from-right` rule
   (inline-block, 0,3,0) so the row actually becomes a flex row — without
   this the items baseline-align (calendar 16px vs dot 9px) and look
   vertically offset. align-items:center lines both items up on their
   vertical centers. The animation/opacity from the base rule still applies
   (only `display` is overridden here). */
.md-hero--reports-dashboard .md-hero__sub.md-hero__sub--meta .md-hero__sub--from-right,
.md-hero--org .md-hero__sub.md-hero__sub--meta .md-hero__sub--from-right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.md-hero-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Uniform size for both items (label + value), independent of the hero
     sub's responsive sizing, so "Joined…" and "Last active…" always match. */
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--md-muted, rgba(27, 54, 93, 0.6));
}

/* Clear gap between the two meta items. */
.md-hero-meta__item + .md-hero-meta__item {
  margin-left: 30px;
}

.md-hero-meta__item strong {
  font-size: inherit;
  color: #1B365D;
  font-weight: 700;
}

.md-hero-meta__icon {
  flex-shrink: 0;
}

.md-hero-meta__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  /* Extra breathing room after the status dot (on top of the item's 7px
     gap) so it doesn't crowd "Last active". The 3px halo also eats into
     the visual gap, so compensate. */
  margin-right: 6px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

.la-hero-highlight {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1.155em; /* 5% larger than 1.1em */
}

/* "every student" in hero — teal to blue gradient */
.hero-gradient {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1.155em; /* match previous la-hero-highlight emphasis */
}

/* Same gradient as "every student" for "actually", "nothing you don't", "a voice", pricing hero "pricing" */
.la-wrapper .la-section-title em,
.la-wrapper .la-plan-title em,
.la-wrapper .la-cta-headline em,
.la-wrapper .la-hero-title em {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.la-hero-subtitle-badges-wrap {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.la-wrapper .la-hero-subtitle {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(1.25rem, 0.65rem + 1.38vw, 1.755rem);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin: 0 0 32px; /* 32px paragraph → feature pills (vertical rhythm) */
  max-width: 65ch; /* 55–70 chars per line for readability */
}

/* Small screens (≤640px): floor la-hero-subtitle at 15px so it stays legible
   when the clamp above would otherwise scale it too small. */
@media (max-width: 640px) {
  .la-wrapper .la-hero-subtitle {
    font-size: 15px;
  }
}
@keyframes la-badges-enter {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 0.95;
    transform: translateX(0);
  }
}
.la-hero-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, 2px + 0.42vw, 8px);
  margin-top: 0;
  margin-bottom: 0;
}

.la-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 4px + 0.56vw, 12px);
  padding: clamp(3px, 2px + 0.14vw, 5px) clamp(12px, 4px + 1.11vw, 20px) clamp(3px, 2px + 0.14vw, 5px) clamp(12px, 8px + 0.56vw, 16px);
  flex-shrink: 0; /* overridden in .la-hero-badges-section for equal fit */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px; /* more square than pill so badges don’t look like action buttons */
  opacity: 0.98;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  animation: la-badges-enter 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.la-hero-badge:nth-child(1) {
  animation-delay: 0.2s;
  opacity: 0;
}
.la-hero-badge:nth-child(2) {
  animation-delay: 0.4s;
  opacity: 0;
}
.la-hero-badge:nth-child(3) {
  animation-delay: 0.6s;
  opacity: 0;
}
.la-hero-badge:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgb(255, 255, 255);
  opacity: 1;
}

.la-hero-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(26px, 20px + 0.83vw, 32px);
  height: clamp(26px, 20px + 0.83vw, 32px);
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  font-size: clamp(13px, 10px + 0.35vw, 15px);
  line-height: 1;
  background: rgba(239.9745786517, 213.1811446629, 168.5254213483, 0.88);
  /* Cloud-based icon bg; 90% Lower Cost and Real Classrooms use same ($la-hero-badge-icon-bg) */
}
.la-hero-badge-icon--cloud, .la-hero-badge-icon--cost, .la-hero-badge-icon--school {
  background: rgb(245.2968421053, 243.8981052632, 238.3031578947) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: #374151;
}

/* 90% Lower Cost icon: copy cloud-based icon bg and icon color */
.la-hero-badge-icon--cost {
  background: rgb(245.2968421053, 243.8981052632, 238.3031578947) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: #374151;
}

.la-hero-badge-label {
  font-size: clamp(11.7px, 9px + 0.32vw, 14px); /* 10% smaller than previous */
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.01em;
}

.la-hero-actions {
  display: flex;
  gap: clamp(10px, 4px + 0.83vw, 16px);
  flex-wrap: wrap;
  margin-top: 0; /* 32px from pills section margin-bottom */
}

.la-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}
.la-btn.la-btn--primary {
  background: #3A6BC7;
  color: #FFFFFF;
  border-color: #3A6BC7;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(58, 107, 199, 0.45), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.la-btn.la-btn--primary:hover {
  filter: brightness(1.12);
  text-decoration: none;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(58, 107, 199, 0.55), 0 2px 5px rgba(0, 0, 0, 0.15);
}
.la-btn.la-btn--ghost {
  background: rgba(55, 65, 81, 0.06);
  color: #374151;
  border-color: rgba(55, 65, 81, 0.2);
}
.la-btn.la-btn--ghost:hover {
  background: rgba(55, 65, 81, 0.12);
  color: #374151;
  text-decoration: none;
}
.la-btn.la-btn--outline {
  background: #EDE9E0;
  color: #1b2a4a;
  border-color: #D8D2C5;
}
.la-btn.la-btn--outline:hover {
  background: #D8D2C5;
  text-decoration: none;
}
.la-btn.la-btn--badge {
  background: rgba(20, 127, 130, 0.08);
  color: #316F70;
  border: 2px solid rgba(20, 127, 130, 0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(20, 127, 130, 0.12);
  transition: all 0.25s ease;
}
.la-btn.la-btn--badge:hover {
  background: rgba(20, 127, 130, 0.16);
  color: #0a504f;
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: 0 4px 14px rgba(20, 127, 130, 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}
.la-btn.la-btn--full {
  width: 100%;
}

.la-btn:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

@keyframes la-hero-cta-attention {
  0% {
    filter: brightness(1.02);
    transform: translateY(0);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  25% {
    filter: brightness(0.96);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  50% {
    filter: brightness(0.96);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  100% {
    filter: brightness(1.02);
    transform: translateY(0);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
  }
}
@keyframes ctaGlow {
  0% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 rgba(242, 185, 90, 0);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(242, 185, 90, 0.35);
  }
  100% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 rgba(242, 185, 90, 0);
  }
}
.la-hero-card .la-btn {
  min-height: 56px;
  padding: 14px 26px;
  border-radius: 28px;
}

.la-hero-card .la-btn--primary {
  background: #F2B95A;
  color: #1B365D;
  border: 1px solid rgba(242, 185, 90, 0.5);
  filter: brightness(1.02);
  box-shadow: none;
}
.la-hero-card .la-btn--primary:hover {
  filter: brightness(0.96);
  box-shadow: none;
  color: #1B365D;
}

.la-hero-card .la-btn--ghost {
  font-weight: 600;
  background: rgba(70, 80, 95, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 14px 26px;
  border-radius: 28px;
  transform: translateY(-2px);
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.la-hero-card .la-btn--ghost:hover {
  background: rgba(78, 88, 102, 0.8);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: none;
}
.la-hero-card .la-btn--ghost {
  /* Keyboard focus contrast fix: the default white-on-translucent-dark loses
     contrast against the lighter focus ring + page background. Force a dark
     text + opaque light background so WCAG contrast holds during focus. */
}
.la-hero-card .la-btn--ghost:focus-visible, .la-hero-card .la-btn--ghost:focus {
  color: #374151;
  background: rgba(255, 255, 255, 0.96);
  border-color: #374151;
}

/* ──────────────────────────────────────────────────────────────────────────
   WCAG focus-contrast safety net for ghost buttons across landing/marketing
   pages. The default ghost-button styling uses translucent dark backgrounds
   with white-ish text — fine in resting/hover state, but the focus ring
   overlay reduces perceived contrast and the white text becomes hard to read.
   These overrides flip to dark text on opaque white background on focus.
   Same fix as the Watch Demo button (above), applied to its analogs:
     - .la-cta-section .la-btn--ghost   (Schedule a District Demo, etc.)
     - .la-wrapper--about, --contact, --pricing, --support
       wrappers' ghost buttons
   ────────────────────────────────────────────────────────────────────────── */
.la-cta-section .la-btn--ghost:focus-visible,
.la-cta-section .la-btn--ghost:focus,
.la-wrapper .la-cta-section .la-btn--ghost:focus-visible,
.la-wrapper .la-cta-section .la-btn--ghost:focus,
.la-wrapper--about .la-btn--ghost:focus-visible,
.la-wrapper--about .la-btn--ghost:focus,
.la-wrapper--contact .la-btn--ghost:focus-visible,
.la-wrapper--contact .la-btn--ghost:focus,
.la-wrapper--pricing .la-btn--ghost:focus-visible,
.la-wrapper--pricing .la-btn--ghost:focus,
.la-wrapper--support .la-btn--ghost:focus-visible,
.la-wrapper--support .la-btn--ghost:focus {
  color: #374151 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #374151 !important;
}

/* About page: override primary button to match Try Free (gold) */
.la-wrapper.la-wrapper--about .la-about-hero-actions .la-btn.la-btn--primary,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn.la-btn--primary {
  background: #F2B95A !important;
  color: #1B365D !important;
  border-color: rgba(242, 185, 90, 0.5) !important;
  box-shadow: 0 4px 14px rgba(242, 185, 90, 0.35), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.la-wrapper.la-wrapper--about .la-about-hero-actions .la-btn.la-btn--primary:hover,
.la-wrapper.la-wrapper--about .la-cta-section .la-btn.la-btn--primary:hover {
  filter: brightness(0.96);
  color: #1B365D !important;
}

/* Respect reduced motion: disable hero animations (title entrance, floating badges, CTA glow) */
@media (prefers-reduced-motion: reduce) {
  .la-hero-card .la-hero-title .la-hero-title--from-left,
  .la-hero-card .la-hero-title .la-hero-title--from-right,
  .la-floating-chip,
  .la-hero-card .la-btn--primary,
  #about-hero .la-about-hero-actions .la-btn--primary,
  .la-wrapper.la-wrapper--pricing .la-cta-buttons .la-btn--primary {
    animation: none;
  }
  .la-hero-card .la-hero-title .la-hero-title--from-right {
    opacity: 1;
  }
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-eyebrow-badge,
  .la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-hero-title-wrap,
  .la-wrapper.la-wrapper--about #about-hero .la-section-header .la-section-eyebrow-badge,
  .la-wrapper.la-wrapper--about #about-hero .la-section-header .la-hero-title-wrap,
  .la-wrapper.la-wrapper--about #features-hero .la-section-header .la-section-eyebrow-badge,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header .la-section-eyebrow-badge,
  .la-wrapper.la-wrapper--about #features-hero .la-section-header .la-hero-title-wrap,
  .la-wrapper.la-wrapper--features #features-hero .la-section-header .la-hero-title-wrap,
  .ub-boards-page__page-header .la-section-eyebrow-badge,
  .ub-boards-page__page-header .la-hero-title-wrap,
  .ub-boards-page__page-header .la-about-hero-separator,
  .ub-boards-page__page-header .la-pricing-hero-subtitle,
  .ub-boards-page__page-header .ub-letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .la-btn,
  .la-topbar-link,
  .la-topbar-alt-link,
  .la-mobile-drawer__close,
  .la-feature-card {
    transition: none !important;
    animation: none !important;
  }
}
.la-hero-mockup-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(216px, 144px + 11.25vw, 306px);
  margin-top: calc((clamp(24px, 8px + 3.33vw, 56px) - 4rem) / 2);
  overflow: visible; /* allow scaled mockup to show */
  padding: clamp(7px, 4px + 0.55vw, 12px) clamp(25px, 14px + 1.8vw, 43px) clamp(25px, 15px + 1.82vw, 43px);
  background: #374151;
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(15, 35, 70, 0.18), 0 12px 24px rgba(15, 35, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.la-hero-mockup-wrap::before {
  content: "";
  position: absolute;
  inset: -65px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.18), rgba(78, 205, 196, 0.1), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.la-hero-mockup-wrap::after {
  content: "";
  position: absolute;
  inset: -32px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.12), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

@keyframes floatPreview {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}
.la-floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  opacity: 0.98;
  z-index: 2;
  will-change: transform;
  animation: floatPreview 8s ease-in-out infinite;
  /* Offsets — kept within mockup-wrap bounds */
}
.la-floating-chip.la-floating-chip--tl {
  top: clamp(4px, 0px + 1.25vw, 20px);
  right: clamp(-4px, -12px + 0.83vw, 4px);
}
.la-floating-chip.la-floating-chip--br {
  bottom: calc(20% - 6rem); /* 3.5rem lower than before (was 20% - 2.5rem) */
  left: clamp(-4px, -12px + 0.83vw, 4px);
  animation-delay: 1.5s;
}

.la-about-glass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 32px auto 0;
  text-align: left;
}

.la-about-glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.la-about-glass-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.la-about-glass-card--cta {
  grid-column: 1/-1;
  text-align: center;
  background: rgba(58, 107, 199, 0.18);
  border-color: rgba(58, 107, 199, 0.28);
}
.la-about-glass-card--cta:hover {
  background: rgba(58, 107, 199, 0.24);
}

.la-about-glass-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Communicator, Supporter, Eval: modern stroke icons in a consistent rounded container */
.la-wrapper .la-about-glass-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(20, 127, 130, 0.1);
  color: #316F70;
}
.la-wrapper .la-about-glass-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.la-wrapper .la-about-glass-card__icon--communicator {
  background: rgba(44, 82, 130, 0.12);
  color: #2c5282;
}

.la-wrapper .la-about-glass-card__icon--supporter {
  background: rgba(26, 122, 110, 0.12);
  color: #1a7a6e;
}

.la-wrapper .la-about-glass-card__icon--eval {
  background: rgba(107, 114, 128, 0.12);
  color: #6B7280;
}

.la-wrapper .la-about-glass-card__title {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #F2B95A;
  margin: 0;
}

.la-wrapper .la-about-glass-card__text {
  font-size: 16px;
  color: #e8ecf4;
  line-height: 1.75;
  margin: 0;
}
.la-wrapper .la-about-glass-card__text strong {
  color: #ffffff;
}
.la-wrapper .la-about-glass-card__text .la-challenge-cta {
  color: #7eb8e0;
}

.la-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.la-chip-icon.la-chip-icon--teal {
  background: rgba(78, 205, 196, 0.14);
}
.la-chip-icon.la-chip-icon--coral {
  background: rgba(242, 185, 90, 0.12);
}

.la-chip-title {
  font-size: 16.1px;
  font-weight: 800;
  color: rgb(41.9141104294, 56.3435582822, 70.0858895706);
  white-space: nowrap;
}

.la-chip-sub {
  font-size: 16.1px;
  color: #1b2a4a;
  white-space: nowrap;
}

.la-mockup {
  position: relative;
  z-index: 1;
  width: clamp(252px, 126px + 20.4vw, 420px);
  max-width: 100%;
  margin-top: clamp(18px, 8px + 2vw, 36px);
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 14px 32px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
  transform: scale(0.98); /* 10% smaller than previous (was 1.09) */
  transform-origin: top center;
}

.la-mockup-bar {
  background: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.la-mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.la-mockup-dot.la-mockup-dot--r {
  background: #ff6b6b;
}
.la-mockup-dot.la-mockup-dot--y {
  background: #ffd43b;
}
.la-mockup-dot.la-mockup-dot--g {
  background: #51cf66;
}

.la-mockup-url {
  font-size: 14px;
  color: #868e96;
  font-weight: 500;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.la-mockup-screen {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafbfc;
}

.la-mockup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.la-aac-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 7px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  color: rgb(47.4504950495, 73.8118811881, 130.0495049505);
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.la-aac-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.la-aac-btn {
  /* c1 feel, c5 want = questions (red); c2 eat = objects (orange); c3 go, c6 play, c7 read = actions (teal); c4 hi = people (purple); c8 more = descriptors (blue) */
}
.la-aac-btn.la-aac-btn--c1 {
  background: #F5E8E8;
}
.la-aac-btn.la-aac-btn--c2 {
  background: #F5E8DC;
}
.la-aac-btn.la-aac-btn--c3 {
  background: rgb(211.5526315789, 233.4473684211, 232.0789473684);
}
.la-aac-btn.la-aac-btn--c4 {
  background: #EDE8F5;
}
.la-aac-btn.la-aac-btn--c5 {
  background: #F5E8E8;
}
.la-aac-btn.la-aac-btn--c6 {
  background: rgb(211.5526315789, 233.4473684211, 232.0789473684);
}
.la-aac-btn.la-aac-btn--c7 {
  background: rgb(211.5526315789, 233.4473684211, 232.0789473684);
}
.la-aac-btn.la-aac-btn--c8 {
  background: #E3EEF6;
}

.la-aac-icon {
  font-size: 25px;
}

.la-mockup-sentence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.la-mockup-sentence-text {
  font-size: 17px;
  font-weight: 500;
  color: rgb(47.4504950495, 73.8118811881, 130.0495049505);
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  flex: 1;
  text-align: right;
  margin-right: 10px;
}

/* Mockup Speak: same gradient as hero background */
.la-mockup-speak {
  font-size: 14px;
  font-weight: 600;
  background: #e6e8ec;
  color: #1B365D;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}
.la-mockup-speak:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@keyframes la-stat-enter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.la-stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 24px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  align-items: flex-start;
  padding: 24px 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 241, 237, 0.94) 42%, rgba(212, 216, 226, 0.65) 85%, rgba(20, 127, 130, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.la-stat-cell {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  flex: 1 1 0;
  min-width: 154px;
  max-width: 242px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: la-stat-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}
.la-stat-cell:nth-child(1) {
  animation-delay: 0.08s;
}
.la-stat-cell:nth-child(2) {
  animation-delay: 0.18s;
}
.la-stat-cell:nth-child(3) {
  animation-delay: 0.28s;
}
.la-stat-cell:nth-child(4) {
  animation-delay: 0.38s;
}
@media (prefers-reduced-motion: reduce) {
  .la-stat-cell {
    animation: none;
    opacity: 1;
  }
}
.la-stat-cell:nth-child(1) {
  border-radius: 20px 16px 18px 22px;
}
.la-stat-cell:nth-child(2) {
  border-radius: 16px 22px 20px 14px;
  max-width: 231px;
}
.la-stat-cell:nth-child(3) {
  border-radius: 22px 18px 14px 20px;
  max-width: 253px;
}
.la-stat-cell:nth-child(4) {
  border-radius: 14px 20px 22px 16px;
}

.la-stat-number {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.02em;
  font-kerning: normal;
  margin-bottom: 4px;
}

.la-stats-strip--in-hero {
  padding: 12px 0 20px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  gap: 10px 16px;
  justify-content: flex-start;
}

.la-stats-strip--below-mockup {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding-top: 0;
  padding-bottom: 0;
  justify-content: center;
}
.la-stats-strip--below-mockup .la-stat-cell {
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.la-stats-strip--below-mockup .la-stat-cell:nth-child(1), .la-stats-strip--below-mockup .la-stat-cell:nth-child(2), .la-stats-strip--below-mockup .la-stat-cell:nth-child(3), .la-stats-strip--below-mockup .la-stat-cell:nth-child(4) {
  border-radius: 12px;
  max-width: none;
}
.la-stats-strip--below-mockup .la-stat-number {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}
.la-stats-strip--below-mockup .la-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.la-stat-label {
  font-size: 21.252px;
  color: #3D4F46;
  line-height: 1.6;
}

.la-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

.la-scroll-hint__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 127, 130, 0.08);
  border: 1px solid rgba(20, 127, 130, 0.18);
  color: #147F82;
  font-size: 18px;
  animation: la-bounce 2s ease-in-out infinite;
}

.la-scroll-hint__label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(20, 127, 130, 0.65);
}

@keyframes la-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
/* Section anchoring: light gray band so flow is white (hero) → light gray (features) → parallax → white (CTA) */
#la-features {
  margin-top: 48px;
  padding-top: 32px;
  background: transparent;
  border: none;
}

/* Landing-alt: Why LingoLinq section — tighter spacing hierarchy (eyebrow 16px, headline 24px) */
/* Shared glass badge: landing + about page (About LingoLinq, What we offer, Trust & transparency, Open source, Ready to start, Attributions, etc.) */
#la-features .la-section-header .la-section-eyebrow-badge,
#about-hero .la-section-header .la-section-eyebrow-badge,
#la-plan .la-section-eyebrow-badge,
#la-slp-spotlight .la-section-eyebrow-badge,
#la-slp-spotlight-desktop .la-section-eyebrow-badge,
#la-devices-spotlight .la-section-eyebrow-badge,
#la-devices-spotlight-desktop .la-section-eyebrow-badge,
#la-testimonial .la-section-eyebrow-badge,
#la-a11y .la-section-eyebrow-badge,
.la-wrapper .la-cta-section .la-cta-eyebrow,
.la-wrapper.la-wrapper--about .la-section .la-section-header .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--about .la-plan-section .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--about .la-a11y-statement .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--about .la-cta-section .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--about .la-attr-section .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--pricing .la-section .la-section-header .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--contact .la-hero-card .la-section-eyebrow-badge,
.la-features-modal-body .la-section-header .la-section-eyebrow-badge,
.ub-boards-page__page-header .la-section-eyebrow-badge,
.beta-welcome-card .la-section-header .la-section-eyebrow-badge,
.beta-feedback-panel .la-section-eyebrow-badge {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(20, 127, 130, 0.08) 35%, rgba(20, 127, 130, 0.18) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(20, 127, 130, 0.15);
}

#la-features .la-section-header .la-section-eyebrow-badge,
#about-hero .la-section-header .la-section-eyebrow-badge,
.la-features-modal-body .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 16px;
}

/* Contact page: badge text color and brand colors to match about */
.la-wrapper.la-wrapper--contact .la-hero-card .la-section-eyebrow-badge {
  color: #0d5c5f;
}

.la-wrapper.la-wrapper--contact .la-hero-card .la-about-hero-brand {
  color: #1B365D;
}

.la-wrapper.la-wrapper--contact .la-hero-card .la-about-hero-brand--italic {
  color: #3A6BC7;
}

#la-features .la-section-header .la-section-title,
#about-hero .la-section-header .la-section-title,
.la-features-modal-body .la-section-header .la-section-title {
  font-weight: normal;
  margin-bottom: 24px;
}

#about-what-we-offer .la-section-header .la-section-title,
#faq-items .la-section-header .la-section-title,
#faq-questions .la-section-header .la-section-title {
  margin-bottom: 48px;
}

/* About page hero: same styling as landing-alt "Built for how schools" (#la-features) */
#about-hero,
#faq-hero {
  margin-top: calc(48px * 1.2);
  padding-top: 32px;
  background-color: transparent;
}

#about-hero .la-section-header {
  margin-bottom: 0;
}

/* Project-wide thin-line divider is now defined on the base
   .la-about-hero-separator rule — no per-page overrides needed. */
/* About page hero: match pricing page top (layout, badge, title, divider, subtitle) */
.la-wrapper.la-wrapper--about #about-hero .la-section-header {
  margin-bottom: 0;
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.la-wrapper.la-wrapper--about #about-hero .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.la-wrapper.la-wrapper--about #about-hero .la-section-header .la-hero-title-wrap {
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
  margin-left: auto;
  margin-right: auto;
}

.la-wrapper.la-wrapper--about #about-hero .la-section-header .la-hero-title {
  margin-bottom: 16px;
  font-weight: normal;
  text-align: center;
}

.la-wrapper.la-wrapper--about #about-hero .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

/* Terms page hero: same divider as about page */
.la-wrapper.la-wrapper--terms #terms-hero .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

/* Privacy page hero: same divider as about page */
.la-wrapper.la-wrapper--privacy #privacy-hero .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

/* Support page hero: same divider as about page */
.la-wrapper.la-wrapper--support #support-hero .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

/* Support page: content wrapper and card (same pattern as contact) */
.la-support-content-wrapper {
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.la-support-page-card {
  padding: 20px 24px;
}

.la-support-page-card__divider {
  height: 1px;
  margin: 0 24px;
  background: rgba(0, 0, 0, 0.12);
}

.la-support-page-card__section {
  padding-top: 16px;
}

.la-support-page-card__head {
  margin-bottom: 12px;
}

.la-support-page-card__title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1b2a4a;
  margin: 0 0 4px;
}

.la-support-page-card__sub {
  font-size: 16px;
  line-height: 1.5;
  color: #374151;
  margin: 0;
}

/* Support page: 25% larger font for resources lead, list items, and action buttons */
/* Support page resources section: small cards (same style as landing-alt features) */
.la-wrapper--support .la-support-resources__heading {
  font-size: 1.40625rem; /* 1.125rem × 1.25 */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #374151;
  margin: 0 0 20px;
  line-height: 1.4;
}

.la-wrapper--support .md-workspace--support {
  margin-top: 6rem;
}

.la-wrapper--support #support-hero {
  margin-top: 0;
  padding-top: 0;
}

.la-wrapper--support .la-support-list--cards {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.la-wrapper--support .la-support-list--cards li {
  margin: 0;
}

/* Small feature-style card (same look as #la-features .la-feature-card) */
.la-wrapper--support .la-support-resource-card {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 74, 0.06);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.la-wrapper--support .la-support-resource-card:hover {
  transform: translateY(-3px);
  background: #fcfdfd;
  border-color: rgba(63, 127, 123, 0.16);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}

.la-wrapper--support .la-support-list--cards .la-support-list__link,
.la-wrapper--support .la-support-list--cards .la-support-list__card-action {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 88px;
  padding: 20px 24px;
  margin: 0;
  text-align: left;
  font-size: 1.40625rem; /* 1.125rem × 1.25 */
  font-weight: 500;
  color: #1b2a4a;
  text-decoration: none;
  border: none;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.la-wrapper--support .la-support-list--cards .la-support-list__link:hover,
.la-wrapper--support .la-support-list--cards .la-support-list__card-action:hover {
  text-decoration: none;
  color: #1b2a4a;
}

/* Icons: same style as landing-alt #la-features .la-feature-icon */
.la-wrapper--support .la-support-list--cards .la-support-list__icon.la-feature-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  border: 1px solid rgba(27, 42, 74, 0.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.la-wrapper--support .la-support-resource-card:hover .la-support-list__icon.la-feature-icon {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(27, 42, 74, 0.08);
}

.la-wrapper--support .la-support-list--cards .la-feature-icon--teal {
  background: linear-gradient(180deg, rgba(63, 127, 123, 0.1), rgba(63, 127, 123, 0.05));
}

.la-wrapper--support .la-support-list--cards .la-feature-icon--navy {
  background: linear-gradient(180deg, rgba(27, 42, 74, 0.08), rgba(27, 42, 74, 0.04));
}

.la-wrapper--support .la-support-list--cards .la-feature-icon--coral {
  background: linear-gradient(180deg, rgba(240, 106, 91, 0.1), rgba(240, 106, 91, 0.05));
}

.la-wrapper--support .la-support-list--cards .la-support-list__text {
  flex: 1;
  line-height: 1.4;
}

/* Legacy lead class when used outside cards (e.g. modal) */
.la-wrapper--support .la-support-lead.md-support-lead {
  font-size: 1.5625rem; /* 1.25rem × 1.25 */
  margin: 0 0 12px;
  color: #374151;
}

.la-wrapper--support .la-support-page-card .la-support-list:not(.la-support-list--cards) .la-support-list__link,
.la-wrapper--support .la-support-page-card .la-support-list:not(.la-support-list--cards) .la-support-list__btn {
  font-size: 1.40625rem; /* 1.125rem × 1.25 */
}

.la-wrapper--support .la-support-page-card .la-support-list:not(.la-support-list--cards) .la-support-list__icon {
  font-size: 1.40625em; /* scale with list item */
}

.la-wrapper--support .la-support-form__actions {
  justify-content: center;
}

.la-wrapper--support .la-support-form__actions .la-btn--ghost {
  background: rgba(55, 65, 81, 0.08);
  color: #374151;
  border: 1px solid rgba(55, 65, 81, 0.2);
}

.la-wrapper--support .la-support-form__actions .la-btn--ghost:hover {
  background: rgba(55, 65, 81, 0.14);
  color: #1f2937;
}

.la-wrapper--support .la-support-form__actions .la-btn {
  font-size: 1.40625rem; /* 25% larger than 1.125rem */
  padding: 0.5rem 1.25rem;
  min-height: 44px;
}

/* Send Message button on support page */
.la-wrapper--support .la-support-form__actions .la-btn--primary {
  background: #46505F;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.la-wrapper--support .la-support-form__actions .la-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  color: #fff;
}
.la-wrapper--support .la-support-form__actions .la-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Beta feedback form (same wrapper as support) */
.la-wrapper--support .la-support-form.md-support-form {
  position: relative;
}

.la-wrapper--support .la-beta-feedback__screenshot-preview {
  margin-top: 0.75rem;
}

.la-wrapper--support .la-beta-feedback__screenshot-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid rgba(55, 65, 81, 0.15);
  display: block;
}

.la-wrapper--support .la-beta-feedback__clear-shot {
  margin-top: 0.5rem;
}

.la-wrapper--support .la-beta-feedback__dropzone {
  border: 2px dashed rgba(55, 65, 81, 0.28);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  min-height: 5.5rem;
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.la-wrapper--support .la-beta-feedback__dropzone:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .la-wrapper--support .la-beta-feedback__dropzone:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-wrapper--support .la-beta-feedback__dropzone--active {
  border-color: rgba(70, 80, 95, 0.55);
  background: rgba(70, 95, 120, 0.08);
  box-shadow: inset 0 0 0 1px rgba(70, 80, 95, 0.12);
}

.la-wrapper--support .la-beta-feedback__dropzone-hint {
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
  margin: 0 0 0.75rem 0;
}

.la-wrapper--support .la-beta-feedback__file-input {
  width: 100%;
  max-width: 100%;
}

/* Honeypot row: off-screen, not keyboard-focusable in normal tab order.
   Applies in both the standalone /beta-feedback page and the beta-feedback
   modal — the field type itself is a honeypot regardless of host. */
.la-wrapper--support .la-beta-feedback-hp,
.beta-feedback-modal-wrap .la-beta-feedback-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.la-wrapper--support .la-beta-feedback-hp__input,
.beta-feedback-modal-wrap .la-beta-feedback-hp__input {
  pointer-events: none;
}

/* Public Speak Mode demo */
#within_ember:has(#content .demo-board-page) {
  --topbar-height: 0px !important;
}

#within_ember:has(#content .demo-board-page) #content {
  padding-top: 0 !important;
}

.demo-board-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0.75rem;
  background: radial-gradient(circle at top left, rgba(44, 183, 176, 0.16), transparent 28rem), linear-gradient(135deg, #070b12 0%, #111722 50%, #0b111b 100%);
}

.demo-board-page--speak-only {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.demo-board-page__main {
  gap: 1rem;
  width: 100%;
  max-width: none;
  margin: 0;
}

.demo-board-page--speak-only .demo-board-page__main {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.demo-board-page__intro,
.demo-board-page__style-panel,
.demo-board-page__board {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, #0c1018 0%, #151a24 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

.demo-board-page__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.demo-board-page__intro h1 {
  margin: 0.1rem 0 0.35rem;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
}

.demo-board-page__intro p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.1rem;
}

.demo-board-page__eyebrow {
  margin: 0;
  color: #8fe4df !important;
  font-size: 0.95rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-board-page__intro-actions,
.demo-board-page__board-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.demo-board-page__sentence-row {
  position: sticky;
  top: 0.75rem;
  z-index: 20;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.demo-board-page .md-board-detail-sentence-bar {
  min-width: 0;
  overflow: hidden;
}

.demo-board-page__sentence-preview {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.demo-board-page .demo-board-page__sentence-preview.md-board-detail-sentence-bar__text--with-symbols {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
}

.demo-board-page .md-board-detail-sentence-bar__actions {
  flex: 0 0 auto;
}

.demo-board-page__quick-words {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: -0.35rem auto 0.45rem;
  padding: 0.7rem 0.8rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.demo-board-page__quick-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 58px;
  min-height: 46px;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #162033;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 5px 12px rgba(0, 0, 0, 0.18);
}

.demo-board-page__quick-word:hover,
.demo-board-page__quick-word:focus-visible {
  background: #fff;
  border-color: rgba(42, 157, 143, 0.55);
  color: #0f766e;
}

.demo-board-page__quick-word--punctuation {
  min-width: 48px;
  font-size: 1.15rem;
}

.demo-board-page__sentence-preview .md-board-detail-sentence-bar__chip {
  flex: 0 0 auto;
  align-self: center;
  height: 54px;
  min-width: 40px;
  min-height: 0;
  max-height: 54px;
  padding: 2px 6px;
  overflow: hidden;
}

.demo-board-page__sentence-preview .md-board-detail-sentence-bar__chip-img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.demo-board-page__sentence-preview .md-board-detail-sentence-bar__chip-label {
  max-width: 54px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-board-page__sentence-ellipsis {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 0.55rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-board-page__sentence-text-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-board-page__sentence-dialog-backdrop {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.58);
}

.demo-board-page__sentence-dialog {
  width: 96vw;
  max-width: 920px;
  max-height: 76vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: linear-gradient(180deg, #0c1018 0%, #151a24 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  color: #f8fafc;
}

.demo-board-page__sentence-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.demo-board-page__sentence-dialog-header h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.35rem;
}

.demo-board-page__sentence-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
}

.demo-board-page__sentence-dialog-body {
  max-height: 60vh;
  overflow: auto;
  padding: 1rem;
  color: #f8fafc;
  font-size: 1.4rem;
  line-height: 1.4;
}

.demo-board-page__sentence-dialog-body--symbols {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.demo-board-page__sentence-dialog-chip {
  flex: 0 0 auto;
}

.demo-board-page__exit-link,
.demo-board-page__settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(47, 63, 86, 0.92);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.demo-board-page__exit-link:hover,
.demo-board-page__exit-link:focus-visible,
.demo-board-page__settings-link:hover,
.demo-board-page__settings-link:focus-visible,
.demo-board-page__settings-link--active {
  color: #fff;
  background: rgba(58, 107, 199, 0.95);
  outline: none;
}

.demo-board-page__status {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20, 127, 130, 0.18);
  border-radius: 16px;
  background: rgba(20, 127, 130, 0.08);
  color: #0f4f52;
  font-size: 1rem;
  font-weight: 700;
}

.demo-board-page__board {
  width: 100%;
  padding: 0.5rem;
}

.demo-board-page--speak-only .demo-board-page__board {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.demo-board-page--speak-only .demo-board-page__board > .ember-view {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}

.demo-board-page__board-title {
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.demo-board-page--speak-only .demo-board-page__board-title {
  flex: 0 0 auto;
}

.demo-board-page__board-title h2,
.demo-board-page__style-panel h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.2rem;
}

.demo-board-page__style-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.demo-board-page__style-panel-header {
  grid-column: 1/-1;
  align-items: flex-start !important;
  justify-content: space-between;
}

.demo-board-page__style-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(47, 63, 86, 0.92);
  color: #f8fafc;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.demo-board-page__style-panel-close:hover,
.demo-board-page__style-panel-close:focus-visible {
  background: rgba(58, 107, 199, 0.95);
  color: #fff;
}

.demo-board-page__style-panel-header p:not(.demo-board-page__eyebrow) {
  max-width: 760px;
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
}

.demo-board-page__style-panel > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  border-radius: 18px;
  background: #1e2530;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.demo-board-page__style-panel h2 {
  width: 100%;
  font-size: 1rem;
}

.demo-board-page .md-board-detail-grid {
  width: 100% !important;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--board-columns, 10)/var(--board-rows, 6);
}

.demo-board-page .md-board-detail-grid.board {
  margin: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
}

.demo-board-page--speak-only .demo-board-page__board .md-board-detail-grid {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}

.demo-board-page--speak-only .demo-board-page__board .md-board-detail-grid.board {
  width: 100% !important;
}

@media (max-width: 760px) {
  .demo-board-page {
    padding: 0.5rem;
  }
  .demo-board-page__intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .demo-board-page__sentence-row {
    position: static;
  }
}
.la-wrapper.la-wrapper--about #features-hero .la-section-header .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--features #features-hero .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.la-wrapper.la-wrapper--about #features-hero .la-section-header .la-hero-title-wrap,
.la-wrapper.la-wrapper--features #features-hero .la-section-header .la-hero-title-wrap {
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
  margin-left: auto;
  margin-right: auto;
}

.la-wrapper.la-wrapper--about #features-hero .la-section-header .la-hero-title,
.la-wrapper.la-wrapper--features #features-hero .la-section-header .la-hero-title {
  margin-bottom: 16px;
  font-weight: normal;
  text-align: center;
}

.la-wrapper.la-wrapper--about #features-hero .la-section-header .la-about-hero-separator,
.la-wrapper.la-wrapper--features #features-hero .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
}

.la-wrapper.la-wrapper--about #features-hero .la-pricing-hero-subtitle,
.la-wrapper.la-wrapper--features #features-hero .la-pricing-hero-subtitle {
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.la-wrapper.la-wrapper--about #features-hero .la-section-header + .la-feature-grid,
.la-wrapper.la-wrapper--features #features-hero .la-section-header + .la-feature-grid {
  margin-top: -2rem;
}

#features-hero {
  margin-top: calc(48px * 1.2);
  padding-top: 32px;
  background-color: transparent;
}

#about-hero .la-section-header .la-section-subtitle {
  margin-bottom: 24px;
}

#about-hero .la-about-hero-brand,
#about-hero .la-about-hero-brand--italic,
#contact-hero .la-about-hero-brand,
#contact-hero .la-about-hero-brand--italic,
#privacy-hero .la-about-hero-brand,
#privacy-hero .la-about-hero-brand--italic,
#support-hero .la-about-hero-brand,
#support-hero .la-about-hero-brand--italic,
#terms-hero .la-about-hero-brand,
#terms-hero .la-about-hero-brand--italic,
#faq-hero .la-about-hero-brand,
#faq-hero .la-about-hero-brand--italic {
  color: #1b2a4a;
}

/* Privacy hero: same spacing, animation, badge, header, and divider as about hero */
#privacy-hero,
#terms-hero {
  margin-top: calc(48px * 1.2);
  padding-top: 32px;
  background-color: transparent;
}

.la-wrapper.la-wrapper--about #privacy-hero .la-section-header,
.la-wrapper.la-wrapper--about #terms-hero .la-section-header {
  margin-bottom: 0;
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.la-wrapper.la-wrapper--about #privacy-hero .la-section-header .la-section-eyebrow-badge,
.la-wrapper.la-wrapper--about #terms-hero .la-section-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.la-wrapper.la-wrapper--about #privacy-hero .la-section-header .la-hero-title-wrap,
.la-wrapper.la-wrapper--about #terms-hero .la-section-header .la-hero-title-wrap {
  opacity: 0;
  transform: translateX(-36px);
  animation: la-hero-title-from-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}

.la-wrapper.la-wrapper--about #privacy-hero .la-section-header .la-hero-title,
.la-wrapper.la-wrapper--about #terms-hero .la-section-header .la-hero-title {
  margin-bottom: 16px;
  font-weight: normal;
  text-align: center;
}

/* Terms page: bigger top margin on content section */
.la-wrapper--terms .la-terms-content-section {
  margin-top: 3rem;
}

/* Terms outline: Roman main sections, numbered subheads; bullets like privacy */
.la-wrapper--terms .la-privacy-content h3 {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  margin: 28px 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.la-wrapper--terms .la-privacy-content h3:first-of-type {
  margin-top: 0;
}
.la-wrapper--terms .la-privacy-content ul {
  list-style-type: disc;
  margin: 0 0 16px;
  padding-left: 1.35rem;
}
.la-wrapper--terms .la-privacy-content li {
  margin-bottom: 8px;
}
.la-wrapper--terms .la-privacy-content li:last-child {
  margin-bottom: 0;
}

/* About hero: same feature grid and cards as #la-features */
#about-hero .la-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

#about-hero .la-feature-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 74, 0.06);
  border-radius: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 40px 32px 32px;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

#about-hero .la-feature-card h3 {
  margin: 0 0 16px;
}

#about-hero .la-feature-card p {
  margin: 0;
}

#about-hero .la-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  border: 1px solid rgba(27, 42, 74, 0.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#about-hero .la-feature-icon--coral {
  background: linear-gradient(180deg, rgba(240, 106, 91, 0.1), rgba(240, 106, 91, 0.05));
}

#about-hero .la-feature-icon--teal {
  background: linear-gradient(180deg, rgba(63, 127, 123, 0.1), rgba(63, 127, 123, 0.05));
}

#about-hero .la-feature-icon--navy {
  background: linear-gradient(180deg, rgba(27, 42, 74, 0.08), rgba(27, 42, 74, 0.04));
}

#about-hero .la-feature-card--cta .la-about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}

#about-hero .la-feature-card--cta .la-btn {
  text-decoration: none;
}

/* About hero: badge-style buttons, centered; font 5% smaller again */
#about-hero .la-about-hero-actions .la-btn {
  min-height: 2.5rem;
  padding: 0.6rem 1.5rem;
  font-size: 14px; /* WCAG minimum; was 0.895em (5% smaller, badge size unchanged) */
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-transform: none;
}

#about-hero .la-about-hero-actions .la-btn--primary {
  background: linear-gradient(135deg, rgb(242.02, 113.8018181818, 100.98) 0%, #f99d6f 40%, #fef3c7 100%);
  color: #1B365D;
  border: 1px solid rgba(232, 122, 111, 0.5);
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
  animation: ctaGlow 6s ease-in-out infinite;
}
#about-hero .la-about-hero-actions .la-btn--primary:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #1B365D;
  text-decoration: none;
}

/* About hero: Contact Us ghost button — visible on light card (dark text + border), lift on hover */
#about-hero .la-about-hero-actions .la-btn--ghost {
  background: #dce1e9;
  color: #2c3e50;
  border: 2px solid rgb(194.9473684211, 203.5263157895, 217.2526315789);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#about-hero .la-about-hero-actions .la-btn--ghost:hover {
  background: rgb(194.9473684211, 203.5263157895, 217.2526315789);
  color: #2c3e50;
  border-color: rgb(182.4210526316, 192.7894736842, 209.3789473684);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@media (max-width: 1024px) {
  #about-hero .la-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 768px) {
  #about-hero .la-feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #about-hero .la-feature-card {
    padding: 32px 24px 28px;
    border-radius: 24px;
  }
  #about-hero .la-feature-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
    margin-bottom: 16px;
  }
}
.la-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 32px 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.la-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.la-section-eyebrow-badge {
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0d5c5f;
  background: rgba(20, 127, 130, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(20, 127, 130, 0.35);
  border-radius: 999px;
  padding: 6px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(20, 127, 130, 0.12);
  opacity: 1;
}

.la-wrapper .la-section-title {
  font-family: "Maitree", serif;
  font-size: 38px;
  font-weight: 800;
  color: #1B365D;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-kerning: normal;
}
.la-wrapper .la-section-title em {
  font-style: normal;
  color: #3A6BC7;
}

.la-section-subtitle {
  font-size: 21.06px;
  font-weight: 400;
  color: rgba(27, 42, 74, 0.9);
  max-width: 558.72px; /* 698.4px × 0.8 */
  margin: 0 auto;
  line-height: 1.8;
  letter-spacing: 0.005em;
}

#la-features .la-feature-grid,
#about-what-we-offer .la-feature-grid,
#faq-items .la-feature-grid,
#faq-questions .la-feature-grid,
#features-hero .la-feature-grid,
.la-features-modal-body .la-feature-grid {
  display: grid;
  /* auto-fit handles wrapping without explicit breakpoints: at ≥~930px → 3 cols,
     ≥~620px → 2 cols, below that → 1 col. No media queries needed. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: stretch;
}
#la-features .la-feature-card,
#about-what-we-offer .la-feature-card,
#faq-items .la-feature-card,
#faq-questions .la-feature-card,
#features-hero .la-feature-card,
.la-features-modal-body .la-feature-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 74, 0.06);
  border-radius: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 40px 32px 32px;
  text-align: center;
}
#la-features .la-feature-card h3,
#about-what-we-offer .la-feature-card h3,
#faq-items .la-feature-card h3,
#faq-questions .la-feature-card h3,
#features-hero .la-feature-card h3,
.la-features-modal-body .la-feature-card h3 {
  margin: 0 0 16px;
}
#la-features .la-feature-card p,
#about-what-we-offer .la-feature-card p,
#faq-items .la-feature-card p,
#faq-questions .la-feature-card p,
#features-hero .la-feature-card p,
.la-features-modal-body .la-feature-card p {
  margin: 0;
}
#la-features .la-feature-icon,
#about-what-we-offer .la-feature-icon,
#faq-items .la-feature-icon,
#faq-questions .la-feature-icon,
#features-hero .la-feature-icon,
.la-features-modal-body .la-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  border: 1px solid rgba(27, 42, 74, 0.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#la-features,
#about-what-we-offer,
#faq-items,
#faq-questions,
#features-hero,
.la-features-modal-body {
  /* Soften icon color surfaces to match system */
}
#la-features .la-feature-icon--coral,
#about-what-we-offer .la-feature-icon--coral,
#faq-items .la-feature-icon--coral,
#faq-questions .la-feature-icon--coral,
#features-hero .la-feature-icon--coral,
.la-features-modal-body .la-feature-icon--coral {
  background: linear-gradient(180deg, rgba(240, 106, 91, 0.1), rgba(240, 106, 91, 0.05));
}
#la-features .la-feature-icon--teal,
#about-what-we-offer .la-feature-icon--teal,
#faq-items .la-feature-icon--teal,
#faq-questions .la-feature-icon--teal,
#features-hero .la-feature-icon--teal,
.la-features-modal-body .la-feature-icon--teal {
  background: linear-gradient(180deg, rgba(63, 127, 123, 0.1), rgba(63, 127, 123, 0.05));
}
#la-features .la-feature-icon--navy,
#about-what-we-offer .la-feature-icon--navy,
#faq-items .la-feature-icon--navy,
#faq-questions .la-feature-icon--navy,
#features-hero .la-feature-icon--navy,
.la-features-modal-body .la-feature-icon--navy {
  background: linear-gradient(180deg, rgba(27, 42, 74, 0.08), rgba(27, 42, 74, 0.04));
}
#la-features,
#about-what-we-offer,
#faq-items,
#faq-questions,
#features-hero,
.la-features-modal-body {
  /* (Stagger removed — was a 24px offset on cards 4–6 tuned for the fixed
     3×2 grid. With auto-fit wrapping, cards 4–6 land in varying positions
     so the stagger created uneven vertical gaps when the grid wrapped.) */
}
#la-features .la-feature-card--faq,
#about-what-we-offer .la-feature-card--faq,
#faq-items .la-feature-card--faq,
#faq-questions .la-feature-card--faq,
#features-hero .la-feature-card--faq,
.la-features-modal-body .la-feature-card--faq {
  grid-column: 1/-1;
  width: 100%;
  max-width: min(64rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#la-features .la-feature-card--faq .la-feature-icon,
#about-what-we-offer .la-feature-card--faq .la-feature-icon,
#faq-items .la-feature-card--faq .la-feature-icon,
#faq-questions .la-feature-card--faq .la-feature-icon,
#features-hero .la-feature-card--faq .la-feature-icon,
.la-features-modal-body .la-feature-card--faq .la-feature-icon {
  margin-left: 0;
  margin-right: auto;
}
#la-features .la-feature-card--faq h3,
#about-what-we-offer .la-feature-card--faq h3,
#faq-items .la-feature-card--faq h3,
#faq-questions .la-feature-card--faq h3,
#features-hero .la-feature-card--faq h3,
.la-features-modal-body .la-feature-card--faq h3 {
  text-align: left;
}
#la-features .la-faq-card__text,
#about-what-we-offer .la-faq-card__text,
#faq-items .la-faq-card__text,
#faq-questions .la-faq-card__text,
#features-hero .la-faq-card__text,
.la-features-modal-body .la-faq-card__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(27, 42, 74, 0.88);
  text-align: left;
}
#la-features .la-feature-card--faq .la-faq-card__text + .la-faq-card__text,
#about-what-we-offer .la-feature-card--faq .la-faq-card__text + .la-faq-card__text,
#faq-items .la-feature-card--faq .la-faq-card__text + .la-faq-card__text,
#faq-questions .la-feature-card--faq .la-faq-card__text + .la-faq-card__text,
#features-hero .la-feature-card--faq .la-faq-card__text + .la-faq-card__text,
.la-features-modal-body .la-feature-card--faq .la-faq-card__text + .la-faq-card__text {
  margin-top: 1rem;
}
#la-features .la-faq-list,
#about-what-we-offer .la-faq-list,
#faq-items .la-faq-list,
#faq-questions .la-faq-list,
#features-hero .la-faq-list,
.la-features-modal-body .la-faq-list {
  margin: 0.5rem 0 0;
  padding-left: 1.35rem;
  text-align: left;
  line-height: 1.75;
  font-size: 17px;
  color: rgba(27, 42, 74, 0.88);
}
#la-features .la-faq-list li,
#about-what-we-offer .la-faq-list li,
#faq-items .la-faq-list li,
#faq-questions .la-faq-list li,
#features-hero .la-faq-list li,
.la-features-modal-body .la-faq-list li {
  margin-bottom: 0.5rem;
}
#la-features .la-faq-list li:last-child,
#about-what-we-offer .la-faq-list li:last-child,
#faq-items .la-faq-list li:last-child,
#faq-questions .la-faq-list li:last-child,
#features-hero .la-faq-list li:last-child,
.la-features-modal-body .la-faq-list li:last-child {
  margin-bottom: 0;
}
#la-features .la-faq-article__title,
#about-what-we-offer .la-faq-article__title,
#faq-items .la-faq-article__title,
#faq-questions .la-faq-article__title,
#features-hero .la-faq-article__title,
.la-features-modal-body .la-faq-article__title {
  margin: 0 0 0.25rem;
}
#la-features .la-faq-article-body,
#about-what-we-offer .la-faq-article-body,
#faq-items .la-faq-article-body,
#faq-questions .la-faq-article-body,
#features-hero .la-faq-article-body,
.la-features-modal-body .la-faq-article-body {
  margin-top: 0.75rem;
}
#la-features .la-faq-read-toggle,
#about-what-we-offer .la-faq-read-toggle,
#faq-items .la-faq-read-toggle,
#faq-questions .la-faq-read-toggle,
#features-hero .la-faq-read-toggle,
.la-features-modal-body .la-faq-read-toggle {
  margin: 0;
  padding: 0.5rem 0;
  min-height: 44px;
  align-self: flex-start;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #147F82;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
}
#la-features .la-faq-read-toggle:hover,
#about-what-we-offer .la-faq-read-toggle:hover,
#faq-items .la-faq-read-toggle:hover,
#faq-questions .la-faq-read-toggle:hover,
#features-hero .la-faq-read-toggle:hover,
.la-features-modal-body .la-faq-read-toggle:hover {
  color: #316F70;
}
#la-features .la-faq-read-toggle:focus-visible,
#about-what-we-offer .la-faq-read-toggle:focus-visible,
#faq-items .la-faq-read-toggle:focus-visible,
#faq-questions .la-faq-read-toggle:focus-visible,
#features-hero .la-faq-read-toggle:focus-visible,
.la-features-modal-body .la-faq-read-toggle:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  #la-features .la-faq-read-toggle:focus-visible,
  #about-what-we-offer .la-faq-read-toggle:focus-visible,
  #faq-items .la-faq-read-toggle:focus-visible,
  #faq-questions .la-faq-read-toggle:focus-visible,
  #features-hero .la-faq-read-toggle:focus-visible,
  .la-features-modal-body .la-faq-read-toggle:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
#la-features .la-faq-read-toggle--after,
#about-what-we-offer .la-faq-read-toggle--after,
#faq-items .la-faq-read-toggle--after,
#faq-questions .la-faq-read-toggle--after,
#features-hero .la-faq-read-toggle--after,
.la-features-modal-body .la-faq-read-toggle--after {
  margin-top: 1rem;
}
#la-features .la-faq-subhead,
#about-what-we-offer .la-faq-subhead,
#faq-items .la-faq-subhead,
#faq-questions .la-faq-subhead,
#features-hero .la-faq-subhead,
.la-features-modal-body .la-faq-subhead {
  margin: 1.75rem 0 0.65rem;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  line-height: 1.35;
  text-align: left;
}
#la-features .la-faq-article-body .la-faq-subhead:first-of-type,
#about-what-we-offer .la-faq-article-body .la-faq-subhead:first-of-type,
#faq-items .la-faq-article-body .la-faq-subhead:first-of-type,
#faq-questions .la-faq-article-body .la-faq-subhead:first-of-type,
#features-hero .la-faq-article-body .la-faq-subhead:first-of-type,
.la-features-modal-body .la-faq-article-body .la-faq-subhead:first-of-type {
  margin-top: 0.25rem;
}
#la-features .la-faq-type-block__title,
#about-what-we-offer .la-faq-type-block__title,
#faq-items .la-faq-type-block__title,
#faq-questions .la-faq-type-block__title,
#features-hero .la-faq-type-block__title,
.la-features-modal-body .la-faq-type-block__title {
  margin: 1.25rem 0 0.5rem;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #147F82;
  line-height: 1.4;
  text-align: left;
}
#la-features .la-faq-type-block,
#about-what-we-offer .la-faq-type-block,
#faq-items .la-faq-type-block,
#faq-questions .la-faq-type-block,
#features-hero .la-faq-type-block,
.la-features-modal-body .la-faq-type-block {
  margin-top: 1rem;
  padding: 20px 24px;
  background: rgba(63, 127, 123, 0.06);
  border: 1px solid rgba(63, 127, 123, 0.14);
  border-radius: 14px;
  text-align: left;
}
#la-features .la-faq-type-block--follow,
#about-what-we-offer .la-faq-type-block--follow,
#faq-items .la-faq-type-block--follow,
#faq-questions .la-faq-type-block--follow,
#features-hero .la-faq-type-block--follow,
.la-features-modal-body .la-faq-type-block--follow {
  margin-top: 20px;
}
#la-features .la-faq-type-block .la-faq-type-block__title:first-child,
#about-what-we-offer .la-faq-type-block .la-faq-type-block__title:first-child,
#faq-items .la-faq-type-block .la-faq-type-block__title:first-child,
#faq-questions .la-faq-type-block .la-faq-type-block__title:first-child,
#features-hero .la-faq-type-block .la-faq-type-block__title:first-child,
.la-features-modal-body .la-faq-type-block .la-faq-type-block__title:first-child {
  margin-top: 0;
}
#la-features .la-faq-inline-label,
#about-what-we-offer .la-faq-inline-label,
#faq-items .la-faq-inline-label,
#faq-questions .la-faq-inline-label,
#features-hero .la-faq-inline-label,
.la-features-modal-body .la-faq-inline-label {
  margin: 1rem 0 0.35rem;
  font-size: 16px;
  font-weight: 700;
  color: rgba(27, 42, 74, 0.92);
  text-align: left;
}
#la-features .la-faq-type-block .la-faq-inline-label:first-of-type,
#about-what-we-offer .la-faq-type-block .la-faq-inline-label:first-of-type,
#faq-items .la-faq-type-block .la-faq-inline-label:first-of-type,
#faq-questions .la-faq-type-block .la-faq-inline-label:first-of-type,
#features-hero .la-faq-type-block .la-faq-inline-label:first-of-type,
.la-features-modal-body .la-faq-type-block .la-faq-inline-label:first-of-type {
  margin-top: 0.5rem;
}
#la-features .la-faq-lead,
#about-what-we-offer .la-faq-lead,
#faq-items .la-faq-lead,
#faq-questions .la-faq-lead,
#features-hero .la-faq-lead,
.la-features-modal-body .la-faq-lead {
  font-weight: 700;
  color: rgba(27, 42, 74, 0.95);
}
#la-features .la-faq-list--tight,
#about-what-we-offer .la-faq-list--tight,
#faq-items .la-faq-list--tight,
#faq-questions .la-faq-list--tight,
#features-hero .la-faq-list--tight,
.la-features-modal-body .la-faq-list--tight {
  margin-top: 0.35rem;
}
#la-features .la-faq-list--tight li,
#about-what-we-offer .la-faq-list--tight li,
#faq-items .la-faq-list--tight li,
#faq-questions .la-faq-list--tight li,
#features-hero .la-faq-list--tight li,
.la-features-modal-body .la-faq-list--tight li {
  margin-bottom: 0.35rem;
}
#la-features .la-faq-callout,
#about-what-we-offer .la-faq-callout,
#faq-items .la-faq-callout,
#faq-questions .la-faq-callout,
#features-hero .la-faq-callout,
.la-features-modal-body .la-faq-callout {
  margin: 1.25rem 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(58, 107, 199, 0.08), rgba(20, 127, 130, 0.08));
  border-left: 4px solid #3A6BC7;
  border-radius: 0 10px 10px 0;
  text-align: left;
}
#la-features .la-faq-callout__title,
#about-what-we-offer .la-faq-callout__title,
#faq-items .la-faq-callout__title,
#faq-questions .la-faq-callout__title,
#features-hero .la-faq-callout__title,
.la-features-modal-body .la-faq-callout__title {
  margin: 0 0 0.5rem;
  font-size: 17px;
  font-weight: 700;
  color: #1b2a4a;
}
#la-features .la-faq-callout__text,
#about-what-we-offer .la-faq-callout__text,
#faq-items .la-faq-callout__text,
#faq-questions .la-faq-callout__text,
#features-hero .la-faq-callout__text,
.la-features-modal-body .la-faq-callout__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(27, 42, 74, 0.9);
}

#faq-items .la-feature-grid,
#faq-questions .la-feature-grid {
  gap: 28px;
}

/* FAQ articles: use more horizontal space on large screens (cards were capped at ~52rem) */
@media (min-width: 1100px) {
  #faq-items .la-feature-card--faq,
  #faq-questions .la-feature-card--faq {
    max-width: min(76rem, 100%);
  }
}
@media (min-width: 1400px) {
  #faq-items .la-feature-card--faq,
  #faq-questions .la-feature-card--faq {
    max-width: min(88rem, 100%);
  }
}
/* Tablet: tighter gap and disable stagger. Column count handled by auto-fit
   on the base rule — no need to hard-set grid-template-columns here. */
@media (max-width: 1024px) {
  #la-features .la-feature-grid,
  #about-what-we-offer .la-feature-grid,
  #faq-items .la-feature-grid,
  #faq-questions .la-feature-grid,
  .la-features-modal-body .la-feature-grid {
    gap: 24px;
  }
  #la-features .la-feature-card:nth-child(4),
  #la-features .la-feature-card:nth-child(5),
  #la-features .la-feature-card:nth-child(6),
  #about-what-we-offer .la-feature-card:nth-child(4),
  #about-what-we-offer .la-feature-card:nth-child(5),
  #about-what-we-offer .la-feature-card:nth-child(6),
  #faq-items .la-feature-card:nth-child(4),
  #faq-items .la-feature-card:nth-child(5),
  #faq-items .la-feature-card:nth-child(6),
  #faq-questions .la-feature-card:nth-child(4),
  #faq-questions .la-feature-card:nth-child(5),
  #faq-questions .la-feature-card:nth-child(6),
  .la-features-modal-body .la-feature-card:nth-child(4),
  .la-features-modal-body .la-feature-card:nth-child(5),
  .la-features-modal-body .la-feature-card:nth-child(6) {
    transform: none;
  }
}
/* Phone: tighter gap + smaller card padding. auto-fit collapses to 1 column
   naturally around ~620px based on the 280px minmax. */
@media (max-width: 820px) {
  #la-features .la-feature-grid,
  #about-what-we-offer .la-feature-grid,
  #faq-items .la-feature-grid,
  #faq-questions .la-feature-grid,
  .la-features-modal-body .la-feature-grid {
    gap: 20px;
  }
  #la-features .la-feature-card,
  #about-what-we-offer .la-feature-card,
  #faq-items .la-feature-card,
  #faq-questions .la-feature-card,
  .la-features-modal-body .la-feature-card {
    padding: 32px 24px 28px;
    border-radius: 24px;
  }
  #la-features .la-feature-icon,
  #about-what-we-offer .la-feature-icon,
  #faq-items .la-feature-icon,
  #faq-questions .la-feature-icon,
  .la-features-modal-body .la-feature-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
    margin-bottom: 16px;
  }
}
@keyframes la-feature-card-enter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes la-feature-card-enter-stagger {
  from {
    opacity: 0;
    transform: translateY(52px); /* slide distance only — no resting offset */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Landing-alt "Why LingoLinq" specifically — 3×2 grid (3 cards per row, 2 rows)
   on max screens, dropping to 2-col at 820px (iPad landscape) and 1-col at 480px.
   Overrides the shared auto-fit rule that other sections still use. */
#la-features .la-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
  #la-features .la-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  #la-features .la-feature-grid {
    grid-template-columns: 1fr;
  }
}
#la-features .la-feature-card {
  opacity: 0;
  transform: translateY(28px);
}

/* Cards 4-6 used to start 52px lower (for the zigzag effect). Now that the
   grid wraps with auto-fit, a card's position in a row isn't stable at every
   viewport width, so all cards share the same 28px initial offset. */
#la-features .la-feature-card:nth-child(4),
#la-features .la-feature-card:nth-child(5),
#la-features .la-feature-card:nth-child(6) {
  transform: translateY(28px);
}

#la-features.la-features-visible .la-feature-card {
  animation: la-feature-card-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#la-features.la-features-visible .la-feature-card:nth-child(4),
#la-features.la-features-visible .la-feature-card:nth-child(5),
#la-features.la-features-visible .la-feature-card:nth-child(6) {
  animation: la-feature-card-enter-stagger 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 1024px) {
  #la-features .la-feature-card:nth-child(4),
  #la-features .la-feature-card:nth-child(5),
  #la-features .la-feature-card:nth-child(6) {
    transform: translateY(28px);
  }
  #la-features.la-features-visible .la-feature-card:nth-child(4),
  #la-features.la-features-visible .la-feature-card:nth-child(5),
  #la-features.la-features-visible .la-feature-card:nth-child(6) {
    animation-name: la-feature-card-enter;
  }
}
#la-features.la-features-visible .la-feature-card:nth-child(1) {
  animation-delay: 0.05s;
}

#la-features.la-features-visible .la-feature-card:nth-child(2) {
  animation-delay: 0.12s;
}

#la-features.la-features-visible .la-feature-card:nth-child(3) {
  animation-delay: 0.19s;
}

#la-features.la-features-visible .la-feature-card:nth-child(4) {
  animation-delay: 0.26s;
}

#la-features.la-features-visible .la-feature-card:nth-child(5) {
  animation-delay: 0.33s;
}

#la-features.la-features-visible .la-feature-card:nth-child(6) {
  animation-delay: 0.4s;
}

.la-feature-card--expanded {
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.la-feature-catchphrase {
  font-size: 16.1px;
  color: rgba(27, 54, 93, 0.6);
  line-height: 1.5;
  margin: 0 0 10px;
}

.la-feature-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
  margin-top: 0;
}
.la-feature-detail.la-feature-detail--visible {
  max-height: 600px;
  opacity: 1;
  margin-top: 10px;
}
.la-feature-detail p {
  font-size: 17.5px;
  color: rgba(27, 54, 93, 0.7);
  line-height: 1.55;
  margin: 0 0 8px;
}
.la-feature-detail p:last-child {
  margin-bottom: 0;
}

.la-feature-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.5);
  font-weight: 600;
  padding: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
  margin-top: auto;
}
.la-feature-toggle:hover {
  color: #1B365D;
}
.la-feature-toggle:focus-visible {
  outline: 2px solid #4ECDC4 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15) !important;
}
@media (forced-colors: active) {
  .la-feature-toggle:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.la-feature-toggle:focus-visible {
  border-radius: 4px;
}

.la-feature-toggle-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.la-a11y-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 40px 48px;
  position: relative;
}

.la-wrapper.la-wrapper--about .la-a11y-statement {
  max-width: 37.5%; /* 50% of previous 75% */
  margin-left: auto;
  margin-right: auto;
}

.la-a11y-display {
  position: relative;
  max-width: 1008px;
  margin: 0 0 16px;
  padding: 0;
}

.la-a11y-display-text {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #1B365D;
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 0;
}
.la-a11y-display-text strong {
  color: #1B365D;
  font-weight: 700;
}

/* Trust badges: WCAG + typography + neurodivergent (scannable with checkmarks) */
.la-a11y-trust-badges {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px; /* 32px between badges for breathability */
}

.la-a11y-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.la-a11y-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  color: #147F82;
}
.la-a11y-trust-check::before {
  content: "✔"; /* check mark */
  font-size: 1.1em;
  font-weight: 800;
}

.la-a11y-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  position: relative;
}
.la-a11y-attribution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: rgba(78, 205, 196, 0.3);
  border-radius: 1px;
}

.la-a11y-badge {
  font-size: 14px;
  font-weight: 800;
  color: #147F82;
}

.la-a11y-accommodations {
  font-size: 15px;
  color: #1b2a4a;
}
.la-a11y-accommodations .la-a11y-statement-link {
  color: #147F82;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.la-a11y-accommodations .la-a11y-statement-link:hover {
  color: rgb(14.56, 92.456, 94.64);
}

.la-a11y-statement-link {
  color: #147F82;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.la-a11y-statement-link:hover {
  color: rgb(14.56, 92.456, 94.64);
}

.la-attr-section {
  padding: 24px 0 16px;
}

.la-attr-header {
  text-align: center;
  margin-bottom: 20px;
}
.la-attr-header .la-section-eyebrow-badge {
  margin-bottom: 8px;
}

.la-attr-meta {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  margin: 8px 0 0;
}

.la-attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .la-attr-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .la-attr-grid {
    grid-template-columns: 1fr;
  }
}

.la-attr-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 16px;
}

.la-attr-card__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.la-attr-card__body {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.la-attr-card__body a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.la-attr-card__body a:hover {
  color: #147F82;
}

.la-parallax-zone > .la-plan-section,
.la-parallax-zone > .la-testimonial-section,
.la-parallax-zone > .la-a11y-statement,
.la-parallax-zone > .la-slp-spotlight,
.la-parallax-zone > .la-devices-spotlight {
  background: transparent;
}

/* Outer: light gray frame only so inner content area shows parallax image */
.la-parallax-zone .la-parallax-card-outer {
  margin-top: 5rem;
  margin-bottom: 5rem;
  background: transparent;
  border: 20px solid #F7F9FA;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.la-parallax-zone .la-parallax-card-inner {
  background: #F7F9FA;
}

/* Mirror the parallax-zone card-frame styling onto the desktop spotlight
   copies that live OUTSIDE the parallax zone, so they share the identical
   gray frame, rounding, shadow, and inner background. */
.la-spotlight-desktop .la-parallax-card-outer {
  margin-top: 5rem;
  margin-bottom: 5rem;
  background: transparent;
  border: 20px solid #F7F9FA;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.la-spotlight-desktop .la-parallax-card-inner {
  background: #F7F9FA;
}

/* ── Spotlight Cards: SLP + Devices ───────────────────────────────────────
   Two card variants (built-for-schools and available-on-all-devices) share
   identical layout/styling and only swap their image. Each card is rendered
   TWICE in the template:
     • Inside the parallax zone (mobile placement, IDs without -desktop)
     • Outside the parallax zone (desktop placement, IDs with -desktop)
   The .la-spotlight-desktop class flips the visibility logic for the desktop
   copies, so on each viewport exactly one of the two copies is shown. */
.la-slp-spotlight,
.la-devices-spotlight {
  display: none;
}

/* Desktop versions: hidden by default at all widths via the rule above; this
   block re-shows them only above 1024px and ensures the mobile mirrors stay
   hidden in that range. */
@media (min-width: 1025px) {
  #la-slp-spotlight-desktop,
  #la-devices-spotlight-desktop {
    display: block;
  }
}
@media (max-width: 1024px) {
  .la-spotlight-desktop {
    display: none !important;
  }
}
/* ── Spotlight layout (applies at ALL widths so both mobile and desktop
   copies render correctly) ──────────────────────────────────────────────── */
.la-slp-spotlight,
.la-devices-spotlight {
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}

.la-slp-spotlight__inner,
.la-devices-spotlight__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.la-slp-spotlight__header,
.la-devices-spotlight__header {
  margin-bottom: 4px;
}

.la-slp-spotlight__image,
.la-devices-spotlight__image {
  width: 100%;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

.la-slp-spotlight__image {
  background-image: url(/images/landing-instructor.png);
}

.la-devices-spotlight__image {
  background-image: url(/images/landing-devices.png);
}

/* Desktop (>1024px): swap the SLP image to landing-classroom.png and let
   both spotlight images render at full height using their natural aspect
   ratios (image dimensions: classroom 850×638, devices 1000×667). */
@media (min-width: 1025px) {
  .la-slp-spotlight__image {
    background-image: url(/images/landing-instructor.png);
    aspect-ratio: 1535/1024;
    min-height: 0;
    border-radius: 0;
    /* "Built for schools" image: 62.5% width (25% bigger than prior 50%), centered.
       margin-top: 16px adds breathing room under the paragraph (parent gap 48px
       + 16px = ~64px visible). */
    width: 62.5%;
    margin: 16px auto 0;
  }
  .la-devices-spotlight__image {
    /* "Devices" image: 78.125% width (25% bigger than SLP's 62.5%).
       aspect-ratio matches the natural image dimensions (1000/667) so that
       `background-size: contain` fills the div edge-to-edge — otherwise the
       image (1.50 ratio) fits inside an 850/638 frame (1.33) with transparent
       strips top/bottom, and the 16px border-radius clips invisible space
       instead of the image. With matching aspect-ratio, the radius is visible
       on the image's own corners.
       margin-top: -48px cancels the parent flex gap ($aac-spacing-48), so the
       image sits flush against the paragraph above. */
    aspect-ratio: 1000/667;
    min-height: 0;
    width: 78.125%;
    margin: -48px auto 0;
    background-size: contain;
    border-radius: 16px;
  }
  /* Body paragraphs in SLP + Devices spotlights: centered on the page (text-align
     + max-width w/ auto margins), pulled up hard against the subheader.
     Font size/family intentionally NOT overridden — they inherit `.la-plan-subtitle`
     so all three subtitles (plan + slp + devices) scale identically at every
     width.
     Doubled class selector (__body + la-plan-subtitle) bumps specificity above
     `.la-plan-subtitle` so the layout overrides win without disturbing typography. */
  .la-slp-spotlight__body.la-plan-subtitle,
  .la-devices-spotlight__body.la-plan-subtitle {
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -36px;
  }
  /* "Built for schools" SLP card: remove top margin and strip the gray frame
     so the card blends into the page. Scoped to the desktop copy. */
  .la-slp-spotlight .la-slp-spotlight__card.la-parallax-card-outer {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .la-slp-spotlight .la-slp-spotlight__card .la-parallax-card-inner {
    background: transparent;
  }
  /* "Available on all devices" card: transparent outer bg so it blends into the page.
     margin-bottom: 0 pulls the "Ready to Start" CTA section up against this card
     (default .la-spotlight-desktop .la-parallax-card-outer rule applies margin-bottom: 5rem). */
  .la-devices-spotlight .la-devices-spotlight__card.la-parallax-card-outer {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
  }
  .la-devices-spotlight .la-devices-spotlight__card .la-parallax-card-inner {
    background: transparent;
  }
  /* "Available on all devices" section: zero top/bottom padding (base rule uses
     $aac-spacing-48 vertical); horizontal padding unchanged. */
  .la-devices-spotlight {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 1024px) {
  .la-slp-spotlight,
  .la-devices-spotlight {
    display: block;
  }
  .la-parallax-zone {
    background-image: none !important;
  }
  /* Body inherits type/color from `.la-plan-subtitle` so all three subtitles
     scale identically across widths. Override only layout: centered + narrower
     max-width + pulled close to the subheader. Doubled-class selector beats
     `.la-plan-subtitle` (defined later), same approach as the desktop rule. */
  .la-slp-spotlight__body.la-plan-subtitle,
  .la-devices-spotlight__body.la-plan-subtitle {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -36px;
  }
  /* "Built for schools" image on mobile/tablet: show the full
     image at every width by using `contain` + the natural aspect
     ratio of the asset (850×638). The base rule uses
     `background-size: cover` which crops the edges on narrow
     viewports — switching to `contain` and pinning the container's
     aspect-ratio to match the image lets the full classroom photo
     render without clipping. */
  .la-slp-spotlight__image {
    background-image: url(/images/landing-classroom.png);
    aspect-ratio: 850/638;
    min-height: 0;
    background-size: contain;
  }
  /* Zero top/bottom padding on every direct section inside the parallax zone
     on mobile/tablet (base rule is $aac-spacing-48); horizontal padding stays.
     Covers .la-slp-spotlight, .la-plan-section, .la-devices-spotlight,
     .la-testimonial-section, .la-a11y-statement, and any future siblings. */
  .la-parallax-zone > section {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Add breathing room below the "Every LingoLinq plan..." paragraph so the
     checklist below doesn't sit directly under it. */
  .la-plan-text > .la-plan-subtitle {
    margin-bottom: 2rem;
  }
  /* Devices image on mobile/tablet: show the full image at every
     width by using `contain` + the natural aspect ratio of the
     asset (1000×667). The base rule uses `background-size: cover`
     which crops the left/right edges on narrow viewports — switching
     to `contain` and pinning the container's aspect-ratio to match
     the image lets the full mockup render without clipping. */
  .la-devices-spotlight__image {
    aspect-ratio: 1000/667;
    min-height: 0;
    background-size: contain;
  }
}
.la-plan-section {
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}

.la-plan-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.la-plan-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.la-plan-text .la-section-eyebrow-badge {
  margin-bottom: 16px;
}
.la-plan-text .la-plan-title,
.la-plan-text .la-plan-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.la-wrapper .la-plan-title {
  font-family: "Maitree", serif;
  font-size: 32px;
  font-weight: normal;
  color: #1B365D;
  max-width: 90%;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-kerning: normal;
}
.la-wrapper .la-plan-title em {
  font-style: normal;
  color: #3A6BC7;
}

.la-plan-text .la-plan-title {
  margin: 0 auto 16px;
}

/* Landing-alt: "Built for how schools..." same size as "Everything you need..." */
#la-features .la-section-header .la-section-title {
  font-size: 32px;
}

.la-wrapper.la-wrapper--about .la-plan-section .la-plan-title {
  margin-bottom: 24px;
}

.la-plan-subtitle {
  font-size: 16.5px;
  font-weight: 400;
  color: #5A6E64;
  max-width: 90%;
  line-height: 1.8;
  letter-spacing: 0.005em;
  margin: 0;
}

.la-plan-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

@keyframes la-plan-item-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#la-plan .la-plan-item {
  opacity: 0;
  transform: translateY(20px);
}

#la-plan.la-plan-visible .la-plan-item {
  animation: la-plan-item-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(1) {
  animation-delay: 0.05s;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(2) {
  animation-delay: 0.12s;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(3) {
  animation-delay: 0.19s;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(4) {
  animation-delay: 0.26s;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(5) {
  animation-delay: 0.33s;
}

#la-plan.la-plan-visible .la-plan-item:nth-child(6) {
  animation-delay: 0.4s;
}

.la-plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #1B365D;
  line-height: 1.5;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 16px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.la-plan-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.la-plan-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(242, 185, 90, 0.15);
  color: #147F82;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.la-wrapper.la-wrapper--about .la-plan-section .la-plan-grid-container {
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.la-wrapper.la-wrapper--about .la-plan-section .la-plan-item {
  color: #1b2a4a;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.la-wrapper.la-wrapper--about .la-plan-section .la-plan-check {
  background: rgba(20, 127, 130, 0.2);
  color: #316F70;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.la-testimonial-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 40px 48px;
  position: relative;
}

.la-testimonial-display {
  position: relative;
  max-width: 700px; /* ideal quote width 640–720px for readability */
  margin: 0 auto 16px;
  padding: 0;
  border: none;
}

.la-testimonial-mark {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #4ECDC4;
  opacity: 0.35;
  display: inline;
  user-select: none;
}

.la-testimonial-display-text {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #1B365D;
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 0;
  display: inline;
}

.la-testimonial-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  position: relative;
}
.la-testimonial-attribution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: rgba(78, 205, 196, 0.3);
  border-radius: 1px;
}

.la-testimonial-author-name {
  font-size: 15px;
  font-weight: 800;
  color: #1b2a4a;
}

.la-testimonial-author-role {
  font-size: 14px;
  color: #147F82;
  font-weight: 500;
}

.la-cta-section {
  padding: 64px 40px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

@keyframes la-cta-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* Ready to start: modern CTA container with double outline (landing-alt), slightly lighter gradient */
.la-wrapper #la-cta.la-cta-section {
  max-width: 900px;
  width: 92%;
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 64px 56px;
  border-radius: 24px;
  background: linear-gradient(125deg, #f2faf9 0%, #fcfbf5 20%, #eef8f7 42%, #fefdf8 62%, #f2faf9 82%, #fcfbf5 100%);
  background-size: 200% 200%;
  animation: la-cta-gradient-shift 12s ease-in-out infinite;
  border: 2px solid rgba(63, 127, 123, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85) inset, 0 0 0 3px rgba(63, 127, 123, 0.12), 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.la-wrapper #la-cta.la-cta-section:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 0 3px rgba(63, 127, 123, 0.2), 0 12px 28px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
}
.la-wrapper #la-cta.la-cta-section .la-cta-headline {
  margin-bottom: 12px;
}
.la-wrapper #la-cta.la-cta-section .la-cta-description {
  margin-bottom: 28px;
}
.la-wrapper #la-cta.la-cta-section .la-cta-buttons {
  gap: 16px;
}
.la-wrapper #la-cta.la-cta-section .la-cta-buttons .la-btn {
  min-height: 56px;
  padding: 12px 30px;
}
.la-wrapper #la-cta.la-cta-section .la-cta-buttons .la-btn--lg {
  min-height: 56px;
  padding: 14px 32px;
}

.la-wrapper .la-cta-section .la-cta-headline {
  color: #1B365D;
  margin-bottom: 24px;
}
.la-wrapper .la-cta-section .la-cta-headline em {
  font-style: normal;
  color: #3A6BC7; /* same as "nothing you don't" (.la-plan-title em) */
}

.la-wrapper .la-cta-section .la-cta-description {
  color: rgba(27, 42, 74, 0.9);
}

/* Glass badge (matches Why LingoLinq / What educators say / Accessibility First) — see #la-features block */
.la-wrapper .la-cta-section .la-cta-eyebrow {
  color: #0d5c5f;
  padding: 6px 20px;
  font-weight: 700;
}

/* Schedule a District Demo: same bg, shadow, etc. as hero "Watch Demo" */
.la-wrapper .la-cta-section .la-btn--ghost {
  font-weight: 600;
  background: rgba(70, 80, 95, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 14px 26px;
  border-radius: 28px;
  transform: translateY(-2px);
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.la-wrapper .la-cta-section .la-btn--ghost:hover {
  background: rgba(78, 88, 102, 0.8);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: none;
}

.la-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.la-cta-eyebrow {
  display: inline-block;
  font-size: 19.32px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(242, 185, 90, 0.9);
  background: transparent;
  border: 1px solid rgba(242, 185, 90, 0.35);
  border-radius: 999px;
  padding: 5px 16px;
  margin-bottom: 24px;
}

.la-wrapper .la-cta-headline {
  font-family: "Maitree", serif;
  font-size: 38px;
  font-weight: normal;
  color: white;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.la-cta-section .la-cta-description {
  font-size: 17.25px;
  font-weight: 400;
  color: rgba(27, 42, 74, 0.9);
  line-height: 1.8;
  letter-spacing: 0.005em;
  margin: 0 0 32px;
}

/* Start Free Today: same bg, shadow, etc. as hero "Try LingoLinq Free" */
.la-cta-section .la-btn--primary {
  background: #F2B95A;
  color: #1B365D;
  border: 1px solid rgba(242, 185, 90, 0.5);
  filter: brightness(1.02);
  box-shadow: none;
}
.la-cta-section .la-btn--primary:hover {
  filter: brightness(0.96);
  box-shadow: none;
  color: #1B365D;
}

.la-cta-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* Pricing page CTA: match landing-alt hero buttons (Try LingoLinq / Watch Demo) */
.la-wrapper.la-wrapper--pricing .la-cta-buttons .la-btn--primary {
  background: linear-gradient(135deg, rgb(242.02, 113.8018181818, 100.98) 0%, #f99d6f 40%, #fef3c7 100%);
  color: #1B365D;
  border: 1px solid rgba(232, 122, 111, 0.5);
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
  animation: ctaGlow 6s ease-in-out infinite;
}
.la-wrapper.la-wrapper--pricing .la-cta-buttons .la-btn--primary:hover {
  filter: brightness(0.96);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #1B365D;
}

.la-wrapper.la-wrapper--pricing .la-cta-buttons .la-btn--ghost,
.la-wrapper.la-wrapper--pricing .la-pricing-cloud-extras-cta .la-btn--ghost {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1B365D;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.012), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.la-wrapper.la-wrapper--pricing .la-cta-buttons .la-btn--ghost:hover,
.la-wrapper.la-wrapper--pricing .la-pricing-cloud-extras-cta .la-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.32);
  color: #1B365D;
  border-color: rgba(0, 0, 0, 0.18);
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Ready to start section: animate entire block when section scrolls into view */
@keyframes la-cta-section-enter {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#la-cta .la-cta-inner {
  opacity: 0;
  animation: la-cta-section-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

#la-cta.la-cta-visible .la-cta-inner {
  animation-play-state: running;
}

.la-btn--lg {
  padding: 14px 32px;
  font-size: 15px;
}

.la-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.la-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}

.la-a11y-bar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #E3EEF6;
  border: 1px solid #6B95B8;
  border-radius: 14px;
  padding: 16px 20px;
}
.la-a11y-bar p {
  font-size: 14px;
  color: #1b2a4a;
  margin: 0;
  line-height: 1.7;
}
.la-a11y-bar a {
  color: #3A6A8A;
  font-weight: 700;
}
.la-a11y-bar a:hover {
  color: #1b2a4a;
}
.la-sidebar .la-a11y-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, rgba(27, 54, 93, 0.04) 0%, white 60%);
  border-color: rgba(27, 54, 93, 0.3);
}
.la-sidebar .la-a11y-bar a {
  color: #1b2a4a;
}
.la-sidebar .la-a11y-bar a:hover {
  color: rgb(13.3663366337, 20.7920792079, 36.6336633663);
}
.la-sidebar .la-a11y-bar {
  font-size: 15.26px;
}
.la-sidebar .la-a11y-bar .la-a11y-icon {
  grid-row: 1;
  grid-column: 1;
  padding-right: 12px;
}
.la-sidebar .la-a11y-bar .la-a11y-heading {
  grid-row: 1;
  grid-column: 2;
  font-size: 16.56px;
  color: #1b2a4a;
}
.la-sidebar .la-a11y-bar p {
  grid-row: 2;
  grid-column: 1/-1;
  font-size: 16.786px;
  color: #1b2a4a;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.la-sidebar .la-a11y-bar p strong {
  color: #147F82;
}

.la-a11y-icon {
  font-size: 36px;
  flex-shrink: 0;
  margin-top: 2px;
}

.la-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(78, 205, 196, 0.25) 30%, rgba(78, 205, 196, 0.25) 70%, transparent 100%);
  margin: 0;
}

.la-footer {
  /* Zero horizontal padding so the bg tint extends edge-to-edge; the centered
     content column is handled by .la-footer-inner's max-width + margin:auto.
     Full-bleed full-viewport-width: the footer sits inside `.la-main` which
     has heavy left/right padding (calc(spacing-28 + 5rem)) — that padding
     would otherwise inset the footer's tinted background. Using the
     standard 100vw + negative margin-left/right trick breaks the footer
     out of `.la-main`'s content box and lets its background paint
     edge-to-edge at every screen width. */
  padding-top: 48px;
  padding-right: 0;
  padding-bottom: 40px;
  padding-left: 0;
  margin-top: 0;
  background: rgba(27, 54, 93, 0.03);
  border-top: none;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.la-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px 32px;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
@media (max-width: 1024px) {
  .la-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}

.la-footer-brand {
  max-width: 320px;
}
.la-footer-brand p {
  font-size: 14px;
  color: rgba(27, 54, 93, 0.7);
  line-height: 1.65;
  margin: 14px 0 0;
  letter-spacing: 0.01em;
}

/* Footer logo: ~25% narrower, no gap after image, Lingo and Linq same style */
.la-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: rgb(22.8282208589, 30.6871165644, 38.1717791411);
  transition: opacity 0.2s ease;
}
.la-footer-logo .app-logo__lingo,
.la-footer-logo .app-logo__linq, .la-footer-logo > span:first-child, .la-footer-logo > span:last-child {
  color: rgb(22.8282208589, 30.6871165644, 38.1717791411);
  font-style: normal;
}
.la-footer-logo:hover {
  text-decoration: none;
  opacity: 0.88;
}

.la-footer-logo-img {
  height: auto; /* width set via size="75px" (25% narrower than default 100px); keep aspect ratio */
}

.la-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.la-footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.la-footer-col h4 {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(27, 54, 93, 0.75);
  margin: 0 0 4px;
}
.la-footer-col a,
.la-footer-col a:visited {
  font-size: 14px;
  color: #1B365D;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.la-footer-col a:hover,
.la-footer-col a:visited:hover {
  color: #147F82;
  text-decoration: none;
}

.la-footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: inherit;
  color: rgba(27, 54, 93, 0.85);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.la-footer-link-btn:hover {
  color: #147F82;
  text-decoration: none;
}

.la-footer-link-btn:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-footer-link-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-footer-bottom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.la-footer-bottom__copy {
  font-size: 14px;
  color: rgba(27, 54, 93, 0.75);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  white-space: nowrap;
}

.la-footer-bottom-trailing {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Hero-aligned pill: same radius, surface, and shadow as .la-hero-badge (Cloud-based, etc.) */
a.la-footer-bottom-a11y-wcag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 12px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.la-footer-bottom-a11y-wcag:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgb(255, 255, 255);
}
a.la-footer-bottom-a11y-wcag:hover .la-footer-bottom-a11y-wcag__label {
  color: #147F82;
}
a.la-footer-bottom-a11y-wcag:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  a.la-footer-bottom-a11y-wcag:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
a.la-footer-bottom-a11y-wcag:focus-visible {
  border-radius: 12px;
}
a.la-footer-bottom-a11y-wcag .la-badge--in-a11y-wcag-pill {
  opacity: 1;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  margin: 0;
  border-radius: 8px;
  background: rgba(20, 127, 130, 0.12);
  color: #0d5c5f;
  border: 1px solid rgba(20, 127, 130, 0.2);
  box-shadow: none;
}
a.la-footer-bottom-a11y-wcag .la-footer-bottom-a11y-wcag__label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.88);
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.la-mobile-drawer-a11y-wcag {
  margin: 6px 16px 10px;
  align-self: flex-start;
}
.la-mobile-drawer-a11y-wcag .la-footer-bottom-a11y-wcag__label {
  text-align: left;
}

/* la-footer responsive: industry collapsing (multi-col → 2-col → single-col) */
@media (max-width: 1024px) {
  .la-footer {
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .la-footer-inner {
    margin-bottom: 32px;
  }
}
@media (max-width: 768px) {
  .la-footer {
    padding: 32px 20px 28px;
  }
  .la-footer-inner {
    gap: 24px 20px;
    margin-bottom: 28px;
  }
  .la-footer-brand {
    max-width: 100%;
  }
  .la-footer-bottom {
    padding-top: 20px;
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .la-footer {
    padding: 24px 16px 24px;
  }
  .la-footer-inner {
    gap: 20px;
    margin-bottom: 24px;
  }
  .la-footer-col h4 {
    margin-top: 8px;
  }
  .la-footer-col:nth-child(2) h4 {
    margin-top: 0;
  }
  .la-footer-bottom {
    padding-top: 16px;
    gap: 12px;
  }
}
/* Collapsible footer (same breakpoint as navbar: 1024px) — brand + hamburger only when collapsed */
.la-footer__mobile {
  display: none;
}

.la-footer--collapsible .la-footer__main--desktop {
  grid-column: 2/-1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px 32px;
}

.la-footer--collapsible .la-footer__main--desktop .la-footer-bottom {
  grid-column: 1/-1;
}

@media (max-width: 1024px) {
  /* ≤1024px footer layout: brand/tagline on top centered, then the
     three link columns (Product / Resources / Company) below in
     their existing 3-column grouping, centered horizontally on the
     page. The columns themselves keep their own internal left
     alignment so each heading sits flush above its links. The
     bottom row (copyright + accessibility) spans full width below
     the columns. The hamburger drawer is suppressed since the
     content is now exposed directly. This structure is flexible at
     all widths below 1024px — `grid-template-columns: repeat(3, auto)`
     plus `justify-content: center` lets the cluster shrink to fit. */
  .la-footer--collapsible .la-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
  }
  .la-footer--collapsible .la-footer-brand {
    max-width: 600px;
    text-align: center;
    margin-bottom: 16px;
  }
  .la-footer--collapsible .la-footer-brand p {
    text-align: center;
  }
  .la-footer--collapsible .la-footer__main--desktop {
    display: grid !important;
    grid-template-columns: repeat(3, auto);
    gap: 32px 40px;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col {
    grid-column: auto;
    /* Reset the 5rem left-padding the surrounding 2-col layout
       applies to .la-footer-col:nth-child(2)/(4) — that horizontal
       inset breaks the centered cluster here. */
    padding-left: 0 !important;
    /* Keep each column's heading + links flush-left within its own
       cell so the section reads cleanly even though the whole
       cluster is centered on the page. */
    text-align: left;
  }
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col h4,
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col nav {
    text-align: left;
  }
  /* Bottom row spans full footer width and lives under the cluster. */
  .la-footer--collapsible .la-footer__main--desktop .la-footer-bottom {
    grid-column: 1/-1;
  }
  .la-footer--collapsible .la-footer__mobile,
  .la-footer--collapsible .la-footer__mobile .la-topbar-hamburger,
  .la-footer--collapsible .la-footer__hamburger {
    display: none !important;
  }
  /* The mobile drawer panel triggered by the hamburger duplicates
     the now-visible columns, so keep it hidden along with its
     trigger. */
  .la-footer--collapsible .la-mobile-drawer {
    display: none !important;
  }
  .la-footer--collapsible .la-footer-bottom {
    padding-top: 16px;
  }
}
/* ≤640px: the 3-column cluster no longer fits cleanly across the
   viewport — links wrap mid-column, the cluster gets pushed off
   center, and gaps eat what's left of the layout. Stack the three
   columns vertically (still centered) so each section reads cleanly
   at narrow widths. The brand-on-top-centered structure from the
   ≤1024px block is preserved. */
@media (max-width: 640px) {
  .la-footer--collapsible .la-footer__main--desktop {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    justify-content: stretch !important;
  }
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col {
    text-align: center !important;
    align-items: center;
  }
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col h4,
  .la-footer--collapsible .la-footer__main--desktop .la-footer-col nav {
    text-align: center !important;
  }
  .la-footer--collapsible .la-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  /* Override the base .la-footer-bottom__copy `white-space: nowrap`
     so the copyright string can wrap onto multiple lines instead of
     getting clipped by the viewport edge at narrow widths. */
  .la-footer--collapsible .la-footer-bottom .la-footer-bottom__copy {
    white-space: normal;
    max-width: 100%;
  }
}
.la-footer-bottom-badges {
  display: flex;
  gap: 10px;
}
.la-footer-bottom-badges .la-badge {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  opacity: 1;
  border-radius: 6px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.la-footer-bottom-badges .la-badge:hover {
  opacity: 0.9;
}
.la-footer-bottom-badges .la-badge--wcag {
  background: rgba(20, 127, 130, 0.1);
  color: #0d5c5f;
  border: 1px solid rgba(20, 127, 130, 0.2);
}
.la-footer-bottom-badges .la-badge--oss {
  background: rgba(27, 54, 93, 0.06);
  color: rgba(27, 54, 93, 0.75);
  border: 1px solid rgba(27, 54, 93, 0.12);
}

.la-panel {
  grid-area: panel;
  background: #F4F1EB;
  border-left: 1px solid #EDE9E0;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.la-panel-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #EDE9E0;
  padding: 16px;
}
.la-panel-card.la-panel-card--testimonial {
  border-color: rgba(78, 205, 196, 0.3);
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.04) 0%, white 60%);
}
.la-panel-card.la-panel-card--cta {
  background: #1b2a4a;
  border-color: #1b2a4a;
}

.la-panel-card-eyebrow {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #147F82;
  margin-bottom: 10px;
}
.la-panel-card--cta .la-panel-card-eyebrow {
  color: #F2B95A;
}

.la-testimonial-quote {
  font-size: 14px;
  font-style: italic;
  color: #1b2a4a;
  line-height: 1.7;
  margin: 0 0 14px;
  border: none;
  padding: 0;
}
.la-testimonial-quote::before {
  content: "";
}
.la-testimonial-quote::after {
  content: "";
}

.la-testimonial-author {
  font-size: 14px;
  font-weight: 800;
  color: #1b2a4a;
  margin-bottom: 2px;
}

.la-testimonial-role {
  font-size: 14px;
  color: #147F82;
  opacity: 1;
}

.la-wrapper .la-cta-title {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 18.4px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  padding-left: 8px;
}

.la-wrapper .la-cta-body {
  font-size: 15.4px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.8;
  letter-spacing: 0.005em;
  margin: 0 0 20px;
}

.la-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.la-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.la-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1b2a4a;
}
.la-checklist .la-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(242, 185, 90, 0.15);
  color: #147F82;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.la-check {
  color: #4A8C60;
  font-weight: 800;
  flex-shrink: 0;
}

.la-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #1b2a4a;
}

.la-modal-header-label {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #F2B95A;
}

.la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 AAA touch target (44px min) + AAC standard headroom.
     Updated 2026-04-11 per WCAG audit; was 32×32. */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.la-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Features modal: exact styles from landing-alt #la-features (Why LingoLinq) */
.la-features-modal-body {
  background-color: #F7F9FA;
  padding: 32px 32px 40px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.la-features-modal-body .la-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.la-features-modal-body .la-section-title {
  font-family: "Maitree", serif;
  font-size: 32.3px; /* 15% smaller than landing */
  font-weight: normal;
  color: #1B365D;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-kerning: normal;
}
.la-features-modal-body .la-section-title em {
  font-style: normal;
  color: #3A6BC7;
}

.la-features-modal-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: -15px 0; /* vertical only so header extends to left/right edges of modal */
}

.modal-content:has(.la-features-modal-wrap) {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible !important;
  max-height: none !important;
  padding: 0;
}

.modal-dialog:has(.la-features-modal-wrap) {
  width: 90%;
  max-width: 90%;
  padding-left: 0;
  padding-right: 0;
}

.la-features-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-features-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-features-modal-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background-color: #E8ECF1 !important;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.la-features-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
  background-color: #D4DAE2 !important;
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}
.la-features-modal-wrap .la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

/* Content inside la-support-modal-body: feature list and notes */
.la-cloud-extras-modal-wrap .la-cloud-extras-features-heading {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-ink);
  margin: 0 0 20px;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-feature-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(44, 183, 176, 0.14);
  color: var(--md-teal, #2A9D8F);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-feature-content {
  flex: 1 1 auto;
  min-width: 0;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-feature-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-ink);
  margin-bottom: 4px;
}

.la-cloud-extras-modal-wrap .la-cloud-extras-feature-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-muted);
}

.la-cloud-extras-modal-wrap .la-cloud-extras-evolving {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--md-ink);
}

.la-cloud-extras-modal-wrap .la-cloud-extras-lifetime-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink);
  background: rgba(17, 26, 46, 0.06);
  border-radius: var(--md-r-md, 12px);
  border-left: 3px solid var(--md-teal, #2A9D8F);
}

/* Dialog and content: match Getting Started modal */
.modal .modal-dialog:has(.la-support-modal-wrap),
.modal .modal-dialog:has(.la-speak-mode-intro-modal-wrap),
.modal .modal-dialog:has(.la-new-board-modal-wrap),
.modal .modal-dialog:has(.la-generate-board-modal-wrap),
.modal .modal-dialog:has(.la-add-app-modal-wrap) {
  width: 100%;
  max-width: 520px;
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal .modal-dialog:has(.la-new-board-modal-wrap),
.modal .modal-dialog:has(.la-generate-board-modal-wrap) {
  /* 50% wider on full screens, fluid down to mobile (clamp at 96vw),
     and edge-to-edge on phones for max usable space.
     Fills full viewport height; body scrolls internally. */
  max-width: min(900px, 96vw);
  width: min(900px, 96vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.modal .modal-content:has(.la-new-board-modal-wrap),
.modal .modal-content:has(.la-generate-board-modal-wrap) {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

.la-new-board-modal-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.la-new-board-modal-wrap .la-support-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.la-new-board-modal-wrap .la-modal-header,
.la-new-board-modal-wrap .la-new-board-modal-footer {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .modal .modal-dialog:has(.la-new-board-modal-wrap),
  .modal .modal-dialog:has(.la-generate-board-modal-wrap) {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    border-radius: 0;
  }
}
.modal .modal-dialog:has(.md-dashboard-supervisors-modal-wrap) {
  max-width: min(720px, 96vw);
}

.modal-content:has(.md-dashboard-supervisors-modal-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

.md-dashboard-supervisors-modal__scroll {
  max-height: min(72vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.md-supervisors-page--modal {
  padding: 16px 20px 24px;
  margin: 0;
}

.md-dashboard-supervisors-modal__section {
  margin-bottom: 1.5rem;
}

.md-dashboard-supervisors-modal__section:last-child {
  margin-bottom: 0;
}

.md-dashboard-supervisors-modal__heading {
  margin: 0 0 0.35rem;
  font-size: 1.5625rem; /* was 1.25rem; +25% */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}

.md-dashboard-supervisors-modal__lead {
  margin: 0 0 1rem;
  font-size: 14px; /* was 1.05rem; +25% */
  color: var(--md-muted);
  line-height: 1.45;
}

.md-dashboard-supervisors-modal__badge {
  display: inline-flex;
  margin-bottom: 1rem;
}

.md-dashboard-supervisors-modal__settings {
  margin-top: 0.5rem;
}

.md-dashboard-supervisors-modal__settings .ll-bento-supervision-inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.md-dashboard-supervisors-modal__settings .ll-bento-supervision-inline > button.md-btn--primary {
  align-self: center;
  margin-top: 0.75rem;
}

.md-dashboard-supervisors-modal__section--rooms .md-dashboard-supervisors-modal__heading {
  margin-bottom: 0.75rem;
}

.md-dashboard-supervisors-modal-wrap .md-person__main--btn {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border-radius: 12px;
}

.md-dashboard-supervisors-modal-wrap .md-person__main--btn:hover {
  background: rgba(44, 183, 176, 0.06);
}

.md-dashboard-supervisors-modal-wrap .md-person__main--btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-dashboard-supervisors-modal-wrap .md-person__main--btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-dashboard-supervisors-modal-wrap .md-person__link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: rgba(20, 127, 130, 0.95);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.md-dashboard-supervisors-modal-wrap .md-person__link-btn:hover {
  color: #0d5c5e;
}

.md-dashboard-supervisors-modal-wrap .md-rooms-list__btn {
  color: rgba(20, 127, 130, 0.95);
}

.modal-content:has(.la-support-modal-wrap),
.modal-content:has(.la-speak-mode-intro-modal-wrap),
.modal-content:has(.la-new-board-modal-wrap),
.modal-content:has(.la-generate-board-modal-wrap),
.modal-content:has(.la-add-app-modal-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

/* Add App modal */
.la-add-app-modal-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-add-app-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-add-app-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-add-app-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.la-add-app-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--app {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(76, 134, 216, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-add-app-modal-body {
  padding: 24px;
}

.la-add-app-modal-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink);
  margin: 0 0 8px;
}

.la-add-app-modal-stores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 0;
}

.la-add-app-modal-store-link {
  display: inline-block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.la-add-app-modal-store-link:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.la-add-app-modal-store-img {
  height: 46px;
  display: block;
}

.la-add-app-modal-hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-muted);
  margin: 0;
  text-align: center;
}

/* ── My Devices modal (modern) ── */
.la-devices-modal-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-devices-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-devices-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-devices-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-devices-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--devices {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-devices-modal-body {
  padding: 16px 24px 8px;
}

.la-devices-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.la-devices-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-devices-item + .la-devices-item {
  margin-top: 4px;
}

.la-devices-item:hover {
  background: rgba(42, 157, 143, 0.04);
  border-color: var(--md-line);
}

.la-devices-item--current {
  background: rgba(42, 157, 143, 0.06);
  border-color: rgba(42, 157, 143, 0.18);
}

.la-devices-item--current:hover {
  background: rgba(42, 157, 143, 0.09);
}

.la-devices-item__icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(44, 183, 176, 0.12);
  border: 1px solid var(--md-line);
  margin-top: 2px;
}

.la-devices-item__icon-wrap--mobile {
  background: rgba(76, 134, 216, 0.1);
}

.la-devices-item__icon-wrap--web {
  background: rgba(42, 157, 143, 0.1);
}

.la-devices-item--current .la-devices-item__icon-wrap {
  border-color: rgba(42, 157, 143, 0.25);
}

.la-devices-item__info {
  flex: 1 1 auto;
  min-width: 0;
}

.la-devices-item__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.la-devices-item__name:hover {
  color: var(--md-teal);
}

.la-devices-item__edit-icon {
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--md-muted);
}

.la-devices-item__name:hover .la-devices-item__edit-icon {
  opacity: 1;
}

.la-devices-item--current .la-devices-item__name {
  color: var(--md-teal);
}

.la-devices-item__meta {
  font-size: 14px;
  color: var(--md-muted);
  line-height: 1.5;
}

.la-devices-item__rename {
  display: flex;
  align-items: center;
  gap: 8px;
}

.la-devices-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  font-size: 15px;
  color: var(--md-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-devices-rename-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

.la-devices-item__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.la-devices-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--md-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.la-devices-remove-btn:hover {
  background: rgba(240, 106, 91, 0.08);
  border-color: rgba(240, 106, 91, 0.2);
  color: #d94432;
}

.la-devices-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--md-muted);
}

.la-devices-empty svg {
  margin-bottom: 12px;
  opacity: 0.5;
}

.la-devices-empty p {
  margin: 0;
  font-size: 15px;
}

.la-devices-modal-wrap .la-btn--sm {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 8px;
}

.la-devices-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

/* ── Color Sets modal (modern) ── */
.la-colors-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.modal-content:has(.la-colors-modal-wrap),
.modal-dialog:has(.la-colors-modal-wrap) > .ember-view,
.modal-dialog:has(.la-colors-modal-wrap) > .ember-view > .modal-content {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: none !important;
}

.modal-content:has(.la-colors-modal-wrap) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.la-colors-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-colors-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-colors-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-colors-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--colors {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-colors-modal-body {
  padding: 20px 24px;
}

.la-colors-modal-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink);
  margin: 0 0 16px;
}

.la-colors-modal-table {
  margin-top: 8px;
}

.la-colors-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17, 26, 46, 0.06);
}

.la-colors-modal-row--header {
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.1);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.la-colors-modal-row--header b {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5A6A85;
}

.la-colors-modal-col--label {
  flex: 2;
}

.la-colors-modal-col--preview {
  flex: 0 0 32px;
}

.la-colors-modal-col--color {
  flex: 2;
}

.la-colors-modal-col--action {
  flex: 0 0 32px;
}

.la-colors-input {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 8px;
  font-size: 14px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-colors-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-colors-preview {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--md-line);
}

.la-colors-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--md-muted);
  transition: background 0.12s ease, color 0.12s ease;
}

.la-colors-remove:hover {
  background: rgba(180, 60, 60, 0.08);
  color: #8b2a2a;
}

.la-colors-modal-empty {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
  padding: 12px 0;
}

.la-colors-modal-add {
  padding: 12px 0;
}

.la-colors-add-btn {
  padding: 8px 18px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 999px;
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-colors-add-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-colors-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-colors-update-btn {
  padding: 10px 28px;
  border-radius: 999px;
  background: #374151;
  border: 1px solid rgba(55, 65, 81, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.la-colors-update-btn:hover {
  background: #4b5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.la-colors-close-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 26, 46, 0.15);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-colors-close-btn:hover {
  background: #f3f4f6;
  border-color: rgba(17, 26, 46, 0.25);
}

/* ── Valet Mode modal (modern) ── */
.la-valet-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.modal-content:has(.la-valet-modal-wrap),
.modal-dialog:has(.la-valet-modal-wrap) > .ember-view,
.modal-dialog:has(.la-valet-modal-wrap) > .ember-view > .modal-content {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: none !important;
}

.modal-content:has(.la-valet-modal-wrap) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.la-valet-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-valet-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-valet-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-valet-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--valet {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-valet-modal-body {
  padding: 24px;
  text-align: center;
}

.la-valet-modal-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink);
  margin: 0 0 16px;
  text-align: left;
}

.la-valet-modal-status {
  font-size: 15px;
  color: var(--md-muted);
  font-style: italic;
  padding: 20px 0;
}

.la-valet-modal-status--error {
  color: #8b2a2a;
}

.la-valet-modal-qr {
  width: 400px;
  margin: 10px auto 24px;
}

.la-valet-modal-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.la-valet-modal-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-valet-modal-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-valet-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-valet-modal-close-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(70, 80, 95, 0.3);
  background: #46505F;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-valet-modal-close-btn:hover {
  background: #566878;
  border-color: rgba(70, 80, 95, 0.45);
}

/* ── Saved Phrases modal (modern) ── */
.la-phrases-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.la-phrases-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-phrases-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-phrases-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-phrases-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--phrases {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-phrases-modal-body {
  padding: 20px 24px;
}

.la-phrases-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.la-phrases-cat-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.la-phrases-cat-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-phrases-cat-btn--active {
  background: #374151;
  color: #fff;
  border-color: rgba(55, 65, 81, 0.3);
}

.la-phrases-cat-btn--active:hover {
  background: #4b5563;
  color: #fff;
}

.la-phrases-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.la-phrases-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17, 26, 46, 0.06);
}

.la-phrases-item:last-child {
  border-bottom: none;
}

.la-phrases-item__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-radius: 12px;
  background: #fff;
  color: var(--md-ink);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.la-phrases-item__text:hover {
  background: rgba(42, 157, 143, 0.04);
  border-color: rgba(20, 127, 130, 0.2);
}

.la-phrases-item__date {
  display: block;
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted);
  margin-top: 2px;
}

.la-phrases-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.la-phrases-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--md-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-phrases-action-btn:hover {
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
}

.la-phrases-action-btn--remove:hover {
  background: rgba(180, 60, 60, 0.08);
  color: #8b2a2a;
}

.la-phrases-empty {
  padding: 16px 0;
  font-size: 15px;
  color: var(--md-muted);
  font-style: italic;
}

.la-phrases-empty p {
  margin: 0;
}

.la-phrases-add-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 26, 46, 0.08);
}

.la-phrases-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  font-size: 15px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-phrases-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-phrases-add-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-phrases-add-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-phrases-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-phrases-close-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(70, 80, 95, 0.3);
  background: #46505F;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.la-phrases-close-btn:hover {
  background: #566878;
}

/* ── Record Note modal (modern) ── */
.la-record-note-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.la-record-note-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-record-note-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-record-note-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-record-note-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--note {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

/* ── Share Text modal (share-utterance) — modern restyle ── */
.la-share-text-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.la-share-text-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-share-text-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-share-text-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-share-text-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--share {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-share-text-modal-body {
  padding: 20px 24px 24px;
}

.la-share-text__quote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 18px;
  padding: 16px 20px;
  background: #F8F9FA;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-left: 4px solid rgba(42, 157, 143, 0.55);
  border-radius: 12px;
}

.la-share-text__quote-mark {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: rgba(42, 157, 143, 0.7);
  flex-shrink: 0;
}

.la-share-text__quote-text {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 600;
  color: var(--md-ink);
  word-break: break-word;
  align-self: center;
}

.la-share-text__empty {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: rgba(17, 26, 46, 0.03);
  border: 1px dashed rgba(17, 26, 46, 0.18);
  border-radius: 12px;
  color: var(--md-muted);
  font-size: 15px;
  font-style: italic;
}

.la-share-text__note {
  font-size: 14px;
  color: var(--md-muted);
  line-height: 1.5;
  margin: 0 0 4px;
}

.la-share-text__divider {
  clear: both;
  width: 100%;
  border-top: 1px solid rgba(17, 26, 46, 0.1);
  margin: 14px 0 18px;
}

.la-share-text__grid {
  margin: 0;
}

.la-share-text-modal-wrap .btn.la-share-text__action,
.la-share-text-modal-wrap a.btn.la-share-text__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 86px;
  padding: 12px 8px;
  margin-bottom: 14px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #46505F;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.la-share-text-modal-wrap .btn.la-share-text__action:hover,
.la-share-text-modal-wrap a.btn.la-share-text__action:hover {
  background: #F8F9FA;
  border-color: rgba(42, 157, 143, 0.45);
  color: #1b2a4a;
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.1);
  transform: translateY(-2px);
}

.la-share-text-modal-wrap .btn.la-share-text__action.btn-success {
  border-color: rgba(60, 154, 95, 0.5);
  color: #2e7d4f;
}

.la-share-text__action-icon {
  display: block;
}

.la-share-text__action-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(0.6);
}

.la-share-text__action-label {
  display: block;
  line-height: 1.2;
}

.la-share-text-modal-wrap .btn.la-share-text__contact-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 86px;
  padding: 10px 8px;
  margin-bottom: 14px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #46505F;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.la-share-text-modal-wrap .btn.la-share-text__contact-btn:hover {
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.1);
  transform: translateY(-2px);
}

.la-share-text__contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.la-share-text__contact-name {
  display: block;
  line-height: 1.2;
  word-break: break-word;
}

.la-share-text__contact-reply {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #2A9D8F;
  font-size: 13px;
}

.la-share-text__textonly {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: rgba(17, 26, 46, 0.03);
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-radius: 10px;
}

.la-share-text__status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.la-share-text__status--ok {
  color: #2e7d4f;
}

.la-share-text__status--err {
  color: #c0392b;
}

.la-record-note-modal-body {
  padding: 20px 24px;
}

.la-record-note-modal-body .form-control {
  font-size: 15px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-record-note-modal-body .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-record-note-modal-body .control-label {
  font-size: 14px;
  font-weight: 700;
  color: #5A6A85;
}

.la-record-note-modal-body .checkbox label {
  font-size: 15px;
  color: var(--md-ink);
}

.la-record-note-modal-body .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-record-note-modal-body .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-record-note-type-toggle {
  display: inline-flex;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.la-record-note-type-btn {
  padding: 8px 20px;
  border: none;
  background: #F8F9FA;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.la-record-note-type-btn + .la-record-note-type-btn {
  border-left: 1px solid rgba(17, 26, 46, 0.08);
}

.la-record-note-type-btn--active {
  background: #374151;
  color: #fff;
}

.la-record-note-type-btn--active:hover {
  background: #4b5563;
}

.la-record-note-type-btn:not(.la-record-note-type-btn--active):hover {
  background: #F0F4F8;
  color: var(--md-ink);
}

.la-record-note-statuses {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.la-record-note-prior {
  border-left: 3px solid rgba(42, 157, 143, 0.3);
  font-style: italic;
  padding: 8px 0 8px 14px;
  color: var(--md-muted);
  font-size: 14px;
  line-height: 1.5;
}

.la-record-note-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-record-note-save-btn {
  padding: 10px 28px;
  border-radius: 999px;
  background: #374151;
  border: 1px solid rgba(55, 65, 81, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.la-record-note-save-btn:hover:not(:disabled) {
  background: #4b5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.la-record-note-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.la-record-note-cancel-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 26, 46, 0.15);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-record-note-cancel-btn:hover {
  background: #f3f4f6;
  border-color: rgba(17, 26, 46, 0.25);
}

/* ── Sync Details modal (matches record-note modal shell) ── */
.modal .modal-dialog:has(.la-sync-details-modal-wrap) {
  margin-top: 15px;
  max-width: min(720px, 94vw);
}

.la-sync-details-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.la-sync-details-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-sync-details-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-sync-details-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-sync-details-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--sync {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-sync-details-modal-body {
  padding: 20px 24px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
}

.la-sync-details-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.la-sync-details-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.la-sync-details-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #374151;
  border: 1px solid rgba(55, 65, 81, 0.3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.la-sync-details-primary-btn:hover {
  background: #4b5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.la-sync-details-secondary-btn {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 26, 46, 0.15);
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-sync-details-secondary-btn:hover {
  background: #f3f4f6;
  border-color: rgba(17, 26, 46, 0.25);
}

.la-sync-details-btn-refresh {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.la-sync-details-btn-refresh--spinning {
  animation: spinningAnimation 2s infinite linear;
}

.la-sync-details-lead {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--md-ink);
}

.la-sync-details-log-heading {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.la-sync-details-log-heading .text-danger,
.la-sync-details-log-heading .text-warning,
.la-sync-details-log-heading .text-success {
  font-size: inherit;
}

.la-sync-details-muted-block {
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--md-muted);
  font-size: 14px;
  line-height: 1.5;
}

.la-sync-details-see-link {
  margin-left: 4px;
  font-weight: 600;
  font-size: inherit;
}

.la-sync-details-status-error {
  margin-left: 10px;
  margin-top: 4px;
}

.la-sync-details-table-scroll {
  max-height: 60vh;
  overflow: auto;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--md-line);
}

.la-sync-details-table {
  margin-bottom: 0;
  font-size: 14px;
}

.la-sync-details-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.la-sync-details-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-sync-details-modal-footer .la-record-note-cancel-btn {
  font-size: 14px;
  padding: 11px 26px;
}

/* ── Assign Lesson modal (matches sync / record-note shell) ── */
.modal .modal-dialog:has(.la-assign-lesson-modal-wrap) {
  margin-top: 15px;
  max-width: min(720px, 94vw);
}

.la-assign-lesson-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.la-assign-lesson-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-assign-lesson-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-assign-lesson-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-assign-lesson-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--lesson {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-assign-lesson-modal-body {
  padding: 20px 24px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
}

.la-assign-lesson-modal-body .form-control {
  font-size: 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-assign-lesson-modal-body .form-control:focus {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-assign-lesson-modal-body .form-control:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .la-assign-lesson-modal-body .form-control:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-assign-lesson-modal-body .control-label {
  font-size: 14px;
  font-weight: 700;
  color: #5A6A85;
}

.la-assign-lesson-modal-body .form-control-static {
  font-size: 14px;
  font-weight: 400;
  color: var(--md-ink);
}

.la-assign-lesson-modal-body .checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: var(--md-ink);
  line-height: 1.5;
}

.la-assign-lesson-intro {
  margin: 0;
  color: var(--md-muted);
  font-size: 14px;
  line-height: 1.55;
}

.la-assign-lesson-hint {
  margin-top: 8px;
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted);
}

.la-assign-lesson-allow-past-check {
  margin-top: 0;
}

.la-assign-lesson-modal-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-assign-lesson-modal-footer .la-record-note-cancel-btn {
  font-size: 14px;
  padding: 11px 26px;
}

.la-assign-lesson-modal-footer .la-sync-details-primary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.la-support-modal-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

/* Header: same layout and look as Getting Started */
.la-support-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-support-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-support-modal-wrap .la-support-modal-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.la-support-modal-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background-color: #E8ECF1 !important;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.la-support-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
  background-color: #D4DAE2 !important;
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}
.la-support-modal-wrap .la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

.la-new-board-modal-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-new-board-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-new-board-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-new-board-modal-wrap .la-support-modal-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.la-new-board-modal-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.la-new-board-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
}

.la-new-board-modal-wrap .la-support-modal-body {
  padding: 24px;
}

.la-new-board-modal-wrap .la-new-board-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-line);
}

.la-new-board-modal-wrap .la-new-board-modal-actions .la-btn--ghost {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(17, 26, 46, 0.12) !important;
  background: rgba(17, 26, 46, 0.06) !important;
  color: #1B365D !important;
}

.la-new-board-modal-wrap .la-new-board-modal-actions .la-btn--ghost:hover {
  background: rgba(17, 26, 46, 0.1) !important;
  border-color: rgba(17, 26, 46, 0.18) !important;
  color: #1B365D !important;
}

.la-new-board-modal-wrap .la-new-board-form .form-group {
  margin-bottom: 18px;
}

.la-new-board-modal-wrap .la-new-board-form .control-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-ink);
}

.la-new-board-modal-wrap .la-new-board-form .form-control {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 10px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--md-ink);
}

.la-new-board-modal-wrap .la-new-board-form #new_board_name,
.la-new-board-modal-wrap .la-new-board-form #new_board_rows,
.la-new-board-modal-wrap .la-new-board-form #new_board_columns {
  font-size: 14px;
}

.la-new-board-modal-wrap .la-new-board-form .form-control:focus-visible {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2);
}

.la-new-board-modal-wrap .la-new-board-form .input-group .btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  color: var(--md-ink);
}

.la-new-board-modal-wrap .la-new-board-form select.form-control {
  cursor: pointer;
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-visibility-select,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--visibility select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 44px 12px 14px;
  font-size: 1.46rem;
  font-weight: 600;
  color: var(--md-ink);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.14);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-visibility-select:hover,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--visibility select.form-control:hover {
  border-color: rgba(17, 26, 46, 0.22);
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-visibility-select:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--visibility select.form-control:focus-visible {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
}

.la-new-board-modal-wrap .la-new-board-form #image_url,
.la-new-board-modal-wrap .la-new-board-form input#image_url.form-control {
  font-size: 14px;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-field--key #new_board_key,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--description #new_board_description {
  font-size: 14px;
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-select--modern,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--license select.form-control,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--locale select.form-control,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--labels select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 44px 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.14);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-select--modern:hover,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--license select.form-control:hover,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--locale select.form-control:hover,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--labels select.form-control:hover {
  border-color: rgba(17, 26, 46, 0.22);
}

.la-new-board-modal-wrap .la-new-board-form select.new-board-select--modern:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--license select.form-control:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--locale select.form-control:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .new-board-field--labels select.form-control:focus-visible {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
}

/* Modern custom dropdown – trigger matches original select look; only inner list is custom */
.la-new-board-modal-wrap .la-new-board-form .modern-select {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__trigger {
  display: block;
  width: 100%;
  padding: 12px 44px 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.14);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
  text-align: left;
  appearance: none;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select.new-board-visibility-select .modern-select__trigger {
  font-size: 1.46rem;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__trigger:hover {
  border-color: rgba(17, 26, 46, 0.22);
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__trigger:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .modern-select--open .modern-select__trigger {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  box-shadow: 0 8px 24px rgba(17, 26, 46, 0.12), 0 2px 8px rgba(17, 26, 46, 0.06);
  max-height: 280px;
  overflow-y: auto;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__option {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__option:hover {
  background: rgba(44, 183, 176, 0.08);
  color: #316F70;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__option--selected {
  background: var(--md-teal-soft);
  color: #316F70;
  font-weight: 600;
}

.la-new-board-modal-wrap .la-new-board-form .modern-select__option--selected:hover {
  background: rgba(44, 183, 176, 0.18);
}

.la-new-board-modal-wrap .la-new-board-form textarea.form-control {
  min-height: 80px;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-field--labels #new_board_labels {
  font-size: 14px;
  margin-bottom: 14px;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-field--labels .modern-select {
  margin-bottom: 14px;
}

.la-new-board-modal-wrap .la-new-board-form a[href="#"] {
  color: var(--md-teal);
  font-weight: 600;
}

.la-new-board-modal-wrap .la-new-board-form .nav-pills {
  margin-top: 8px;
}

.la-new-board-modal-wrap .la-new-board-form .nav-pills a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.65);
  color: var(--md-ink);
  font-size: 14px;
}

.la-new-board-modal-wrap .la-new-board-form .nav-pills li.active a {
  background: var(--md-teal-soft);
  border-color: rgba(44, 183, 176, 0.3);
}

.la-new-board-modal-wrap .la-new-board-form .checkbox.big_checkbox label {
  font-weight: 600;
  color: var(--md-ink);
}

.la-new-board-modal-wrap .la-new-board-form .new-board-checkbox input[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(17, 26, 46, 0.2);
  background: #fff;
  box-shadow: none;
  top: 2px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-checkbox input[type=checkbox]:hover {
  border-color: rgba(17, 26, 46, 0.35);
}

.la-new-board-modal-wrap .la-new-board-form input#word_suggestions[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-checkbox input[type=checkbox]:checked {
  background: #316F70;
  border-color: #316F70;
  box-shadow: none;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-checkbox input[type=checkbox]:checked::after {
  position: absolute;
  width: 6px;
  height: 11px;
  left: 7px;
  top: 3px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
  box-sizing: border-box;
}

.la-new-board-modal-wrap .la-new-board-form .new-board-checkbox-hint {
  display: block;
  margin: 6px 0 0 30px;
  padding: 0;
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted);
  line-height: 1.4;
}

.la-new-board-modal-wrap #grid_selection .cell {
  border-radius: 6px;
}

.la-new-board-modal-wrap #grid_selection .cell.preview {
  background: var(--md-teal-soft);
}

.la-new-board-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

/* Field-level error state — the modern Stripe / Material 3 / GitHub
   pattern. A required field that's been touched-and-blurred OR seen
   a submit attempt while empty gets a 1px danger outline + a small
   helper line below it. The error only renders after `_field_touched`
   or `_submit_attempted` flips true, so a fresh form never accuses the
   user before they've engaged. */
/* Specificity bump: the base `.nb-field__hint` rule and the form-control
   `:focus-visible` rules live further down in the file. Using a chained
   selector + `!important` makes these win on source order regardless. */
.nb-field__input.nb-field__input--error,
.nb-field__input.nb-field__input--error:focus,
.nb-field__input.nb-field__input--error:focus-visible,
.la-new-board-modal-wrap .la-new-board-form .form-control.nb-field__input--error,
.la-new-board-modal-wrap .la-new-board-form .form-control.nb-field__input--error:focus,
.la-new-board-modal-wrap .la-new-board-form .form-control.nb-field__input--error:focus-visible {
  border-color: rgba(192, 57, 43, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1) !important;
}

.nb-field__hint.nb-field__hint--error {
  margin: 4px 0 0;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 500;
  /* Muted danger — uses the project's $brand-danger (#C0392B) at 0.78
     opacity so the helper reads as a corrective hint, not an alarm. */
  color: rgba(192, 57, 43, 0.78) !important;
  letter-spacing: 0.005em;
}

/* Visually-invalid Create button. We use `aria-disabled` instead of the
   native `disabled` attribute so the click handler still fires on touch
   devices — that's how the user gets feedback when fields are missing.
   This class paints the same disabled look the native `:disabled`
   pseudo-class would. The base `.btn-primary` / `.la-btn--primary` rules
   own the enabled/hover/active appearance; we only override the
   "invalid" state. */
.new-board__submit--invalid {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

.new-board__submit--invalid:hover,
.new-board__submit--invalid:active {
  /* Cancel the primary button's hover/active brightening — keep the
     disabled look stable when the user hovers/taps. */
  filter: saturate(0.6);
  opacity: 0.55;
  transform: none;
}

.la-new-board-modal-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.la-new-board-modal-footer__actions .la-btn--primary {
  background: #4C86D8;
  color: #1B365D;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
}

.la-new-board-modal-footer__actions .la-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.la-new-board-modal-footer__actions .la-btn--primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.la-new-board-modal-footer__actions .la-btn--ghost {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  font-weight: 600;
}

.la-new-board-modal-footer__actions .la-btn--ghost:hover {
  background: rgba(17, 26, 46, 0.1);
  border-color: rgba(17, 26, 46, 0.18);
}

/* Generate Board with AI modal: same shell as Create Board, match form field sizing */
.la-generate-board-modal-wrap .la-new-board-form #generate_board_prompt,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_rows,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_columns,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_name,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_description,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_labels {
  font-size: 14px;
}

.la-generate-board-modal-wrap .la-new-board-form .checkbox.big_checkbox label {
  font-weight: 600;
  color: var(--md-ink);
}

.la-generate-board-modal-wrap .la-new-board-form #generate_board_locale,
.la-generate-board-modal-wrap .la-new-board-form #generate_board_labels_order {
  font-size: 14px;
}

/* Generate Board: reduce dropdown list padding so options aren’t cut off at the bottom */
.la-generate-board-modal-wrap .modern-select__list {
  padding: 4px 0;
  max-height: 320px;
}

.la-generate-board-modal-wrap .modern-select__option {
  padding: 8px 14px;
  font-size: 14px;
}

.modal .modal-dialog:has(.la-new-board-folder-wrap) {
  width: 100%;
  max-width: 440px;
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal-content:has(.la-new-board-folder-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
}

.la-new-board-folder-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-new-board-folder-wrap .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-new-board-folder-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-new-board-folder-wrap .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.la-new-board-folder-wrap .la-modal-close:hover {
  color: var(--md-ink);
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}
.la-new-board-folder-wrap .la-modal-close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

.la-new-board-folder-body {
  padding: 24px;
}

.la-new-board-folder-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-ink);
}

.la-new-board-folder-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 10px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--md-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.la-new-board-folder-input:focus-visible {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2);
}

.la-new-board-folder-error {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(192, 57, 43, 0.15);
}

.la-new-board-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  /* Right-aligned button cluster — Cancel + Create sit pinned to
     the right edge of the modal, matching standard dialog footer
     conventions where the primary action is rightmost. */
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--md-line);
}

.la-new-board-folder-actions .la-btn--primary {
  /* Brand slate-blue + white for both states. The prior
     dusty-denim + la-navy combination failed WCAG contrast in
     both active and disabled states; slate-blue (#5A6A85) gives
     ~5.83:1 against white text — clears AA for normal text. The
     disabled state uses a slightly-lighter slate (mix of 88%
     slate-blue + 12% white ≈ #6E7C95) which still clears AA
     (~4.6:1) so the button stays readable while still reading as
     muted. */
  background: #5A6A85;
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.la-new-board-folder-actions .la-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
  color: #FFFFFF;
}
.la-new-board-folder-actions .la-btn--primary:disabled {
  background: rgb(109.8, 123.88, 147.64);
  color: #FFFFFF;
  cursor: not-allowed;
  filter: none;
}

.la-new-board-folder-actions .la-btn--ghost {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.la-new-board-folder-actions .la-btn--ghost:hover {
  background: rgba(17, 26, 46, 0.1);
  border-color: rgba(17, 26, 46, 0.18);
}

.modal .modal-dialog:has(.la-focus-words-modal-wrap) {
  width: 100%;
  max-width: 560px;
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal-content:has(.la-focus-words-modal-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

.la-focus-words-modal-wrap {
  color: var(--md-ink);
  min-width: 0;
  position: relative;
}

.la-focus-words-modal-wrap .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0;
}

.la-focus-words-modal-wrap .modal-header .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.la-focus-words-modal-wrap .modal-header .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background-color: #E8ECF1 !important;
  background: #E8ECF1 !important;
  color: var(--md-muted, #6B7280);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.la-focus-words-modal-wrap .modal-header .la-modal-close:hover {
  color: var(--md-ink, #111A2E);
  background-color: #D4DAE2 !important;
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-1px) scale(1.04);
}

.la-focus-words-modal-wrap .modal-body {
  padding: 24px;
  color: var(--md-ink);
}

.la-focus-words-modal-wrap .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
  background: rgba(248, 250, 252, 0.8);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  text-align: left;
  border-radius: 0;
}

.la-focus-words-modal-wrap .modal-footer button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  border: 2px solid #3A6BC7;
  background: #3A6BC7;
  color: #fff;
  box-shadow: 0 4px 14px rgba(58, 107, 199, 0.35);
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.la-focus-words-modal-wrap .modal-footer button.btn:hover:not(:disabled) {
  filter: brightness(1.1);
  text-decoration: none;
}
.la-focus-words-modal-wrap .modal-footer button.btn:disabled {
  background: #c4cad4 !important;
  border-color: #b0b8c4 !important;
  color: #1b2a4a !important;
  cursor: not-allowed;
  box-shadow: none;
}

.la-focus-words-modal-wrap .modal-footer a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  background: #c4cad4;
  color: #2c3e50;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.la-focus-words-modal-wrap .modal-footer a.btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1b2a4a;
  text-decoration: none;
}

.la-focus-words-modal-wrap .modal-body {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.la-focus-words-modal-wrap .modal-body .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.la-focus-words-modal-wrap .modal-body [class*=col-] {
  padding-left: 0;
  padding-right: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
}

.la-focus-words-modal-wrap .modal-body .form-group > span[style*="width: 240px"],
.la-focus-words-modal-wrap .modal-body .form-group > span[style*="width:240px"] {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.la-focus-words-modal-wrap .modal-body .form-group {
  flex-wrap: wrap;
}

.la-focus-words-modal-wrap .modal-body .form-group {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.la-focus-words-modal-wrap .modal-body .form-control {
  border: 1px solid var(--md-line, #dde1e9);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--md-ink, #111A2E);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.la-focus-words-modal-wrap .modal-body .form-control:focus-visible {
  border-color: #3A6BC7;
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.12);
  outline: none;
}
.la-focus-words-modal-wrap .modal-body .form-control::placeholder {
  color: #9CA3AF;
}

.la-focus-words-modal-wrap .modal-body .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  background: #f1f3f6;
  color: #2c3e50;
  transition: all 0.15s ease;
}
.la-focus-words-modal-wrap .modal-body .btn:hover {
  background: #e2e6ec;
  text-decoration: none;
  color: #1b2a4a;
}

.la-focus-words-modal-wrap .modal-body .list-group-item-info,
.la-focus-words-modal-wrap .modal-body .list-group-item-success,
.la-focus-words-modal-wrap .modal-body .list-group-item-warning {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-info .text-muted, .la-focus-words-modal-wrap .modal-body .list-group-item-info span.text-muted,
.la-focus-words-modal-wrap .modal-body .list-group-item-success .text-muted,
.la-focus-words-modal-wrap .modal-body .list-group-item-success span.text-muted,
.la-focus-words-modal-wrap .modal-body .list-group-item-warning .text-muted,
.la-focus-words-modal-wrap .modal-body .list-group-item-warning span.text-muted {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  width: auto !important;
  word-break: break-word;
}

.la-focus-words-modal-wrap .modal-body .list-group-item-info {
  display: block;
  background: rgba(58, 107, 199, 0.06);
  border: 1px solid rgba(58, 107, 199, 0.18);
  color: var(--md-ink);
  border-radius: 12px !important;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 14px;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-info b {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-info .text-muted {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-info:hover {
  background: rgba(58, 107, 199, 0.11);
}

.la-focus-words-modal-wrap .modal-body .list-group-item-success {
  display: block;
  background: rgba(44, 183, 176, 0.07);
  border: 1px solid rgba(44, 183, 176, 0.2);
  color: var(--md-ink);
  border-radius: 12px !important;
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 14px;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-success b {
  font-weight: 700;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-success .text-muted {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-success:hover {
  background: rgba(44, 183, 176, 0.13);
}

.la-focus-words-modal-wrap .modal-body .list-group-item-warning {
  display: block;
  background: rgba(247, 190, 72, 0.08);
  border: 1px solid rgba(247, 190, 72, 0.22);
  color: var(--md-ink);
  border-radius: 12px !important;
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 14px;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-warning b {
  font-weight: 700;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-warning .text-muted {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}
.la-focus-words-modal-wrap .modal-body .list-group-item-warning:hover {
  background: rgba(247, 190, 72, 0.15);
}

.la-focus-words-modal-wrap .modal-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink);
  margin: 18px 0 8px;
}

.la-focus-words-modal-wrap .modal-body .big_checkbox {
  margin-top: 6px;
}
.la-focus-words-modal-wrap .modal-body .big_checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink, #111A2E);
  cursor: pointer;
}
.la-focus-words-modal-wrap .modal-body .big_checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #3A6BC7;
  cursor: pointer;
  flex-shrink: 0;
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro__lead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(44, 183, 176, 0.12);
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro__icon-svg {
  color: rgba(44, 183, 176, 0.92);
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro__text .la-support-intro {
  margin: 0 0 0.75em;
  font-size: 15px;
  line-height: 1.5;
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro__text .la-support-intro:last-child {
  margin-bottom: 0;
}

.la-speak-mode-intro-modal-wrap .la-speak-mode-intro-actions {
  margin-top: 8px;
  padding-top: 0;
}

.modal-dialog:has(.la-choose-locale-modal-wrap) {
  margin-top: 10rem;
}

.modal .modal-dialog:has(.la-terms-agree-modal-wrap) {
  width: 100%;
  max-width: 520px;
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal-content:has(.la-terms-agree-modal-wrap) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

.la-terms-agree-modal-wrap .la-modal-header {
  padding-right: 24px;
}

.la-terms-agree-message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--md-r-md);
  background: rgba(17, 26, 46, 0.06);
  border: 1px solid var(--md-line);
}

.la-terms-agree-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(44, 183, 176, 0.15);
  color: var(--md-teal);
}

.la-terms-agree-icon-svg {
  display: block;
  width: 24px;
  height: 24px;
}

.la-terms-agree-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--md-ink);
  flex: 1;
  min-width: 0;
}

.la-terms-agree-link {
  color: var(--md-teal);
  font-weight: 600;
  text-decoration: none;
}
.la-terms-agree-link:hover {
  text-decoration: underline;
}

.la-terms-agree-error {
  margin: 0 0 16px;
  font-size: 14px;
  color: #c53030;
}

.la-terms-agree-actions {
  margin-top: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-dialog:has(.la-word-cloud-modal-wrap) {
  max-width: 720px;
}

.la-word-cloud-modal-wrap .la-word-cloud-modal-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.la-word-cloud-modal-wrap .la-btn--icon {
  min-width: 32px;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
  color: #2c3e50;
}
.la-word-cloud-modal-wrap .la-btn--icon:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1b2a4a;
}

.la-word-cloud-modal-wrap .la-support-modal-body .la-word-cloud-modal-hint {
  margin: 12px 0 0;
  font-size: 14px;
  color: #374151;
  font-style: italic;
}

.la-word-data-modal-wrap .la-support-modal-body .la-word-data-dl {
  margin: 0 0 16px;
  color: #1b2a4a;
}
.la-word-data-modal-wrap .la-support-modal-body .la-word-data-dl dt {
  font-weight: 600;
  color: #374151;
}
.la-word-data-modal-wrap .la-support-modal-body .la-word-data-dl dd {
  margin-bottom: 12px;
}

.la-word-data-modal-wrap .la-word-data-suggestions {
  margin: 20px 0 0;
}

.la-word-data-modal-wrap .la-word-data-modal-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.la-word-data-modal-wrap .la-word-data-modal-actions .la-btn--ghost {
  background: rgb(188.6842105263, 198.1578947368, 213.3157894737);
  color: #2c3e50;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.la-word-data-modal-wrap .la-word-data-modal-actions .la-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1b2a4a;
}

.la-word-data-modal-wrap .la-word-data-admin {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.la-word-data-modal-wrap .la-word-data-nfc-btn {
  color: #1b2a4a;
}
.la-word-data-modal-wrap .la-word-data-nfc-btn:hover {
  color: #1b2a4a;
}

/* Modern modal rounding — apply to all modal containers */
.modal-dialog,
.modal-dialog > .ember-view,
.modal-content {
  border-radius: 18px !important;
  overflow: hidden;
}

/* Modify Core Word List modal (modern) */
.la-modify-core-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

.modal-dialog:has(.la-modify-core-modal-wrap) {
  width: 720px !important;
  max-width: 90vw;
}

.la-modify-core-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-modify-core-modal-wrap .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.la-modify-core-modal-wrap .la-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.la-modify-core-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--core {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.la-modify-core-modal-body {
  padding: 24px;
}

.la-modify-core-modal-wrap .la-modify-core-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink);
  margin: 0 0 16px;
}

.la-modify-core-modal-wrap .la-modify-core-learn-link {
  color: #147F82;
  font-weight: 600;
  text-decoration: none;
}

.la-modify-core-modal-wrap .la-modify-core-learn-link:hover {
  text-decoration: underline;
}

.la-modify-core-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.la-modify-core-select-wrap {
  flex: 1 1 auto;
  min-width: 200px;
}

.la-modify-core-select {
  width: 100%;
  padding: 8px 32px 8px 14px;
  font-size: 15px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346505F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-modify-core-select:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-modify-core-customize-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-modify-core-customize-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-modify-core-list-area {
  margin: 12px 0 20px;
}

.la-modify-core-textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-modify-core-textarea:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.la-modify-core-modal-wrap .la-modify-core-words-preview {
  max-height: 150px;
  overflow: auto;
  padding: 12px 16px;
  border: 1.5px solid rgba(17, 26, 46, 0.08);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.8);
  font-size: 14px;
  color: var(--md-ink);
}

.la-modify-core-modal-wrap .la-modify-core-word-count {
  text-align: right;
  margin-top: 8px;
  font-size: 14px;
  color: var(--md-muted);
}

.la-modify-core-modal-wrap .la-modify-core-note {
  font-size: 14px;
  color: var(--md-muted);
  margin: 0;
}

.la-modify-core-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--md-line);
}

.la-modify-core-save-btn {
  padding: 10px 28px;
  border-radius: 999px;
  background: #374151;
  border: 1px solid rgba(55, 65, 81, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.la-modify-core-save-btn:hover:not(:disabled) {
  background: #4b5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.la-modify-core-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.la-modify-core-cancel-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 26, 46, 0.15);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.la-modify-core-cancel-btn:hover {
  background: #f3f4f6;
  border-color: rgba(17, 26, 46, 0.25);
}

.la-support-version {
  font-size: 14px;
  color: var(--md-muted);
  font-weight: 400;
}

.la-support-modal-body {
  padding: 24px;
  color: var(--md-ink);
}

.la-support-intro {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--md-ink);
}

.la-support-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.la-support-list__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--md-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.la-support-list__link:hover {
  color: var(--md-teal);
  text-decoration: underline;
}

.la-support-list__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.la-support-list__icon--question {
  filter: hue-rotate(210deg);
}

.la-support-list__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}
.la-support-list__btn:hover {
  text-decoration: none;
}

.la-support-modal-body .la-support-list__btn.la-btn.la-btn--ghost {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--md-line);
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}
.la-support-modal-body .la-support-list__btn.la-btn.la-btn--ghost:hover {
  background: rgba(17, 26, 46, 0.1);
  border-color: rgba(17, 26, 46, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.1);
}
.la-support-modal-body .la-support-list__btn.la-btn.la-btn--ghost:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.08);
}

.la-support-form-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--md-line);
}

.la-support-form-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--md-ink);
  margin: 0 0 16px;
}

.la-support-modal-body .la-contact-form {
  gap: 0;
}

.la-support-modal-body .la-contact-form__row {
  margin-bottom: 8px;
  gap: 2px;
}

.la-support-modal-body .la-contact-form__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.la-support-modal-body .la-contact-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--md-ink);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
  height: auto;
  box-shadow: none;
}
.la-support-modal-body .la-contact-input:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2);
  background: #fff;
}
.la-support-modal-body .la-contact-input::placeholder {
  color: var(--md-muted);
}
.la-support-modal-body .la-contact-input.la-contact-input--textarea {
  min-height: 52px;
  resize: vertical;
}

/* Limit skin tones modal: list and actions (same style as support modal) */
.la-support-modal-body .la-contact-form__actions {
  margin-top: 8px;
  gap: 12px;
  justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
}

.la-support-modal-body .la-contact-form__actions .la-btn {
  padding: 5.44px 20.4px; /* height 20% smaller (6.8px × 0.8), horizontal unchanged */
}

/* Send Message in support modal */
.la-support-modal-body .la-contact-form__actions .la-btn--primary {
  background: #46505F;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.la-support-modal-body .la-contact-form__actions .la-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  color: #fff;
}
.la-support-modal-body .la-contact-form__actions .la-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.la-support-modal-body .la-contact-form__actions .la-btn--ghost {
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
  border: 1px solid var(--md-line);
  transition: background 0.22s ease-in-out, border-color 0.22s ease-in-out, color 0.22s ease-in-out, transform 0.22s ease-in-out, box-shadow 0.22s ease-in-out;
  /* Same hover effect as Send Message (primary) */
}
.la-support-modal-body .la-contact-form__actions .la-btn--ghost:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.28), rgba(91, 141, 239, 0.24));
  border-color: rgba(44, 183, 176, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(44, 183, 176, 0.25), 0 2px 6px rgba(17, 26, 46, 0.08);
  color: var(--md-ink);
  text-decoration: none;
}
.la-support-modal-body .la-contact-form__actions .la-btn--ghost:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(44, 183, 176, 0.15);
}

.la-support-modal-body .la-contact-form__actions .login-btn {
  display: inline-block;
  width: auto;
  font-size: 14px;
}

.la-support-form-error {
  font-size: 14px;
  color: #c53030;
  margin: 0 0 8px;
}

.la-support-cookies {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 42, 74, 0.08);
  font-size: 17.5px; /* 14px × 1.25 */
  color: var(--md-muted);
  text-align: center;
}

.la-support-cookies__btn {
  display: inline-flex;
  align-items: center;
  gap: 15px; /* 12px × 1.25 */
  padding: 12px 25px; /* ~25% larger */
  border-radius: 12px;
  border: 1px solid rgba(27, 42, 74, 0.1);
  background: #fff;
  color: #1b2a4a;
  font-size: 18.75px; /* 15px × 1.25 */
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.la-support-cookies__btn:hover {
  background: #f8fafc;
  border-color: rgba(63, 127, 123, 0.2);
  color: #1b2a4a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.la-support-cookies__btn:active {
  background: #f1f5f9;
  border-color: rgba(63, 127, 123, 0.25);
}

.la-support-cookies__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px; /* 36px × 1.25 */
  height: 45px;
  border-radius: 10px;
  font-size: 22.5px; /* 18px × 1.25 */
  line-height: 1;
  background: linear-gradient(180deg, rgba(27, 42, 74, 0.06), rgba(27, 42, 74, 0.03));
  border: 1px solid rgba(27, 42, 74, 0.06);
}
.la-support-cookies__icon--off {
  position: relative;
  opacity: 0.7;
}
.la-support-cookies__icon--off::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 1.5px;
  background: rgba(27, 42, 74, 0.35);
  transform: translate(-50%, -50%) rotate(-35deg);
  pointer-events: none;
}

@media (max-height: 1279px) {
  .modal:has(.la-features-modal-wrap),
  .modal:has(.la-support-modal-wrap),
  .modal:has(.la-speak-mode-intro-modal-wrap),
  .modal:has(.la-cloud-extras-modal-wrap),
  .modal:has(.la-terms-agree-modal-wrap),
  .modal:has(.la-new-board-modal-wrap) {
    overflow-y: auto;
  }
  .modal-dialog:has(.la-features-modal-wrap),
  .modal-dialog:has(.la-support-modal-wrap),
  .modal-dialog:has(.la-speak-mode-intro-modal-wrap),
  .modal-dialog:has(.la-cloud-extras-modal-wrap),
  .modal-dialog:has(.la-terms-agree-modal-wrap),
  .modal-dialog:has(.la-new-board-modal-wrap) {
    margin: 30px auto;
  }
  .modal-dialog:has(.la-choose-locale-modal-wrap) {
    margin-top: 10rem;
  }
}
@media (min-width: 1280px) {
  .la-wrapper .la-main {
    padding-left: calc(20px + 5rem);
    padding-right: calc(20px + 5rem);
  }
  .md-workspace {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}
@media (max-width: 1200px) {
  .la-wrapper .la-main {
    width: 100%;
    max-width: 100%;
  }
  .la-hero-card-inner {
    grid-template-columns: 1fr;
    padding: 0;
    justify-items: center;
  }
  .la-hero-card {
    text-align: center;
  }
  .la-hero-text {
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
    width: 100%;
  }
  .la-hero-headline-and-badges {
    width: auto;
    justify-items: center;
  }
  .la-hero-headline-and-badges .la-hero-headline {
    width: auto;
  }
  .la-hero-subtitle-badges-wrap {
    width: auto;
    align-items: center;
  }
  .la-wrapper .la-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .la-hero-badges-section {
    margin-left: auto;
    margin-right: auto;
  }
  .la-hero-badges {
    justify-content: center;
  }
  .la-hero-actions {
    justify-content: center;
  }
  .la-hero-headline .la-hero-title-wrap {
    margin-left: auto;
    margin-right: auto;
  }
  .la-hero-mockup-wrap {
    justify-content: center;
    width: 100%;
    max-width: min(450px, 100%); /* 10% smaller than previous 500px cap */
    margin: calc(40px - 3rem) auto 0;
    box-sizing: border-box;
  }
  .la-hero-mockup-wrap .la-mockup {
    width: 100%;
    max-width: min(450px, 100%);
  }
  .la-mockup {
    margin-top: 20px;
  }
}
@media (max-width: 1024px) {
  .la-wrapper .la-main {
    padding: 20px calc(20px + 5rem);
    padding-bottom: 0;
    gap: 20px;
  }
  .la-topbar {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
  }
  .la-topbar-nav {
    display: none;
  }
  .la-topbar-hamburger {
    display: flex;
  }
  .la-topbar-right {
    margin-left: auto;
  }
  .header--unauthenticated #identity {
    display: none;
  }
  .header--unauthenticated #nav_header {
    width: 100%;
    min-width: min-content;
    flex-shrink: 0;
  }
  .header--unauthenticated .nav-header__brand {
    flex-shrink: 0 !important;
  }
  /* Hide desktop nav items except search and help */
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--desktop .dropdown,
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__upgrade-nav,
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--desktop .ll-bento-upgrade-btn--nav,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop .dropdown,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__upgrade-nav,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop .ll-bento-upgrade-btn--nav,
  .app-navbar .app-navbar-auth-nav--desktop .dropdown,
  .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__upgrade-nav,
  .app-navbar .app-navbar-auth-nav--desktop .ll-bento-upgrade-btn--nav {
    display: none !important;
  }
  /* Keep desktop nav visible for search + help, reflow as row */
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--desktop,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop,
  .app-navbar .app-navbar-auth-nav--desktop {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .app-navbar .ll-bento-help-btn--support,
  #inner_header .ll-bento-help-btn--support {
    margin: 0 2px !important;
    padding: 4px !important;
  }
  .app-navbar #header_search .header-search-btn,
  #inner_header #header_search .header-search-btn {
    margin: 0 !important;
    padding: 4px !important;
  }
  /* Group brand left, search+help+hamburger right */
  .app-navbar .app-navbar-authenticated-inner,
  #inner_header .app-navbar .app-navbar-authenticated-inner,
  #inner_header .app-navbar .app-navbar__inner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
  }
  .app-navbar .app-navbar__nav-header,
  #inner_header .app-navbar .app-navbar__nav-header {
    display: contents !important;
  }
  .app-navbar .app-navbar__nav-header h1,
  #inner_header .app-navbar .app-navbar__nav-header h1 {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* …EXCEPT on dashboard / empty-header pages (where the Take-a-Tour +
     Dashboard-Design discs live): don't grow the brand — keep it content-width
     so the discs tuck in just to its right (left-aligned) instead of the brand's
     flex:1 pushing them to the far edge onto the identity menu. `:has()` scopes
     this to headers that actually carry the discs; the `#inner_header` variant
     gives it the ID specificity needed to beat the grow rule above. */
  .app-navbar .app-navbar__nav-header:has(.app-navbar__home-actions) h1.app-navbar__brand,
  #inner_header .app-navbar .app-navbar__nav-header:has(.app-navbar__home-actions) h1.app-navbar__brand {
    flex: 0 0 auto !important;
    order: -2 !important;
  }
  /* Fixed position: search + help + hamburger top-right */
  .app-navbar .app-navbar-auth-nav--mobile,
  #inner_header .app-navbar .app-navbar-auth-nav--mobile {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .app-navbar #header_search,
  #inner_header #header_search {
    position: fixed !important;
    top: 18px !important;
    right: 100px !important;
    z-index: 1100 !important;
    margin: 0 !important;
  }
  .app-navbar #header_search .header-search-icon,
  #inner_header #header_search .header-search-icon {
    width: 22.5px !important;
    height: 22.5px !important;
  }
  .app-navbar .app-navbar-auth-nav--desktop .ll-bento-help-btn--support,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop .ll-bento-help-btn--support {
    position: fixed !important;
    top: 16px !important;
    right: 64px !important;
    z-index: 1100 !important;
    margin: 0 !important;
    padding: 4px !important;
  }
  /* Keep the brand (h1), the search field, AND the home-actions discs (Take a
     Tour + Dashboard Design) visible at <=1024px — only those discs are the
     dashboard's guided-tour / display-style entry points, and they're meant to
     stay in the navbar at every width (see the .app-navbar__home-actions ≤1024
     block above). Excluding them here is what makes that intent win the cascade;
     the `:not(#header_search)` id-specificity otherwise defeats a class-only
     visibility rule. */
  .header-index-with-dark-toggle .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions),
  #inner_header .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions),
  .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions) {
    display: none !important;
  }
  /* Search icon only (hide input) on small screens */
  .app-navbar #header_search .header-search-input,
  #inner_header #header_search .header-search-input {
    display: none !important;
  }
  .app-navbar #header_search .header-search-wrap,
  #inner_header #header_search .header-search-wrap {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
  }
  .app-navbar #header_search,
  #inner_header #header_search {
    display: block !important;
    margin: 0 !important;
  }
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--mobile,
  #inner_header .app-navbar .app-navbar-auth-nav--mobile,
  .app-navbar .app-navbar-auth-nav--mobile {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
  }
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--mobile .la-topbar-hamburger,
  #inner_header .app-navbar .app-navbar-auth-nav--mobile .la-topbar-hamburger,
  .app-navbar .app-navbar-auth-nav--mobile .la-topbar-hamburger {
    display: flex !important;
  }
  .header-index-with-dark-toggle .la-topbar-hamburger,
  #inner_header .la-topbar-hamburger,
  .app-navbar-auth-nav--mobile .la-topbar-hamburger {
    background: transparent !important;
    border: none !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 4px 0 0 !important;
  }
  .header-index-with-dark-toggle .la-topbar-hamburger__bar,
  #inner_header .la-topbar-hamburger__bar,
  .app-navbar-auth-nav--mobile .la-topbar-hamburger__bar {
    background: #374151 !important;
    border-radius: 2px !important;
    height: 2px !important;
    width: 20px !important;
  }
  .header-index-with-dark-toggle .la-topbar-hamburger__bar:nth-child(3),
  #inner_header .la-topbar-hamburger__bar:nth-child(3),
  .app-navbar-auth-nav--mobile .la-topbar-hamburger__bar:nth-child(3) {
    display: none !important;
  }
  .header--unauthenticated .la-topbar-cta {
    display: none !important;
  }
  .la-hero-card-inner {
    padding: 0;
  }
  .la-hero-mockup-wrap {
    max-width: min(562px, 100%); /* 10% smaller (was 625px) */
  }
  .la-hero-mockup-wrap .la-mockup {
    width: 100%;
    max-width: min(562px, 100%);
  }
  .la-stats-strip {
    gap: 16px 20px;
  }
  .la-stat-cell {
    flex: 1 1 calc(50% - 20px);
    max-width: none;
  }
  .la-section {
    padding: 16px 16px 24px;
  }
  .la-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .la-footer-col:nth-child(2),
  .la-footer-col:nth-child(4) {
    padding-left: 5rem;
  }
  .la-plan-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .la-cta-section {
    padding: 48px 24px;
  }
  .la-testimonial-display-text {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .header--unauthenticated h1 .nav-header__logo img {
    height: 60px !important;
  }
  .header--unauthenticated h1 .nav-header__app-name {
    font-size: 25px !important;
  }
  .la-hero-mockup-wrap {
    max-width: min(703px, 100%); /* 10% smaller (was 781px) */
  }
  .la-hero-mockup-wrap .la-mockup {
    width: 100%;
    max-width: min(703px, 100%);
  }
  .la-wrapper .la-main {
    width: 100%;
    max-width: 100%;
    padding: 16px calc(16px + 5rem);
    padding-bottom: 0;
    gap: 16px;
  }
  .la-hero-card-inner {
    padding: 0;
  }
  .la-hero-card {
    border-radius: 14px;
  }
  .la-about-glass-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .la-about-glass-card {
    padding: 20px 16px;
  }
  .la-about-glass-card__title {
    font-size: 18px;
  }
  .la-wrapper.la-wrapper--about .la-about-glass-card__title,
  .la-wrapper.la-wrapper--pricing .la-about-glass-card__title {
    font-size: 21px;
  }
  .la-about-glass-card__text {
    font-size: 15px;
  }
  .la-wrapper.la-wrapper--about .la-about-glass-card__text,
  .la-wrapper.la-wrapper--pricing .la-about-glass-card__text {
    font-size: 17px;
  }
  .la-wrapper .la-section-title {
    font-size: 26px;
  }
  .la-section-subtitle {
    font-size: 15px;
  }
  .la-footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .la-footer-col:nth-child(2),
  .la-footer-col:nth-child(4) {
    padding-left: 0;
  }
  .la-footer-bottom {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .la-plan-grid {
    grid-template-columns: 1fr;
  }
  .la-plan-section,
  .la-slp-spotlight,
  .la-devices-spotlight {
    padding: 32px 20px;
  }
  .la-a11y-statement {
    padding: 24px 20px;
  }
  .la-testimonial-section {
    padding: 32px 20px 40px;
  }
  .la-testimonial-display-text,
  .la-a11y-display-text {
    font-size: 20px;
  }
  .la-cta-section {
    padding: 40px 20px;
  }
}
@media (max-width: 640px) {
  .header--unauthenticated h1 .nav-header__logo img {
    height: 60px !important;
  }
  .header--unauthenticated h1 .nav-header__app-name {
    font-size: 25px !important;
  }
  .header--unauthenticated .nav-header__brand {
    gap: 4px !important;
  }
  .la-hero-mockup-wrap {
    width: 100% !important;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .la-hero-mockup-wrap .la-mockup {
    width: 100%;
    max-width: 100%;
  }
  .la-topbar {
    padding: 12px;
  }
  .la-topbar-compare-link {
    display: none;
  }
  .la-font-toggles {
    display: none;
  }
  .la-wrapper .la-main {
    padding: 12px 12px;
    padding-bottom: 0;
    gap: 12px;
  }
  .la-hero-card-inner {
    padding: 0;
  }
  .la-hero-badges {
    flex-direction: column;
    gap: 8px;
  }
  .la-hero-actions {
    flex-direction: column;
  }
  .la-hero-actions .la-btn {
    width: 100%;
  }
  .la-mockup {
    max-width: 100%;
  }
  .la-stat-cell {
    flex: 1 1 100%;
    max-width: none;
  }
  .la-section {
    padding: 12px;
    gap: 20px;
  }
  .la-wrapper .la-section-title {
    font-size: 22px;
  }
  .la-a11y-statement {
    padding: 20px 16px;
  }
  .la-testimonial-section {
    padding: 24px 16px 32px;
  }
  .la-testimonial-display-text,
  .la-a11y-display-text {
    font-size: 18px;
  }
  .la-cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  .la-cta-buttons .la-btn {
    width: 100%;
  }
  .la-cta-section {
    padding: 32px 16px;
    border-radius: 14px;
  }
  .la-plan-section,
  .la-slp-spotlight,
  .la-devices-spotlight {
    padding: 24px 16px;
  }
  .la-wrapper .la-plan-title {
    font-size: 24px;
  }
  #la-features .la-section-header .la-section-title {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  /* CTA section: content 15% smaller; headline matches "Built for how..." (24px at 480px) */
  .la-cta-section .la-cta-inner {
    font-size: 14px; /* WCAG minimum; was 85% (resolved sub-14px on 14px parent) */
  }
  .la-cta-section .la-cta-headline {
    font-size: 24px;
  }
}
@media (max-width: 460px) {
  .la-wrapper .la-main {
    padding-left: 2px;
    padding-right: 2px;
  }
  .la-wrapper #la-cta.la-cta-section {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* About page open-source (aka .la-a11y-statement) section — 60% width.
     Match base rule's specificity (la-wrapper.la-wrapper--about .la-a11y-statement)
     and override max-width which would otherwise cap it at 37.5%. */
  .la-wrapper.la-wrapper--about .la-a11y-statement {
    width: 60%;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== Modern Register Page (matches login: same gradient + orbs + card, compact layout) ===== */
/* Register – same bg as modern-dashboard */
.register-page-bg {
  /* Transparent content-alignment box ONLY. The gradient/blobs mesh lives on
     the full-viewport #within_ember (see the
     `:has(.page-footer):has(.register-page-bg)` rule) so it fills the ENTIRE
     page height behind the scrolling #content — no seam, no short bg — and
     the same mesh is shared with the login page. Mirrors .login-page-bg.

     Two things were removed here, both of which broke the layout:
     - `background: <gradient>` — moved to #within_ember (above). On this box
       it only painted as far down as the box reached, so the card spilled
       onto a bare white strip below it.
     - `min-height: 100vh` — as a flex child of the shorter #content
       scrollport it pinned this box to the viewport floor while taller forms
       (the Google-signup consent block) overflowed past it. With no
       min-height the box sizes to its content and #content scrolls. */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 16px 2rem;
  overflow: visible;
}

.register-page-bg .la-bg-orbs {
  display: none;
  z-index: 0;
}

.register-page {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}

.register-step-copy {
  margin: 0 0 18px;
  color: #4f5c6f;
  font-size: 16px;
  line-height: 1.45;
}

.register-role-heading {
  margin: 0 0 18px;
  color: #1B365D;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.register-role-options {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.register-choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(58, 107, 199, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 246, 255, 0.9) 100%);
  color: #3A6BC7;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(27, 54, 93, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.register-choice-card:hover, .register-choice-card:focus-visible {
  border-color: rgba(58, 107, 199, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 4px 14px rgba(27, 54, 93, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.register-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.register-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3A6BC7;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.register-back-link:hover, .register-back-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Supporter sub-type buttons — revealed under the role dropdown when
   "Supporter" is selected. Modern glassy pill buttons (2 per row), with a
   brand-smart-blue active state for the chosen type. */
.register-supporter-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.register-supporter-types--large {
  margin-bottom: 16px;
}

.register-supporter-type {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 244, 248, 0.92) 100%);
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(27, 54, 93, 0.08);
}

.register-supporter-type:hover {
  border-color: rgba(58, 107, 199, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(27, 54, 93, 0.12);
  transform: translateY(-1px);
}

.register-supporter-type--active {
  background: linear-gradient(180deg, rgba(58, 107, 199, 0.16) 0%, rgba(58, 107, 199, 0.08) 100%);
  border-color: #3A6BC7;
  color: #3A6BC7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(58, 107, 199, 0.18);
}

.register-footer-link {
  margin: 18px 0 0;
  color: #111A2E;
  font-size: 15px;
  text-align: center;
}
.register-footer-link a {
  color: #3A6BC7;
  font-weight: 700;
  text-decoration: underline;
}

.register-help-text {
  margin: 8px 0 12px;
  color: #5a6578;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.register-card {
  margin-top: 24px;
  background: radial-gradient(ellipse 50% 60% at 15% 20%, rgba(78, 205, 196, 0.07) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 85% 70%, rgba(58, 107, 199, 0.05) 0%, transparent 70%), rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 20px 24px 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(20, 127, 130, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07), 0 24px 48px -12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: visible;
  /* Auth header/divider: match about page design */
}
.register-card .la-section-header {
  text-align: center;
  max-width: 100%;
  margin-bottom: 20px;
}
.register-card .la-hero-title-wrap {
  margin-bottom: 0;
}
.register-card .la-hero-title {
  font-family: "Maitree", serif;
  font-size: 24px;
  font-weight: normal;
  color: #1b2a4a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
@media (max-width: 480px) {
  .register-card .la-hero-title {
    font-size: 22px;
  }
}
.register-card {
  /* Match prefix/suffix size to gradient (same as login-card) */
}
.register-card .la-hero-title__prefix {
  font-size: 1.155em;
}
.register-card .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 20px;
}
.register-card .register-subtitle {
  text-align: center;
  color: #5a6578;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 20px;
}
.register-card .form-group {
  margin-bottom: 14px;
}
.register-card .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.register-card .form-group {
  /* Field backgrounds match .login-card .form-control */
}
.register-card .form-group .form-control {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 14px;
  font-size: 15px;
  color: #1b2a4a;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
  height: auto;
}
.register-card .form-group .form-control:focus-visible {
  border-color: #3A6BC7;
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.12);
  background: #fff;
}
.register-card .form-group .form-control::placeholder {
  color: #a0a8b8;
}
.register-card .form-group .form-control:-webkit-autofill, .register-card .form-group .form-control:-webkit-autofill:hover, .register-card .form-group .form-control:-webkit-autofill:focus-visible, .register-card .form-group .form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.9) inset;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.9) inset;
}
.register-card .form-group select.form-control {
  appearance: none;
  background: rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c95a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 8px 32px 8px 12px;
  line-height: 1.3;
  height: auto;
}
.register-card .form-group .text-danger {
  display: block;
  font-size: 14px;
  margin-top: 4px;
  color: #d9534f;
}
.register-card .register-start-code-link {
  font-size: 14px;
  color: #3A6BC7;
  text-decoration: none;
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.register-card .register-start-code-link:hover {
  text-decoration: underline;
}
.register-card .register-start-code-link.register-start-code-link--spaced {
  margin-bottom: 16px;
}

.register-invite {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f4f6fa;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(27, 54, 93, 0.06);
}
.register-invite .register-invite-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.register-invite .register-invite-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.register-invite .register-invite-icon .glyphicon {
  font-size: 22px;
  color: #8c95a6;
}
.register-invite .register-invite-info {
  flex: 1;
  min-width: 0;
}
.register-invite .register-invite-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
}
.register-invite .register-invite-info p {
  margin: 0;
  font-size: 14px;
  color: #5a6578;
  line-height: 1.4;
}

.register-checkboxes {
  margin-bottom: 16px;
  /* Modern checkbox styling — filled $brand-slate-blue background
     with a white tick when checked (light mode). 18×18 box, hairline
     border at rest, switches to slate-blue fill on :checked. The
     input is absolute-positioned at the wrapper's top-left with a
     matching `padding-left` on the wrapper so multi-line label text
     (incl. inline `<a>` links) wraps as one block aligned to the
     right of the box — NOT broken into flex columns. Selector
     specificity beats the global .big_checkbox rule above; no
     !important needed. */
}
.register-checkboxes .big_checkbox {
  position: relative;
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 28px;
  padding-top: 0;
  /* `.big_checkbox__consent` is the non-<label> consent text span used by
     the signup Terms+Privacy checkboxes (see register.hbs); it shares the
     label typography so the markup change to satisfy no-nested-interactive
     is visually identical. */
}
.register-checkboxes .big_checkbox label,
.register-checkboxes .big_checkbox .big_checkbox__consent {
  display: block;
  font-weight: normal;
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  line-height: 1.5;
  cursor: pointer;
  padding-left: 0;
  margin: 0;
}
.register-checkboxes .big_checkbox label a,
.register-checkboxes .big_checkbox .big_checkbox__consent a {
  color: #3A6BC7;
  text-decoration: underline;
}
.register-checkboxes .big_checkbox input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  border: 1.5px solid rgba(90, 106, 133, 0.4);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.register-checkboxes .big_checkbox input[type=checkbox]:hover {
  border-color: #5A6A85;
}
.register-checkboxes .big_checkbox input[type=checkbox]:checked {
  background: #5A6A85;
  border-color: #5A6A85;
}
.register-checkboxes .big_checkbox input[type=checkbox]:checked::after {
  position: absolute;
  content: "";
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.register-checkboxes .register-checkboxes__error {
  display: block;
  margin: 4px 0 0 28px;
  font-size: 13px;
  line-height: 1.4;
}

/* Center Sign Up button in its wrap */
.register-btn-wrap {
  text-align: center;
}

/* Sign Up button — same bg as identity Sign In dropdown on landing-alt */
.register-btn {
  display: inline-block;
  width: auto;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  background: #374151;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.register-btn.register-btn--wide {
  width: 100%;
}
.register-btn:hover:not(:disabled):not(.register-btn--disabled) {
  background: rgb(71.5, 84.5, 105.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.register-btn:active:not(:disabled):not(.register-btn--disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.register-btn:disabled, .register-btn.register-btn--disabled {
  background: #a0a8b8;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.register-btn {
  /* "Continue with Google" button on the register page — follows
     the same Google Identity Branding Guidelines as the login-form
     equivalent above. See that block (.login-btn--google) for full
     rationale. The chrome here is identical; the only difference
     is the .register-btn-* class scope and a small margin-bottom
     to space it from the OR divider underneath. */
}
.register-btn.register-btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #dadce0;
  color: #3c4043;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  /* Resting elevation — same subtle 2-layer shadow as the login
     variant so the button reads as raised off the page. */
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 2px 6px rgba(60, 64, 67, 0.08);
  cursor: pointer;
  transition: background-color 0.218s, box-shadow 0.218s, border-color 0.218s, transform 0.15s ease;
  text-transform: none;
}
.register-btn.register-btn--google:hover:not(:disabled):not(.register-btn--disabled) {
  background: #f8f9fa;
  /* Hold the dark Google-brand label color; the base .register-btn:hover
     sets color:#fff, which would otherwise bleed through here. */
  color: #3c4043;
  border-color: #d2e3fc;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 4px 12px rgba(60, 64, 67, 0.18);
  transform: translateY(-1px);
}
.register-btn.register-btn--google:active:not(:disabled):not(.register-btn--disabled) {
  background: #f1f3f4;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3);
}
.register-btn.register-btn--google:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3), 0 1px 2px rgba(60, 64, 67, 0.3);
}
.register-btn.register-btn--google:disabled, .register-btn.register-btn--google.register-btn--disabled {
  background: #ffffff;
  border-color: rgba(60, 64, 67, 0.12);
  color: rgba(60, 64, 67, 0.38);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

.register-btn--google__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.register-btn--google__label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.login-google-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: #6b7280;
  font-size: 14px;
}
.login-google-divider::before, .login-google-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.google-link-picker {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.google-link-picker legend {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.google-link-picker__option {
  margin-bottom: 0.5rem;
}

.google-link-picker__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 2px solid #dadce0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.05rem;
}
.google-link-picker__label input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.google-link-picker__label--readonly {
  cursor: default;
  background: #f8f9fa;
  border-color: #c8ccd0;
}

.google-link-found-accounts__lead {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.google-link-picker__username {
  font-weight: 700;
}

.google-link-picker__display-name {
  color: #4b5563;
}

.google-link-context,
.google-link-account {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.google-link-account {
  font-weight: 600;
}

.register-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #f8d7d7;
  border-radius: 10px;
  color: #C0392B;
  font-size: 14px;
  line-height: 1.4;
}

/* Search page: top spacing below header; flex-fills the outlet so bg covers full viewport on short screens */
.search-page {
  margin-top: 5rem;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Search page: same layout/board styles as boards page; search-specific header and form */
.ub-search-page .ub-search-page__header .la-hero-title {
  font-size: 28px;
}
@media (max-width: 768px) {
  .ub-search-page .ub-search-page__header .la-hero-title {
    font-size: 22px;
  }
}
.ub-search-page .ub-search-page__header {
  /* Same gradient text as landing-alt "actually" (.la-section-title em) */
}
.ub-search-page .ub-search-page__header .ub-search-page__title-boards {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
  padding-left: 0.25em;
  font-size: 28px;
}
.ub-search-page .ub-search-page__header {
  /* "(Page-Sets & Vocabularies)" qualifier in the hero — same gradient
     style as "Boards" but 10px smaller so it reads as a subtitle. */
}
.ub-search-page .ub-search-page__header .ub-search-page__title-boards.ub-search-page__title-boards--note {
  font-size: 22px;
}
.ub-search-page .ub-search-page__header .la-about-hero-separator {
  margin-bottom: 1.25rem;
}
.ub-search-page .ub-search-page__form-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
}
.ub-search-page .ub-search-page__form {
  margin-top: 0.5rem;
}
.ub-search-page .ub-search-page__form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 14px;
  margin-bottom: 8px;
}
.ub-search-page .ub-search-page__label {
  font-size: 14px;
  font-weight: 500;
  color: #5A6A85;
  margin: 0;
  flex: 0 0 auto;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ub-search-page .ub-search-page__input {
  flex: 1 1 200px;
  min-width: 160px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  font-size: 1.495rem;
  line-height: 1.2;
  background: rgba(246, 247, 250, 0.9);
}
.ub-search-page .ub-search-page__input::placeholder {
  color: #8a9ab8;
  font-size: inherit;
}
.ub-search-page .ub-search-page__input:focus-visible {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.ub-search-page {
  /* Find-a-board combobox (search-board-jump) — replaces the old
     .ub-search-page__input. The component root takes the input's flex
     slot and anchors the floating panel; the trigger mimics the field's
     look so the header reads unchanged when collapsed. */
}
.ub-search-page .ub-search-jump {
  flex: 1 1 200px;
  min-width: 160px;
  position: relative;
  display: flex;
}
.ub-search-page .ub-search-jump__trigger {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  background: rgba(246, 247, 250, 0.9);
  font-size: 1.495rem;
  line-height: 1.2;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ub-search-page .ub-search-jump__trigger:hover {
  border-color: rgba(17, 26, 46, 0.2);
}
.ub-search-page .ub-search-jump__trigger:focus-visible, .ub-search-page .ub-search-jump__trigger.ub-search-jump__trigger--open {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
  background: #fff;
}
.ub-search-page .ub-search-jump__trigger-icon {
  flex-shrink: 0;
  color: rgba(17, 26, 46, 0.55);
}
.ub-search-page .ub-search-jump__trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ub-search-page .ub-search-jump__trigger--placeholder .ub-search-jump__trigger-label {
  color: #8a9ab8;
}
.ub-search-page .ub-search-jump__trigger-chevron {
  flex-shrink: 0;
  color: rgba(17, 26, 46, 0.45);
  transition: transform 0.15s ease;
}
.ub-search-page .ub-search-jump__trigger-chevron--open {
  transform: rotate(180deg);
}
.ub-search-page {
  /* Floating panel — anchored under the trigger, overlays the results.
     z-index sits below the topbar (400) per docs/styling-recurring-problems
     §2. Interior reuses the .md-board-collection markup; cap the height and
     let .md-board-collection__body scroll inside. */
}
.ub-search-page .ub-search-jump__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 280px;
  max-height: min(60vh, 460px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(17, 26, 46, 0.1), 0 18px 48px rgba(17, 26, 46, 0.14);
  overflow: hidden;
  z-index: 150;
}
.ub-search-page .ub-search-jump__panel .md-board-collection {
  flex: 1 1 auto;
  min-height: 0;
}
.ub-search-page .ub-search-jump__panel {
  /* The shared search pill carries a top margin meant to separate it
     from the panel title in speak mode; this panel has no title, so
     collapse it. */
}
.ub-search-page .ub-search-jump__panel .md-board-collection__search {
  margin-top: 0;
}
.ub-search-page .ub-search-page__locale-wrap {
  flex: 0 0 auto;
  width: 175px;
  display: flex;
  align-items: stretch;
  position: relative;
}
.ub-search-page .ub-search-page__locale-wrap .ub-search-page__locale-select {
  width: 100%;
  display: flex;
  align-items: stretch;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select {
  width: 100%;
  position: relative;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__trigger {
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 32px 0 12px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  font-size: 1.365rem;
  line-height: 1.2;
  background: rgba(246, 247, 250, 0.9);
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  /* caret indicator */
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17, 26, 46, 0.55);
  border-bottom: 2px solid rgba(17, 26, 46, 0.55);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__trigger:hover {
  border-color: rgba(17, 26, 46, 0.22);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__trigger:focus-visible {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__trigger-text {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select--open .modern-select__trigger {
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select--open .modern-select__trigger::after {
  transform: translateY(-30%) rotate(-135deg);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(17, 26, 46, 0.14), 0 2px 6px rgba(17, 26, 46, 0.08);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__option {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #111A2E;
  cursor: pointer;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__option:hover {
  background: rgba(20, 127, 130, 0.08);
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__option--selected {
  background: rgba(20, 127, 130, 0.14);
  color: #147F82;
  font-weight: 600;
}
.ub-search-page .ub-search-page__locale-wrap .modern-select__option--selected:hover {
  background: rgba(20, 127, 130, 0.2);
}
.ub-search-page .ub-search-page__go {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ub-search-page .ub-search-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
}
.ub-search-page .ub-search-page__link {
  color: #147F82;
  font-weight: 500;
  text-decoration: none;
}
.ub-search-page .ub-search-page__link:hover {
  text-decoration: underline;
}
.ub-search-page .ub-search-page__sep {
  color: #8a9ab8;
  font-weight: 300;
}
.ub-search-page .ub-search-page__see-all {
  white-space: nowrap;
}
.ub-search-page {
  /* No-results message: 60% larger than .ub-boards-page__loading (0.92rem) */
}
.ub-search-page .ub-search-page__none-found {
  font-size: 1.472rem;
  line-height: 1.45;
  color: #5A6A85;
  font-weight: 500;
  margin: 4px 0 0;
}
.ub-search-page {
  /* Online / Local / My Boards: tighter cards, clear gap between sections */
}
.ub-search-page .ub-boards-page__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ub-search-page .ub-boards-page__boards-section {
  padding: 14px 18px 16px;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ub-search-page .ub-boards-page__boards-header {
  margin-bottom: 8px;
}
.ub-search-page .ub-boards-page__boards-title {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}
.ub-search-page {
  /* "(Page-Sets & Vocabularies)" qualifier after the Boards heading —
     verdigris brand accent (AA-safe variant for legibility on the
     light page surface), sized down so it reads as a subordinate note
     rather than competing with the heading. */
}
.ub-search-page .ub-search-page__boards-title-note {
  color: #1A7B7A;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0;
}
.ub-search-page {
  /* Brand groups within the Boards results (CommuniKate, Quick Core,
     Vocal Flair, …). Each group gets a labeled sub-heading above its own
     grid so the listing reads as separated-by-type. */
}
.ub-search-page .ub-search-page__board-group {
  width: 100%;
  margin-bottom: 1.75rem;
}
.ub-search-page .ub-search-page__board-group:last-child {
  margin-bottom: 0;
}
.ub-search-page .ub-search-page__board-group-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1B365D;
  margin: 0 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
}

/* Search page: flex wrap, full-width row — ~3×280px + gaps on desktop; wraps on smaller viewports */
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 1rem 1.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-anchor: none;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .ub-boards-page__board-item.simple_board_holder,
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .simple_board_holder {
  flex: 0 0 280px;
  width: 280px;
  max-width: min(280px, 100%);
  min-width: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* Column + stretch: board-icon sits in an ember-view wrapper; row+center left that
     wrapper shrink-to-fit, so width:100% on .btn never resolved to 280px */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .ub-boards-page__board-item.simple_board_holder > .ember-view,
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .ub-boards-page__board-item.simple_board_holder > *,
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .simple_board_holder > .ember-view,
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .simple_board_holder > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  position: relative;
  border-radius: 28px !important;
  border: 1px solid rgba(76, 134, 216, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.82)) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 20px rgba(27, 54, 93, 0.06) !important;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, rgba(42, 157, 143, 0.5) 28%, rgba(76, 134, 216, 0.5) 72%, rgba(76, 134, 216, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 134, 216, 0.16) !important;
  box-shadow: 0 24px 48px rgba(27, 54, 93, 0.14), 0 12px 24px rgba(42, 157, 143, 0.1) !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* Contained logo tile — soft rounded glass surface, faint inner glow,
     gentle elevation. width:auto + max-width centers + contains it even
     where the surface forces width:100%. */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon img {
  width: auto !important;
  max-width: 72% !important;
  height: 104px !important;
  object-fit: contain;
  object-position: center;
  margin: 2px auto 14px !important;
  padding: 11px !important;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(240, 245, 252, 0.7));
  border: 1px solid rgba(76, 134, 216, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(27, 54, 93, 0.07);
  box-sizing: border-box;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* LingoLinq default/fallback board icon: keep the tile/card (bg, border,
     radius, shadow inherited from `& img` above) but expand the image out
     to the tile's borders — zero the inner padding and fill so the logo
     uses the full tile instead of sitting inset. Vocab-icon boards keep
     the padded contained tile. */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon img[src*=lingolinq-board-icon] {
  padding: 0 !important;
  object-fit: cover !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* Typography — also sets the compact spacing/layout (centered, clamped
     title; tight inline `by name`) so EVERY surface reads the same as the
     board_category page, not just the colors. Font sizes carry a 12px
     floor via max() so card text never renders below 12px (e.g. if a root
     font-size shrink scales the rem values down). The title is pinned to
     14px (1.4rem at the 10px root) per design. */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .name {
  width: 100% !important;
  font-size: max(14px, 1.4rem) !important;
  font-weight: 700 !important;
  color: #1B365D !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__credit {
  font-size: max(12px, 0.85rem) !important;
  opacity: 0.72;
  text-align: center !important;
  margin: 0 0 2px !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .author {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Small breathing room after the `by …` line (the language pill /
     PREVIEW footer supply the rest of the rhythm). */
  margin: 0 0 6px !important;
  padding: 0 2px !important;
  max-width: 100% !important;
  font-size: max(12px, 0.9rem) !important;
  color: rgba(27, 54, 93, 0.72) !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.55) !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .author__username, .ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .author__username--long {
  color: rgba(27, 54, 93, 0.72) !important;
  font-weight: 600 !important;
  font-size: max(12px, 0.9rem) !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* Size chip — soft navy-gray glass (was a utility sticker). */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__info {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__info-icon, .ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__info-size {
  color: rgba(27, 54, 93, 0.6) !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* Language pill — soft verdigris glass. */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__lang-marker {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(42, 157, 143, 0.12) !important;
  color: #2A9D8F !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  /* Preview pill — integrated dusty-denim glass. */
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .info {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(228, 236, 255, 0.92)) !important;
  border: 1px solid rgba(76, 134, 216, 0.14) !important;
  box-shadow: 0 8px 18px rgba(76, 134, 216, 0.16) !important;
  color: #1B365D !important;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  box-sizing: border-box !important;
}

/* Narrow: one fluid column so cards use available width */
@media (max-width: 375px) {
  .ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .ub-boards-page__board-item.simple_board_holder,
  .ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid > .simple_board_holder {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}
/* ===== Beta welcome & agreement (register-style full-page onboarding) ===== */
.beta-welcome-page.register-page-bg {
  /* Match .register-page-bg: min-height fills viewport; #content is the only scrollport. */
  min-height: 100vh;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  /* No top padding (the card sits up near the top); side + generous bottom only. */
  padding: 0 16px clamp(2.5rem, 6vh, 4rem);
  width: 100%;
  box-sizing: border-box;
  /* The warm atmospheric mesh lives on #content (the full-height scrollport) so
     it fills the topbar/bottombar padding bands; this inner layer stays
     transparent so there's one continuous background with no seam. */
  background: transparent;
  /* Orbs removed on the beta page: this inner box has `overflow: hidden`, so the
     blurred orbs were clipped flat at its edge — painting a tinted rectangle
     over the uniform #content mesh and creating the top/bottom seam. The mesh
     alone carries the atmosphere now (single continuous background). */
}
.beta-welcome-page.register-page-bg .la-bg-orbs {
  display: none;
}

.beta-welcome-page__frame {
  /* Wider, more generous reading column for the premium feel. */
  max-width: 760px;
  box-sizing: border-box;
  /* The single frosted-glass surface for the welcome screen — the card inside
     is transparent and just supplies content padding, so THIS frame is the
     visible glass container. No padding here (the card's padding insets the
     content); the mesh frosts through the translucent veil + strong blur. */
  border-radius: 36px;
  /* Faint COOL tint (not pure white) so the frosted surface reads as a distinct
     glass card over the near-white page instead of vanishing into it. Brighter
     defined rim + stronger frost + deeper float shadow make the "glass" read. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(232, 239, 247, 0.4) 100%);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 36px 90px rgba(15, 23, 42, 0.14), 0 14px 36px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.beta-welcome-card {
  margin-top: 0;
  /* Transparent content wrapper — the outer .beta-welcome-page__frame is the
     single glass surface now, so this card carries no surface of its own
     (overrides the flat-white .register-card it inherits). It keeps its padding
     and inner layout; the padding is what insets content from the glass edge. */
  padding: 32px clamp(24px, 5vw, 40px) 40px;
  border-radius: 32px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
.beta-welcome-card .la-section-header {
  /* More breathing room beneath the hero now the divider is gone. */
  margin-bottom: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.beta-welcome-card .la-hero-title-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 0;
}
.beta-welcome-card .la-section-eyebrow-badge {
  display: inline-block;
  margin-bottom: 16px;
  /* 15px floor (not 14) so the uppercase, letter-spaced pill never reads
     below the AAC minimum. */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d5c5f;
  padding: 7px 16px;
  border-radius: 999px;
  /* Subtle glass glow around the pill (background/border come from the
     shared eyebrow rule). */
  box-shadow: 0 4px 16px rgba(42, 157, 143, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.beta-welcome-card .la-hero-title {
  /* Larger, more cinematic serif headline — landing-page scale, light weight,
     tight tracking, with a touch more line breathing room. clamp keeps it
     graceful from phone to desktop (h1 header size scaling down to ~32px on
     narrow screens). This title is an <h1> (the page's main heading), so
     display/height are reset here to neutralize the legacy global
     `h1 { display:inline-block; height:60px }` nav style from leaking in. */
  display: block;
  height: auto;
  font-family: "Maitree", serif;
  font-size: clamp(32px, 5.5vw, 48px);
  font-weight: normal;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #1b2a4a;
  text-align: center;
  margin: 0 auto;
}

.beta-welcome-card__subtitle {
  margin: 16px auto 0;
  /* Softer conversational subhead — relaxed leading, lighter ink. */
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(45, 55, 72, 0.74);
  max-width: 34rem;
  /* "help shape what comes next." reuses the landing-alt "every student"
     gradient (.hero-gradient = verdigris→dusty-denim clipped to text). Keep
     it the same size/weight as the rest of the line — we only want the color,
     not .hero-gradient's 1.155em bump. Forced onto its own centered row so the
     gradient phrase always reads as a distinct second line. */
}
.beta-welcome-card__subtitle .hero-gradient {
  font-size: inherit;
  font-weight: inherit;
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.beta-welcome-body {
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: #3d4654;
}
.beta-welcome-body p {
  margin: 0 0 14px;
}

.beta-welcome-intro {
  /* Narrower, centered, conversational — relational not instructional. */
  margin: 0 auto 40px;
  max-width: 540px;
  padding: 20px 28px;
  border-radius: 20px;
  text-align: center;
  /* Softer, more translucent tinted glass — barely-there, not a boxed panel. */
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.05) 0%, rgba(76, 134, 216, 0.035) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.beta-welcome-intro p:last-child {
  margin-bottom: 0;
}

.beta-welcome-section {
  /* Intentional rhythm — generous breathing room BEFORE each major section so
     the page pauses between ideas (landing-page pacing), while internal groups
     (grids/timeline) stay tight. */
  margin-bottom: clamp(48px, 7vh, 72px);
}
.beta-welcome-section--feedback {
  margin-bottom: 24px;
}

.beta-welcome-section__title {
  font-family: "Maitree", serif;
  /* Refined editorial heading — serif, light weight (already below 'bold'),
     tighter tracking for the premium SaaS feel. Hierarchy comes from spacing +
     the serif contrast, not heavy weight. */
  font-size: 20px;
  font-weight: normal;
  color: #1b2a4a;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.beta-welcome-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0;
}

.beta-welcome-feature-card {
  position: relative;
  text-align: left;
  padding: 28px 24px;
  border-radius: 22px;
  /* Elevated glass surface (no hard gray outline) — onboarding pathway card.
     Subtle top-to-bottom surface gradient + bright top-edge light + airy
     layered shadow so it reads like the floating internal app surfaces. */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  /* Icon sits beside the heading (not stacked above it). */
}
.beta-welcome-feature-card .beta-welcome-feature-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}
.beta-welcome-feature-card h4 {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 22px);
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.25;
}
.beta-welcome-feature-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5a6578;
}
.beta-welcome-feature-card {
  /* Richer gradient icon tile — deeper tint, softer edge sheen, more glow. */
}
.beta-welcome-feature-card .la-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 18px;
  font-size: 30px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.2), rgba(76, 134, 216, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 20px rgba(42, 157, 143, 0.16);
}
.beta-welcome-feature-card .la-feature-icon--navy {
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.2), rgba(27, 54, 93, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 20px rgba(76, 134, 216, 0.16);
}

/* Featured card — brighter surface and soft teal glow for visual emphasis
   only (no interactive lift): it highlights the primary "explore" message
   without implying a clickable action. */
.beta-welcome-feature-card--featured {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 248, 246, 0.82));
  border-color: rgba(42, 157, 143, 0.32);
  box-shadow: 0 18px 48px rgba(42, 157, 143, 0.16), 0 8px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Weekly-missions card — same elevated tinted surface as the featured card,
   in a softer bluish-purple (brand lavender blended toward denim). Tint and
   glow are dialed down so it reads quieter than the teal "Speak" card.
   Visual emphasis only (no lift). */
.beta-welcome-feature-card--missions {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 241, 251, 0.6));
  border-color: rgba(107.35, 133.45, 223.7, 0.22);
  box-shadow: 0 18px 48px rgba(107.35, 133.45, 223.7, 0.1), 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.beta-welcome-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

/* Connected progression — a soft gradient line down the number column (low
   opacity, not a hard border). Inset to span first→last badge centers; the
   opaque badges sit on top so it reads as connected steps. */
.beta-welcome-steps::before {
  content: "";
  position: absolute;
  /* Aligned to the centre of the 36px number circles. */
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.4) 0%, rgba(76, 134, 216, 0.2) 100%);
  /* Whisper-faint connector — guides the eye without reading as a border. */
  opacity: 0.18;
  border-radius: 999px;
  pointer-events: none;
}

.beta-welcome-steps__item {
  display: flex;
  align-items: flex-start;
  /* Pull the text closer to the timeline (was 16) so it reads as one fluid
     unit, not a rigid two-column grid. */
  gap: 14px;
  /* Lighter — no heavy boxed container; the timeline + spacing carry it. */
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
}

.beta-welcome-steps__num {
  flex-shrink: 0;
  /* Smaller, more elegant circles (was 42px) — less dominant in the column. */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  /* Dark numerals on a light glass badge — high contrast, crisp look. */
  color: #1b2a4a;
  /* Glassmorphism disc — a bright specular sheen over a translucent denim→
     verdigris tint, frosted backdrop, crisp light rim, and layered inner
     highlight + colored under-glow so the circles read like polished glass. */
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(76, 134, 216, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 8px rgba(42, 157, 143, 0.16);
  position: relative;
  z-index: 1;
}

.beta-welcome-steps__content {
  flex: 1;
  min-width: 0;
}
.beta-welcome-steps__content strong {
  display: block;
  font-size: 16px;
  color: #1b2a4a;
  margin-bottom: 4px;
}
.beta-welcome-steps__content p {
  margin: 0;
  font-size: 14px;
  color: #5a6578;
  line-height: 1.55;
}

/* Emotional intro framing for the participation section — centered and
   conversational, sets the "you're shaping this" tone before the checklist. */
.beta-welcome-feedback__intro {
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: #4a5568;
}

/* Mission checklist — reuses the landing-alt plan-item card + check icon
   styling (.la-plan-item / .la-plan-check) for a consistent look, laid out as
   a calm single-column list. No hover effect here: this is an informational
   checklist, not an interactive surface (landing-alt keeps its own hover). */
.beta-welcome-missions {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Neutralize the shared .la-plan-item hover lift in this context only —
     reset to its own resting shadow so the cards stay static. */
}
.beta-welcome-missions .la-plan-item:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* "We're listening" community panel — premium centered glass with a soft
   verdigris/denim mesh glow; replaces the old generic thank-you signoff. */
.beta-welcome-listening {
  position: relative;
  max-width: 580px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding: 40px 40px;
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 130% at 18% 0%, rgba(42, 157, 143, 0.12) 0%, rgba(42, 157, 143, 0) 55%), radial-gradient(120% 130% at 85% 100%, rgba(76, 134, 216, 0.1) 0%, rgba(76, 134, 216, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07), 0 8px 22px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.beta-welcome-listening__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0d5c5f;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.16), rgba(78, 205, 196, 0.12));
  border: 1px solid rgba(42, 157, 143, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* Badge owns the gap to the message below it. */
  margin-bottom: 32px;
}

/* Small "live" dot — signals an open, listening channel. */
.beta-welcome-listening__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.16);
}

.beta-welcome-listening__body {
  /* Full-width centered (no narrow inner column) — badge owns the top gap. */
  margin: 0 auto 20px;
  font-size: 15px;
  line-height: 1.75;
  color: #3d4654;
}

.beta-welcome-listening__hint {
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7688;
}

/* Right-aligned closing signature with a leading em-dash (added decoratively
   so the translatable team name stays clean). */
.beta-welcome-listening__team {
  display: block;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  text-align: right;
}
.beta-welcome-listening__team::before {
  content: "— ";
}

.beta-welcome-actions {
  margin-top: 24px;
  padding-top: 8px;
  /* Brand-slate-blue Next / Get Started / Back button (scoped — the shared
     .register-btn stays charcoal everywhere else). White text (inherited from
     the base .register-btn) keeps ~5.5:1 contrast; text-decoration:none is for
     the Back button, which is a LinkTo (<a>). */
}
.beta-welcome-actions .register-btn {
  min-width: 12rem;
  padding-left: 2rem;
  padding-right: 2rem;
  background: #5A6A85;
  text-decoration: none;
}
.beta-welcome-actions .register-btn:hover:not(:disabled):not(.register-btn--disabled) {
  background: rgb(108.1632286996, 125.8278026906, 155.6367713004);
}
.beta-welcome-actions .register-btn {
  /* Leading "‹" on the Back button. */
}
.beta-welcome-actions .register-btn .glyphicon {
  margin-right: 6px;
  font-size: 0.8em;
  top: 1px;
}

.beta-welcome-lead {
  font-size: 15px;
  line-height: 1.65;
  color: #4a5568;
  margin-bottom: 24px;
}

/* Each agreement section is a translucent glass card (same family as the
   message page's feature/listening cards) for the modern sectioned rhythm —
   kept light enough that the frosted panel reads through between blocks. */
.beta-welcome-agreement-block {
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(248, 250, 252, 0.54));
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.beta-welcome-agreement-block:last-child {
  margin-bottom: 0;
}
.beta-welcome-agreement-block .beta-welcome-section__title {
  margin-bottom: 12px;
}
.beta-welcome-agreement-block p {
  font-size: 15px;
  line-height: 1.6;
  color: #3d4654;
}
.beta-welcome-agreement-block p:last-child {
  margin-bottom: 0;
}

.beta-welcome-list {
  margin: 0;
  padding-left: 1.25rem;
}
.beta-welcome-list li {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 15px;
  color: #3d4654;
}
.beta-welcome-list li::marker {
  color: #2A9D8F;
}
.beta-welcome-list li:last-child {
  margin-bottom: 0;
}
.beta-welcome-list a {
  color: #3A6BC7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.beta-welcome-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: 20px;
  margin-bottom: 20px;
  /* Glass backdrop + lift to match the card family; the safety tint still
     carries the warning color so it stands apart from the neutral blocks. */
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.beta-welcome-callout--safety {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.1) 0%, rgba(255, 193, 7, 0.07) 100%);
  border: 1px solid rgba(240, 106, 91, 0.26);
}

.beta-welcome-callout__icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}

.beta-welcome-callout__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #1b2a4a;
}

.beta-welcome-callout__content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3d4654;
}

.beta-welcome-footer {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 16px;
  /* Transparent on the beta-welcome page so the glass panel shows through
     (no separate white surface or divider behind the accept + Get Started). */
  background: transparent;
}

.beta-welcome-accept {
  margin-bottom: 12px;
}
.beta-welcome-accept .big_checkbox label,
.beta-welcome-accept .big_checkbox .big_checkbox__consent {
  font-size: 15px;
  line-height: 1.45;
  color: #3d4654;
}

/* Short layout only (the beta-welcome-message page — NOT the agreement page,
   which carries the .beta-welcome-page--agreement modifier). Center the
   checkbox + agreement text as a unit to match the centered Get Started button.
   The inner box stays left-aligned so a wrapped line reads normally. */
.beta-welcome-page:not(.beta-welcome-page--agreement) .beta-welcome-accept {
  text-align: center;
}
.beta-welcome-page:not(.beta-welcome-page--agreement) .beta-welcome-accept .big_checkbox {
  display: inline-block;
  text-align: left;
}

/* Preview mode slider on beta-welcome-message (Original <-> Short). Segmented
   sliding-pill control pinned to the top-right of the viewport; the app header
   is force-hidden on this page, so the corner is free. */
.beta-mode-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.beta-mode-toggle__slider {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.22) 0%, rgba(91, 141, 239, 0.14) 100%);
  border: 1px solid rgba(44, 183, 176, 0.32);
  transition: transform 0.25s ease;
  z-index: 0;
  pointer-events: none;
}

.beta-mode-toggle--short .beta-mode-toggle__slider {
  transform: translateX(100%);
}

.beta-mode-toggle__option {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  background: transparent;
  /* Inactive label — must clear WCAG AA 4.5:1 (0.55 alpha was 3.91:1 at 14px
     bold). 0.72 keeps it visibly lighter than the active $indigo label while the
     sliding pill still signals which option is selected. */
  color: rgba(17, 26, 46, 0.72);
  cursor: pointer;
  transition: color 0.2s ease;
}

.beta-mode-toggle__option--active {
  color: #1b2a4a;
}

@media (max-width: 550px) {
  .beta-welcome-page.register-page-bg {
    padding: 0 12px 2rem;
  }
  #within_ember:has(.beta-welcome-page) #content {
    padding-top: 1.25rem !important;
    padding-bottom: calc(var(--bottombar-height) + 1.25rem) !important;
  }
  .beta-welcome-card {
    padding: 24px 16px 24px;
  }
  .register-page {
    padding-top: 2rem;
  }
  .register-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .login-page {
    padding-top: 3rem;
  }
  .login-card {
    padding: 28px 20px;
    border-radius: 16px;
  }
}
/* ===== Login / Forgot password / Forgot username – same bg as modern-dashboard ===== */
.login-page-bg {
  /* Gradient is now applied on #content (the scroll container) so it fills
     including the topbar/bottombar padding bands. This wrapper is just the
     content-alignment box. */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 16px 3rem;
  overflow: visible;
}

.login-page-bg .la-bg-orbs {
  display: none;
  z-index: 0;
}

.login-page {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
}

.password-field {
  position: relative;
  width: 100%;
}
.password-field input.form-control {
  padding-right: 48px;
}
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.password-field__toggle:hover {
  color: #1b2a4a;
  background: rgba(0, 0, 0, 0.04);
}
.password-field__toggle:focus-visible {
  outline: 2px solid #3A6BC7;
  outline-offset: 2px;
}
.password-field__icon {
  width: 20px;
  height: 20px;
  display: block;
}

.login-card {
  margin-top: 24px;
  background: radial-gradient(ellipse 50% 60% at 15% 20%, rgba(78, 205, 196, 0.07) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 85% 70%, rgba(58, 107, 199, 0.05) 0%, transparent 70%), rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 32px 28px 40px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(20, 127, 130, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07), 0 24px 48px -12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  /* Auth header/divider: match about page design */
}
.login-card .la-section-header {
  text-align: center;
  max-width: 100%;
  margin-bottom: 24px;
}
.login-card .la-hero-title-wrap {
  margin-bottom: 0;
}
.login-card .la-hero-title {
  font-family: "Maitree", serif;
  font-size: 26px;
  font-weight: normal;
  color: #1b2a4a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
@media (max-width: 480px) {
  .login-card .la-hero-title {
    font-size: 22px;
  }
}
.login-card .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 24px;
}
.login-card {
  /* Login Help title: match "Login" size to "Help" (same as .hero-gradient) */
}
.login-card .la-hero-title__prefix {
  font-size: 1.155em;
}
.login-card .form-group {
  margin-bottom: 20px;
}
.login-card .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.login-card .form-group .form-control {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  font-size: 15px;
  color: #1b2a4a;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
  height: auto;
}
.login-card .form-group .form-control:focus-visible {
  border-color: #3A6BC7;
  box-shadow: 0 0 0 3px rgba(58, 107, 199, 0.12);
  background: #fff;
}
.login-card .form-group .form-control::placeholder {
  color: #a0a8b8;
}
.login-card {
  /* Center Sign In / Submit button in its form-group (login, forgot_password, forgot_login) */
}
.login-card .form-group:has(.login-btn) {
  text-align: center;
}
.login-card {
  /* Sign In / Submit button — same bg as identity Sign In dropdown
     on landing-alt. Excludes --outline AND --google so the Google
     button can render its own brand-spec light treatment defined
     further down (.login-btn.login-btn--google). Without the
     --google exclusion this rule has higher specificity than the
     scoped .login-btn.login-btn--google override below and was
     leaking the dark navy fill into Google's branded button. */
}
.login-card .login-btn:not(.login-btn--outline):not(.login-btn--google) {
  background: #374151;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.login-card .login-btn:not(.login-btn--outline):not(.login-btn--google):hover {
  background: rgb(71.5, 84.5, 105.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.login-btn {
  display: inline-block;
  width: auto;
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  background: #374151; /* same as identity Sign In button on landing-alt */
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.login-btn:hover {
  background: rgb(71.5, 84.5, 105.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.login-btn:disabled {
  background: #a0a8b8;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.login-btn.login-btn--outline {
  background: #fff;
  color: #374151;
  border: 2px solid #374151;
  box-shadow: none;
}
.login-btn.login-btn--outline:hover {
  background: #f0f4fa;
  box-shadow: none;
  transform: translateY(-1px);
}
.login-btn {
  /* "Continue with Google" button — follows Google's official
     Identity Branding Guidelines
     (https://developers.google.com/identity/branding-guidelines).
     - White field, 1px #dadce0 hairline border, 4px corners
     - 18px multi-color G mark on the left, 12px gap to label
     - Roboto Medium 14px label, color #3c4043, 0.25px letter-spacing
     - Hover: bg shifts to #f8f9fa with Material elevation shadow
     - Active: bg deepens to #f1f3f4
     - Disabled: text drops to 38% alpha
     Overrides the page-default .login-btn pill chrome so the
     Google button reads as a recognizable platform-standard control
     rather than a custom-styled CTA. */
}
.login-btn.login-btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  /* Vertical gap above the button so it sits comfortably below
     the OR divider rather than crowding right under it. */
  margin-top: 16px;
  padding: 0 12px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #dadce0;
  color: #3c4043;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  /* Resting elevation — subtle 2-layer shadow (close grounding +
     soft ambient lift) so the button reads as raised off the page
     rather than sitting flush. Hover state deepens both layers
     for press affordance. */
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 2px 6px rgba(60, 64, 67, 0.08);
  cursor: pointer;
  transition: background-color 0.218s, box-shadow 0.218s, border-color 0.218s, transform 0.15s ease;
  text-transform: none;
}
.login-btn.login-btn--google:hover:not(:disabled) {
  background: #f8f9fa;
  /* Hold the dark Google-brand label color; the base .login-btn:hover
     sets color:#fff, which would otherwise bleed through here. */
  color: #3c4043;
  border-color: #d2e3fc;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 4px 12px rgba(60, 64, 67, 0.18);
  transform: translateY(-1px);
}
.login-btn.login-btn--google:active:not(:disabled) {
  background: #f1f3f4;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3);
}
.login-btn.login-btn--google:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3), 0 1px 2px rgba(60, 64, 67, 0.3);
}
.login-btn.login-btn--google:disabled {
  background: #ffffff;
  border-color: rgba(60, 64, 67, 0.12);
  color: rgba(60, 64, 67, 0.38);
  cursor: not-allowed;
  box-shadow: none;
}
.login-btn .login-btn--google__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.login-btn .login-btn--google__label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.login-btn .login-btn__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.login-btn .login-btn__sub {
  display: block;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 2px;
}
.login-btn.login-btn--outline .login-btn__sub {
  opacity: 0.8;
}

/* Device activation step (login/device): full-width centered buttons */
.login-device-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.login-btn--device {
  width: 100%;
  max-width: 400px;
}

.login-error {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #f8d7d7;
  border-radius: 10px;
  color: #C0392B;
  font-size: 14px;
  line-height: 1.45;
}

.login-privacy-note {
  margin: -8px 0 14px;
  font-size: 14px;
  line-height: 1.45;
}

.login-links {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
}
.login-links a {
  color: #3A6BC7;
  text-decoration: none;
}
.login-links a:hover {
  text-decoration: underline;
}

/* =========================
   Modern Dashboard (LingoLinq)
   Light/medium, low-cognitive load
   ========================= */
:root {
  --md-bg: #eef1f6;
  --md-ink: #111A2E;
  --md-muted: #1B365D;
  --md-line: rgba(17, 26, 46, 0.1);
  --md-navy: #1B365D;
  --md-navy-2: #1e2f52;
  --md-teal: #2A9D8F;
  --md-teal-soft: rgba(44, 183, 176, 0.18);
  --md-coral: #f06a5b;
  --md-coral-soft: rgba(240, 106, 91, 0.16);
  --md-surface: rgba(255, 255, 255, 0.76);
  --md-surface-2: rgba(255, 255, 255, 0.88);
  --md-shadow: 0 18px 50px rgba(17, 26, 46, 0.12);
  --md-shadow-2: 0 12px 28px rgba(17, 26, 46, 0.1);
  --md-r-lg: 28px;
  --md-r-md: 20px;
  --md-r-sm: 14px;
  --md-tap: 0.99;
}

/* Modern dashboard shell: size to content (min 100vh) so bg extends to bottom of page; min-width 0 so it shrinks with viewport */
#content .ember-view > .md-shell,
#content > .md-shell {
  flex: 0 0 auto;
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.md-shell {
  min-height: 100vh !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding-top: 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.18), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.2), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.14), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.1), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%) !important;
  color: var(--md-ink) !important;
}

/* User pages (badges/goals/subscription/etc.) don't get the dashboard's
   `.page-footer` flex-grow rules, so `.md-shell--user`'s own `min-height:100vh`
   mesh is pinned to the viewport as a flex child of the scrolling #content and
   taller content (e.g. the badges grid) overflows past it, revealing #content's
   grey (#aaa) base below the shell. #content is the actual scroll container and
   its background stays behind the full scroll height, so paint the mesh there;
   the shell is made transparent below so the two meshes don't seam. */
#content:has(.md-shell--user),
#within_ember:has(.md-shell--user) .page-footer {
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.18), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.2), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.14), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.1), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%) !important;
  /* Pin the mesh to the viewport so #content AND the page-footer below it render
     the identical mesh with no seam, covering the whole page (the footer renders
     on every non-board page and is a sibling of #content). */
  background-attachment: fixed !important;
}

#content:has(.md-shell--user) {
  /* fill the viewport when the badge grid is short so the mesh isn't cut off */
  min-height: 100vh !important;
}

/* Two-class selector (0,2,0) so this beats the plain `.md-shell` (0,1,0)
   background rules defined later in the file (e.g. ~L58263/58282) that would
   otherwise re-apply the shell's own mesh on top of #content's — creating the
   two-tone "gray band" where the shell ends. With the shell transparent, only
   #content's single fixed mesh shows across the whole page. */
.md-shell.md-shell--user {
  background: transparent !important;
  /* Let #content drive the page height; the shell's own 100vh would double-count
     against #content's top padding and overflow. */
  min-height: 0 !important;
}

.md-workspace {
  max-width: min(1200px, 100% - 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 40px auto !important;
  padding: 40px 40px calc(40px - 9rem) 40px !important;
  border-radius: 48px !important;
  /* visible (was hidden) so the dashboard cards' soft shadows / showcase
     glow aren't clipped at the workspace's rounded edge. All content is
     inset by the workspace padding, so nothing but the decorative shadows
     extends past the edge — there's no bg/child that needs the rounded clip. */
  overflow: visible !important;
}

/* Organizations (directory) page: tuck the workspace up 20px (40px → 20px top). */
.md-shell--org-directory .md-workspace {
  margin-top: 20px !important;
}

/* Note: dashboard top-padding override for ≤1024px lives next to the base
   rule near line 41260 (placed there so source-order wins the !important tie). */
/* Support-flavored pages (beta-feedback, support, beta-feedback-admin) — 64px top
   padding at ≤1024px. Above 1024 the base .md-workspace rule wins (40px).
   Uses two-class specificity (0,2,0) to beat the .md-workspace media-query
   overrides at (0,1,0). */
@media (max-width: 1024px) {
  .md-workspace.md-workspace--support {
    padding-top: 64px !important;
  }
}
.md-workspace--support {
  min-width: 0 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform !important;
  transform: translateZ(0) !important;
  border: 1px solid rgba(27, 54, 93, 0.12) !important;
  box-shadow: 0 6px 40px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.md-shell > .md-workspace {
  flex: 1 1 auto !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

@media (max-width: 820px) {
  /* Let shell and workspace expand with content in column layout so boards aren't cut off */
  .md-shell,
  #content .ember-view > .md-shell,
  #content > .md-shell {
    min-height: auto !important;
  }
  .md-shell > .md-workspace {
    flex: 0 1 auto !important;
    min-height: auto !important;
  }
  .md-workspace > .md-main {
    flex: 0 1 auto !important;
    min-height: auto !important;
  }
  .md-workspace {
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
.md-workspace > .md-pillnav {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

/* Focused View — the primary pill-nav always keeps a 48px top margin at EVERY
   width (the base above resets it to 0 over 640px; a ≤640px rule only fixes the
   small end). (0,3,0) beats the base (0,2,0). */
.md-shell--layout-focused .md-workspace > .md-pillnav {
  margin-top: 48px !important;
}

/* Focused View — the active pill's 135deg gradient ends on the Dusty Denim
   brand colour (the RIGHT side) instead of the global charcoal-blue. */
.md-shell--layout-focused .md-pillnav__pill.active,
.md-shell--layout-focused .md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #4C86D8) !important;
  border-color: rgba(76, 134, 216, 0.3) !important;
}

.md-workspace > .md-pillnav::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: -40px !important;
  right: -40px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(27, 54, 93, 0.12) 15%, rgba(27, 54, 93, 0.15) 50%, rgba(27, 54, 93, 0.12) 85%, transparent 100%) !important;
}

/* Dashboard Boards tab: full user boards page (no pill/hero); embed inside workspace */
/* Default .md-workspace uses flex:1 + min-height:0 so it fills the viewport; that clips long
   boards lists inside the frosted box. Boards tab: size workspace to content so it stretches. */
.md-shell--dashboard-boards-full > .md-workspace--boards-full {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  max-width: min(1200px, 100vw - 24px) !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Reports/stats route: default .md-workspace is flex:1 + min-height:0 + overflow:hidden, which
   clips long report content on viewports >820px (mobile has a separate fix). Grow with content
   so the page scrolls like other tall dashboard views. */
.md-shell--reports-view > .md-workspace {
  flex: 0 1 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* The contained dashboard surface lives on `.md-stats-page` (the report
   content wrapper), NOT on the whole workspace — so the pillnav and
   hero/subheader sit ABOVE the panel on the plain page background. See the
   `.md-workspace .md-stats-page` rule (~l.42323). */
.md-workspace--boards-full {
  min-width: 0 !important;
}

.md-workspace--boards-full > .md-main--dashboard-boards-embed {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.md-main--dashboard-boards-embed {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 8px 28px !important;
  box-sizing: border-box !important;
}

.md-dashboard-boards-embed.ub-boards-page {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
}

.md-iconbtn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.md-iconbtn:active {
  transform: scale(var(--md-tap));
}

.md-iconbtn__label {
  font-size: 1rem;
  opacity: 1;
} /* 16px — icon-button labels need to be readable */
.md-avatarbtn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  display: grid !important;
  place-items: center !important;
}

.md-avatarbtn:active {
  transform: scale(var(--md-tap));
}

.md-avatarbtn__dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--md-teal), var(--md-coral)) !important;
}

/* ---------- Pill Nav ---------- */
/* Pill nav: minimal rounded bar, simple active pill; aligned with dashboard card shadows */
.md-pillnav {
  max-width: 1120px !important;
  margin: 42px auto 0 !important;
  /* 4px top / 4px bottom / 2px sides — a slim bar that seats the pills
     tightly while keeping the horizontal edges flush. Single base rule
     covers the home page and the caseload page (both render bare
     `<nav class="md-pillnav">`); `.md-pillnav--user` further down
     re-declares the same 4px top/bottom values for its own variant so
     the result matches. */
  padding: 4px 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.md-pillnav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.md-pillnav__pill {
  /* Sleek nav row — tightened from `padding: 14px 18px` + min-height
     48px. Vertical padding reduced to 4px and min-height to 32px so
     the bar reads as a slim pill row with a comfortable tap target.
     Still passes the WCAG 2.1 AA touch-target guidance (24x24+ CSS px);
     below the AAA 48px guideline, but the visual sleekness was
     specifically requested. */
  padding: 4px 18px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(75, 78, 92, 0.85) !important;
  position: relative !important;
  cursor: pointer !important;
  /* Flex-center the label so <button> pills and the <a> (LinkTo) Account pill
     align identically — anchors sit on the baseline otherwise, dropping the
     Account text out of line with the buttons. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 2px !important;
  padding-left: 18px !important;
  /* Divider between pills was too faint (rgba(0,0,0,0.06)); a navy hairline at
     higher opacity makes the separation between menu items clearly legible. */
  border-left: 1px solid rgba(27, 54, 93, 0.16) !important;
}

.md-pillnav__pill:first-child {
  margin-left: 0 !important;
  padding-left: 18px !important;
  border-left-color: transparent !important;
}

.md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  color: #fff !important;
  border: 1px solid rgba(70, 80, 95, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.md-pillnav__pill.is-active:not(:first-child) {
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 18px !important;
}

.md-pillnav__pill:active {
  transform: scale(var(--md-tap));
}

.md-pillnav__pill:hover:not(.is-active):not(.active) {
  color: rgb(75, 78, 92) !important;
  background: rgba(0, 0, 0, 0.07) !important;
}

/* LinkTo pills (user page): same look as button pills; Ember adds .active when current route */
a.md-pillnav__pill {
  text-decoration: none !important;
  cursor: pointer !important;
}

a.md-pillnav__pill:hover:not(.active) {
  color: rgb(75, 78, 92) !important;
  background: rgba(0, 0, 0, 0.07) !important;
}

a.md-pillnav__pill.active,
.md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  color: #fff !important;
  border: 1px solid rgba(70, 80, 95, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

a.md-pillnav__pill.active:hover,
.md-pillnav__pill.is-active:hover {
  color: #fff !important;
}

a.md-pillnav__pill.active:not(:first-child),
.md-pillnav__pill.is-active:not(:first-child) {
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 18px !important;
}

/* Active pill badge (e.g. unread count): keep visible and contrasting */
a.md-pillnav__pill.active .md-pillnav__badge,
.md-pillnav__pill.is-active .md-pillnav__badge {
  background: rgba(255, 255, 255, 0.95) !important;
  color: rgba(58, 107, 199, 0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.md-pillnav__badge {
  margin-left: 6px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: var(--md-coral) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.md-pillnav__spacer {
  flex: 1;
  min-width: 12px;
}

.md-pillnav__upgrade {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(60, 63, 78, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.md-pillnav__upgrade:active {
  transform: scale(var(--md-tap));
}

/* User page: pill nav + meta below, then full-width outlet */
.md-pillnav--user {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* User page: same minimal active pill (LinkTo adds .active) */
.md-pillnav--user a.md-pillnav__pill.active,
.md-pillnav--user a.md-pillnav__pill.is-active {
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  color: #fff !important;
  border: 1px solid rgba(70, 80, 95, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.md-pillnav--user a.md-pillnav__pill.active:not(:first-child),
.md-pillnav--user a.md-pillnav__pill.is-active:not(:first-child) {
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 18px !important;
}

.md-pillnav--user a.md-pillnav__pill.active .md-pillnav__badge,
.md-pillnav--user a.md-pillnav__pill.is-active .md-pillnav__badge {
  background: rgba(255, 255, 255, 0.95) !important;
  color: rgba(58, 107, 199, 0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

/* User page: same shell/workspace as dashboard; main content area */
.md-shell--user > .md-workspace > .md-main--user {
  padding-bottom: calc(var(--bottombar-height, 59px) - 24px) !important;
}

.md-user-layout {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 18px 16px 12px 16px !important;
}

/* Reports view from dashboard: let md-shell extend full page width (don't constrain with layout max-width) */
.md-user-layout:has(.md-shell) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.md-user-meta {
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
}

.md-user-meta--after-hero {
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* User metadata line (Joined / Last active). Deliberately NOT a pill or
   contained card — the previous rounded-pill treatment mimicked the
   md-pillnav above it and read as a clickable menu. Modern profile-meta
   pattern instead: a quiet, flat inline row with leading icons + muted
   labels, clearly informational. The chips are flattened (transparent, no
   border/shadow, no segment dividers) so nothing reads as interactive. */
.md-user-meta--before-hero {
  margin: 0 auto 18px !important;
  gap: 28px !important;
}

.md-user-meta--before-hero .md-user-meta__chip {
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.md-user-meta--before-hero .md-user-meta__label {
  color: var(--md-muted, rgba(27, 54, 93, 0.55)) !important;
  font-weight: 600 !important;
}

.md-user-meta--before-hero .md-user-meta__value {
  color: #1B365D !important;
  font-weight: 700 !important;
}

/* Calendar glyph before "Joined" — muted, sits inline with the text. */
.md-user-meta__icon {
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.45);
}

/* Status dot before "Last active" — a small verdigris activity indicator
   with a soft halo (the recognized "active/recent" cue), not a button. */
.md-user-meta__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

.md-user-meta__chip {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Joined: charcoal blue accent (50% lighter) */
.md-user-meta__chip--joined {
  background: linear-gradient(135deg, rgba(70, 80, 95, 0.06) 0%, rgba(70, 80, 95, 0.03) 100%) !important;
  border: 1px solid rgba(70, 80, 95, 0.15) !important;
}

.md-user-meta__chip--joined .md-user-meta__label {
  color: rgba(70, 80, 95, 0.7);
  font-weight: 650;
}

.md-user-meta__chip--joined .md-user-meta__value {
  color: rgba(55, 65, 81, 0.85);
  font-weight: 800;
}

/* Last active: charcoal blue accent (50% lighter) */
.md-user-meta__chip--active {
  background: linear-gradient(135deg, rgba(70, 80, 95, 0.06) 0%, rgba(70, 80, 95, 0.03) 100%) !important;
  border: 1px solid rgba(70, 80, 95, 0.15) !important;
}

.md-user-meta__chip--active .md-user-meta__label {
  color: rgba(70, 80, 95, 0.7);
  font-weight: 650;
}

.md-user-meta__chip--active .md-user-meta__value {
  color: rgba(55, 65, 81, 0.85);
  font-weight: 800;
}

/* Reset: same shape as Joined badge, lighter teal tint, button to go to default stats view */
.md-user-meta__chip--reset {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.04) 0%, rgba(91, 141, 239, 0.025) 100%) !important;
  border: 1px solid rgba(44, 183, 176, 0.12) !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.md-user-meta__chip--reset .md-user-meta__label {
  color: rgba(17, 95, 92, 0.6);
  font-weight: 650;
}

.md-user-meta__chip--reset:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.08) 0%, rgba(91, 141, 239, 0.05) 100%) !important;
  border-color: rgba(44, 183, 176, 0.2) !important;
}

.md-user-meta__chip--reset:hover .md-user-meta__label {
  color: rgba(17, 95, 92, 0.8);
}

.md-user-meta__chip--reset:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #1B365D, 0 0 0 4px rgba(27, 54, 93, 0.1) !important;
}
@media (forced-colors: active) {
  .md-user-meta__chip--reset:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}

/* Fallback when no modifier (preserve existing glass look) */
.md-user-meta__chip:not([class*="--"]) {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.md-user-meta__label {
  color: var(--md-muted) !important;
  font-weight: 600 !important;
}

.md-user-meta__value {
  color: var(--md-ink) !important;
  font-weight: 700 !important;
}

.md-user-outlet {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 16px 24px !important;
}

/* Reports view from dashboard: outlet inside md-workspace, no extra outer constraint */
.md-workspace .md-user-outlet--in-workspace {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: md-reports-fade-in 0.35s ease-out 0.1s both !important;
}

/* Stats page inside md-workspace (same container as home/boards): use shell bg, no duplicate gradient */
/* Contained dashboard surface for the report content wrapper (not the whole
   workspace) — so the pillnav + hero/subheader stay on the plain page
   background above it. Personality via a near-imperceptible top-down white
   gradient (#FFFFFF → #FBFCFE) rather than flat white. NO backdrop-filter /
   transform: an opaque gradient avoids the containing-block trap entirely
   (keeps any fixed descendants safe) and reads crisper than the frosted
   glass here. */
.md-workspace .md-stats-page {
  /* Translucent frosted panel (more transparent than the earlier opaque
     gradient) so the page background reads through — keeps the subtle
     top-down white tint but at ~0.62 alpha + a backdrop blur for the glass
     read. Scoped to `.md-stats-page` so it's the stats page ONLY. Safe to
     blur here: the stats date-filter is native selects (no fixed dropdowns)
     and this panel holds no fixed overlay. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(251, 252, 254, 0.34) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  border-radius: 32px !important;
  box-shadow: 0 6px 40px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  min-height: auto !important;
  color: var(--md-ink) !important;
}

.md-workspace .md-stats-main {
  padding-bottom: calc(24px + var(--bottombar-height, 59px)) !important;
}

.md-shell--reports-view .md-stats-main {
  margin-top: 0 !important;
}

/* Staggered fade-in for stats content sections */
@keyframes md-stats-section-in {
  from {
    opacity: 0 !important;
    transform: translateY(12px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}
.md-stats-main > .md-user-meta {
  animation: md-stats-section-in 0.3s ease-out both !important;
}

.md-stats-main .md-stats-hero-card {
  animation: md-stats-section-in 0.35s ease-out 0.05s both !important;
}

.md-stats-main .md-stats-grid,
.md-stats-main .md-stats-row,
.md-stats-main > div,
.md-stats-main > section:not(.md-stats-hero-card) {
  animation: md-stats-section-in 0.4s ease-out 0.15s both !important;
}

.md-stats-actions {
  animation: md-stats-section-in 0.4s ease-out 0.25s both !important;
}

.md-shell--reports-view .md-stats-hero__title {
  display: none !important;
}

.md-shell--reports-view .la-about-hero-separator {
  display: none !important;
}

/* ---------- Main ---------- */
.md-shell > .md-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.md-workspace > .md-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.md-main {
  max-width: 1120px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 18px 16px 24px !important;
}

.md-main--home-boards {
  padding-top: 0 !important;
}

.md-hero {
  padding: 28px 2px 10px !important;
  /* Override header_sizing.scss `header { ... }` which matches <header class="md-hero"> */
  border-bottom: none !important;
  white-space: normal !important;
  height: auto !important;
  position: static !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  background: transparent !important;
}

.md-hero--setup {
  padding-top: 0;
}

.md-hero--home-boards {
  padding-top: 0;
}

.md-hero__title {
  margin: 0 !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  letter-spacing: -0.3px !important;
}

.md-hero--dashboard .md-hero__title {
  font-family: "Maitree", serif !important;
  font-size: 32px !important;
  /* Allow the title to grow when the username line wraps so the sub doesn't
     land on top of line 2. */
  height: auto !important;
  min-height: 0 !important;
  /* Tightened line-height to match the boards-page hero (1.15) so
     the dashboard, reports, and extras heroes all read as one
     family. The earlier 1.3 created noticeable vertical air
     between the title and the subtitle. */
  line-height: 1.15 !important;
}

.md-hero--dashboard .md-hero__sub {
  /* Same compositional treatment as the boards-page subtitle:
     19px (was 24px), 1.35 line-height for tight-but-readable
     two-line wrapping, 0.6rem top breath from the title, 1rem
     bottom so the hero transitions smoothly into the page
     content below. Max-width keeps the subtitle from sprawling
     across the full hero width on wide viewports.
     margin-left/right: auto + text-align: center re-center the
     subtitle under the title — the base `.md-hero__sub` rule sets
     `margin: 0 0 2rem !important` (shorthand, all four sides) so
     left/right collapse to 0 and the block left-aligns even with
     a max-width. !important on the auto margins beats the base
     shorthand cleanly; text-align centers the text within the
     max-width box for short single-line subtitles. */
  font-size: 20px !important;
  line-height: 1.35 !important;
  margin-top: 0.6rem !important;
  margin-bottom: 1rem !important;
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.md-hero__sub {
  margin: 0 0 2rem !important;
  color: var(--md-muted) !important;
  font-size: 16px !important;
}

/* ---------- Support page (routed, same look as authenticated-view) ---------- */
/* Support and Contact pages: same shell, main, hero, grid, and card styling */
.md-shell--support,
.md-shell--contact {
  min-height: 100%;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(44, 183, 176, 0.12), transparent 55%), radial-gradient(1200px 600px at 80% 15%, rgba(240, 106, 91, 0.1), transparent 60%), radial-gradient(1000px 700px at 60% 85%, rgba(91, 141, 239, 0.12), transparent 60%), var(--md-bg, #eef1f6);
  color: #111A2E;
}

.md-shell--support > .md-main--support,
.md-shell--contact > .md-main--contact {
  width: 60%;
  max-width: 60%;
  margin: 0 auto;
  padding: 18px 16px 24px;
}

.md-hero--support,
.md-hero--contact {
  padding: 28px 2px 16px;
}

.md-hero--support .md-hero__title,
.md-hero--contact .md-hero__title {
  font-family: "Maitree", serif;
  font-size: clamp(23.4px, 2.7vw, 36px);
  color: #111A2E;
}

.md-hero--support .md-hero__sub,
.md-hero--contact .md-hero__sub {
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.md-shell--support .md-grid--support,
.md-shell--contact .md-grid--contact {
  display: block;
  width: 100%;
  grid-template-columns: unset;
  grid-template-areas: unset;
  grid-template-rows: unset;
  gap: unset;
}

.md-card--support-single,
.md-card--contact-single {
  padding: 0;
  overflow: hidden;
  color: #111A2E;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(17, 26, 46, 0.12);
}

.md-card--support-section,
.md-card--contact-section {
  padding: 20px 22px;
}

.md-card--support-section:first-child,
.md-card--contact-section:first-child {
  padding-top: 22px;
}

.md-card--support-section-divider {
  height: 1px;
  margin: 0 22px;
  background: rgba(17, 26, 46, 0.12);
}

.md-card--support-single .md-card__title,
.md-card--contact-single .md-card__title {
  color: #111A2E;
}

.md-card--support-single .md-card__sub,
.md-card--contact-single .md-card__sub {
  color: #374151;
}

/* Support page only: centered hero, 25% larger fonts (except hero title), condensed layout */
.md-shell--support .md-hero--support {
  text-align: center;
  padding: 20px 2px 12px;
}

/* Support hero: header from left */
.md-hero--support .md-hero__title .md-hero__title--from-left {
  display: inline-block;
  font-size: inherit;
  opacity: 0;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.md-shell--support .md-hero--support .md-hero__sub {
  font-size: 17.5px; /* 14 * 1.25 */
}

.md-shell--support > .md-main--support {
  padding: 12px 16px 20px;
}

.md-shell--support .md-card--support-section {
  padding: 16px 20px;
}

.md-shell--support .md-card--support-section:first-child {
  padding-top: 18px;
}

.md-shell--support .md-card--support-section-divider {
  margin: 0 20px;
}

.md-shell--support .md-card--support-single .md-card__title {
  font-size: 25px; /* 20 * 1.25 */
}

.md-shell--support .md-card--support-single .md-card__sub {
  font-size: 17.5px;
  margin-top: 2px;
}

.md-shell--support .md-card__body.md-support-content {
  margin-top: 10px;
}

.md-shell--support .md-support-lead {
  font-size: 14px;
  margin: 0 0 10px;
}

.md-shell--support .md-support-list li {
  margin-bottom: 8px;
}

.md-shell--support .md-support-list .la-support-list__link,
.md-shell--support .md-support-list .la-support-list__btn {
  font-size: 14px;
}

.md-shell--support .md-support-form .la-contact-form__row {
  margin-bottom: 10px;
}

.md-shell--support .md-support-form .la-contact-form__label {
  font-size: 17.5px;
  margin-bottom: 2px;
}

.md-shell--support .md-support-form .la-contact-input {
  font-size: 14px;
  padding: 8px 12px;
}

.md-shell--support .md-support-form .la-contact-input--textarea {
  min-height: 88px;
}

.md-shell--support .md-support-form__actions {
  margin-top: 14px;
  gap: 10px;
}

.md-shell--support .md-support-form__actions .md-btn {
  padding: 10px 18px;
  font-size: 14px;
}

.md-shell--support .md-support-cookies-btn {
  font-size: 17.5px;
}

.md-shell--support .la-support-form-error {
  font-size: 17.5px;
}

/* Contact page only: 25% larger fonts (except hero title), condensed layout */
.md-shell--contact > .md-main--contact {
  padding: 12px 16px 20px;
}

.md-shell--contact .md-hero--contact {
  padding: 20px 2px 12px;
  text-align: center;
}

/* Contact hero: header from left, subheader from right (same animations as dashboard) */
.md-hero--contact .md-hero__title .md-hero__title--from-left {
  display: inline-block;
  font-size: inherit;
  opacity: 0;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.md-hero--contact .md-hero__sub .md-hero__sub--from-right {
  display: inline-block;
  font-size: inherit;
  opacity: 0;
  animation: md-hero-from-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

.md-shell--contact .md-hero--contact .md-hero__sub {
  font-size: 17.5px; /* 14 * 1.25 */
}

.md-shell--contact .md-card--contact-section {
  padding: 16px 20px;
}

.md-shell--contact .md-card--contact-section:first-child {
  padding-top: 18px;
}

.md-shell--contact .md-card--contact-single .md-card__title {
  font-size: 25px; /* 20 * 1.25 */
}

.md-shell--contact .md-card--contact-single .md-card__sub {
  font-size: 17.5px; /* 14 * 1.25 */
  margin-top: 2px;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.md-shell--contact .md-card__body.md-support-content {
  margin-top: 10px;
}

.md-shell--contact .md-support-form .la-contact-form__row {
  margin-bottom: 10px;
}

.md-shell--contact .md-support-form .la-contact-form__label {
  font-size: 17.5px; /* 14 * 1.25 */
  margin-bottom: 2px;
}

.md-shell--contact .md-support-form .la-contact-input {
  font-size: 14px;
  padding: 8px 12px;
}

.md-shell--contact .md-support-form .la-contact-input--textarea {
  min-height: 88px;
}

.md-shell--contact .md-support-form__actions {
  margin-top: 14px;
  gap: 10px;
}

.md-shell--contact .md-support-form__actions .md-btn {
  padding: 10px 18px;
  font-size: 14px; /* ~18px, 25% up from ~14px */
}

.md-shell--contact .la-contact-form__hint {
  font-size: 17.5px;
}

.md-card__body {
  margin-top: 12px;
}

.md-card__body.md-support-content {
  margin-top: 4px;
}

.md-support-lead {
  margin: 0 0 12px;
  color: #374151;
  font-size: 14px;
}

.md-support-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.md-support-list li {
  margin-bottom: 10px;
}

.md-support-list .la-support-list__link,
.md-support-list .la-support-list__btn {
  color: #111A2E;
}

.md-support-list .la-support-list__link:hover,
.md-support-list .la-support-list__btn:hover {
  color: #0f172a;
}

.md-support-form .la-contact-form__row {
  margin-bottom: 14px;
}

.md-support-form .la-contact-form__label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 14px;
  color: #111A2E;
}

.md-support-form .la-contact-input {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: var(--md-r-md, 8px);
  border: 1px solid rgba(17, 26, 46, 0.2);
  font-size: 14px;
  color: #111A2E;
  background: #fff;
}

.md-support-form .la-contact-input::placeholder {
  color: #64748b;
}

.md-support-form .la-contact-input--textarea {
  min-height: 100px;
  resize: vertical;
}

.md-support-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.md-support-form__actions .md-btn {
  padding: 10px 18px;
}

.md-support-form__actions .md-btn--ghost {
  color: #111A2E;
}

.md-support-form__actions .md-btn--ghost:hover {
  color: #0f172a;
}

.la-support-form-error {
  color: #b91c1c;
  margin: 0 0 12px;
  font-size: 14px;
}

.md-support-cookies-btn {
  background: none;
  border: none;
  padding: 6px 0;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.md-support-cookies-btn:hover {
  color: #111A2E;
}

/* ---------- Grid ---------- */
.md-grid {
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: 50fr 50fr !important;
  grid-template-areas: "boards speak" "boards extras" ". sup" !important;
  grid-template-rows: auto auto 0 !important;
  /* Stretch items to fill their grid cells so a shorter card on
     one side doesn't leave empty space below itself before the
     row gap — the row gap then becomes the ONLY visible vertical
     spacing between adjacent cards, identical across all rows. */
  align-items: stretch !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Boards moved to the RIGHT column (drag-to-move, flagged): the wider column
   follows Boards, so swap the 55/45 split to 45/55. Scoped to >950px — the ONLY
   widths where the base 55fr 45fr two-column layout is active. Below 950px the
   responsive rules collapse the grid to 1fr / 1fr 1fr (see the ≤950/≤820/≤640
   blocks), and this rule deliberately does NOT apply there, so the mobile/tablet
   layout is untouched. Class is added by gridLayoutState only when Boards is
   mirrored right; absent by default. */
@media (min-width: 951px) {
  .md-grid.md-grid--dashboard.md-grid--boards-right {
    grid-template-columns: 50fr 50fr !important;
  }
}
/* A SMALL action card that ends up spanning BOTH columns (a lone trailing card in
   an odd count renders as a full-width 'X X' row) takes the page (md-shell) gradient
   as its background and centres its [image | text] cluster — the title/sub keep their
   left alignment against the image. The md-grid--fullspan-<key> class is added by
   gridLayoutState for whichever section is the wide one. Scoped to the >950px
   two-column layout, where "spanning both columns" is meaningful. */
@media (min-width: 951px) {
  .md-grid.md-grid--fullspan-speak .md-card.md-card--speak.md-card--as-button,
  .md-grid.md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button,
  .md-grid.md-grid--fullspan-account .md-card.md-card--account.md-card--as-button,
  .md-grid.md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button,
  .md-grid.md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button,
  .md-grid.md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button {
    background: radial-gradient(ellipse 56% 122% at 50% 50%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 74%), radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.14), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.11), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.12), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.09), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.06), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 109.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 105.7843137255%) 50%, hsl(36, 13.8888888889%, 100.8823529412%) 100%) !important;
  }
  /* The Speak card uses its own variant classes (--speak-wide-only article /
     --speak-as-button narrow), NOT the generic --as-button, so it must be listed
     explicitly or it would stay left-aligned when it's the lone full-width card. */
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-wide-only .md-card__head,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__head,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--as-button .md-card__head,
  .md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button .md-card__head,
  .md-grid--fullspan-account .md-card.md-card--account.md-card--as-button .md-card__head,
  .md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button .md-card__head,
  .md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button .md-card__head,
  .md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button .md-card__head {
    justify-content: center !important;
  }
  /* The icon+text CLUSTER is centered on the page (head justify-content above), but the
     TITLE + STATUS/SUB text stay LEFT-aligned within their titles div (per request) — so
     a shorter status reads flush under the START of the title rather than centered under
     it. The titles div is shrink-to-fit to the wider line (the title), so left-align
     pins the shorter status to that line's left edge. */
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-wide-only .md-card__titles,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__titles,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--as-button .md-card__titles,
  .md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button .md-card__titles,
  .md-grid--fullspan-account .md-card.md-card--account.md-card--as-button .md-card__titles,
  .md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button .md-card__titles,
  .md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button .md-card__titles,
  .md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button .md-card__titles {
    text-align: left !important;
  }
  /* Full-span (both-column) action cards get a taller min-height (230px) for a more
     substantial presence at the wide size. 230px is intentionally taller than BOTH base
     action-card heights — the 160px Speak card AND the 180px badge-action cards (Account
     / Create a Board / Reports / Edit Dashboard, see `.md-grid--dashboard
     .md-card--badge-action`, app.scss ~52887). An earlier 192px barely cleared the 180px
     badge-action base, so it looked like it wasn't applying to those; 230px applies
     visibly to every full-span action card. (0,4,0) specificity beats that (0,2,0) base. */
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-wide-only,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button,
  .md-grid--fullspan-speak .md-card.md-card--speak.md-card--as-button,
  .md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button,
  .md-grid--fullspan-account .md-card.md-card--account.md-card--as-button,
  .md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button,
  .md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button,
  .md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button {
    min-height: 230px !important;
  }
  /* Full-span action cards: icon TILE (the tinted bg) + GLYPH 50% larger — 64px→96px
     tile (radius 22px→33px) and 34px→51px glyph — for a stronger presence at the wide
     size. The visible Speak card is `--speak-as-button` (the `--speak-wide-only` variant
     is display:none, app.scss ~47799). A leading `.md-grid.md-grid--fullspan-X` (double
     class) gives (0,6,0), beating the base 64px icon-tile rule (~47875, (0,5,0)) which
     sits LATER in source. */
  .md-grid.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon,
  .md-grid.md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button .md-card__icon,
  .md-grid.md-grid--fullspan-account .md-card.md-card--account.md-card--as-button .md-card__icon,
  .md-grid.md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button .md-card__icon,
  .md-grid.md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button .md-card__icon,
  .md-grid.md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button .md-card__icon {
    width: 96px !important;
    height: 96px !important;
    border-radius: 33px !important;
  }
  .md-grid.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon-glyph,
  .md-grid.md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button .md-card__icon-glyph,
  .md-grid.md-grid--fullspan-account .md-card.md-card--account.md-card--as-button .md-card__icon-glyph,
  .md-grid.md-grid--fullspan-createboard .md-card.md-card--create-board.md-card--as-button .md-card__icon-glyph,
  .md-grid.md-grid--fullspan-reports .md-card.md-card--reports.md-card--as-button .md-card__icon-glyph,
  .md-grid.md-grid--fullspan-editdashboard .md-card.md-card--edit-dashboard.md-card--as-button .md-card__icon-glyph {
    width: 51px !important;
    height: 51px !important;
  }
  /* Full-span Speak card ONLY: replace the SVG glyph + tinted tile entirely with the
     speak-circle-light image (the image is itself the icon AND its background). Drop the
     tile's gradient fill, border, and shadow so just the image shows, and hide the inner
     SVG glyph. Tile keeps its 96px full-span size from the rule above. (0,6,0) beats the
     base speak icon-bg rule (~47882, (0,4,0)). */
  .md-grid.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon {
    background: url(/../images/speak-circle-light.png) center/contain no-repeat !important;
    border: none !important;
    box-shadow: none !important;
    /* Show the image 50% larger than the shared 96px full-span tile (→ 144px). Overrides
       the 96px size rule above (same specificity, later in source). */
    width: 144px !important;
    height: 144px !important;
  }
  .md-grid.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon-glyph {
    display: none !important;
  }
  /* My Caseload full-span hero (Gentle supervisor home) — mirrors the full-span Speak
     card: centered head, 230px min-height, and the icon replaced by the
     caseload circle image. The visible variant is --caseload-as-button
     (--caseload-wide-only is display:none, ~43219), exactly like Speak. Scoped to Gentle
     (md-grid--layout-gentle) so Focused keeps its existing caseload treatment until its
     own supervisor view is built. */
  .md-grid--layout-gentle.md-grid--fullspan-caseload .md-card.md-card--caseload.md-card--caseload-as-button .md-card__head {
    justify-content: center !important;
  }
  .md-grid--layout-gentle.md-grid--fullspan-caseload .md-card.md-card--caseload.md-card--caseload-as-button .md-card__titles {
    text-align: left !important;
  }
  .md-grid--layout-gentle.md-grid--fullspan-caseload .md-card.md-card--caseload.md-card--caseload-as-button {
    min-height: 190px !important;
  }
  .md-grid.md-grid--layout-gentle.md-grid--fullspan-caseload .md-card.md-card--caseload.md-card--caseload-as-button .md-card__icon {
    width: 140px !important;
    height: 140px !important;
    background: url(/../images/caseload-light.png) center/contain no-repeat !important;
    border: none !important;
    box-shadow: none !important;
    filter: saturate(1.1) !important;
  }
  .md-grid.md-grid--layout-gentle.md-grid--fullspan-caseload .md-card.md-card--caseload.md-card--caseload-as-button .md-card__icon > svg {
    display: none !important;
  }
}
/* ≤950px (Gentle single-column stack) — the full-span treatment above is gated to
   ≥951px, so at this width the full-span Speak card would otherwise revert to the normal
   160px height + SVG glyph. The `--fullspan-speak` class is JS-computed (persists at all
   widths), so re-apply the Speak full-span HEIGHT (230px) + IMAGE replacement (144px
   speak-circle-light tile, glyph hidden) here. Scoped to Gentle so Focused is untouched. */
@media (max-width: 950px) {
  .md-grid--layout-gentle.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button {
    min-height: 230px !important;
  }
  .md-grid--layout-gentle.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon {
    width: 144px !important;
    height: 144px !important;
    background: url(/../images/speak-circle-light.png) center/contain no-repeat !important;
    border: none !important;
    box-shadow: none !important;
  }
  .md-grid--layout-gentle.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon-glyph {
    display: none !important;
  }
}
/* Supervisor home (with-caseload): Speak Mode stays FULL-WIDTH but is Tier 2 — scale
   its full-span hero DOWN to medium (icon + height) so it reads below the Tier-1
   Caseload/Rooms/Attention cards. (0,6,0) beats the Tier-1 full-span Speak rules above
   in both the ≥951px and ≤950px media blocks. */
.md-grid--with-caseload.md-grid--layout-gentle.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button {
  min-height: 150px !important;
}

.md-grid--with-caseload.md-grid--layout-gentle.md-grid--fullspan-speak .md-card.md-card--speak.md-card--speak-as-button .md-card__icon {
  width: 110px !important;
  height: 110px !important;
}

/* Slightly darker "Speak Mode" title on the supervisor card so it reads a touch
   stronger than the inherited navy. */
.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--speak-as-button .md-card__title {
  color: rgb(15.525, 31.05, 53.475) !important;
}

/* Edit Dashboard (full-width) icon on the supervisor home — its fullspan tile
   (96px/33px-radius) felt oversized and used a different corner radius than the
   other action-button icons. Shrink the tile/glyph and match the 22px radius the
   paired button icons use. (0,6,0) ties the fullspan icon rule but wins on source
   order. */
.md-grid--with-caseload.md-grid--layout-gentle.md-grid--fullspan-editdashboard .md-card--edit-dashboard.md-card--as-button .md-card__icon {
  width: 66px !important;
  height: 66px !important;
  border-radius: 22px !important;
}

.md-grid--with-caseload.md-grid--layout-gentle.md-grid--fullspan-editdashboard .md-card--edit-dashboard.md-card--as-button .md-card__icon-glyph {
  width: 34px !important;
  height: 34px !important;
}

/* Supervisor (with-caseload) Gentle home action buttons (Account / Create a Board /
   Reports / Edit Dashboard / Extras): compact, fixed 150px tall (matching the Speak
   Mode card) whether paired or stretched to two columns, with header −6px (24→18,
   from the 24px rule at ~app.scss:48450) and subheader −6px (18→12, from the 18px
   rule at ~app.scss:54210). The leading `.md-grid--dashboard` lifts these to (0,6,0)
   so they beat those equal-specificity 24/18px rules that sit LATER in the file. */
.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--badge-action.md-card--as-button,
.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--extras.md-card--as-button {
  min-height: 125px !important;
  /* Pull the action cards up so they sit closer together and read as one
     grouping (the grid's row gap is 28px; -14px halves the vertical spacing
     between these rows). */
  margin-top: -14px !important;
}

.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--badge-action.md-card--as-button .md-card__title,
.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--extras.md-card--as-button .md-card__title {
  font-size: 18px !important;
}

.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--badge-action.md-card--as-button .md-card__sub,
.md-grid--dashboard.md-grid--with-caseload.md-grid--layout-gentle .md-card--extras.md-card--as-button .md-card__sub {
  font-size: 14px !important;
}

/* ≤640px (Gentle single-column) — stack each action card's head: the icon (or the Speak
   image) sits CENTERED on its own row, and the title + subtitle wrap to a CENTERED row
   below it (the head is a centered flex row by default; switch it to a centered column).
   Covers every action card — Speak + the --as-button cards (Extras / Account / Create a
   Board / Reports / Edit Dashboard). Gentle-scoped so Focused is untouched. */
@media (max-width: 640px) {
  /* Center the action (as-button) cards — Speak Mode, My Account, Create a Board,
     Edit Dashboard, Reports, Extras — at ≤640px in EVERY dashboard layout (was
     scoped to gentle only). Icon on top, title + subtitle centered below. (The
     icon→title gap is unified to Extras' 28px in a dedicated rule later in the
     file, so it's not set here.) */
  .md-grid--dashboard .md-card.md-card--as-button .md-card__head,
  .md-grid--dashboard .md-card.md-card--speak-as-button .md-card__head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .md-grid--dashboard .md-card.md-card--as-button .md-card__titles,
  .md-grid--dashboard .md-card.md-card--speak-as-button .md-card__titles {
    text-align: center !important;
  }
}
.md-grid--with-getting-started {
  grid-template-areas: "getting_started getting_started" "divider divider" "boards speak" "boards extras" ". sup" !important;
  grid-template-rows: auto auto auto auto 0 !important;
}

/* NOTE: the home dashboard's grid-template-areas (every visibility combination)
   are now computed in JS — utils/dashboard_sections.js → dashboardLayout — and
   applied as an inline style on `.md-grid--dashboard` (single source of truth,
   shared with the Getting Started preview; no CSS-specificity juggling). The
   `md-grid--with-caseload` / `md-grid--with-org-mgmt` classes remain ONLY for
   the card styling further below. The `md-grid--with-getting-started` rules
   below are for the (currently disabled) onboarding card and are untouched. */
/* Both getting-started and org management — org_mgmt grounded below
   the primary boards/speak/extras stack instead of pinned above. */
.md-grid--with-getting-started.md-grid--with-org-mgmt {
  grid-template-areas: "getting_started getting_started" "divider divider" "boards speak" "boards extras" "org_mgmt org_mgmt" ". sup" !important;
  grid-template-rows: auto auto auto auto auto 0 !important;
}

/* Getting-started + caseload + org management — caseload top-left,
   speak top-right (tops flush). Boards spans rows on the left;
   right column stacks extras then org_mgmt (same width as speak). */
.md-grid--with-getting-started.md-grid--with-caseload.md-grid--with-org-mgmt {
  grid-template-areas: "getting_started getting_started" "divider divider" "caseload speak" "boards extras" "boards org_mgmt" ". sup" !important;
  grid-template-rows: auto auto auto auto auto 0 !important;
}

/* Getting-started + caseload (no org management) */
.md-grid--with-getting-started.md-grid--with-caseload:not(.md-grid--with-org-mgmt) {
  grid-template-areas: "getting_started getting_started" "divider divider" "caseload caseload" "boards speak" "boards extras" ". sup" !important;
  grid-template-rows: auto auto auto auto auto 0 !important;
}

/* Caseload card — multi-radial composition over a soft white→cream
   linear base. Sizes scaled from the original 1400px design width
   down to the caseload card's actual width (583px), so the blobs
   read at the same relative proportion they did in the source.
   Specificity bumped to .md-grid .md-card.md-card--caseload so this
   wins over the base .md-grid .md-card { background: ... !important }
   rule (line ~40604), which would otherwise override our radial
   stack via the shorthand. */
.md-grid .md-card.md-card--caseload {
  grid-area: caseload !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  border-radius: var(--md-r-lg) !important;
  background: radial-gradient(583px 292px at 10% 5%, rgba(49, 111, 112, 0.09), rgba(0, 0, 0, 0) 50%), radial-gradient(500px 250px at 90% 15%, rgba(70, 80, 95, 0.03), rgba(0, 0, 0, 0) 50%), radial-gradient(458px 292px at 50% 95%, rgba(55, 65, 81, 0.03), rgba(0, 0, 0, 0) 50%), radial-gradient(375px 208px at 80% 55%, rgba(42, 157, 143, 0.07), rgba(0, 0, 0, 0) 45%), radial-gradient(333px 167px at 25% 65%, rgba(76, 134, 216, 0.025), rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 254, 253) 50%, rgb(244, 250, 249) 100%) !important;
  border: 1px solid var(--md-line) !important;
  border-bottom: 2px solid rgba(27, 54, 93, 0.08) !important;
}

.md-card--caseload .md-card__head {
  flex: 1 1 auto !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* My Caseload card-as-button — rendered at ≤1024px (see
   components/dashboard/authenticated-view.js#is_narrow_dashboard).
   The card itself is a <LinkTo> to the caseload route; the explicit
   "Manage" button is dropped at this size. The radial-gradient
   background + border + flex layout from .md-card.md-card--caseload
   above are intentionally inherited unchanged — this rule only
   resets the <a>'s native styling, switches the cursor, and layers
   a raised-button shadow + hover/focus affordance so the whole
   card reads as a tappable primary action.
   Specificity .md-grid .md-card.md-card--caseload-as-button matches
   the base rule so it neither under- nor over-rides the existing
   layout. */
.md-grid .md-card.md-card--caseload-as-button {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  /* Glassy raised-button shadow stack:
     - inset top-edge highlight (the "lit" upper bevel of a glass button)
     - inset bottom-edge soft darkening (the lower bevel)
     - outer drop shadow for the lift off the page
     A single combined shadow declaration so the cascade-merge stays
     atomic — hover/active just swap the whole stack. The final layer is the
     verdigris showcase halo so My Caseload reads as a primary action exactly
     like the Speak Mode card-as-button. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1), 0 0 38px rgba(42, 157, 143, 0.32) !important;
  transition: box-shadow 180ms ease-out, transform 140ms ease-out !important;
  -webkit-tap-highlight-color: transparent;
}

/* Gloss highlight overlay — top half of the card brightens with a
   white veil that fades to transparent, mimicking light catching the
   curved top surface of a glass button. Sits ABOVE the existing
   radial-gradient card background but BELOW the head content (head
   is forced relative + z-index 1 just below). border-radius:inherit
   keeps the gloss inside the card's rounded corners; pointer-events:
   none means the gloss never intercepts clicks. */
.md-grid .md-card.md-card--caseload-as-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0) 65%);
  z-index: 0;
}

.md-grid .md-card.md-card--caseload-as-button > .md-card__head {
  position: relative;
  z-index: 1;
}

.md-grid .md-card.md-card--caseload-as-button:hover,
.md-grid .md-card.md-card--caseload-as-button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14), 0 0 52px rgba(42, 157, 143, 0.44) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.md-grid .md-card.md-card--caseload-as-button:active {
  transform: translateY(0.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 2px rgba(27, 54, 93, 0.05), 0 2px 6px rgba(27, 54, 93, 0.08) !important;
}

.md-grid .md-card.md-card--caseload-as-button:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .md-grid .md-card.md-card--caseload-as-button {
    transition: none !important;
  }
  .md-grid .md-card.md-card--caseload-as-button:hover,
  .md-grid .md-card.md-card--caseload-as-button:focus-visible,
  .md-grid .md-card.md-card--caseload-as-button:active {
    transform: none;
  }
}
/* ── My Caseload card-as-button — full parity with the Speak Mode as-button ──
   Same showcase atmosphere + surface, glassy teal icon tile, 21px title, brand
   gradient divider, and status-styled subline. Only the icon glyph and the
   caseload wording differ. (The box-shadow showcase glow + hover live on the
   base/hover rules above.) Mirrors the .md-card--speak-as-button refinements. */
.md-grid .md-card.md-card--caseload-as-button {
  min-height: 160px;
  background: radial-gradient(56% 78% at 22% 42%, rgba(42, 157, 143, 0.07), transparent 62%), radial-gradient(44% 82% at 90% 46%, rgba(76, 134, 216, 0.06), transparent 70%), radial-gradient(30% 52% at 80% 82%, rgba(42, 157, 143, 0.045), transparent 72%), linear-gradient(96deg, rgba(42, 157, 143, 0.05) 0%, rgba(76, 134, 216, 0.03) 42%, rgba(42, 157, 143, 0) 78%), linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 55%, rgba(245, 246, 249, 0.88) 100%) !important;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  /* Promote to its own GPU layer so the backdrop-filter result is rasterized and held
     across scroll. Without it, scrolling this card out of view and back makes the browser
     RE-COMPUTE the backdrop-filter, briefly flashing the solid base gradient before the
     blur/saturate re-applies (the "no-styling then styled" flicker). Same fix the
     .la-pricing-card uses (app.scss ~27720). */
  will-change: transform;
  transform: translateZ(0);
}

.md-grid .md-card.md-card--caseload-as-button .md-card__head {
  margin-top: 6px !important;
}

/* Icon container — same premium soft-glass teal tile as the Speak icon (the
   caseload people glyph inside is kept). */
.md-grid .md-card.md-card--caseload-as-button .md-card__icon {
  background: linear-gradient(180deg, #ffffff, #f3f6fb) !important;
  border: 1px solid rgba(42, 157, 143, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 23, 42, 0.06), 0 0 12px rgba(42, 157, 143, 0.12) !important;
}

.md-grid .md-card.md-card--caseload-as-button .md-card__title {
  font-size: 28px !important;
  line-height: 1.15 !important;
}

/* My Caseload hero title (26px) — reduced with the caseload card. */
.md-grid.md-grid--layout-gentle.md-grid--fullspan-caseload .md-card--caseload.md-card--caseload-as-button .md-card__title {
  font-size: 26px !important;
}

/* Rooms title — its own authoritative size + line-height (not shared with the
   caseload 28px rule; per Rule #0.7 one rule governs this element). */
.md-grid .md-card.md-card--rooms .md-card__title {
  font-size: 22px !important;
  line-height: 1.15 !important;
}

/* Divider below the title — same brand highlight gradient + right-fade mask. */
.md-grid .md-card.md-card--caseload-as-button .md-card__title::after {
  content: "";
  display: block;
  width: 260px;
  max-width: 100%;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  /* Reversed brand gradient (denim → verdigris) so the colour that was on the
     right now reads on the left. */
  background: linear-gradient(90deg, #4C86D8, #2A9D8F);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
}

/* Subline → styled like the Speak status line (verdigris-aa pill + leading
   dot), keeping the caseload wording. The dot is a ::before (the sub has no
   dot element in markup). */
.md-grid .md-card.md-card--caseload-as-button .md-card__sub,
.md-grid .md-card.md-card--rooms .md-card__sub,
.md-grid .md-card.md-card--attention .md-card__sub {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 7px !important;
  margin-left: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.md-grid .md-card.md-card--caseload-as-button .md-card__sub::before,
.md-grid .md-card.md-card--rooms .md-card__sub::before,
.md-grid .md-card.md-card--attention .md-card__sub::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.55);
}

/* ≤640px: drop the verdigris dot before the subtitle on the Communicators Need
   Attention card only (Rooms + Caseload keep theirs). Same 0,4,1 specificity as
   the shared dot rule above; wins by source order at this width. */
@media (max-width: 640px) {
  .md-grid .md-card.md-card--attention .md-card__sub::before {
    display: none;
  }
}
/* Subtitle colour + size diverge per card (structure + dot above stay shared): My
   Caseload keeps the verdigris-aa accent at 18px; Rooms + Communicators Need Attention
   use the brand slate blue at 17px. */
.md-grid .md-card.md-card--caseload-as-button .md-card__sub {
  color: #1A7B7A !important;
  font-size: 18px !important;
}

.md-grid .md-card.md-card--rooms .md-card__sub,
.md-grid .md-card.md-card--attention .md-card__sub {
  color: #5A6A85 !important;
  font-size: 16px !important;
  /* Tighter title→subtitle gap for a compact header (caseload keeps its 7px). */
  margin-top: 2px !important;
}

/* ── Rooms card (supervisor home, full-width directly below My Caseload) ─────────
   Surface mirrors the Boards card: a flat white→light-grey gradient with the standard
   line outline + a slightly heavier bottom border, and NO glow/shadow/blur/hover. Keeps
   the Rooms-specific column layout (head + tile grid + "View all" button). grid-area: rooms. */
.md-grid .md-card.md-card--rooms {
  grid-area: rooms !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 20px 24px !important;
  border-radius: var(--md-r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 238, 243, 0.95)) !important;
  border: 1.5px solid rgba(27, 54, 93, 0.1) !important;
  border-bottom: 2.5px solid rgba(27, 54, 93, 0.12) !important;
}

/* Scoped under .md-card--rooms (0,2,0) so `border-bottom: none` beats the generic
   `.md-card__head { border-bottom: 1px … !important }` base (0,1,0, later in source). */
.md-card--rooms .md-card--rooms__head,
.md-card--org-management .md-card--rooms__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Top row: header/subheader on the left, the "View all rooms" button on the right. */
.md-card--rooms__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Full-width divider below the header (reuses the Boards card's gradient line). The
   card's small flex `gap` (8px) sets the tight space ABOVE it; a positive margin-bottom
   restores fuller breathing room BELOW, before the tile grid (8px gap + 8px = 16px). */
.md-grid .md-card.md-card--rooms .md-card--boards__divider,
.md-grid .md-card.md-card--org-management .md-card--boards__divider {
  margin: 0 0 8px;
}

/* Main Rooms-card icon = the classroom illustration (the image IS the icon — no tile,
   border, or shadow). Higher specificity + !important beats the base `.md-card__icon`
   white-tile rule (app.scss ~48279, !important, later in source); the inner door SVG is
   hidden so only the image shows. */
.md-grid .md-card.md-card--rooms .md-card__icon--rooms {
  width: 122px !important;
  height: 122px !important;
  background: url(/../images/classroom.png) center/contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  filter: brightness(1.05);
}

.md-grid .md-card.md-card--rooms .md-card__icon--rooms > svg {
  display: none !important;
}

/* Room tiles: responsive auto-fill grid of clickable cards. */
.md-rooms__grid {
  display: grid;
  /* `min(360px, 100%)` as the track minimum: each tile wants 360px (so wide
     cards can pack 2-up), but shrinks to the container width on narrow screens
     instead of overflowing past the card edge (the classic minmax(fixed,1fr)
     overflow). */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 12px;
}

/* Organizations directory "Available Organizations": a lone org tile spans the
   full grid width instead of sitting at ~360px with empty auto-fill tracks beside
   it. (Mirrors the home My-Organizations card's single-org behavior below.) */
.md-shell--org-directory .md-rooms__grid .md-room-card:only-child {
  grid-column: 1/-1;
}

.md-grid .md-card.md-card--rooms .md-room-card,
.md-grid .md-card.md-card--org-management .md-room-card,
.md-shell--org-directory .md-room-card {
  display: flex;
  align-items: center;
  /* Let the tile shrink within its grid track so the name/desc inside truncate
     with an ellipsis instead of overflowing past the card edge. Without this the
     flex+grid item's default `min-width: auto` keeps it at content width. */
  min-width: 0;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  /* Match the My Account icon exactly: white→denim gradient + top-left radial highlight,
     a soft denim outline, and the icon's raised "lift" shadow (inset highlight + soft drop
     + denim glow). */
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #eef0f4 52%, #e2e6ec 100%);
  border: 1px solid rgba(76, 134, 216, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(76, 134, 216, 0.1), 0 3px 9px rgba(15, 23, 42, 0.08), 0 0 16px rgba(76, 134, 216, 0.16);
  color: #1B365D;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

/* Hover = the My Account card's lift: stronger raised shadow + denim glow + a 1px rise. */
.md-grid .md-card.md-card--rooms .md-room-card:hover,
.md-grid .md-card.md-card--rooms .md-room-card:focus-visible,
.md-grid .md-card.md-card--org-management .md-room-card:hover,
.md-grid .md-card.md-card--org-management .md-room-card:focus-visible,
.md-shell--org-directory .md-room-card:hover,
.md-shell--org-directory .md-room-card:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14), 0 0 30px rgba(76, 134, 216, 0.24);
  transform: translateY(-1px);
  outline: none;
}

.md-room-card__icon {
  flex: 0 0 auto;
  width: 55px;
  height: 55px;
  background: url(/../images/door.png) center/contain no-repeat;
  filter: brightness(1.1) saturate(0.8);
}

/* Room tiles run ~18% shorter than the shared .md-room-card height — their label
   is just the room name (no "· role" second piece like the org tiles), so a
   smaller icon + tighter vertical padding reads less empty. Rooms-scoped; org
   tiles keep the full size. (0,4,0) beats the shared .md-room-card padding. */
.md-grid .md-card.md-card--rooms .md-rooms__grid .md-room-card {
  padding-top: 10px;
  padding-bottom: 10px;
}

.md-card--rooms .md-room-card__icon {
  width: 46px;
  height: 46px;
}

/* Org tiles reuse .md-room-card chrome but swap the room door for the single
   organization illustration (the header keeps the plural organizations.png). */
.md-card--org-management .md-room-card__icon {
  background: url(/../images/organization.png) center/contain no-repeat !important;
  filter: saturate(1.25) brightness(1.05) !important;
}

/* Organizations stack as full-width tiles on smaller screens; on a full-size
   (desktop) screen they split into two columns. (The Rooms grid uses a denser
   auto-fill; orgs carry more text per tile so two fixed columns read cleaner.) */
.md-card--org-management .md-rooms__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
  .md-card--org-management .md-rooms__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* A lone organization spans both columns instead of sitting half-width with an
     empty column beside it. */
  .md-card--org-management .md-rooms__grid .md-room-card:only-child {
    grid-column: 1/-1;
  }
}
/* Org tile is two lines: the org name above an info line (role · N rooms · plan),
   stacked in a flex column beside the icon so the tile reads fuller. */
.md-org-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Individual organization name (per tile) — 18px. */
.md-grid .md-card.md-card--org-management .md-room-card__name {
  font-size: 18px !important;
}

.md-org-card__desc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #5A6A85;
}

/* The image IS the per-room icon now — hide the inline door SVG it wraps. */
.md-room-card__icon > svg {
  display: none;
}

/* Organizations directory page: keep the inline org SVG icon (the dashboard
   room-card variant uses a background image + hides the SVG). Show the SVG in
   a denim medallion so the org tiles read like the room tiles but keep their
   own building icon. */
.md-shell--org-directory .md-room-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(160deg, rgba(76, 134, 216, 0.18), rgba(76, 134, 216, 0.08));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4C86D8;
  filter: none;
}

.md-shell--org-directory .md-room-card__icon > svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Capitalize the access-level label on the org-directory tiles
   (e.g. "supervisor access" → "Supervisor Access"). */
.md-shell--org-directory .md-org-card__desc {
  text-transform: capitalize;
}

/* Org tiles read as actionable "open this org" rows. A stronger border than the
   shared room-card (0.20) signals clickability; the shared surface rule provides
   the rest of the chrome so this only overrides the border colour. */
.md-shell--org-directory .md-room-card {
  border-color: rgba(76, 134, 216, 0.4);
}

/* Right "go" arrow — the same → glyph the home-page buttons use. `margin-left:
   auto` pins it to the right edge in every host (room/org tiles where a flex:1
   column already fills the row, and the attention items where the text doesn't
   grow). Shared by the home Rooms + My Organizations tiles, the org-directory
   tiles, and the Communicators-Need-Attention items. */
.md-room-card__arrow {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #4C86D8;
  transition: transform 0.15s ease;
}

/* Arrow nudges right on hover/focus to reinforce "this opens". */
.md-room-card:hover .md-room-card__arrow,
.md-room-card:focus-visible .md-room-card__arrow,
.md-attention-item:hover .md-room-card__arrow,
.md-attention-item:focus-visible .md-room-card__arrow {
  transform: translateX(3px);
}

/* Clearer focus ring — overrides the shared hover/focus rule's `outline: none`
   (this rule is later + focus-visible-specific). */
.md-shell--org-directory .md-room-card:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 2px;
}

/* Pressed state — the card sinks instead of lifting, reading as a real button. */
.md-shell--org-directory .md-room-card:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.13), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.md-room-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-rooms__all {
  flex-shrink: 0;
}

/* Room count — a styled pill sitting to the right of the "Rooms" header. */
/* .md-rooms__count is styled together with .md-attention__count below (shared
   pill rule) so the two counts stay in lockstep. */
/* ── Communicators Need Attention card (supervisor home, after Rooms) ────────────
   Same flat boards-style surface as the Rooms card, with a danger/attention accent on
   the icon + count. Lists flagged communicators (name + org-status label); each links to
   that communicator. */
.md-grid .md-card.md-card--attention {
  grid-area: attention !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 20px 24px !important;
  border-radius: var(--md-r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 238, 243, 0.95)) !important;
  border: 1.5px solid rgba(27, 54, 93, 0.1) !important;
  border-bottom: 2.5px solid rgba(27, 54, 93, 0.12) !important;
}

.md-card--attention .md-card--attention__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ≤460px: stack the Rooms / My Organizations / Communicators-Need-Attention /
   My Caseload header content vertically and center it — icon on top (it's the
   first child, so column direction lifts it above), title + subtitle centered
   below. Overrides the row layout from the base head rules above (same 0,2,0
   specificity + !important, later in source; the caseload head's own 0,2,0 rule
   sets no flex-direction, so this wins). */
@media (max-width: 460px) {
  .md-card--org-management .md-card--rooms__head,
  .md-card--attention .md-card--attention__head,
  .md-card--caseload .md-card__head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}
/* Rooms header stacks earlier — at ≤640px — icon on top, title + subtitle centered
   below (same treatment as the Communicators Need Attention header, just at a wider
   breakpoint per request). The head stacks/centers its OWN children; the __top wrapper
   (which lays the head beside the "View all rooms" button) must also center, otherwise
   the content-width head stays pinned left. justify-content:center centers the head
   block — and the wrapped View-all button — in the card. */
@media (max-width: 640px) {
  .md-card--rooms .md-card--rooms__head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .md-card--rooms .md-card--rooms__top {
    justify-content: center !important;
  }
}
/* Title matches the Rooms/Caseload header size for consistency down the column.
   Tight line-height so the header block (title + subtitle) reads compactly. */
.md-grid .md-card.md-card--attention .md-card__title {
  font-size: 22px !important;
  line-height: 1.15 !important;
}

.md-grid .md-card.md-card--attention .md-card--boards__divider {
  margin: 0 0 8px;
}

/* Main icon = the communicators illustration (the image IS the icon — no tile, border,
   or shadow); the inner info SVG is hidden. */
.md-grid .md-card.md-card--attention .md-card__icon--attention {
  width: 122px !important;
  height: 122px !important;
  background: url(/../images/communicators.png) center/contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}

.md-grid .md-card.md-card--attention .md-card__icon--attention > svg {
  display: none !important;
}

/* Count pill beside the title — shared by Communicators Need Attention and the
   Rooms card so the two stay identical (one authoritative rule, no drift). */
.md-attention__count,
.md-rooms__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 26px;
  height: 26px;
  margin-left: 12px;
  padding: 0 8px;
  border-radius: 999px;
  /* Solid verdigris fill + white text — high contrast so the count reads as an
     actionable indicator rather than a decorative tint. */
  background: #2A9D8F;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.45);
}

/* ≤640px: drop the count badge's 12px left margin on the My Organizations and
   Communicators Need Attention counts (Rooms keeps its margin — not requested).
   Scoped to org so the shared .md-rooms__count base isn't touched for Rooms. */
@media (max-width: 640px) {
  .md-card--attention .md-attention__count,
  .md-card--org-management .md-rooms__count {
    margin-left: 0;
  }
}
.md-attention__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-grid .md-card.md-card--attention .md-attention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  /* Surface + highlight match the Speak Mode card (.md-card--speak-as-button, ~48246):
     the same cool-white→warm-gray base with the teal/denim atmospheric radials, the
     layered navy depth shadow, and the verdigris showcase halo. The GPU layer holds the
     backdrop blur across scroll so it doesn't flash (same fix as the Speak card). */
  background: radial-gradient(56% 78% at 22% 42%, rgba(42, 157, 143, 0.07), transparent 62%), radial-gradient(44% 82% at 90% 46%, rgba(76, 134, 216, 0.06), transparent 70%), radial-gradient(30% 52% at 80% 82%, rgba(42, 157, 143, 0.045), transparent 72%), linear-gradient(96deg, rgba(42, 157, 143, 0.05) 0%, rgba(76, 134, 216, 0.03) 42%, rgba(42, 157, 143, 0) 78%), linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 55%, rgba(245, 246, 249, 0.88) 100%);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  will-change: transform;
  transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1), 0 0 36px rgba(90, 106, 133, 0.09);
  color: #1B365D;
  text-decoration: none;
  transition: box-shadow 180ms ease-out, transform 140ms ease-out;
}

/* Hover = lift: the Speak card's intensified shadow stack + verdigris halo + 1px rise. */
.md-grid .md-card.md-card--attention .md-attention-item:hover,
.md-grid .md-card.md-card--attention .md-attention-item:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14), 0 0 48px rgba(90, 106, 133, 0.15);
  transform: translateY(-1px);
  outline: none;
}

.md-attention-item__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--md-line);
  /* Soft halo behind each avatar, tinted to that avatar's own dominant color.
     Dashboard::GlowAvatar extracts the color and sets --avatar-glow-rgb per
     image; the terracotta fallback applies when extraction can't run. Two
     layered glows (tight + wide) so it diffuses into the card rather than
     reading as a hard ring. */
  box-shadow: 0 0 12px 0 var(--avatar-glow-strong, rgba(214, 138, 79, 0.18)), 0 0 24px 2px var(--avatar-glow-soft, rgba(214, 138, 79, 0.09));
}

.md-attention-item__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Wrap is the safety net: on a narrow (half-width) card a long status label
     drops below the name instead of overflowing the card (there's no
     overflow:hidden here, and the pill can't shrink). It still reads as an
     aligned column whenever the card is wide enough. `flex` is intentionally
     NOT set — the shared .md-room-card__arrow pins right via margin-left:auto
     and assumes this text does not grow. */
  flex-wrap: wrap;
  gap: 4px 0;
  min-width: 0;
}

/* Fixed-width name slot so the divider — and therefore every status pill — lines
   up in a single column down the card, regardless of username length. */
.md-attention-item__name {
  position: relative;
  flex: 0 0 auto;
  width: 160px;
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modern separator between the name and the status — a thin vertical rule that
   fades at both ends, matching the caseload cards. A real flex element (not a
   name pseudo-element) so the name's overflow:hidden ellipsis can't clip it;
   its side margins set the name↔status gap so every status aligns in a column. */
.md-attention-item__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 13px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(27, 54, 93, 0.32) 50%, transparent 100%);
}

/* Status as a semantic tinted pill — colour encodes meaning so the status is
   recognizable at a glance without reading every label, kept low-saturation
   (≤16% tint) to preserve the calm dashboard feel. The hue is chosen per
   org_status via [data-status]; the base here is the neutral slate fallback
   (e.g. unchecked/unknown). Text uses a darker shade of the same hue for AA
   contrast on the light tint. */
.md-attention-item__status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(90, 106, 133, 0.14);
  color: #5A6A85;
}

/* Modern representative status icon — a small line-icon before each pill label,
   masked so it inherits the pill's per-status colour (currentColor). Decorative
   (the label text already names the status), so no ARIA is needed. */
.md-attention-item__status::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* home — "No home board set" */
.md-attention-item__status[data-status=no-home-board]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

/* help-circle — "Unknown/Nothing" */
.md-attention-item__status[data-status=unchecked]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* clipboard-check — "Waiting for Evaluation" */
.md-attention-item__status[data-status=hourglass]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6a1 1 0 0 1 1 1v1H8V3a1 1 0 0 1 1-1z'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6a1 1 0 0 1 1 1v1H8V3a1 1 0 0 1 1-1z'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
}

/* file-text — "Waiting for Recommendation from Eval" */
.md-attention-item__status[data-status=equalizer]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
}

/* dollar-sign — "Temporary Solution, Waiting for Funding" */
.md-attention-item__status[data-status=piggy-bank]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

/* tablet — "Waiting for Device" */
.md-attention-item__status[data-status=phone]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

/* life-buoy — "Needing Additional Support" */
.md-attention-item__status[data-status=exclamation-sign]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M4.93 4.93l4.24 4.24'/%3E%3Cpath d='M14.83 14.83l4.24 4.24'/%3E%3Cpath d='M14.83 9.17l4.24-4.24'/%3E%3Cpath d='M9.17 14.83l-4.24 4.24'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M4.93 4.93l4.24 4.24'/%3E%3Cpath d='M14.83 14.83l4.24 4.24'/%3E%3Cpath d='M14.83 9.17l4.24-4.24'/%3E%3Cpath d='M9.17 14.83l-4.24 4.24'/%3E%3C/svg%3E");
}

/* Amber — evaluation-related waits (Waiting for Evaluation / for Recommendation). */
.md-attention-item__status[data-status=hourglass],
.md-attention-item__status[data-status=equalizer] {
  background: rgba(242, 185, 90, 0.18);
  color: rgb(156.4719101124, 102.4179775281, 12.3280898876);
}

/* Blue — resource waits (Waiting for Device / for Funding). */
.md-attention-item__status[data-status=phone],
.md-attention-item__status[data-status=piggy-bank] {
  background: rgba(76, 134, 216, 0.12);
  color: #2860C9;
}

/* Teal — needing additional support. */
.md-attention-item__status[data-status=exclamation-sign] {
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
}

/* ≤460px: stack each Communicators-Need-Attention item vertically — avatar on top
   (it's the first child), name + status centered below — instead of the avatar-left
   row. Overrides the base flex-row item rule above (later source, higher specificity). */
@media (max-width: 460px) {
  .md-grid .md-card.md-card--attention .md-attention-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .md-grid .md-card.md-card--attention .md-attention-item__text {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  /* Stacked + centered: the fixed name column and vertical divider don't read
     cleanly, so collapse to a natural inline name + status. */
  .md-grid .md-card.md-card--attention .md-attention-item__name {
    width: auto !important;
  }
  .md-grid .md-card.md-card--attention .md-attention-item__divider {
    display: none !important;
  }
}
/* ≤1024px — enlarge the icon + widen the icon→text gap, matching Speak/Extras. */
@media (max-width: 1024px) {
  .md-grid .md-card.md-card--caseload-as-button .md-card__icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
  }
  .md-grid .md-card.md-card--caseload-as-button .md-card__head {
    gap: 28px !important;
  }
}
/* ── My Organizations card-as-button — full parity with the Extras button ──
   The shared .md-card--as-button class supplies the glassy raised base + gloss
   + hover; these refinements mirror the Extras card (coral soft-glass icon
   tile + glow, brand gradient divider, status-styled subline, 32px padding,
   centered head). Only the org building-icon glyph and wording differ. */
/* Main My Organizations icon = the organizations illustration (image IS the icon —
   no tile/border/shadow), mirroring the Rooms card's classroom icon. */
.md-grid .md-card.md-card--org-management .md-card__icon--org {
  width: 92px !important;
  height: 92px !important;
  background: url(/../images/organizations.png) center/contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  filter: saturate(1.25) brightness(1.05);
}

.md-grid .md-card.md-card--org-management .md-card__icon--org > svg {
  display: none !important;
}

/* Tier-2 title scale (between Tier-1 Rooms/Attention at 28px and Tier-3 utility
   cards at 18px) — see the section-hierarchy scale. */
.md-grid .md-card.md-card--org-management .md-card__title {
  font-size: 22px !important;
  line-height: 1.15 !important;
}

/* "Manage your organizations" header subtitle — 16px (the per-tile info line uses
   .md-org-card__desc, so this only touches the card's header sub). */
.md-grid .md-card.md-card--org-management .md-card__sub {
  font-size: 16px !important;
}

.md-card--org-management .md-card__head {
  /* No divider line under the head — the whole card is the button. */
  border-bottom: none !important;
}

/* Icon container — denim soft-glass tile + denim ambient glow (matching the
   org building glyph's denim color), per the requested rgba(76,134,216,0.3). */
.md-grid .md-card.md-card--org-management.md-card--as-button .md-card__icon {
  background: linear-gradient(180deg, #ffffff, #f2f6fc) !important;
  border: 1px solid rgba(76, 134, 216, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 23, 42, 0.06), 0 0 12px rgba(76, 134, 216, 0.3) !important;
}

.md-grid .md-card.md-card--org-management.md-card--as-button .md-card__title::after {
  content: "";
  display: block;
  /* Uniform home-card accent divider (shared dimensions with the Account /
     Create a Board / Reports / Extras dividers). Speak Mode + My Caseload keep
     their own heavier hero dividers. */
  width: 208px;
  max-width: 100%;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  opacity: 0.7;
  /* Reversed brand gradient (denim → verdigris) — see the Speak divider. */
  background: linear-gradient(90deg, #4C86D8, #2A9D8F);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

.md-grid .md-card.md-card--org-management.md-card--as-button .md-card__sub {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 7px !important;
  margin-left: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #1A7B7A !important;
}

.md-grid .md-card.md-card--org-management.md-card--as-button .md-card__sub::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.55);
}

@media (max-width: 1024px) {
  .md-grid .md-card.md-card--org-management.md-card--as-button .md-card__icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
  }
  .md-grid .md-card.md-card--org-management.md-card--as-button .md-card__head {
    gap: 28px !important;
  }
}
/* Non-communicator users (supporter_role → the grid carries
   .md-grid--with-caseload): Speak Mode is a SECONDARY action for them (My
   Caseload is the primary), so drop Speak's verdigris showcase glow — its
   shadow then matches the Extras button's glassy raised stack (no glow).
   Specificity (0,4,0) beats the base speak glow rule (0,3,0). */
.md-grid.md-grid--with-caseload .md-card.md-card--speak-as-button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1) !important;
}

.md-grid.md-grid--with-caseload .md-card.md-card--speak-as-button:hover,
.md-grid.md-grid--with-caseload .md-card.md-card--speak-as-button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14) !important;
}

/* My Caseload responsive switch. The card renders TWO sibling variants in
   the DOM (--caseload-wide-only and --caseload-narrow-only); these @media
   rules show exactly one per viewport:
     >1024px → wide card with a separate "Manage" button (--caseload-wide-only)
     ≤1024px → whole card is a raised button (--caseload-as-button …-narrow-only)
   Hide-rule selectors match the base `.md-grid .md-card.md-card--caseload`
   specificity (0,3,1) + !important and sit LATER in source order than that
   rule (line ~39827), so its `display: flex !important` doesn't win the
   cascade and leave both variants visible.
   NOTE: the Speak Mode pair is handled in its OWN @media block placed AFTER
   `.md-grid .md-card.md-card--speak` (line ~44532) — putting speak's hide
   rules here (before that base rule) would lose the source-order tiebreak
   and render both speak variants. */
/* My Caseload now always shows its card-as-button variant (--caseload-as-button
   / --caseload-narrow-only) at EVERY screen size; the wide variant with a
   separate "Manage" button (--caseload-wide-only) is retired from display. */
.md-grid .md-card.md-card--caseload-wide-only {
  display: none !important;
}

/* The card-as-button variants (speak / caseload / extras) now render at ALL
   widths and their glow feathers outward — keep the dashboard grid from
   clipping it at any size (0,2,0 beats the base `.md-grid { overflow:hidden }`).
   Was previously scoped to ≤1024px where the as-buttons used to live. */
.md-grid.md-grid--dashboard {
  overflow: visible !important;
}

/* Org management card: full-width like getting-started */
/* My Organizations card — same flat boards-style surface + column layout as the
   Rooms card (header + divider + tile grid). grid-area: org_mgmt. (0,3,0) so it
   beats the base `.md-grid .md-card { background … !important }`, mirroring Rooms. */
.md-grid .md-card.md-card--org-management {
  grid-area: org_mgmt !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 20px 24px !important;
  border-radius: var(--md-r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 238, 243, 0.95)) !important;
  border: 1.5px solid rgba(27, 54, 93, 0.1) !important;
  border-bottom: 2.5px solid rgba(27, 54, 93, 0.12) !important;
}

.md-card--org-management .md-card__head {
  flex: 1 1 auto !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.md-card--org-management .md-card__org-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* The card is a wrapping flex row; when it wraps (narrow width) the
   action button drops to its own line and left-aligns. `margin-left:
   auto` pushes it to the right edge of its div in BOTH the inline and
   wrapped states. Scoped to the org-management card's direct-child
   button so other .md-btn usages are unaffected. */
.md-card--org-management > .md-btn {
  margin-left: auto !important;
}

/* --- Org dropdown (multi-org selector on dashboard) --- */
.md-org-dropdown {
  position: relative !important;
}

.md-org-dropdown__trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(76, 134, 216, 0.2) !important;
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.08), rgba(42, 157, 143, 0.06)) !important;
  color: var(--md-navy, #1B365D) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.md-org-dropdown__trigger:hover {
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.14), rgba(42, 157, 143, 0.1)) !important;
  border-color: rgba(76, 134, 216, 0.3) !important;
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.12) !important;
}

.md-org-dropdown.is-open .md-org-dropdown__trigger {
  background: rgba(76, 134, 216, 0.12) !important;
  border-color: rgba(76, 134, 216, 0.35) !important;
  box-shadow: 0 2px 12px rgba(76, 134, 216, 0.15) !important;
}

.md-org-dropdown__label {
  white-space: nowrap !important;
}

.md-org-dropdown__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(76, 134, 216, 0.15) !important;
  color: #2860C9 !important; /* WCAG AA fix. */
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.md-org-dropdown__chevron {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
  opacity: 0.5 !important;
  transition: transform 0.2s ease !important;
}

.md-org-dropdown.is-open .md-org-dropdown__chevron {
  transform: rotate(180deg) !important;
  opacity: 0.8 !important;
}

.md-org-dropdown__list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 240px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  box-shadow: 0 8px 32px rgba(27, 54, 93, 0.12), 0 2px 8px rgba(27, 54, 93, 0.06) !important;
  z-index: 10 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.md-org-dropdown__option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: var(--md-ink, #111A2E) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
}

.md-org-dropdown__option:hover {
  background: rgba(76, 134, 216, 0.08) !important;
  text-decoration: none !important;
  color: var(--md-ink, #111A2E) !important;
}

.md-org-dropdown__option:active {
  transform: scale(0.98) !important;
}

.md-org-dropdown__org-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(76, 134, 216, 0.1) !important;
  color: #2860C9 !important; /* WCAG AA fix. */
  flex-shrink: 0 !important;
}

.md-org-dropdown__org-name {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.md-grid__divider {
  grid-area: divider !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 2.5rem !important;
  min-height: 1px !important;
}

.md-grid__divider::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(27, 54, 93, 0.12) 12%, rgba(27, 54, 93, 0.18) 50%, rgba(27, 54, 93, 0.12) 88%, transparent 100%) !important;
}

/* ---------- User page (My Account) hero and summary ---------- */
.md-hero--user {
  position: relative;
  padding: 36px 24px 32px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Larger screens — more breathing room on the left/right of the user hero card,
   and a narrower card (85% width, kept centered by the base auto margins).
   `!important` is required to beat the shared `.md-hero { width: auto !important }`
   base rule (app.scss ~42006), which applies to this same element. */
@media (min-width: 1025px) {
  .md-hero--user {
    width: 85% !important;
    padding-left: 88px !important;
    padding-right: 88px !important;
  }
}
.md-hero--user__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  /* Flex-row places the STATUS card immediately to the right of the
     avatar (was stacked underneath when this was flex-direction: column).
     The online_marker inside is `position: absolute` so it stays pinned
     to the avatar regardless of axis. align-items: center keeps the
     pill vertically centered against the 96px avatar. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.md-hero--user__avatar {
  width: 132px; /* 120px * 1.1 */
  height: 132px; /* 120px * 1.1 */
  border-radius: 33px; /* 30px * 1.1 — keep the rounded-square proportion at the larger size */
  object-fit: cover;
  padding: 8px;
  border: 2px solid rgba(42, 157, 143, 0.15);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.08);
}

.md-hero--user__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* 1024px and smaller (but still in the row layout, above the 768px mobile-column
   breakpoint): center the avatar + text group horizontally within the card. The body
   stops growing to fill the row (flex: 0 1 auto) so the group has a natural width to
   center; text inside the body keeps its default LEFT alignment beside the avatar.
   Placed AFTER the base `.md-hero--user__body` rule above so it wins on source order
   (equal specificity) within the media range. */
@media (min-width: 769px) and (max-width: 1024px) {
  .md-hero--user {
    justify-content: center;
  }
  .md-hero--user__body {
    flex: 0 1 auto;
  }
}
.md-hero--user__name-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
}

.md-hero--user__name {
  margin: 0;
  height: auto;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--md-ink);
  line-height: 1.3;
}

.md-hero--user__details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  /* Larger top gap separating the org info from the username row / divider above. */
  margin: 16px 0 2px;
}

.md-hero--user__location-row {
  /* Pulled up so the location sits closer to the "User in <org>" line above. */
  margin: -6px 0 4px;
}

.md-hero--user__detail-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-muted);
  opacity: 0.65;
  margin: 0 12px;
  vertical-align: middle;
}

/* Username-row divider — the focused badge-action card's title underline gradient
   (denim → verdigris, fading off to the right via the mask), shown under the
   name/username row on the account page. */
.md-hero--user__name-divider {
  display: block;
  width: 260px;
  max-width: 100%;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4C86D8, #2A9D8F);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);
}

.md-hero--user__username {
  font-size: 18px;
  color: var(--md-muted);
  font-weight: 600;
}

/* ≤460px — drop the username onto its own row beneath the name and remove the dot
   separator (which only makes sense between two inline items on one line). Stacking the
   name-row as a centered column keeps it aligned with the centered mobile hero. */
@media (max-width: 460px) {
  .md-hero--user__name-row {
    flex-direction: column;
    align-items: center;
  }
  .md-hero--user__detail-sep {
    display: none;
  }
}
.md-hero--user__meta {
  font-size: 17px;
  color: var(--md-muted);
  line-height: 1.6;
}

.md-hero--user__url {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.md-hero--user__url a {
  color: var(--md-teal);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.md-hero--user__url a:hover {
  color: #1a7a70;
}

.md-hero--user .online_marker {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.md-user-summary {
  color: var(--md-ink);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.md-user-summary__page-divider {
  border: none;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
  margin: 24px 0;
}

.md-user-summary__quick-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.md-user-summary__quick-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 999px;
  background: #7693B9;
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.md-user-summary__quick-pill:hover {
  background: #8aa3c7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #fff;
}

/* ── User account stat cards (reuses ub-boards-page__stat-* styles) ── */
.md-user-summary .row.big_buttons {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.md-user-summary .md-user-summary__stats-row {
  margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px)) !important;
  justify-content: center !important;
}

.md-user-summary__stats-row + .md-user-summary__stats-row {
  margin-top: 12px;
}

.md-user-summary__actions-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.md-user-summary__action-btn {
  width: 100%;
  padding: 10px 20px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  background: #F8F9FA;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-user-summary__action-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.08);
}

.md-user-summary__sub-link {
  margin-top: 6px;
  font-size: 14px;
}

.md-user-summary .ub-boards-page__filter-label {
  font-size: 14px; /* 1.15rem * 1.10 */
}

.md-user-summary .ub-boards-page__filter-input {
  font-size: 14px;
}

/* ── User activity cards (Recent Sessions, Current Goals) ── */
.md-user-activity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
  margin-bottom: 24px;
  justify-content: center;
}

.md-user-activity__card {
  background: #ffffff;
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-top: 3px solid rgba(20, 127, 130, 0.3);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04);
  transition: box-shadow 0.18s ease, border-top-color 0.18s ease;
}

.md-user-activity__card:hover {
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.09), 0 6px 24px rgba(17, 26, 46, 0.07);
  border-top-color: rgba(20, 127, 130, 0.45);
}

.md-user-activity__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.07);
}

.md-user-activity__card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5A6A85;
}

.md-user-activity__card-body {
  padding: 16px 22px 20px;
}

.md-user-activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-user-activity__item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 26, 46, 0.06);
}

.md-user-activity__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.md-user-activity__item:first-child {
  padding-top: 0;
}

.md-user-activity__item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.md-user-activity__item-date {
  font-size: 14px;
  color: var(--md-muted);
  white-space: nowrap;
}

.md-user-activity__item-link {
  font-size: 1.51rem;
  font-weight: 600;
  color: #147F82;
  text-decoration: none;
}

.md-user-activity__item-link:hover {
  text-decoration: underline;
}

.md-user-activity__item-summary {
  font-size: 14px;
  color: #7a8a9e;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-user-activity__empty {
  font-size: 14px;
  color: #7a8a9e;
  font-style: italic;
  margin: 0;
}

.md-user-activity__card-footer {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid rgba(17, 26, 46, 0.06);
}

.md-user-activity__see-all {
  font-size: 14px; /* 0.95rem * 1.25 */
  font-weight: 600;
  color: #147F82;
  text-decoration: none;
}

.md-user-activity__see-all:hover {
  text-decoration: underline;
}

/* ── Profile edit page (modern) ── */
.md-edit-profile {
  max-width: 800px;
  margin: 0 auto;
  color: var(--md-ink);
}

@keyframes md-slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.md-edit-profile__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
  animation: md-slide-in-from-left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.md-edit-profile__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-edit-profile__quick-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.md-edit-profile__back-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.15);
  background: #F8F9FA;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-edit-profile__back-link:hover {
  background: #F0F4F8;
  border-color: rgba(17, 26, 46, 0.25);
  text-decoration: none;
  color: #374151;
}

.md-edit-profile__pill-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.md-edit-profile__pill-link:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #fff;
}

.md-edit-profile__form {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.md-edit-profile__form .form-group {
  margin-bottom: 14px;
}

.md-edit-profile__section {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.md-edit-profile__section:last-of-type {
  margin-bottom: 16px;
}

.md-edit-profile__subgroup {
  margin: 0 0 12px;
  padding: 0 0 0 0;
}

.md-edit-profile__subgroup-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted);
  margin: 0 0 12px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.08);
}

.md-edit-profile__section--compact .form-group {
  margin-bottom: 6px;
}

.md-edit-profile__section--compact .form-control-static {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.md-edit-profile__section--compact .checkbox,
.md-edit-profile__section--compact .big_checkbox {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 4px;
}

.md-edit-profile__section--compact .big_checkbox label p {
  margin: 0;
}

.md-edit-profile__section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A6A85;
  border: none;
  border-bottom: 2px solid rgba(20, 127, 130, 0.25);
  padding: 0 0 8px;
  margin: 0 0 18px;
  width: auto;
}

.md-edit-profile__form .col-sm-3,
.md-edit-profile__form .col-sm-4,
.md-edit-profile__form .col-sm-5,
.md-edit-profile__form .col-sm-6,
.md-edit-profile__form .col-sm-8 {
  width: auto;
  float: none;
}

.md-edit-profile__form .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 16px;
}

.md-edit-profile__form .form-group > .control-label {
  flex: 0 0 180px;
  text-align: right;
  padding-top: 8px;
}

.md-edit-profile__form .form-group > div {
  flex: 1 1 0;
  min-width: 200px;
}

.md-edit-profile__form .control-label {
  font-size: 14px;
  font-weight: 700;
  color: #5A6A85;
  letter-spacing: 0.02em;
}

.md-edit-profile__form .form-control {
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-edit-profile__form .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.md-edit-profile__form select.form-control {
  padding: 6px 32px 6px 14px;
  height: auto;
  line-height: 1.4;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346505F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Modern-select within edit profile */
.md-edit-profile__form .modern-select {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.md-edit-profile__form .modern-select__trigger {
  display: block;
  width: 100%;
  padding: 8px 44px 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346505F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modern-select__trigger-text--placeholder {
  color: var(--md-muted);
  font-style: italic;
}

.md-edit-profile__form .modern-select__trigger:hover {
  border-color: rgba(17, 26, 46, 0.22);
}

.md-edit-profile__form .modern-select__trigger:focus-visible,
.md-edit-profile__form .modern-select--open .modern-select__trigger {
  border-color: var(--md-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
}

.md-edit-profile__form .modern-select__list {
  /* Same pattern as the privacy modal's bound-select — `position:
     static` (instead of absolute) lets the open menu PUSH the form
     content below it instead of floating over a clipped parent.
     The card surrounding this form has overflow-clipping borders;
     `position: absolute` got cut off at the card edge. Static flow
     keeps the menu fully visible and grows the card naturally. */
  position: static;
  margin-top: 4px;
  /* Show all options at once — no internal scroll. The role
     picker has 7 entries; hiding any behind a scrollbar made the
     full list non-obvious. */
  max-height: none;
  overflow-y: visible;
  /* z-index irrelevant in flow — kept low for safety if another rule
     re-applies absolute positioning. */
  z-index: 150;
  list-style: none;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(27, 54, 93, 0.1);
  max-height: 280px;
  overflow-y: auto;
}

.md-edit-profile__form .modern-select__option {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.4;
}

.md-edit-profile__form .modern-select__option:hover {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

.md-edit-profile__form .modern-select__option--selected {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  font-weight: 600;
}

.md-edit-profile__form .modern-select__option--selected:hover {
  background: rgba(42, 157, 143, 0.22);
}

.md-edit-profile__form .form-control-static {
  font-size: 14px;
  color: var(--md-ink);
}

.md-edit-profile__form .form-control-static a {
  color: #147F82;
  font-weight: 600;
}

.md-edit-profile__form .checkbox label,
.md-edit-profile__form .big_checkbox label {
  font-size: 14px;
  color: var(--md-ink);
  line-height: 1.5;
  display: flex !important;
  align-items: flex-start;
}

.md-edit-profile__form .checkbox em,
.md-edit-profile__form .big_checkbox em {
  font-size: 14px;
  color: var(--md-muted);
}

/* Modern checkboxes */
.md-edit-profile__form input[type=checkbox] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  border: 1.5px solid rgba(17, 26, 46, 0.25) !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 8px 0 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.md-edit-profile__form input[type=checkbox]:checked {
  background: #fff !important;
  border-color: rgba(17, 26, 46, 0.4) !important;
}

.md-edit-profile__form input[type=checkbox]:checked::after {
  content: "" !important;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #46505F !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg);
}

.md-edit-profile__form input[type=checkbox]:hover {
  border-color: rgba(17, 26, 46, 0.4) !important;
}

.md-edit-profile__form .big_checkbox {
  padding-left: 0 !important;
}

.md-edit-profile__form .big_checkbox label {
  padding-left: 0 !important;
}

/* Feature bullet list */
.md-edit-profile__feature-list {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: none;
}

.md-edit-profile__feature-list li {
  position: relative;
  padding-left: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--md-muted);
  line-height: 1.5;
}

.md-edit-profile__feature-list li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-teal);
}

.md-edit-profile__form .btn-primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.3);
  border-radius: 10px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.md-edit-profile__form .btn-primary:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.md-edit-profile__form .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-edit-profile__form .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-edit-profile__form .text-danger {
  font-size: 14px;
}

.md-edit-profile__form .text-muted {
  font-size: 14px;
  color: var(--md-muted);
}

.md-edit-profile__divider {
  border: none;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
  margin: 24px 0;
}

.md-edit-profile__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

.md-edit-profile__connections {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
  text-align: center;
}

.md-edit-profile__connections-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A6A85;
  margin: 0 0 16px;
}

.md-edit-profile__connections h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--md-ink);
  margin-bottom: 20px;
}

.md-edit-profile__connections h4 {
  font-size: 1.44rem;
  font-weight: 700;
  color: #5A6A85;
}

.md-edit-profile__integrations-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

.md-edit-profile__integration-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 12px;
  background: #fff;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.md-edit-profile__integration-btn:hover {
  background: #F8F9FA;
  border-color: rgba(20, 127, 130, 0.3);
  box-shadow: 0 3px 12px rgba(17, 26, 46, 0.09);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--md-ink);
}

.md-edit-profile__integration-icon {
  height: 28px;
  width: 28px;
  object-fit: contain;
  border-radius: 6px;
}

.md-edit-profile__connections .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-edit-profile__connections .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-edit-profile__connections .table {
  font-size: 14px;
}

.md-edit-profile__conn-panel {
  margin: 20px 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 24px 28px;
}

.md-edit-profile__conn-panel-title {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--md-ink);
}

.md-edit-profile__conn-section {
  margin-bottom: 24px;
}

.md-edit-profile__conn-section:last-child {
  margin-bottom: 0;
}

.md-edit-profile__conn-section-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A6A85;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.08);
}

.md-edit-profile__conn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-edit-profile__conn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-edit-profile__conn-item:hover {
  background: rgba(42, 157, 143, 0.04);
}

.md-edit-profile__conn-item + .md-edit-profile__conn-item {
  border-top: 1px solid rgba(17, 26, 46, 0.05);
}

.md-edit-profile__conn-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.md-edit-profile__conn-item-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  padding: 4px;
  flex-shrink: 0;
}

.md-edit-profile__conn-item-icon-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.md-edit-profile__conn-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
}

.md-edit-profile__conn-item-meta {
  font-size: 14px;
  color: var(--md-muted);
  margin-top: 2px;
}

.md-edit-profile__conn-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(17, 26, 46, 0.06);
  color: #5A6A85;
  margin-left: 6px;
}

.md-edit-profile__conn-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.md-edit-profile__conn-test {
  font-size: 14px;
  font-weight: 600;
  color: #147F82;
  text-decoration: none;
}

.md-edit-profile__conn-test:hover {
  text-decoration: underline;
}

.md-edit-profile__conn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--md-muted);
  transition: background 0.12s ease, color 0.12s ease;
}

.md-edit-profile__conn-remove:hover {
  background: rgba(180, 60, 60, 0.08);
  color: #8b2a2a;
}

.md-edit-profile__conn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.md-edit-profile__conn-empty {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
  margin: 0 0 8px;
}

.md-edit-profile__delete-row {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(17, 26, 46, 0.08);
}

.md-edit-profile__delete-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 28px;
  border: 1.5px solid rgba(180, 60, 60, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #8b2a2a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-edit-profile__delete-btn:hover {
  background: rgba(180, 60, 60, 0.06);
  border-color: rgba(180, 60, 60, 0.4);
  color: #6b1a1a;
  text-decoration: none;
}

/* ── Billing page (modern) ── */
.md-billing {
  max-width: 800px;
  margin: 0 auto;
  color: var(--md-ink);
}

.md-billing__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
}

.md-billing__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-billing__subheader {
  font-size: 1.44rem;
  color: var(--md-muted);
  margin: -18px 0 24px;
}

.md-billing__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}

.md-billing__status {
  font-size: 1.62rem; /* 1.35rem * 1.2 */
  line-height: 1.6;
  color: var(--md-ink);
  margin-bottom: 20px;
}

.md-billing__status .glyphicon {
  font-size: 28px;
  color: #5A6A85;
  margin-right: 14px;
  float: left;
}

.md-billing__status b,
.md-billing__status strong {
  color: var(--md-ink);
}

.md-billing__card p {
  font-size: 1.44rem; /* 1.2rem * 1.2 */
  line-height: 1.6;
  color: var(--md-ink);
}

.md-billing__card a {
  color: #147F82;
  font-weight: 600;
  font-size: 1.44rem;
  text-decoration: none;
}

.md-billing__card a:hover {
  text-decoration: underline;
}

.md-billing__card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--md-ink);
  margin: 24px 0 12px;
}

.md-billing__card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #5A6A85;
  margin: 20px 0 12px;
}

.md-billing__card .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin-right: 8px;
  margin-bottom: 8px;
}

.md-billing__card .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-billing__card .btn-primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.3);
  border-radius: 10px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  margin-right: 8px;
  margin-bottom: 8px;
}

.md-billing__card .btn-primary:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.md-billing__card .form-control {
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-billing__card .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.md-billing__card .explanation {
  font-size: 14px; /* 1.1rem * 1.2 */
  color: var(--md-muted);
  line-height: 1.6;
}

.md-billing__card .row {
  margin-left: 0;
  margin-right: 0;
}

.md-billing__loading {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
}

.md-billing__back-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

.md-billing__back-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 28px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-billing__back-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

/* ── Recordings page (modern) ── */
.md-recordings {
  max-width: 800px;
  margin: 0 auto;
  color: var(--md-ink);
}

.md-recordings__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
}

.md-recordings__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-recordings__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}

.md-recordings__card .table {
  font-size: 14px;
}

.md-recordings__card .table th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5A6A85;
  border-bottom: 2px solid rgba(17, 26, 46, 0.1);
}

.md-recordings__card .table td {
  vertical-align: middle;
  border-top: 1px solid rgba(17, 26, 46, 0.06);
}

.md-recordings__card .form-control {
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-recordings__card .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.md-recordings__card .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-recordings__card .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-recordings__card .text-muted {
  color: var(--md-muted);
  font-size: 14px;
}

.md-recordings__card a {
  color: #147F82;
  font-weight: 600;
}

.md-recordings__loading {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
}

.md-recordings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 26, 46, 0.08);
}

.md-recordings__back-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

@media (max-width: 640px) {
  .md-recordings__card {
    padding: 20px 18px;
    border-radius: 16px;
  }
}
/* ── Offline Boards page (modern) ── */
.md-offline-boards {
  max-width: 700px;
  margin: 0 auto;
  color: var(--md-ink);
}

.md-offline-boards__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}

.md-offline-boards__intro {
  font-size: 1.62rem;
  line-height: 1.6;
  color: var(--md-ink);
  margin: 0 0 24px;
}

.md-offline-boards__credit {
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted);
  margin: 0 0 10px;
  padding: 0 20px;
}

.md-offline-boards__list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

.md-offline-boards__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink);
  cursor: pointer;
  transition: background 0.12s ease;
  text-decoration: none;
}

.md-offline-boards__item + .md-offline-boards__item {
  border-top: 1px solid rgba(17, 26, 46, 0.05);
}

.md-offline-boards__item:hover {
  background: rgba(42, 157, 143, 0.06);
}

.md-offline-boards__item--chosen {
  background: rgba(42, 157, 143, 0.08);
  font-weight: 600;
  color: #147F82;
}

.md-offline-boards__item--chosen:hover {
  background: rgba(42, 157, 143, 0.12);
}

@media (max-width: 640px) {
  .md-offline-boards__card {
    padding: 20px 18px;
    border-radius: 16px;
  }
}
/* ── Logs page (modern) ── */
.md-logs {
  max-width: 900px;
  margin: 0 auto;
  color: var(--md-ink);
}

.md-logs__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
  animation: md-slide-in-from-left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.md-logs__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-logs__title a {
  font-size: 14px;
  font-weight: 600;
  color: #147F82;
}

.md-logs__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}

.md-logs__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--md-ink);
}

.md-logs__card a {
  color: #147F82;
  font-weight: 600;
}

.md-logs__card .table {
  font-size: 14px;
}

.md-logs__card .table th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5A6A85;
  border-bottom: 2px solid rgba(17, 26, 46, 0.1);
}

.md-logs__card .table td {
  vertical-align: middle;
  border-top: 1px solid rgba(17, 26, 46, 0.06);
}

.md-logs__card .form-control {
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-logs__card .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.md-logs__card .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-logs__card .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-logs__card .btn-primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.3);
  border-radius: 10px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.md-logs__card .btn-primary:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.md-logs__card .glyphicon {
  font-size: 1.44rem;
}

.md-logs__card .text-muted {
  color: var(--md-muted);
  font-size: 14px;
}

.md-logs__card .alert {
  border-radius: 12px;
  font-size: 14px;
}

.md-logs__card .well {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid var(--md-line);
  border-radius: 14px;
  box-shadow: none;
}

.md-logs__card .pagination > li > a,
.md-logs__card .pagination > li > span {
  border-radius: 8px;
  margin: 0 2px;
  font-size: 14px;
  color: var(--md-ink);
}

.md-logs__card .pagination > .active > a {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border-color: rgba(70, 80, 95, 0.3);
}

.md-logs__action-pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
  width: 100%;
  text-align: center;
}

.md-logs__action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-logs__action-pill:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.08);
}

.md-logs__action-pill svg {
  color: #5A6A85;
}

.md-logs__loading {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
}

.md-logs__back-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

@media (max-width: 640px) {
  .md-logs__card {
    padding: 20px 18px;
    border-radius: 16px;
  }
}
/* ── Goals page (modern) ── */
.md-goals {
  max-width: 800px;
  margin: 0 auto;
  color: var(--md-ink);
}

.md-goals__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
}

.md-goals__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-goals__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg, 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}

.md-goals__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--md-ink);
}

.md-goals__card a {
  color: #147F82;
  font-weight: 600;
}

.md-goals__card .well {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid var(--md-line);
  border-radius: 20px;
  box-shadow: none;
}

.md-goals__card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink);
}

.md-goals__card h3 {
  margin-top: 0;
}

.md-goals__card .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-goals__card .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-goals__card .btn-primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.3);
  border-radius: 10px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.md-goals__card .btn-primary:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.md-goals__card .text-muted {
  color: var(--md-muted);
  font-size: 14px;
}

.md-goals__card .description {
  font-size: 14px;
  color: var(--md-muted);
}

.md-goals__loading {
  font-size: 14px;
  color: var(--md-muted);
  font-style: italic;
}

.md-goals__back-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

@media (max-width: 640px) {
  .md-goals__card {
    padding: 20px 18px;
    border-radius: 16px;
  }
}
/* ── Goal-list item — modern row inside the goals card ── */
/* Action group (right side of each goal row): icon-tile buttons with
   labels below the icon. Replaces the prior bootstrap btn-lg float-
   right group so the actions read as a deliberate toolbar instead of
   stacked text buttons. */
.md-goal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  clear: both;
}

.md-preferences__header {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  clear: both;
}

/* Pass-through wrapper — keeps the existing template grouping for the
   active-goal pair (New Note + Quick Assessment) but flows children
   directly into the parent flex layout so all tiles share one even
   gap rule. */
.md-goal-actions__group {
  display: contents;
}

.md-goal-action {
  flex: 1 1 0;
  min-width: 5rem;
  min-height: 5rem;
  padding: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.02) 0%, rgba(27, 54, 93, 0.07) 100%);
  color: #374151;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.04);
}

.md-goal-action:hover {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.04) 0%, rgba(27, 54, 93, 0.12) 100%);
  border-color: rgba(27, 54, 93, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(27, 54, 93, 0.08);
}

.md-goal-action__icon {
  font-size: 18px;
  color: #1B365D;
  line-height: 1;
}

.md-goal-action__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #1B365D;
  text-align: center;
  white-space: normal;
}

/* Role-color modifiers — match the caseload action tile palette:
     Note     → blue   (communication / writing)
     Assess   → teal   (measurement / diagnostic)
     Prio     → violet (priority / setting)
     Retire   → coral  (completion)
     Restore  → teal   (revival)
     Delete   → coral  (destruction) */
.md-goal-action--note {
  background: linear-gradient(180deg, rgba(76, 134, 216, 0.04) 0%, rgba(76, 134, 216, 0.18) 100%);
  border-color: rgba(76, 134, 216, 0.2);
}

.md-goal-action--note:hover {
  background: linear-gradient(180deg, rgba(76, 134, 216, 0.06) 0%, rgba(76, 134, 216, 0.3) 100%);
  border-color: rgba(76, 134, 216, 0.45);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 4px rgba(76, 134, 216, 0.1), 0 6px 12px -3px rgba(76, 134, 216, 0.18);
}

.md-goal-action--assess {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0.2) 100%);
  border-color: rgba(42, 157, 143, 0.22);
}

.md-goal-action--assess:hover {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.08) 0%, rgba(42, 157, 143, 0.32) 100%);
  border-color: rgba(42, 157, 143, 0.48);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 4px rgba(42, 157, 143, 0.12), 0 6px 12px -3px rgba(42, 157, 143, 0.2);
}

.md-goal-action--prio {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.18) 100%);
  border-color: rgba(139, 92, 246, 0.2);
}

.md-goal-action--prio:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.3) 100%);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 4px rgba(139, 92, 246, 0.1), 0 6px 12px -3px rgba(139, 92, 246, 0.18);
}

.md-goal-action--retire,
.md-goal-action--delete {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.05) 0%, rgba(232, 122, 111, 0.2) 100%);
  border-color: rgba(232, 122, 111, 0.22);
}

.md-goal-action--retire:hover,
.md-goal-action--delete:hover {
  background: linear-gradient(180deg, rgba(232, 122, 111, 0.08) 0%, rgba(232, 122, 111, 0.32) 100%);
  border-color: rgba(232, 122, 111, 0.48);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 4px rgba(232, 122, 111, 0.12), 0 6px 12px -3px rgba(232, 122, 111, 0.2);
}

.md-goal-action--restore {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0.2) 100%);
  border-color: rgba(42, 157, 143, 0.22);
}

.md-goal-action--restore:hover {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.08) 0%, rgba(42, 157, 143, 0.32) 100%);
  border-color: rgba(42, 157, 143, 0.48);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 4px rgba(42, 157, 143, 0.12), 0 6px 12px -3px rgba(42, 157, 143, 0.2);
}

/* Contain the floated flag/avatar so the goal-item card grows to
   fit its content (and the action toolbar that now sits centered
   below it) instead of letting floats spill out below the bottom
   border. */
.md-goals__card .well.goal {
  display: flow-root;
}

/* Coaching Strategies panel — clean caseload-card-style surface
   with AAC industry-standard partner strategies. Neutral navy
   vocabulary (no teal tint), modern icon badges replacing numbered
   chips, and subtle layered shadow for depth. The supervisor's
   original goal.description is preserved as a "Therapist note"
   callout at the bottom when present. */
.md-goal-coaching {
  margin-top: 18px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(27, 54, 93, 0.02) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 1px 3px rgba(27, 54, 93, 0.04), 0 6px 18px -6px rgba(27, 54, 93, 0.1);
}

/* details/summary collapsible behavior — closed by default, expands
   on click. The summary IS the head, so it's clickable. Default
   marker hidden in favor of the rounded chevron badge on the right. */
.md-goal-coaching:not([open]) .md-goal-coaching__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.md-goal-coaching__head {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.07);
  user-select: none;
  transition: margin 0.15s ease, padding 0.15s ease, border-color 0.15s ease;
}

.md-goal-coaching__head::-webkit-details-marker {
  display: none;
}

.md-goal-coaching__head::marker {
  content: "";
}

.md-goal-coaching__head-text {
  flex: 1;
  min-width: 0;
}

.md-goal-coaching__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #1B365D;
  transition: transform 0.18s ease, background 0.12s ease;
}

.md-goal-coaching__head:hover .md-goal-coaching__chevron {
  background: rgba(27, 54, 93, 0.08);
}

.md-goal-coaching[open] .md-goal-coaching__chevron {
  transform: rotate(180deg);
}

.md-goal-coaching__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.55);
  margin-bottom: 6px;
}

.md-goal-coaching__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.78);
  line-height: 1.5;
}

.md-goal-coaching__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.md-goal-coaching__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.md-goal-coaching__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.02) 0%, rgba(27, 54, 93, 0.07) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.04);
}

.md-goal-coaching__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.md-goal-coaching__body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 4px;
  line-height: 1.3;
}

.md-goal-coaching__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.72);
}

.md-goal-coaching__note {
  position: relative;
  margin-top: 18px;
  padding: 14px 16px 14px 19px;
  background: rgba(27, 54, 93, 0.03);
  border-radius: 8px;
  overflow: hidden;
}

.md-goal-coaching__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #2A9D8F 0%, #316F70 100%);
}

.md-goal-coaching__note-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.6);
  margin-bottom: 4px;
}

.md-goal-coaching__note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.8);
}

/* Override the legacy `.goal .description` rule (white-space:nowrap +
   ellipsis + max-width: calc(100% - 200px)) so the full goal
   description wraps across the available width in the modern card.
   The 200px reserve was for the old float-right button cluster; now
   that the actions sit centered below the content, the description
   can take the full row. */
.md-goals__card .well.goal .description {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

/* Modern dimensional flag icon — sits in the 50px badge slot where
   no badge image is available. */
.md-goal-flag-icon {
  display: block;
  margin-top: 4px;
}

/* Info pill for the goal's "started/ended X ago" timestamp — gray
   glassy gradient surface with a hairline navy outline and a soft
   contact shadow so it reads as a raised metadata badge sitting
   beside the flag, directly under the goal summary. */
.md-goal-time-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(27, 54, 93, 0.08) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(27, 54, 93, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: rgba(27, 54, 93, 0.85);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Primary Goal — sunken section. Tray-style recess that pulls the
   primary goal INTO the page (vs the secondary/past goals that sit
   on the page surface), using the same sunken vocabulary as the
   caseload tray: inset shadow + soft navy-tinted bg + hairline
   border. */
.md-goal-primary-section {
  margin: 12px 0 28px;
  padding: 20px 22px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: var(--md-r-lg, 18px);
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.1), inset 0 1px 1px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

.md-goal-primary-section__title {
  margin: 0 0 14px;
}

/* Past Goals — pulled out of the main goals card into its own
   archival section beneath. Same card vocabulary as the primary
   section (sunken tray) so retired goals feel like history, not
   active work. */
.md-goals__past-section {
  margin: 28px 0;
  padding: 20px 22px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: var(--md-r-lg, 18px);
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.1), inset 0 1px 1px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

.md-goals__past-title {
  margin: 0 0 14px;
}

.md-goals__past-section .well.goal {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid var(--md-line);
  border-radius: 20px;
  box-shadow: none;
  padding: 19px;
  display: flow-root;
  margin-bottom: 12px;
}

.md-goals__past-section .well.goal:last-child {
  margin-bottom: 0;
}

.md-goals__past-section .well.goal .description {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

/* Primary goal's inner well — lighter than secondary/past with a
   soft white→cool-gray gradient so the highest-priority goal feels
   elevated within the sunken tray that contains it. */
.md-goal-primary-section .well.goal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.86) 100%);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 1px 2px rgba(27, 54, 93, 0.04);
  padding: 19px;
  display: flow-root;
}

.md-goal-primary-section .well.goal .description {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

/* Centered row of goal-page navigation buttons (Set a New Goal /
   Browse Community Goals / See User Badges). Matches the caseload
   .md-caseload__action style: soft white surface, hairline border,
   8px radius, 14px semibold ink. */
.md-goal-nav-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  clear: both;
}

.md-goal-nav-action,
a.md-goal-nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 42px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 1px 2px rgba(27, 54, 93, 0.04);
}

.md-goal-nav-action:hover,
a.md-goal-nav-action:hover,
.md-goal-nav-action:focus-visible {
  background: #F8F9FA;
  border-color: rgba(20, 127, 130, 0.3);
  color: #374151;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 6px rgba(27, 54, 93, 0.08);
}

/* ── Preferences page (modern) ── */
.md-preferences {
  max-width: 800px;
  margin: 0 auto;
  color: var(--md-ink);
}

/* Fix A from docs/styling-recurring-problems.md §1 — flow-positioned
   dropdown. The preferences page uses Basics/Notifications/Styling
   accordion cards with `overflow: hidden` rounded edges, so an
   absolute-positioned dropdown gets clipped at the card boundary.
   Make the dropdown lists static so they push siblings down when
   open and the parent grows to fit. */
.md-preferences .bound-select__list,
.md-preferences .modern-select__list {
  position: static;
}

.md-preferences__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
  animation: md-slide-in-from-left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (prefers-reduced-motion: reduce) {
  .md-preferences__header {
    animation: none;
  }
}
.md-preferences__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-preferences__back-link {
  margin-left: auto;
}

.md-preferences__header--device {
  margin-top: 36px;
}

/* Preference-box: modern card styling */
.md-pref-box {
  border: 1px solid var(--md-line) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.md-pref-box__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  background: rgba(248, 250, 252, 0.8);
  border: none;
  border-bottom: 1px solid var(--md-line);
  transition: background 0.12s ease;
  /* `.md-pref-box__header` is now a <button> (was a <div>). Reset button
     defaults so the header still looks the same. Added 2026-04-11. */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
}

.md-pref-box__header:hover {
  background: rgba(240, 243, 247, 0.9);
}

.md-pref-box__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(17, 26, 46, 0.05);
  color: #5A6A85;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-pref-box__header:hover .md-pref-box__chevron {
  background: rgba(17, 26, 46, 0.08);
  color: var(--md-ink);
}

.md-pref-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

.md-pref-box__title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink);
}

.md-pref-box__collapsed {
  display: none;
}

.md-pref-box .form-group {
  padding-left: 20px;
  padding-right: 20px;
}

.md-pref-box__header + .form-group,
.md-pref-box__header + span + .form-group,
.md-pref-box > .form-group:nth-of-type(1) {
  margin-top: 14px !important;
}

.md-preferences__form .col-sm-5,
.md-preferences__form .col-sm-6 {
  width: 60% !important;
}

.md-preferences__form .form-group > .col-sm-2:not(.control-label),
.md-preferences__form .form-group > .col-sm-3:not(.control-label) {
  width: auto !important;
  min-width: 200px;
}

.md-preferences__form .input-group {
  min-width: 160px;
}

/* Modern number picker */
.md-number-picker {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  max-width: 180px;
}

.md-number-picker__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}

.md-number-picker__btn:hover {
  background: #F0F4F8;
  color: #147F82;
}

.md-number-picker__btn:active {
  background: #e2e6eb;
}

.md-number-picker__input {
  width: 80px;
  text-align: center;
  border: none !important;
  border-left: 1px solid rgba(17, 26, 46, 0.08) !important;
  border-right: 1px solid rgba(17, 26, 46, 0.08) !important;
  border-radius: 0 !important;
  padding: 6px 8px;
  font-size: 14px;
  color: var(--md-ink);
  outline: none;
  box-shadow: none !important;
}

.md-number-picker__input:focus-visible {
  background: rgba(42, 157, 143, 0.04);
}

.md-preferences__form .control-label {
  font-size: 14px;
  font-weight: 700;
  color: #5A6A85;
}

.md-preferences__form .form-control {
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  color: var(--md-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-preferences__form .form-control:focus-visible {
  border-color: var(--md-teal);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.md-preferences__form .form-control-static {
  font-size: 14px;
  color: var(--md-ink);
}

.md-preferences__form .checkbox label,
.md-preferences__form .big_checkbox label {
  font-size: 14px;
  color: var(--md-ink);
  line-height: 1.5;
  display: flex !important;
  align-items: flex-start;
}

.md-preferences__form .checkbox,
.md-preferences__form .big_checkbox {
  display: block !important;
  width: 100%;
}

.md-preferences__form .checkbox em,
.md-preferences__form .big_checkbox em {
  font-size: 14px;
  color: var(--md-muted);
}

/* Modern checkboxes */
.md-preferences__form input[type=checkbox] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  border: 1.5px solid rgba(17, 26, 46, 0.25) !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 8px 0 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.md-preferences__form input[type=checkbox]:checked {
  background: #fff !important;
  border-color: rgba(17, 26, 46, 0.4) !important;
}

.md-preferences__form input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #46505F !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg);
}

.md-preferences__form input[type=checkbox]:hover {
  border-color: rgba(17, 26, 46, 0.4) !important;
}

.md-preferences__form .big_checkbox {
  padding-left: 0 !important;
  padding-top: 0 !important;
  margin-top: 0.3rem;
}

.md-preferences__form .big_checkbox label {
  padding-left: 0 !important;
}

.md-preferences__form .checkbox {
  margin-top: 0.3rem;
}

.md-preferences__form .btn-primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.3);
  border-radius: 10px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.md-preferences__form .btn-primary:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.md-preferences__form .btn-default {
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink);
  background: #F8F9FA;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-preferences__form .btn-default:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.md-preferences__form .text-danger {
  font-size: 14px;
}

.md-preferences__form .text-muted {
  font-size: 1.51rem;
  color: var(--md-muted);
}

.md-preferences__form a {
  color: #147F82;
  font-weight: 600;
}

.md-preferences__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}

/* Modern select dropdowns in preferences */
.md-preferences__form select.form-control {
  padding: 6px 32px 6px 14px;
  height: auto;
  line-height: 1.4;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346505F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

@media (max-width: 640px) {
  .md-preferences__form fieldset {
    border-radius: 12px !important;
  }
  .md-preferences__form .control-label {
    font-size: 14px;
  }
  .md-preferences__form .form-control,
  .md-preferences__form .checkbox label {
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .md-billing__card {
    padding: 20px 18px;
    border-radius: 16px;
  }
  .md-billing__status {
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .md-edit-profile__form {
    padding: 20px 18px;
    border-radius: 16px;
  }
  .md-edit-profile__form .control-label {
    font-size: 14px;
  }
  .md-edit-profile__form .form-control,
  .md-edit-profile__form .form-control-static,
  .md-edit-profile__form .checkbox label {
    font-size: 14px;
  }
}
.md-hero--user__wizard-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 127, 130, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-hero--user__wizard-btn:hover {
  background: rgba(20, 127, 130, 0.06);
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: 0 2px 8px rgba(20, 127, 130, 0.1);
  text-decoration: none;
  color: #0d5c5f;
}

.md-hero--user__divider {
  width: 100%;
  border: none;
  border-top: 1.5px solid rgba(17, 26, 46, 0.18);
  margin: 14px 0 16px;
  box-shadow: 0 4px 8px rgba(17, 26, 46, 0.1);
}

.md-hero--user__below-divider {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.md-hero--user__status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(17, 26, 46, 0.03);
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-radius: 10px;
  font-size: 14px;
}

.md-hero--user__avatar-divider {
  width: 60%;
  border: none;
  border-top: 1px solid rgba(17, 26, 46, 0.12);
  margin: 4px 0;
}

.md-hero--user__profile-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border: 1px solid rgba(70, 80, 95, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.md-hero--user__profile-pill:hover {
  background: linear-gradient(135deg, #8aa3c7, #566878);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #fff;
}

.md-hero--user__status-label {
  font-size: 14px; /* 0.95rem * 1.2 */
  font-weight: 600;
  color: var(--md-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Status pill — moved beneath the org info; shows only the status value (public/
   private) as a globe/lock + capitalized label in a soft pill. */
.md-hero--user__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.04);
  border: 1px solid rgba(17, 26, 46, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted);
  text-transform: capitalize;
}

.md-hero--user__status--public::before {
  content: "🌐";
}

.md-hero--user__status--private::before {
  content: "🔒";
}

/* ~6% larger than base (25% up then 15% down) for user summary stat cards */
.md-user-summary__stats-row .ub-boards-page__stat-label {
  font-size: 14px;
}

.md-user-summary__stats-row .ub-boards-page__stat-value {
  font-size: 1.5rem;
  /* Long board keys (e.g. user/board paths) have no spaces — let them break so they
     wrap inside the stat card instead of overflowing its edge. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.md-user-summary__stats-row .ub-boards-page__badge {
  font-size: 14px;
}

.md-user-summary__stats-row .ub-boards-page__stat-link {
  font-size: 14px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.md-user-summary__sub-link .ub-boards-page__stat-link {
  font-size: 14px;
}

.md-user-summary__stats-row .ub-boards-page__stat-none {
  font-size: inherit;
}

.md-user-summary__stats-row .md-user-summary__action-btn {
  font-size: 1.41rem;
}

.md-user-summary .md-card {
  padding: 18px 20px;
  border-radius: var(--md-r-lg);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-2);
}

.md-user-summary .md-card__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--md-muted);
  text-transform: uppercase;
}

.md-user-summary .md-card__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--md-ink);
}

.md-user-summary .md-grid--actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.md-user-summary .md-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: var(--md-r-lg);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-2);
  text-align: center;
  text-decoration: none;
  color: var(--md-ink);
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.md-user-summary .md-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 26, 46, 0.08);
}

.md-user-summary .md-action-card .md-action-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 183, 176, 0.12);
  color: rgba(44, 183, 176, 0.9);
  font-size: 20px;
}

.md-user-summary .md-action-card .md-action-card__label {
  font-size: 14px;
  line-height: 1.3;
}

.md-user-summary .alert {
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.md-user-summary .panel,
.md-user-summary .panel-default {
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-2);
  background: rgba(255, 255, 255, 0.72);
}

.md-user-summary .panel-heading {
  border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
  background: rgba(17, 26, 46, 0.04);
  border-bottom: 1px solid var(--md-line);
  font-weight: 750;
  color: var(--md-muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.md-user-summary .panel-body {
  color: var(--md-ink);
}

.md-user-summary .btn-default {
  border-radius: 16px;
  border: 1px solid var(--md-line);
  font-weight: 650;
  background: rgba(255, 255, 255, 0.8);
}

.md-user-summary h2, .md-user-summary h4 {
  color: var(--md-ink);
  font-weight: 800;
  margin-top: 24px;
  margin-bottom: 10px;
}

/* ---------- Available Boards (user summary): modern tabs, filter, board grid ---------- */
.md-user-summary__available-boards {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.md-user-summary__available-boards-title {
  margin: 0 0 1rem !important;
  font-size: 1.625rem; /* 30% larger than 1.25rem */
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink);
}

.md-user-summary__board-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 1rem !important;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  list-style: none;
}

.md-user-summary__board-tabs li {
  margin: 0;
  padding: 0;
}

.md-user-summary__board-tabs li a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(75, 78, 92, 0.85);
  background: transparent;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.md-user-summary__board-tabs li a:hover {
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink);
}

.md-user-summary__board-tabs li.active a {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.92) 0%, rgba(91, 141, 239, 0.88) 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.md-user-summary__board-tabs .dropdown-toggle {
  cursor: pointer;
}

.md-user-summary__board-tabs .dropdown-menu {
  border-radius: var(--md-r-md, 12px);
  border: 1px solid var(--md-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
}

.md-user-summary__board-tabs .dropdown-menu a {
  padding: 10px 16px;
  border-radius: 0;
}

.md-user-summary__available-boards-body {
  margin-top: 0.5rem;
}

.md-user-summary__board-filter {
  margin-bottom: 1.25rem;
}

.md-user-summary__board-filter-input {
  width: 100%;
  max-width: 280px;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: var(--md-r-md, 12px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  background: rgba(255, 255, 255, 0.9);
  color: var(--md-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-user-summary__board-filter-input::placeholder {
  color: var(--md-muted);
}

.md-user-summary__board-filter-input:focus-visible {
  border-color: rgba(44, 183, 176, 0.4);
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.12);
  outline: none;
}

.md-user-summary__board-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

/* Bootstrap .row clearfix ::before/::after become flex items and shift the first row; disable them */
.md-user-summary__board-grid.row::before,
.md-user-summary__board-grid.row::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 480px) {
  .md-user-summary__board-grid {
    gap: 0.75rem 1rem;
  }
}
@media (min-width: 768px) {
  .md-user-summary__board-grid {
    gap: 1rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  .md-user-summary__board-grid {
    gap: 1rem 1.5rem;
  }
}
/* Flex + Bootstrap columns: column width from Bootstrap at each breakpoint; min-width keeps card from being cut off */
.md-user-summary__board-grid > div {
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Card width (2.4rem*2 + 160px image + buffer); wrap before content is cut off */
  min-width: 250px;
}

.md-user-summary__board-grid > div.col-xs-12,
.md-user-summary__board-grid > div.col-sm-6,
.md-user-summary__board-grid > div.col-md-4,
.md-user-summary__board-grid > div.col-lg-2 {
  max-width: none !important;
}

/* Large screens: size by content + min-width so as many cards fit as possible without overlap (Bootstrap col-lg-2 would force 6 columns and overlap) */
@media (min-width: 992px) {
  .md-user-summary__board-grid > div.col-lg-2 {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}
.md-user-summary__board-grid > div.col-sm-12 {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block; /* "show more" link row */
}

/* Board cards in Available Boards: card layout (wide, spacious), not pill */
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  position: relative;
  border-radius: 28px !important;
  border: 1px solid rgba(76, 134, 216, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.82)) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 20px rgba(27, 54, 93, 0.06) !important;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon::before,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, rgba(42, 157, 143, 0.5) 28%, rgba(76, 134, 216, 0.5) 72%, rgba(76, 134, 216, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon:hover,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 134, 216, 0.16) !important;
  box-shadow: 0 24px 48px rgba(27, 54, 93, 0.14), 0 12px 24px rgba(42, 157, 143, 0.1) !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* Contained logo tile — soft rounded glass surface, faint inner glow,
     gentle elevation. width:auto + max-width centers + contains it even
     where the surface forces width:100%. */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon img,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon img {
  width: auto !important;
  max-width: 72% !important;
  height: 104px !important;
  object-fit: contain;
  object-position: center;
  margin: 2px auto 14px !important;
  padding: 11px !important;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(240, 245, 252, 0.7));
  border: 1px solid rgba(76, 134, 216, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(27, 54, 93, 0.07);
  box-sizing: border-box;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* LingoLinq default/fallback board icon: keep the tile/card (bg, border,
     radius, shadow inherited from `& img` above) but expand the image out
     to the tile's borders — zero the inner padding and fill so the logo
     uses the full tile instead of sitting inset. Vocab-icon boards keep
     the padded contained tile. */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon img[src*=lingolinq-board-icon],
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon img[src*=lingolinq-board-icon] {
  padding: 0 !important;
  object-fit: cover !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* Typography — also sets the compact spacing/layout (centered, clamped
     title; tight inline `by name`) so EVERY surface reads the same as the
     board_category page, not just the colors. Font sizes carry a 12px
     floor via max() so card text never renders below 12px (e.g. if a root
     font-size shrink scales the rem values down). The title is pinned to
     14px (1.4rem at the 10px root) per design. */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .name,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .name {
  width: 100% !important;
  font-size: max(14px, 1.4rem) !important;
  font-weight: 700 !important;
  color: #1B365D !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__credit,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .board-icon__credit {
  font-size: max(12px, 0.85rem) !important;
  opacity: 0.72;
  text-align: center !important;
  margin: 0 0 2px !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .author,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .author {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Small breathing room after the `by …` line (the language pill /
     PREVIEW footer supply the rest of the rhythm). */
  margin: 0 0 6px !important;
  padding: 0 2px !important;
  max-width: 100% !important;
  font-size: max(12px, 0.9rem) !important;
  color: rgba(27, 54, 93, 0.72) !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .author__label,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.55) !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .author__username, .md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .author__username--long,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .author__username,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .author__username--long {
  color: rgba(27, 54, 93, 0.72) !important;
  font-weight: 600 !important;
  font-size: max(12px, 0.9rem) !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* Size chip — soft navy-gray glass (was a utility sticker). */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .board-icon__info {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info-icon, .md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info-size,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .board-icon__info-icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .board-icon__info-size {
  color: rgba(27, 54, 93, 0.6) !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* Language pill — soft verdigris glass. */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__lang-marker,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .board-icon__lang-marker {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(42, 157, 143, 0.12) !important;
  color: #2A9D8F !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  /* Preview pill — integrated dusty-denim glass. */
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon .info,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .info {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(228, 236, 255, 0.92)) !important;
  border: 1px solid rgba(76, 134, 216, 0.14) !important;
  box-shadow: 0 8px 18px rgba(76, 134, 216, 0.16) !important;
  color: #1B365D !important;
}
.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  height: auto;
  min-height: 0;
  padding: 2.4rem 2.4rem 2rem;
  border-radius: var(--md-r-lg, 16px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.12));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  color: var(--md-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 19.5px; /* 30% larger than 15px */
  overflow: visible; /* don't clip name, author, or info badge */
}

.md-user-summary__available-boards .board_with_action.simple_board_holder .btn.simple_board_icon:hover,
.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon:hover {
  border-color: rgba(44, 183, 176, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon img {
  width: 100%;
  max-width: 160px;
  height: 110px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .name {
  width: 100%;
  font-size: 1.69rem; /* 30% larger than 1.3rem */
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
  text-align: center;
  padding: 0 4px;
  word-wrap: break-word;
}

.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .author {
  font-size: 17px; /* 30% larger than 13px */
  color: var(--md-muted);
  margin: 0;
  text-align: center;
}

.md-user-summary__available-boards .simple_board_holder .btn.simple_board_icon .info {
  /* Pin BOTTOM-CENTER (matching the boards-page Preview pill). The
     silver-glass background inherits from the base .info rule. */
  top: auto;
  left: 50%;
  right: auto;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 5px 13px;
  font-size: 12px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* ---------- User summary: responsive on all screen sizes ---------- */
.md-user-summary {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 768px) {
  .md-user-summary {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .md-hero--user {
    padding: 20px 18px !important;
    gap: 16px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .md-hero--user__avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
  }
  .md-hero--user__details {
    justify-content: center !important;
  }
  .md-hero--user__name,
  .md-hero--user__username {
    font-size: 18px !important;
  }
  .md-hero--user__meta {
    font-size: 15.6px; /* 13px * 1.2 */
  }
  .md-hero--user__url {
    font-size: 14px !important;
  }
  .md-user-summary .row.big_buttons {
    margin-left: -4px;
    margin-right: -4px;
    display: flex;
    flex-wrap: wrap;
    /* Center the summary tiles + the nested stat rows (.md-user-summary__stats-row,
       which are flex ITEMS of this container) on the page. Without this they pack to
       the left. Centering the CONTAINER — rather than the cards inside each row — is
       what actually centers them, and being base-level (not Focused-View-scoped) it
       applies in both Focused and Gentle views. */
    justify-content: center;
  }
  .md-user-summary .row.big_buttons .big_button_holder,
  .md-user-summary .row.big_buttons .col-xs-6 {
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 8px;
  }
  .md-user-summary .row.big_buttons .big_button {
    font-size: 14px;
    padding: 14px 0;
    max-height: none;
  }
  .md-user-summary .row.big_buttons .big_button img {
    height: 80px;
  }
  .md-user-summary .row.big_buttons .big_button > .glyphicon {
    font-size: 2.5rem;
  }
  .md-user-summary .row.big_buttons .col-sm-3.col-xs-6 {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
  }
  .md-user-summary .panel-body,
  .md-user-summary .panel-heading {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
  .md-user-summary .md-grid--actions {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .md-user-summary__available-boards-title {
    font-size: 14px !important;
  }
  .md-user-summary__board-tabs {
    padding: 6px 8px;
    gap: 4px 6px;
  }
  .md-user-summary__board-tabs li a {
    padding: 8px 12px;
    font-size: 14px;
  }
  .md-user-summary .alert {
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .md-user-summary h2,
  .md-user-summary h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 14px;
  }
  .md-user-summary .list-group {
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .md-user-summary {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .md-user-summary .row.big_buttons .col-sm-3.col-xs-6,
  .md-user-summary .row.big_buttons .big_button_holder {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .md-user-summary .row.big_buttons .col-xs-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .md-user-summary .panel.panel-default.summary .panel-body,
  .md-user-summary .panel.panel-default.summary .panel-heading {
    padding-left: 14px;
    padding-right: 14px;
  }
  .md-user-summary .col-sm-3.col-xs-6 {
    margin-bottom: 10px;
  }
  .md-user-summary .md-grid--actions {
    grid-template-columns: 1fr !important;
  }
  .md-user-summary .row.big_buttons > [style*="float: right"] {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: left;
  }
  .md-user-summary .row.big_buttons .btn-group {
    width: 100%;
  }
  .md-user-summary .row.big_buttons .btn-group .dropdown-toggle {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .md-user-summary {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .md-user-summary {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* ---------- About page hero (modern dashboard styling) ---------- */
.md-about-hero {
  margin-top: clamp(2rem, 1rem + 2vw, 4rem);
  margin-bottom: 0;
  padding: 0 1rem 3rem;
  color: var(--md-ink);
}

.md-about-hero__workspace {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 48px;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.012), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

@media (max-width: 820px) {
  .md-about-hero__workspace {
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.md-about-hero .md-hero {
  padding: 0 0 10px;
  text-align: center;
}

.md-about-hero__eyebrow {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted);
  letter-spacing: 0.02em;
}

.md-about-hero__brand {
  color: var(--md-navy, #1B365D);
}

.md-about-hero__brand--italic {
  font-style: italic;
  color: #3A6BC7;
}

.md-about-hero__separator {
  width: 100%;
  max-width: 160px;
  height: 3px;
  margin: 0 auto 1.5rem;
  border: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(44, 183, 176, 0.5), rgba(91, 141, 239, 0.4), transparent);
}

.md-about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 768px) {
  .md-about-hero__grid {
    grid-template-columns: 1fr;
  }
}
.md-about-hero__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
}

.md-about-hero__card--cta {
  grid-column: 1/-1;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.95));
  border-color: rgba(44, 183, 176, 0.2);
}

.md-about-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  border-radius: var(--md-r-md);
  background: var(--md-teal-soft);
}

.md-about-hero__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--md-ink);
}
.md-about-hero__text strong {
  color: var(--md-navy, #1B365D);
}

.md-about-hero__card .md-card__head {
  margin-bottom: 4px;
}

.md-about-hero__card .md-card__title {
  color: var(--md-ink);
}

.md-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 1.25rem;
}

.md-about-hero__actions .md-btn {
  text-decoration: none;
}

.md-about-hero__actions .md-btn:hover {
  text-decoration: none;
}

/* Boards card: same height as left column (top of speak to bottom of extras), shortened by 2rem */
.md-card--boards {
  align-self: stretch !important;
  height: 100% !important;
  /* Always tall enough to show the board preview row in full —
     stops the card from collapsing when the surrounding column
     (Extras / My Organizations stack) is shorter than the boards
     content. 362 → 450 → 425 → 415 → 400 — keeps the mini-boards
     row + CTA visible without overshooting the adjacent column. */
  min-height: 400px;
  padding-right: calc(18px + 0.25rem) !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 18px; /* same as extras card */
}

/* Elegant separator under the Boards header: a thin brand-denim line that fades to
   transparent at both ends, with a soft glow for presence. */
.md-card--boards__divider {
  height: 1px;
  margin: 6px 0 16px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(76, 134, 216, 0.3) 12%, rgba(76, 134, 216, 0.6) 50%, rgba(76, 134, 216, 0.3) 88%, transparent 100%);
  box-shadow: 0 1px 3px rgba(76, 134, 216, 0.15);
}

/* The Boards card uses its own boards__divider below the header, so drop the
   generic card-head bottom hairline to avoid a double line. */
.md-card--boards .md-card__head {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.md-card__empty {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3.5rem 1.5rem !important;
  gap: 1rem !important;
}

.md-card__empty-icon {
  width: 73px !important;
  height: 73px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(70, 80, 95, 0.05) !important;
  border: 1px solid rgba(70, 80, 95, 0.07) !important;
  margin-bottom: 0.5rem !important;
}

.md-card__empty-text {
  font-size: 1.69rem !important;
  color: rgba(70, 80, 95, 0.45) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.md-card__empty .md-btn {
  margin-top: 0.75rem !important;
}

/* Loading state for cards (boards, reports, etc.) */
.md-card__loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2.5rem 1rem !important;
  gap: 14px !important;
}

.md-card__loading-text {
  font-size: 15px !important;
  color: rgba(70, 80, 95, 0.55) !important;
  margin: 0 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.md-spinner svg {
  animation: md-spin 0.8s linear infinite !important;
}

@keyframes md-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.md-card__loading--reports {
  padding: 4rem 1rem !important;
}

.md-card--boards .md-strip {
  flex: 1 1 0 !important;
  /* `max-content` (not 0) so the strip never shrinks below its
     tallest tile's natural height. The strip has `overflow-x:
     auto` (~line 48047), which per CSS spec makes `overflow-y`
     auto/clip too — so when a tile's label wraps to more lines
     than the strip's flex-allocated height accommodates, the
     bottom of the tile gets clipped. Letting min-height track
     content size means the strip grows to fit, all tiles match
     (default flex `align-items: stretch`), and the parent
     boards card grows with it (the card already has
     `height: 100%` and the dashboard grid row is auto-sized,
     so the cascade Just Works). */
  min-height: max-content !important;
}

.md-card--boards .md-btn--wide {
  margin-top: auto !important;
}

.md-card {
  position: relative !important;
  border-radius: var(--md-r-lg) !important;
  background: var(--md-surface) !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 18px !important;
  min-width: 0 !important;
}

/* Modern dashboard: subtle vertical gradient on cards with grounded bottom */
.md-grid .md-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 242, 245, 0.95)) !important;
  border-bottom: 2px solid rgba(27, 54, 93, 0.08) !important;
}

.md-card__head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08) !important;
  margin-bottom: 4px !important;
}

.md-card__head--between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Boards card: pin the New Board button to the true horizontal center of
   the card head, independent of the right-hand count widget's width.
   Without this, justify-content: space-between makes the button drift left
   as the boardCount text grows from "0" to "1436", etc. The 1fr | auto | 1fr
   grid keeps the center cell anchored to the card's midpoint. */
/* Boards-card head: title/sub on the left, the New Board button
   right-aligned in the slot the (now-removed) board-count stat used to
   occupy. A 2-column `1fr auto` grid at every width — the button pins to
   the right edge via `justify-self: end`. */
.md-card--boards .md-card__head--between {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center !important;
  gap: 12px !important;
}

.md-card--boards .md-card__head--between > .md-card__left {
  justify-self: start;
  min-width: 0;
}

.md-card--boards .md-card__head--between > .md-btn {
  justify-self: end;
  font-size: 16px !important;
}

/* ≤640px: collapse the 1fr|auto header grid to a single column so the
   "Create a Board" button wraps onto its own row below the title (left-aligned
   under it) instead of being squeezed beside it. Adjacent to the base rule
   above; same 0,2,0 specificity wins by source order at this width. (Focused
   View keeps its own 3-column header rule, defined later at higher specificity.) */
@media (max-width: 640px) {
  .md-card--boards .md-card__head--between {
    grid-template-columns: 1fr;
  }
  .md-card--boards .md-card__head--between > .md-btn {
    justify-self: start;
  }
}
/* `.md-card__title` is now applied to <h3> elements (WCAG 1.3.1 — Heading hierarchy).
   Reset browser h3 defaults so the visual is identical to the prior <div> usage. */
.md-card__title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.2px;
  margin: 0;
  line-height: 1.35;
  color: inherit;
} /* line-height bumped to 1.35 for WCAG 1.4.12 readability */
/* Getting Started card header — 20% larger on small screens (≤820px) so it reads
   prominently on the authenticated home page when the dashboard is condensed.
   !important because a later media query override may be winning otherwise. */
@media (max-width: 820px) {
  .md-card--getting-started .md-card__title {
    font-size: 1.5rem !important;
  }
}
.md-card__sub {
  color: #3A506E;
  margin-top: 4px;
  font-weight: 500;
  font-size: 14px;
}

.md-muted {
  color: var(--md-muted);
}

.md-link {
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.65) !important;
  color: rgba(17, 26, 46, 0.7) !important;
  font-weight: 750 !important;
}

.md-link:active {
  transform: scale(var(--md-tap));
}

/* `.md-link-btn` — used by <button> elements that need to LOOK like inline
   links but provide proper button semantics. Added 2026-04-11 per WCAG audit
   when converting <a href="#" {{action ...}}> patterns to real buttons. */
.md-link-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.md-link-btn:hover {
  text-decoration: none;
}

/* `.md-link-btn-pill` — used inside Bootstrap `<ul class="nav nav-pills">`
   structures where the legacy markup expected `<li><a>` (which Bootstrap
   styles into a pill). Resets button defaults so the parent Bootstrap pill
   styles still apply. */
.nav-pills > li > .md-link-btn-pill {
  appearance: none;
  background: none;
  border: none;
  padding: 10px 15px;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
}

/* --- Getting Started Card (home only, when checklist incomplete) --- */
.md-grid--dashboard .md-card--getting-started,
.md-grid--with-getting-started .md-card--getting-started {
  grid-area: getting_started !important;
  position: relative !important;
  display: flex !important;
  margin-top: 1rem !important;
  border-radius: var(--md-r-lg) !important;
  -webkit-border-radius: var(--md-r-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

/* Welcome notice ("Watch for an email from us...") shown above
   the boards content while model.pending. Uses the brand verdigris
   palette (replaces the old Bootstrap .alert-success green) with
   a small dismiss chip that flips welcome_notice_dismissed on the
   user/index controller. */
.ll-welcome-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 56px 14px 20px;
  border-radius: 14px;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid rgba(42, 157, 143, 0.28);
  color: #1A7B7A;
  font-size: 14px;
  line-height: 1.5;
}

.ll-welcome-notice__text {
  flex: 1;
  min-width: 0;
}

.ll-welcome-notice__link {
  color: #1A7B7A;
  font-weight: 600;
  text-decoration: underline;
}
.ll-welcome-notice__link:hover {
  color: rgb(18.8805369128, 89.3194630872, 88.5932885906);
  text-decoration: underline;
}

.ll-welcome-notice__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(42, 157, 143, 0.32);
  background: rgba(42, 157, 143, 0.08);
  color: #1A7B7A;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ll-welcome-notice__close:hover {
  background: rgba(42, 157, 143, 0.18);
  border-color: rgba(42, 157, 143, 0.45);
  color: rgb(20.6604026846, 97.7395973154, 96.944966443);
  transform: scale(1.05);
}
.ll-welcome-notice__close:active {
  transform: scale(0.96);
}

.ub-boards-page__getting-started.md-card--getting-started {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* Tightened to a 100px minimum floor (was 188 → 94 → 100) with
     12px top/bottom padding. Card still grows past 100px if content
     needs more room (height: auto), but the typical icon + title +
     2-line copy + buttons row now sits in roughly that height. */
  min-height: 100px !important;
  height: auto !important;
  margin-top: 1rem !important;
  border-radius: var(--md-r-lg) !important;
  -webkit-border-radius: var(--md-r-lg) !important;
  overflow: hidden !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 242, 245, 0.95)) !important;
  border: 1px solid var(--md-line) !important;
  border-bottom: 2px solid rgba(27, 54, 93, 0.08) !important;
  box-shadow: none !important;
}

.ub-boards-page__getting-started.md-card--getting-started::before {
  filter: saturate(1.15) !important;
}

.ub-boards-page__getting-started .md-card__getting-started-btn {
  background: #7389A3 !important;
  border: 1px solid rgba(70, 80, 95, 0.25) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 12px rgba(70, 80, 95, 0.25), 0 8px 24px rgba(27, 54, 93, 0.15) !important;
  transform: none !important;
}

.ub-boards-page__getting-started .md-card__getting-started-btn:hover {
  background: #677D97 !important;
  box-shadow: 0 6px 20px rgba(70, 80, 95, 0.3), 0 10px 30px rgba(27, 54, 93, 0.18) !important;
}

.ub-boards-page__getting-started .md-card__sub {
  color: #3A506E !important;
  font-weight: 500 !important;
}

/* Boards-page empty state — shown by available-boards-section
   when board_list.results is falsy (new accounts with zero boards,
   or filtered queries with no matches). Polished card composition
   matching the modern boards-page surface: soft white-gradient
   tile, icon chip, heading, supporting copy, and a denim-palette
   pill CTA that bubbles `newBoard` to the application route. */
.ub-boards-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 48px 24px 44px;
  margin: 16px 0;
  border-radius: var(--md-r-lg, 28px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 242, 245, 0.95));
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
}

.ub-boards-page__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(76, 134, 216, 0.12);
  color: #1B365D;
  margin-bottom: 6px;
}
.ub-boards-page__empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.ub-boards-page__empty-title {
  margin: 0;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  letter-spacing: -0.01em;
}

.ub-boards-page__empty-subtitle {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--md-muted, #1B365D);
}

.ub-boards-page__getting-started-actions {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  gap: 16px !important;
  flex: 1 0 auto !important;
  padding-top: 1rem !important;
  flex-wrap: wrap !important;
}

@media (max-width: 640px) {
  .ub-boards-page__getting-started-actions {
    align-self: stretch !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .ub-boards-page__getting-started .md-card__getting-started-btn {
    text-align: center !important;
  }
}
/* Getting-started wave: rendered via ::before with inline SVG data URI (no network request) */
.md-card--getting-started::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0MDAgMjIwJyB3aWR0aD0nNDAwJyBoZWlnaHQ9JzIyMCc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdhJyB4MT0nMCUnIHkxPScxMDAlJyB4Mj0nMTAwJScgeTI9JzAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojN0REM0NGO3N0b3Atb3BhY2l0eTowLjUnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNCOEU2RTM7c3RvcC1vcGFjaXR5OjAuMjUnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYicgeDE9JzAlJyB5MT0nODAlJyB4Mj0nMTAwJScgeTI9JzIwJSc+PHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6I0I4RTZFMztzdG9wLW9wYWNpdHk6MC40NScvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6I0U5RjlGODtzdG9wLW9wYWNpdHk6MC4yJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2MnIHgxPScwJScgeTE9JzYwJScgeDI9JzEwMCUnIHkyPSc0MCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMyQ0I3QjA7c3RvcC1vcGFjaXR5OjAuMicvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6IzdERDNDRjtzdG9wLW9wYWNpdHk6MC40Jy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2QnIHgxPScwJScgeTE9JzEwMCUnIHgyPScxMDAlJyB5Mj0nMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNBOEQ0RjA7c3RvcC1vcGFjaXR5OjAuMzUnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNDNUU0Rjc7c3RvcC1vcGFjaXR5OjAuMicvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdlJyB4MT0nMCUnIHkxPSc3MCUnIHgyPScxMDAlJyB5Mj0nMzAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojN0VCOEU4O3N0b3Atb3BhY2l0eTowLjI1Jy8+PHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojQThENEYwO3N0b3Atb3BhY2l0eTowLjE1Jy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2YnIHgxPScwJScgeTE9JzkwJScgeDI9JzEwMCUnIHkyPScxMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNGQkYwQzM7c3RvcC1vcGFjaXR5OjAuNCcvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6I0Y1RTZBMztzdG9wLW9wYWNpdHk6MC4yNScvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdnJyB4MT0nMCUnIHkxPSc1MCUnIHgyPScxMDAlJyB5Mj0nNTAlJz48c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojRjVFNkEzO3N0b3Atb3BhY2l0eTowLjInLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNGQkYwQzM7c3RvcC1vcGFjaXR5OjAuMzUnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMCAxMDBRNTAgNjAgMTAwIDc1VDIwMCA1NVQzMDAgNzBUNDAwIDUwTDQwMCAyMjBIMFonIGZpbGw9J3VybCgjYyknLz48cGF0aCBkPSdNMCA5NVE4MCA1MCAxNjAgNzBUMzIwIDQ1VDQwMCA2NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2EpJy8+PHBhdGggZD0nTTAgODVRNjAgNDUgMTIwIDYwVDI0MCA0MFQzNjAgNTVUNDAwIDQ1TDQwMCAyMjBIMFonIGZpbGw9J3VybCgjZCknLz48cGF0aCBkPSdNMCA5MFExMDAgNTUgMjAwIDY1VDQwMCA1NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2YpJy8+PHBhdGggZD0nTTAgNzVRNzAgMzUgMTQwIDUwVDI4MCAzMFQ0MDAgNDhMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNiKScvPjxwYXRoIGQ9J00wIDcwUTkwIDQwIDE4MCA1MlQzNjAgMzhUNDAwIDQyTDQwMCAyMjBIMFonIGZpbGw9J3VybCgjZSknLz48cGF0aCBkPSdNMCA2NVE4MCAzMCAxNjAgNDVUMzIwIDI4VDQwMCA0MEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2cpJy8+PHBhdGggZD0nTTAgNThRMTAwIDI1IDIwMCAzOFQ0MDAgMzJMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNhKScvPjxwYXRoIGQ9J00wIDEyMFE4MCAxNjAgMTYwIDE0NVQzMjAgMTY1VDQwMCAxNTBMNDAwIDIyMEgwWicgZmlsbD0ndXJsKCNjKScvPjxwYXRoIGQ9J00wIDEzMFExMDAgMTcwIDIwMCAxNTVUNDAwIDE3NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2EpJy8+PHBhdGggZD0nTTAgMTQwUTYwIDE4MCAxNDAgMTY1VDMwMCAxODVUNDAwIDE3MEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2QpJy8+PHBhdGggZD0nTTAgMTUwUTkwIDE5MCAxODAgMTc1VDM2MCAxOTVUNDAwIDE4NUw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2YpJy8+PHBhdGggZD0nTTAgMTY1UTcwIDIwNSAxNTAgMTkwVDM1MCAyMTBUNDAwIDIwMEw0MDAgMjIwSDBaJyBmaWxsPSd1cmwoI2IpJy8+PC9zdmc+Cg==") !important;
  background-size: cover !important;
  background-position: top center !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  filter: saturate(1.15) !important;
}

.md-card--getting-started .md-card__head--getting-started {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  border-bottom: none !important;
}

.md-card--getting-started .md-card__head-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.md-card--getting-started .md-card__icon--getting-started {
  background: rgba(44, 183, 176, 0.14) !important;
}

/* Modern 2×2 grid icon (Choose a Home Board) — matches .md-card__icon-img slot */
.md-card__icon .ub-boards-home-grid-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

.md-card--getting-started .md-card__getting-started-status {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.md-card--getting-started .md-card__getting-started-btn {
  position: relative !important;
  z-index: 1 !important;
  align-self: center !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
  transition: transform 0.22s ease-out, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  background: rgba(76, 134, 216, 0.3) !important;
  border: 1px solid rgba(76, 134, 216, 0.22) !important;
  color: #1B365D !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(76, 134, 216, 0.15) !important;
}

.md-card--getting-started .md-card__getting-started-btn:active {
  transform: scale(0.99) !important;
}

.md-card--getting-started .md-card__getting-started-btn:hover {
  background: rgba(76, 134, 216, 0.4) !important;
  border-color: rgba(70, 80, 95, 0.35) !important;
  box-shadow: 0 6px 20px rgba(70, 80, 95, 0.3), 0 10px 30px rgba(27, 54, 93, 0.18) !important;
}

.md-card--getting-started .md-card__getting-started-btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-card--getting-started .md-card__getting-started-btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-card__progress {
  flex: 1 1 auto !important;
  min-width: 80px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(17, 26, 46, 0.08) !important;
  overflow: hidden !important;
}

.md-card__progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: rgba(44, 183, 176, 0.45) !important;
  transition: width 0.25s ease !important;
}

.md-card__getting-started-step {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--md-muted) !important;
  flex-shrink: 0 !important;
}

/* Small screens (≤640px): status bar and steps wrap below Getting Started header/subheader; dashboard hero title 10% smaller again */
@media (max-width: 640px) {
  .md-hero--dashboard .md-hero__title {
    font-size: clamp(21.06px, 2.43vw, 32.4px); /* 90% of dashboard title */
    height: auto !important;
    min-height: 30px !important;
    line-height: 1.3 !important;
  }
  .md-hero--dashboard .md-hero__sub {
    margin-top: 8px !important;
  }
  .md-pillnav,
  .md-pillnav--user {
    margin-top: 24px !important;
  }
  .md-pillnav-dropdown {
    margin-top: 32px !important;
  }
  .md-card--speak .md-card__row {
    flex-wrap: wrap !important;
  }
  .md-card--speak .md-card__row .md-btn--primary {
    flex-shrink: 1 !important;
    white-space: normal !important;
    width: 100% !important;
    text-align: center !important;
  }
  .md-card--getting-started .md-card__head--getting-started {
    flex-wrap: wrap !important;
  }
  .md-card--getting-started .md-card__getting-started-status {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}
/* --- Speak Card --- */
.md-card--speak {
  grid-area: speak;
  padding-bottom: 20px;
  overflow: visible;
  position: relative;
}

/* Match the My Caseload card's one-row layout: head on the left, the
   primary action button (Continue Speaking) on the right, on the same
   row — and drop the visible divider line between head and body. The
   button is now a direct child of .md-card--speak (see template), so
   space-between pushes it to the right edge. Specificity is bumped to
   `.md-grid .md-card.md-card--speak` so it wins over the generic
   `.md-grid .md-card { background/etc !important }` rule, matching the
   approach used for .md-card--caseload above. The base body styles for
   .md-card--speak (grid-area / overflow / position / padding-bottom)
   stay in the rule right above; only the layout + divider are added/
   overridden here. */
.md-grid .md-card.md-card--speak {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 20px 32px !important;
}

.md-card--speak .md-card__head {
  flex: 1 1 auto !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* When the speak card is narrow enough that the action button
   wraps to its own row (flex-wrap: wrap above), `justify-content:
   space-between` no longer reaches it — wrapped flex rows align
   their items to flex-start by default. Force the button to the
   row's right edge with margin-left: auto so the visual reads as
   "head on the left, action on the right" at every column width,
   matching the wider single-row layout. */
.md-card--speak > .md-btn {
  margin-left: auto !important;
}

/* ── Focused display style — "Hey <name>" greeting BAR ───────────────────────
   Focused replaces the Speak card with a full-width greeting hero
   (.md-card--speak-focused): a left-aligned icon + "Hey <name>" + subtitle. The
   WHOLE bar is a <button> firing the Speak action (the big AAC tap-target). It
   reuses the DYNAMIC card chrome (radius, glassy surface + verdigris halo) over a
   LIGHTER take on the Focused Talk gradient — the same brand `$indigo` navy behind
   the Focused "where you left off" subtitle, lifted toward white in OKLCH and
   interpolated in OKLAB across the FULL height for a smooth, on-brand light→dark
   blend (no banding). The bar lives in the grid at grid-area:speak (full-width hero
   from utils/dashboard_sections.js#focusedLayout) and is ALWAYS in the DOM —
   display:none except under this layout class — so the Getting Started preview clone
   shows it for free when syncState stamps the class. (0,4,0)+!important beats the
   base `.md-grid .md-card` chrome and the `.md-grid .md-card.md-card--speak` flex
   row. The primary nav is the CENTERED top .md-pillnav sitting ABOVE this bar (kept
   visible in focused); only the redundant "It's great to see you" dashboard hero
   is hidden, so "Hey <name>" is the sole greeting. */
/* Default-hidden — the base `.md-grid .md-card.md-card--speak { display:flex
   !important }` would otherwise show it in every layout, so this hide is
   (0,3,0)+!important. */
.md-grid .md-card.md-card--speak-focused {
  display: none !important;
}

/* Focused: show the greeting bar (the whole thing is the Speak button), hide the
   standard Speak card. */
.md-grid.md-grid--layout-focused .md-card.md-card--speak-focused {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 24px !important;
  /* Hero height — 20px taller (200→220) for a bit more presence. */
  min-height: 220px !important;
  padding: 20px 32px !important;
  color: #ffffff !important;
  font: inherit !important;
  cursor: pointer !important;
  /* Discrete object, not a full-bleed banner: breathing room around it + a rim,
     and a transition so the hover/press states animate. */
  margin: 6px 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
  /* "Glossy button" radial sheen on a DESATURATED Brand Navy ($focus-hero-base):
     lightest in the CENTER, fading to a dark muted navy at the OUTSIDE edges
     (OKLAB-interpolated). See $focus-hero-center / $focus-hero-edge. */
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) 100%) !important;
  /* RAISED elevation: a bright lit top bevel + a darker inner bottom lip (the
     extruded edge) + a tight contact shadow and a broad drop shadow, so the button
     clearly floats above the page rather than reading as a flat hero. */
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.36), inset 0 -7px 14px rgba(27, 54, 93, 0.36), 0 3px 6px rgba(27, 54, 93, 0.26), 0 20px 40px rgba(27, 54, 93, 0.42), 0 38px 70px rgba(27, 54, 93, 0.3), 0 0 28px rgba(42, 157, 143, 0.1) !important;
}

/* Hover: a clear "press me" cue — lift 2px, deepen the drop shadow, and bloom a
   faint brand-blue glow around the whole card so it reads as interactive. */
.md-grid.md-grid--layout-focused .md-card.md-card--speak-focused:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -7px 14px rgba(27, 54, 93, 0.34), 0 6px 14px rgba(27, 54, 93, 0.28), 0 34px 60px rgba(27, 54, 93, 0.5), 0 56px 96px rgba(27, 54, 93, 0.34), 0 0 46px rgba(76, 134, 216, 0.35) !important;
}

/* Active: PRESS — depress down, collapse the drop shadow + invert to an inset
   "pushed-in" shadow (the decisive "it's a button" cue). */
.md-grid.md-grid--layout-focused .md-card.md-card--speak-focused:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(27, 54, 93, 0.18) !important;
}

.md-grid.md-grid--layout-focused .md-card.md-card--speak-as-button {
  display: none !important;
}

/* Larger screens only (above the wrap breakpoint): nudge the centered icon+text
   group 8px to the LEFT via asymmetric padding (24/40 keeps the 64px total, so
   the justify-center group shifts left 8px). Small screens keep their centering. */
@media (min-width: 1025px) {
  .md-grid.md-grid--layout-focused .md-card.md-card--speak-focused {
    padding-left: 24px !important;
    padding-right: 40px !important;
  }
}
.md-card--speak-focused__icon {
  color: #ffffff;
  line-height: 0;
}

/* Speech badge bumped ~12.5% (112→126px) so it clearly wins over the text and
   becomes the hero's unmistakable focal point. */
.md-card--speak-focused__img {
  width: 126px;
  height: 126px;
  display: block;
  object-fit: contain;
}

/* Image on the left, title + subheader stacked + LEFT-aligned on the right. */
.md-card--speak-focused__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.md-card--speak-focused__title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* Divider between the title and subheader: a left→right fading hairline
   (white, on the dark button). */
.md-card--speak-focused__divider {
  width: 100%;
  height: 1px;
  margin: 3px 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* Clear secondary line under the "Let's Communicate" title: a touch smaller
   (17→15) with a little more space from the divider, so it stops competing with
   the title. Brightened to ~88% white for legibility at the smaller size. */
.md-card--speak-focused__sub {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 4px;
}

/* The "→" reads as an intentional "go" affordance, not trailing punctuation:
   brighter (full white vs the 0.78 sub) and a touch larger + bolder. */
.md-card--speak-focused__arrow {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  display: inline-block;
  vertical-align: -0.05em;
}

/* On Home while Focused is active, the "Hey <name>" bar is the greeting, so hide
   the redundant "It's great to see you" dashboard hero. The centered top .md-pillnav
   stays visible ABOVE the bar (the nav the user navigates with). */
.md-shell--home:has(.md-grid--layout-focused) .md-hero--dashboard {
  display: none !important;
}

/* (Reports now shows in the pill-nav for everyone via `showReportsPill` (always
   true), on every layout. Communicators ALSO keep a Reports card in Extras, so the
   old CSS pill-hide stays retired.) */
/* Focused — the Boards card actions: "View All Boards" takes the SAME navy
   `$indigo` OKLAB gradient as the "Hey <name>" bar (white text — its default navy
   text would vanish on the dark fill); "New Board" instead matches the "Get Started"
   trigger pill (.beta-welcome-steps__num): a glassy translucent denim→verdigris
   tint with a white rim and $indigo text. Resting/hover/focus share the fill so
   hover doesn't flash back to the light base (the base :hover still lifts via its
   transform/shadow). (0,4,0) beats the base (0,3,0)
   `.md-grid--dashboard .md-card--boards .md-btn--*` rules. */
.md-grid.md-grid--layout-focused .md-card--boards .md-btn--wide,
.md-grid.md-grid--layout-focused .md-card--boards .md-btn--wide:hover,
.md-grid.md-grid--layout-focused .md-card--boards .md-btn--wide:focus-visible,
.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add,
.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add:hover,
.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  /* Desaturated Dusty Denim "glossy button" — top stop is the muted brand swatch
     ($focus-btn-base), fading a touch deeper ($focus-btn-edge) for raised depth. */
  background: linear-gradient(160deg in oklab, color-mix(in oklch, #4C86D8, gray 22%) 0%, color-mix(in oklch, color-mix(in oklch, #4C86D8, gray 22%), black 14%) 100%) !important;
}

/* Focused View hides the in-card "Create a Board" pill — there's a dedicated
   Create a Board action card in this layout, so the pill is redundant here.
   (Gentle View keeps it.) */
.md-grid.md-grid--layout-focused .md-card--boards .md-btn--pill {
  display: none !important;
}

/* Focused — the Boards panel reads as frosted GLASS: a translucent light
   surface with a backdrop blur (the shell gradient shows through, blurred), a
   GLOSSY specular sheen across the top, a crisp light rim, and a soft inner
   highlight + drop shadow. (0,3,0) beats the base (0,2,0) .md-card background. */
.md-grid.md-grid--layout-focused .md-card--boards {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%) !important;
  /* Quiet outer container — the content does the work, so the frame is a soft,
     low-contrast border, gently rounded, with a light shadow (not a shout). */
  border: 1px solid rgba(27, 54, 93, 0.07) !important;
  border-radius: 20px !important;
  /* Bottom edge still reads as floating (light rim bevels + a soft drop shadow),
     and a faint hero-blue wash bleeds in from the top so the Boards section feels
     related to the hero above it — all kept subtle. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 9px 18px rgba(76, 134, 216, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(27, 54, 93, 0.05), 0 6px 16px rgba(27, 54, 93, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform !important;
  transform: translateZ(0) !important;
  /* Positioning context for the absolutely-placed "View All Boards" button below. */
  position: relative !important;
}

/* Focused View — the Boards subtitle recedes under the "Boards (Page-sets)" header
   (it was reading as a second, unrelated element). Lighter muted slate so the two
   lines read as title → supporting line. */
.md-grid.md-grid--layout-focused .md-card--boards .md-card__sub {
  color: #8A97A8 !important;
}

/* Focused View — move "View All Boards" up to the Boards card's TOP-RIGHT, on the
   header row (the Create-a-Board pill that used to sit there is hidden here).
   Absolutely positioned within the card's 18px padding box. (0,4,0) beats the
   bottom-centred rule (.md-grid--dashboard …, 0,3,0). */
.md-grid.md-grid--layout-focused .md-card--boards .md-btn--wide {
  position: absolute !important;
  top: 16px !important;
  right: calc(18px + 0.25rem) !important;
  margin: 0 !important;
  width: fit-content !important;
  z-index: 3 !important;
  /* Trim 2px top/bottom off the base .md-btn 14px → 12px (left/right unchanged)
     so the View All Boards pill reads tighter on Focused View. */
  padding: 12px 20px !important;
}

/* Focused View — the Boards card sizes to its CONTENT. The 400px min-height +
   flex-grow strip existed to match the adjacent column in the 2-up layout; full-
   width here, that just left tall tiles with empty space below. Now the strip
   hugs its content and the tiles equalise to the tallest tile (align-items:
   stretch) instead of stretching to fill the card. */
.md-grid.md-grid--layout-focused .md-card--boards {
  min-height: 0 !important;
  height: auto !important;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-strip {
  flex: 0 0 auto !important;
}

/* "+" new-board circle — Focused View only (hidden elsewhere; the in-card
   Create-a-Board pill takes its place on other layouts). Same navy gradient +
   white text as the "View All Boards" button, rendered as a 40px disc that sits
   just right of the header text. The header grid grows a 3rd (spacer) column so
   the title + "+" hug the left while View All stays pinned top-right. */
.md-card--boards__add {
  display: none;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-card__head--between {
  grid-template-columns: auto auto 1fr !important;
}

/* Shape only — colour/border/background come from the shared View-All rule above
   so the "+" is styled IDENTICALLY to the View All Boards button. */
/* "[+] Create" pill — a labelled button (not a bare "+" circle) so first-time
   users know what it does. Matches the View All Boards pill (denim/white/raised,
   from the shared rule above). */
.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  /* Nudged 16px to the right of the header title block. */
  margin-left: 16px !important;
  height: 40px !important;
  padding: 0 18px 0 15px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  /* Same RAISED shadow as the View All (.md-btn--primary) button so the two
     match — the "+" isn't a .md-btn so it doesn't inherit it otherwise. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(76, 134, 216, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(76, 134, 216, 0.2) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-top: -2px !important;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add-text {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add:hover,
.md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__add:focus-visible {
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* Focused — move the "Get Started" trigger from the fixed top-RIGHT corner to the
   LEFT, stacked BELOW the "Take a Tour" trigger (which is fixed top-left at
   `topbar + 7.5rem`); the +48px clears the ~40px tour pill + gap. Also drop the
   workspace's 40px top padding so the nav/hero sit tighter to the top. */
.md-shell--layout-focused .md-home-steps {
  left: 24px !important;
  right: auto !important;
  top: calc(var(--topbar-height, 16px) + 7.5rem + 48px) !important;
}

/* Slightly slimmer Get Started pill on focused — top/bottom padding −2px (7px→5px). */
.md-shell--layout-focused .md-display-style__trigger {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Focused View workspace keeps a 32px top breathing room (padding) at all widths,
   and a 16px top MARGIN on full-size screens. (The general .md-workspace margin is
   40px at base and 0 at ≤950px; the focused 16px is preserved as 0 at ≤950px via
   the responsive rule near the bottom of the file.) */
.md-shell--layout-focused > .md-workspace {
  padding-top: 32px !important;
  margin-top: 16px !important;
}

/* Focused View — dark treatment for the four action buttons (Account / Create a
   Board / Reports / Edit Dashboard) lives AFTER the .md-card--badge-action text
   rules (~l.47334) so the sub-text colour override wins the equal-specificity
   source-order tie. See "Focused View — DARK action buttons" there. */
/* Focused View: drop the extra TOP PADDING so the nav/hero sit tight under the
   navbar. Two 3rem paddings stack above the workspace — the shell's own
   padding-top and #content's `+ 3rem`. Remove both here (scoped to focused via
   :has), keeping the `--topbar-height` clearance so content stays below the
   fixed navbar and the workspace's 40px top margin as the only breathing room. */
.md-shell--layout-focused {
  padding-top: 0 !important;
}

#within_ember:has(.page-footer) #content.index.with_user:has(.md-shell--layout-focused) {
  padding-top: var(--topbar-height) !important;
}

/* Speak Mode card-as-button — rendered at ≤1024px (see
   components/dashboard/authenticated-view.js#is_narrow_dashboard).
   The whole card becomes a <button> firing the same `go "speak"`
   action; the explicit "Continue Speaking" button is dropped at
   this size. The card chrome (radial overlays, padding, layout)
   from .md-grid .md-card.md-card--speak above carries over
   untouched — this rule only resets the native <button> styles
   (background/border/font/text-align), enables a pointer cursor,
   and layers the same raised-button shadow + hover/focus affordance
   as .md-card--caseload-as-button so the two cards read as a
   matched pair of tappable primary actions. */
.md-grid .md-card.md-card--speak-as-button,
.md-grid .md-card.md-card--badge-action.md-card--as-button {
  /* Native <button> UA styles (font/text-align/color/cursor) that the
     inherited .md-card / .md-grid .md-card rules don't override; the
     background gradient + border come down from those parent rules
     unchanged. Glassy shadow stack matches the caseload-as-button
     companion (inset highlight top + inset darken bottom + lifted
     drop shadow). A verdigris showcase halo is layered on as the final
     box-shadow layer so Speak Mode reads as the page's primary action. */
  font: inherit !important;
  text-align: left !important;
  color: inherit !important;
  cursor: pointer !important;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1), 0 0 38px rgba(42, 157, 143, 0.32) !important;
  transition: box-shadow 180ms ease-out, transform 140ms ease-out !important;
  -webkit-tap-highlight-color: transparent;
}

/* Gloss highlight overlay — sits above the gradient background but
   below the head content (head already has position:relative + z-index:1
   from `.md-card--speak .md-card__head, …` block below). The wave
   decorative bg div renders on top of the gloss because the wave is a
   later sibling with no z-index — that's intentional; the wave reads
   as the "glassy refraction" inside the button. */
.md-grid .md-card.md-card--speak-as-button::before,
.md-grid .md-card.md-card--badge-action.md-card--as-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0) 65%);
  z-index: 0;
}

.md-grid .md-card.md-card--speak-as-button:hover,
.md-grid .md-card.md-card--speak-as-button:focus-visible,
.md-grid .md-card.md-card--badge-action.md-card--as-button:hover,
.md-grid .md-card.md-card--badge-action.md-card--as-button:focus-visible {
  /* Stronger lift + deeper drop shadow on hover/focus so these primary actions
     read clearly as interactive (vs. informative). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 3px 6px rgba(27, 54, 93, 0.08), 0 10px 22px rgba(27, 54, 93, 0.13), 0 26px 54px rgba(27, 54, 93, 0.18), 0 0 56px rgba(42, 157, 143, 0.46) !important;
  transform: translateY(-2px);
}

.md-grid .md-card.md-card--speak-as-button:active,
.md-grid .md-card.md-card--badge-action.md-card--as-button:active {
  transform: translateY(0.5px);
  /* Pressed state: a faint denim border ring (inset so there's no layout shift)
     plus a tightened shadow, so a tap reads as a real button press. */
  box-shadow: inset 0 0 0 1.5px rgba(76, 134, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 2px rgba(27, 54, 93, 0.05), 0 2px 6px rgba(27, 54, 93, 0.08) !important;
}

/* Focus: a clear denim outline around the whole card (keyboard + assistive nav). */
.md-grid .md-card.md-card--speak-as-button:focus-visible,
.md-grid .md-card.md-card--badge-action.md-card--as-button:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 3px;
}

/* "→" affordance arrow in the action-card titles (Speak / Account / Create a
   Board / Reports / Edit Dashboard). Bolder, larger, and brand-blue so the card
   reads as a button, with a subtle slide on hover/focus reinforcing "go". The
   arrow is the only bare <span> inside these titles (counts/dots are classed). */
.md-grid .md-card.md-card--speak-as-button .md-card__title > span,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__title > span,
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__title > span {
  display: inline-block;
  margin-left: 6px;
  font-size: 1.3em;
  font-weight: 900;
  color: #4C86D8;
  transition: transform 140ms ease-out;
}

.md-grid .md-card.md-card--speak-as-button:hover .md-card__title > span,
.md-grid .md-card.md-card--speak-as-button:focus-visible .md-card__title > span,
.md-grid .md-card.md-card--badge-action.md-card--as-button:hover .md-card__title > span,
.md-grid .md-card.md-card--badge-action.md-card--as-button:focus-visible .md-card__title > span,
.md-grid .md-card.md-card--extras.md-card--as-button:hover .md-card__title > span,
.md-grid .md-card.md-card--extras.md-card--as-button:focus-visible .md-card__title > span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .md-grid .md-card.md-card--speak-as-button:hover .md-card__title > span,
  .md-grid .md-card.md-card--speak-as-button:focus-visible .md-card__title > span,
  .md-grid .md-card.md-card--badge-action.md-card--as-button:hover .md-card__title > span,
  .md-grid .md-card.md-card--badge-action.md-card--as-button:focus-visible .md-card__title > span,
  .md-grid .md-card.md-card--extras.md-card--as-button:hover .md-card__title > span,
  .md-grid .md-card.md-card--extras.md-card--as-button:focus-visible .md-card__title > span {
    transform: none;
  }
}
/* Account / Create-a-Board / Reports — same glassy chrome as Speak Mode but a
   SOFTER verdigris glow (Speak stays the page's primary action). Also kills the
   anchor underline on the Account card (it's a <LinkTo>). Comes after the Speak
   rules these cards share, so it wins on source order. */
.md-grid .md-card.md-card--badge-action.md-card--as-button {
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1), 0 0 22px rgba(42, 157, 143, 0.14) !important;
}

/* Designed surface for the action buttons — depth + a gentle left→right "flow" of
   soft denim/verdigris glows, weighted toward the RIGHT so the empty right half
   reads as composed atmosphere, not dead space (mirrors the Speak card). All
   <=6% opacity, layered over the base white→stone gradient. */
.md-grid .md-card.md-card--badge-action.md-card--as-button {
  background: radial-gradient(54% 82% at 22% 44%, rgba(76, 134, 216, 0.06), transparent 64%), radial-gradient(46% 84% at 90% 44%, rgba(42, 157, 143, 0.06), transparent 70%), radial-gradient(30% 54% at 80% 84%, rgba(76, 134, 216, 0.045), transparent 72%), linear-gradient(96deg, rgba(76, 134, 216, 0.05) 0%, rgba(42, 157, 143, 0.03) 44%, rgba(76, 134, 216, 0) 80%), linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 55%, rgba(245, 246, 249, 0.9) 100%) !important;
}

.md-grid .md-card.md-card--badge-action.md-card--as-button:hover,
.md-grid .md-card.md-card--badge-action.md-card--as-button:focus-visible {
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14), 0 0 30px rgba(42, 157, 143, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .md-grid .md-card.md-card--speak-as-button {
    transition: none !important;
  }
  .md-grid .md-card.md-card--speak-as-button:hover,
  .md-grid .md-card.md-card--speak-as-button:focus-visible,
  .md-grid .md-card.md-card--speak-as-button:active {
    transform: none;
  }
}
/* Reusable "card as a tappable button" treatment — the same glassy raised
   affordance the speak/caseload as-button variants use, factored into a
   single class so any dashboard card can become one actionable button.
   Used by the Extras card (head-only button, no separate CTA). The card's
   own background/border come down from the base `.md-card` rules unchanged;
   `.md-card__head { z-index: 1 }` (already set per card) keeps the head
   above the gloss `::before`. (speak/caseload keep their own copies for now;
   they could later adopt this class to dedupe.) */
.md-grid .md-card.md-card--as-button {
  font: inherit !important;
  text-align: left !important;
  color: inherit !important;
  cursor: pointer !important;
  /* Create-a-Board / Reports are <button>s; Account is an <a> (LinkTo). Reset the
     native button appearance so the <button> cards render the .md-card gradient
     background identically to the Account anchor (native chrome can otherwise tint
     a button's surface differently). */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1) !important;
  transition: box-shadow 180ms ease-out, transform 140ms ease-out !important;
  -webkit-tap-highlight-color: transparent;
}

.md-grid .md-card.md-card--as-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0) 65%);
  z-index: 0;
}

.md-grid .md-card.md-card--as-button:hover,
.md-grid .md-card.md-card--as-button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14) !important;
  transform: translateY(-1px);
}

.md-grid .md-card.md-card--as-button:active {
  transform: translateY(0.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 2px rgba(27, 54, 93, 0.05), 0 2px 6px rgba(27, 54, 93, 0.08) !important;
}

.md-grid .md-card.md-card--as-button:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .md-grid .md-card.md-card--as-button {
    transition: none !important;
  }
  .md-grid .md-card.md-card--as-button:hover,
  .md-grid .md-card.md-card--as-button:focus-visible,
  .md-grid .md-card.md-card--as-button:active {
    transform: none;
  }
}
/* ── Speak Mode card refinement — AAC-minimal, premium & calm ──────────
   Atmosphere + material + composition only (no extra UI). The card is the
   page's primary action, so it gets a designed surface: cool-white →
   warm-gray gradient, a soft teal atmospheric glow behind the content
   cluster, and subtle blurred shapes balancing the empty right side — all
   <=7% so it reads as ambient depth, never decoration. */
.md-grid .md-card.md-card--speak-as-button {
  min-height: 160px;
  background: radial-gradient(56% 78% at 22% 42%, rgba(42, 157, 143, 0.07), transparent 62%), radial-gradient(44% 82% at 90% 46%, rgba(76, 134, 216, 0.06), transparent 70%), radial-gradient(30% 52% at 80% 82%, rgba(42, 157, 143, 0.045), transparent 72%), linear-gradient(96deg, rgba(42, 157, 143, 0.05) 0%, rgba(76, 134, 216, 0.03) 42%, rgba(42, 157, 143, 0) 78%), linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 55%, rgba(245, 246, 249, 0.88) 100%) !important;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  /* Promote to its own GPU layer so the backdrop-filter result is rasterized and held
     across scroll. Without it, scrolling this card out of view and back makes the browser
     RE-COMPUTE the backdrop-filter, briefly flashing the solid base gradient before the
     blur/saturate re-applies (the "no-styling then styled" flicker). Same fix the
     .la-pricing-card uses (app.scss ~27720). */
  will-change: transform;
  transform: translateZ(0);
}

/* Keep the existing top wave faint so it doesn't compete with the new
   left/right atmosphere — calm, layered depth rather than busy. */
.md-grid .md-card.md-card--speak-as-button .md-card__bg--wave {
  opacity: 0.45 !important;
}

/* Shift the content cluster a touch below dead-center so the whitespace
   reads as composed at the taller height. */
.md-grid .md-card.md-card--speak-as-button .md-card__head {
  margin-top: 6px !important;
}

/* The as-button cards are single-content buttons, so drop the head's bottom border
   — the title's own teal ::after bar is the only intended divider. (Boards keeps its
   header border: it has the board strip below the head.) */
.md-grid .md-card.md-card--as-button .md-card__head,
.md-grid .md-card.md-card--speak-as-button .md-card__head {
  border-bottom: none !important;
  /* More breathing room between the icon tile and the title/sub on larger screens
     (the ≤1024px block widens it further for touch). */
  gap: 30px !important;
}

/* As-button card grid placement (the icon box itself is styled by the shared icon
   block below — tinted tile + glyph). */
.md-card--account {
  grid-area: account;
  align-self: stretch;
}

.md-card--create-board {
  grid-area: createboard;
  align-self: stretch;
}

.md-card--reports {
  grid-area: reports;
  align-self: stretch;
}

.md-card--edit-dashboard {
  grid-area: editdashboard;
  align-self: stretch;
}

/* Typography — slightly larger title (subtitle removed per design). */
.md-grid .md-card.md-card--speak-as-button .md-card__title,
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__title,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__title {
  font-size: 24px !important;
}

/* Divider below the title — a short teal gradient bar that fades out to
   the right, guiding the eye down toward the "ready" status line. */
.md-grid .md-card.md-card--speak-as-button .md-card__title::after {
  content: "";
  display: block;
  /* Slightly stronger anchor than before — wider + thicker + a touch more
     solid before the fade — so it grounds the title without dominating it. */
  width: 260px;
  max-width: 100%;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  /* Same brand gradient as the hero "where you left off" text, masked to
     fade out toward the right so it guides the eye down to the next line. */
  /* Reversed brand gradient (denim → verdigris) so the colour that was on the
     right now reads on the left. */
  background: linear-gradient(90deg, #4C86D8, #2A9D8F);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
}

/* On the supervisor (non-communicator) home — `md-grid--with-caseload`, where My
   Caseload is the hero and Speak is just another card — drop Speak's heavier hero
   divider down to the uniform home-card accent (matching Organizations / Account /
   etc.). The communicator home (no with-caseload) keeps the hero divider above. */
.md-grid.md-grid--with-caseload .md-card.md-card--speak-as-button .md-card__title::after {
  width: 208px;
  height: 2px;
  border-radius: 2px;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

/* Single supporting accent — a low-priority "ready" status line (muted
   teal + soft dot). Signals the card is active, no interactive UI added.
   Indented slightly so it sits offset from the title's left edge. */
.md-grid .md-card.md-card--speak-as-button .md-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Medium gray — #5C6470 is ~5.2:1 on the card's light surface (passes WCAG AA).
     The dot stays the brighter $brand-verdigris. */
  color: #5C6470;
}

.md-grid .md-card.md-card--speak-as-button .md-card__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.55);
}

/* Extras card — same title divider as the Speak card: the brand highlight
   gradient ($la-highlight-gradient, verdigris→denim) with the same
   dimensions + right-fade mask. */
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__title::after,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__title::after {
  content: "";
  display: block;
  /* Uniform home-card accent divider — matches the My Organizations divider.
     Speak Mode + My Caseload keep their own heavier hero dividers. */
  width: 208px;
  max-width: 100%;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  opacity: 0.7;
  /* Reversed brand gradient (denim → verdigris) — see the Speak divider. */
  background: linear-gradient(90deg, #4C86D8, #2A9D8F);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

/* "Games & Resources" sub — same as the Speak card's "Ready to communicate"
   status line: inline pill + leading dot, 14px / 600 / indented, in the
   verdigris status color. Text uses $brand-verdigris-aa (AA-safe) and the dot
   the brighter $brand-verdigris with the same soft glow — identical to the
   Speak status. The dot is a ::before because the sub (unlike the Speak
   status span) has no dot element in markup. */
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__sub,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 7px !important;
  margin-left: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #5C6470 !important;
}

.md-grid .md-card.md-card--extras.md-card--as-button .md-card__sub::before,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__sub::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.55);
}

/* ── Focused View — DARK action buttons (Account / Create a Board / Reports /
   Edit Dashboard — the badge-action cards; Extras isn't shown on Focused View) ─
   Darker like the top "Let's Communicate" hero but DIFFERENT from it: the hero is
   a RADIAL indigo glow, so these get a DIAGONAL denim→verdigris dark gradient
   (brand palette + directional flow) with a top-left sheen and raised depth.
   Text/sub flip to light; the light icon tiles pop against the dark surface.
   Placed AFTER the badge-action text rules so the sub/divider/dot colours win the
   equal-specificity source-order tie. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button {
  color: #1B365D !important;
  border: 1px solid rgba(76, 134, 216, 0.22) !important;
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 24%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 13%, white) 0%, color-mix(in oklch, #4C86D8 22%, white) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 2px 5px rgba(27, 54, 93, 0.08), 0 14px 30px rgba(27, 54, 93, 0.12), 0 0 22px rgba(42, 157, 143, 0.1) !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button:hover,
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button:focus-visible {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26), inset 0 -6px 13px rgba(27, 54, 93, 0.4), 0 4px 8px rgba(27, 54, 93, 0.26), 0 22px 44px rgba(27, 54, 93, 0.4), 0 0 26px rgba(42, 157, 143, 0.16) !important;
  transform: translateY(-1px) !important;
}

/* Sub text → muted navy (beats #3A506E base AND badge-action #5C6470 by source order). */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
  /* Nudged a touch lighter than #64748B so the description recedes further
     beneath the now-stronger title (still ~3:1 on the light card). */
  color: #7B8798 !important;
}

/* Quiet slate status dot (off the brighter teal) — no glow, so the descriptive
   line recedes instead of grabbing attention. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__sub::before {
  background: #64748B !important;
  box-shadow: none !important;
}

/* Title underline divider → denim→verdigris reading on the light bg. Made a
   touch easier to perceive (NOT brighter): +1px height and the solid portion of
   the fade-mask extended (55%→75%) so more of the line registers before it fades. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title::after {
  background: linear-gradient(90deg, #4C86D8, #2A9D8F) !important;
  height: 3px !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%) !important;
}

/* Speak Mode now always shows its card-as-button variant (--speak-as-button /
   --speak-narrow-only) at EVERY screen size; the wide variant with a separate
   "Continue Speaking" button (--speak-wide-only) is retired from display.
   The wide variant is hidden unconditionally; the as-button variant has no
   hide rule, so it shows at all widths. MUST stay AFTER
   `.md-grid .md-card.md-card--speak` so the source-order tiebreak goes to this
   hide rule (both (0,3,0) + !important). */
.md-grid .md-card.md-card--speak-wide-only {
  display: none !important;
}

.md-card--speak .md-card__head,
.md-card--speak .md-card__row,
.md-card--speak .md-card__org-list {
  position: relative !important;
  z-index: 1 !important;
}

.md-card--speak:has(.md-card__org-list) {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: calc(18px + 1rem) !important;
}

.md-card--speak .md-card__org-list {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: auto !important;
  padding-top: 2rem !important;
}

.md-card__icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid var(--md-line) !important;
}

.md-card__icon--speak {
  background: rgba(44, 183, 176, 0.12);
}

/* SVG icon (when using mic SVG instead of img): .md-card__icon--speak .md-card__icon-svg--mic { color: rgba(44, 183, 176, 0.92); } */
/* Extras variant — soft warm coral tint matching the wave decoration
   on the card's bottom. Was previously the standalone `.md-extrasIcon`
   class living inside `.md-extrasRow` below the head; the icon is now
   a direct head child like every other dashboard card (Caseload,
   Speak Mode) so it sits to the LEFT of the title/sub instead of
   below them. Same 46×46 box from the base .md-card__icon rule
   above; this modifier only swaps the tint. */
.md-card__icon--extras {
  background: rgba(240, 106, 91, 0.12) !important;
  border-color: rgba(240, 106, 91, 0.18) !important;
  /* Fully round the outer container (the box is square in every context — 46px
     base / 96px as-button — so 50% is a perfect circle). overflow:hidden is
     REQUIRED: the extras image is an opaque white square that fills this box,
     so border-radius alone leaves square corners — the clip is what rounds the
     icon to a circle. */
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Shared as-button rules set the icon radius AND size, and out-specify
   .md-card__icon--extras: 33px / 96px on the full-span action icons ((0,6,0))
   and 22px / 64px on the base as-button icons ((0,5,0)) — both shared across
   Speak / Account / Create-a-Board / Reports / Edit-Dashboard. For the EXTRAS
   icon ONLY, re-assert (a) a full circle and (b) a 25%-larger size, by
   out-specifying BOTH shared rules with extras-scoped selectors. The trailing
   .md-card__icon--extras raises specificity above them and keeps the change off
   every other card's icon. The image inside is width/height:100%, so it scales
   up with the container automatically. One rule per context so each grows from
   its own base. */
/* The 120px (full-span) size must be gated to the SAME breakpoint as its 96px
   baseline (@media min-width:951px) — below 951px the grid collapses to one
   column but keeps the fullspan-extras class, so an ungated 120px would oversize
   the icon on mobile. Below 951px the 80px rule below applies (circle preserved
   by both rules). */
@media (min-width: 951px) {
  .md-grid.md-grid--fullspan-extras .md-card.md-card--extras.md-card--as-button .md-card__icon.md-card__icon--extras {
    border-radius: 50% !important;
    width: 120px !important; /* 96 × 1.25 */
    height: 120px !important;
  }
}
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon.md-card__icon--extras {
  border-radius: 50% !important;
  width: 80px !important; /* 64 × 1.25 */
  height: 80px !important;
  /* The extras-circle image is a full circular illustration on its own, so hide the
     icon TILE chrome behind it (coral gradient background, border, glow/drop shadow)
     — otherwise it reads as a second circle around the image. This 0,6,0 rule beats
     the shared `.md-card--extras.md-card--as-button .md-card__icon` tile (0,5,0). */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.md-card__icon-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Extras card image icon: clip to a full circle (the source is a perfect square,
   so 50% gives a clean circle). Fill the container EXACTLY (100%) — not larger:
   the parent .md-card has overflow:hidden, so any icon bigger than its box
   overflows the card and gets sliced flat top/bottom, breaking the circle. At
   100% the whole circle stays inside the card and renders perfectly round. */
.md-card__icon--extras .md-card__icon-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* ── As-button card icons ─────────────────────────────────────────────────
   Speak/Extras/Account/Create-a-Board/Reports/Edit-Dashboard show a 34px duotone
   SVG glyph in a 64px tile. Each tile is per-card so it keeps its hue: a diagonal
   white→tint flow + a top-left radial highlight for depth, a tinted border, a
   tinted inset bottom shadow (domed feel), and a soft outer coloured glow. */
.md-card__icon-glyph {
  display: block;
  width: 34px;
  height: 34px;
}

/* Icon tile — sized well above the base 46px for a strong, tappable presence. */
.md-grid .md-card.md-card--speak-as-button .md-card__icon,
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
}

.md-grid .md-card.md-card--speak-as-button .md-card__icon {
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #edf6f4 52%, #d8ece8 100%) !important;
  border: 1px solid rgba(42, 157, 143, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(42, 157, 143, 0.1), 0 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(42, 157, 143, 0.16) !important;
}

.md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon {
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #fdf2ef 52%, #fae0db 100%) !important;
  border: 1px solid rgba(240, 106, 91, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(240, 106, 91, 0.1), 0 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(240, 106, 91, 0.16) !important;
}

.md-grid .md-card.md-card--account.md-card--as-button .md-card__icon {
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #eef3fc 52%, #dbe7f8 100%) !important;
  border: 1px solid rgba(76, 134, 216, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(76, 134, 216, 0.1), 0 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(76, 134, 216, 0.16) !important;
}

.md-grid .md-card.md-card--create-board.md-card--as-button .md-card__icon {
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #ecf6f2 52%, #d6efe8 100%) !important;
  border: 1px solid rgba(42, 157, 143, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(42, 157, 143, 0.1), 0 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(42, 157, 143, 0.16) !important;
}

.md-grid .md-card.md-card--reports.md-card--as-button .md-card__icon,
.md-grid .md-card.md-card--edit-dashboard.md-card--as-button .md-card__icon {
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, #ffffff 0%, #eef3fc 52%, #dbe7f8 100%) !important;
  border: 1px solid rgba(76, 134, 216, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(76, 134, 216, 0.1), 0 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(76, 134, 216, 0.16) !important;
}

/* Focused View — DARK glassy/glossy icon tiles on the dark action cards (was the
   light white tiles above). A translucent navy→verdigris glass with a strong
   specular highlight, a frosted backdrop blur, a bright top rim + dark inner lip
   for the glossy domed look. Placed AFTER the per-card light tiles so it wins the
   equal-specificity source-order tie. Glyphs get a slight brightness lift so the
   denim/teal line art still reads on the darker surface. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
  /* Darker, LESS-SATURATED blue (muted slate-blue) at the CENTRE, fading to a
     lighter slate-blue at the outer edges. */
  background: radial-gradient(circle at 50% 46%, #262d3a 0%, #333c4a 48%, #515d70 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  /* Calmer tile — most of the glossy glow removed (faint top rim only), keeping
     just the dark square + a subtle drop shadow. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 5px rgba(0, 0, 0, 0.16) !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
  filter: brightness(1.4) saturate(1.05);
}

/* Focused View — the four action cards (Account / Create a Board / Reports / Edit
   Dashboard) share ONE four-up row (the layout engine packs them so; this widens
   the grid to 4 columns). Slimmer + smaller so four fit comfortably across.
   `.md-grid.md-grid--layout-focused` (0,2,0) beats the base `.md-grid` columns;
   the per-element rules sit after the badge-action/icon rules to win the
   equal-specificity source-order tie. */
.md-grid.md-grid--layout-focused {
  grid-template-columns: repeat(4, 1fr) !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button {
  min-height: 0 !important;
  /* ~7% more compact (14/16 → 13/15) — a very small reduction. */
  padding: 13px 15px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__head {
  gap: 11px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title {
  /* +1px (16→17) so the title holds its own against the icon block — base weight
     is already 900, so size is the lever. */
  font-size: 17px !important;
  /* Full-strength deep navy (was the inherited mid $la-navy ≈85%) so the title
     clearly out-weights the muted subtitle — Title ↓ Description, not Title =
     Description. No shadow needed on the light card. */
  color: #0F2540 !important;
  text-shadow: none !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title::after {
  width: 150px !important;
}

/* `.md-grid.md-grid--layout-focused` (0,6,0) beats the later 18px gentle-intended
   rule (`.md-grid .md-card.md-card--badge-action...`, 0,5,0) that isn't layout-scoped. */
.md-grid.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
  font-size: 14px !important;
  margin-left: 0 !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
  width: 41px !important;
  height: 41px !important;
  border-radius: 13px !important;
  /* The head is a flex row; without this the icon shrinks by different amounts
     per card (longer descriptive text squeezes it more), so the four tiles ended
     up different widths. Pin to a fixed size so all four match. */
  flex: 0 0 41px !important;
  min-width: 41px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
  width: 20px !important;
  height: 20px !important;
}

/* ≤1024px — the dashboard "card as button" view: widen the icon→text gap (the icon
   tile is already a generous 64px at all widths now). */
@media (max-width: 1024px) {
  .md-grid .md-card.md-card--speak-as-button .md-card__head,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__head {
    gap: 28px !important;
  }
}
.md-card__row {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.md-card__row .md-btn--primary {
  width: fit-content !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.md-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1B365D !important;
  font-weight: 650 !important;
}

.md-chip__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--md-teal), rgba(91, 141, 239, 0.9)) !important;
}

.md-btn {
  /* WCAG 2.5.5 AAA touch target — was 12px 16px (~36×38). */
  padding: 14px 20px !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid var(--md-line) !important;
  font-weight: 850 !important;
  box-shadow: var(--md-shadow-2) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.md-btn:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(42, 157, 143, 0.35) !important;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.1) !important;
}

.md-btn:active {
  transform: scale(var(--md-tap));
}

.md-btn--primary {
  background: rgba(76, 134, 216, 0.3) !important;
  border-color: rgba(76, 134, 216, 0.22) !important;
  color: #1B365D !important;
}

.md-btn--primary:hover {
  background: rgba(76, 134, 216, 0.45) !important;
  border-color: rgba(76, 134, 216, 0.35) !important;
  box-shadow: 0 4px 14px rgba(76, 134, 216, 0.15) !important;
}

.md-btn--pill {
  border-radius: 999px !important;
  padding: calc(6px + 0.25rem) calc(12px + 0.25rem) !important;
  font-size: 14px !important; /* WCAG minimum; was 0.9em */
}

.md-btn--primary.md-btn--pill {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--md-ink) !important;
}

.md-btn--primary.md-btn--pill:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15)) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.md-btn--ghost {
  background: rgba(255, 255, 255, 0.62) !important;
}

.md-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(27, 54, 93, 0.15) !important;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.08) !important;
}

.md-btn--wide {
  width: 100%;
  margin-top: 12px;
}

/* ── Pending org / supervision approval notice (home page) ───────────────────
   Modern card replacing the old Bootstrap `.alert` (moved here from the Boards
   tab). Gentle View baseline; Focused View override below. */
.md-pending-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 auto 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(58, 107, 199, 0.18);
  background: radial-gradient(120% 120% at 0% 0%, rgba(58, 107, 199, 0.1) 0%, rgba(58, 107, 199, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(27, 54, 93, 0.05), 0 8px 24px rgba(27, 54, 93, 0.08);
}

.md-pending-notice__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(58, 107, 199, 0.12);
  color: #46505F;
}

.md-pending-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.md-pending-notice__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #1B365D;
}

.md-pending-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.md-pending-notice__actions .md-btn {
  width: auto;
  margin-top: 0;
}

/* Focused View — match the focused surface + gradient CTA. */
body.ll-layout-focused .md-pending-notice {
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: radial-gradient(120% 120% at 0% 0%, rgba(76, 134, 216, 0.1) 0%, rgba(76, 134, 216, 0) 60%), linear-gradient(180deg, rgba(236, 241, 250, 0.7) 0%, rgba(212, 220, 236, 0.6) 100%);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
}

body.ll-layout-focused .md-pending-notice__icon {
  background: rgba(76, 134, 216, 0.16);
  color: #46505F;
}

body.ll-layout-focused .md-pending-notice .md-btn--primary {
  background: linear-gradient(135deg, #7693B9, #46505F) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.md-card__bg--wave {
  position: absolute !important;
  inset: -40% -10% auto -10% !important;
  height: calc(220px + 5rem) !important;
  background: radial-gradient(circle at 30% 60%, rgba(44, 183, 176, 0.1), transparent 60%), radial-gradient(circle at 70% 40%, rgba(107, 152, 241, 0.08), transparent 60%), rgba(255, 255, 255, 0.05) !important;
  filter: blur(0px) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* --- Boards Card --- */
.md-card--boards {
  grid-area: boards;
}

/* Dashboard home: primary action buttons. Styled to match the Extras-tab
   action buttons (.md-extras-card__btn): a raised glassy denim pill —
   fully-round radius, top inner sheen + faint lower inner edge for surface
   curvature, a tight contact shadow, and a soft diffuse denim-tinted lift, so
   each reads as a tappable CTA rather than a flat wash. Navy-on-light AAC
   contrast preserved. (The New Board pill is carved out below to follow the
   Change Home Board button instead.) */
.md-grid--dashboard .md-card--speak .md-btn--primary,
.md-grid--dashboard .md-card--boards .md-btn--primary,
.md-grid--dashboard .md-card--caseload .md-btn--primary,
.md-grid--dashboard .md-card--rooms .md-btn--primary,
.md-grid--dashboard .md-card--org-management .md-btn--primary {
  background: rgba(76, 134, 216, 0.3) !important;
  color: #1B365D !important;
  border-color: rgba(76, 134, 216, 0.22) !important;
  border-radius: 999px !important;
  /* NOTE: `!important` may appear only ONCE, at the end of the whole
     box-shadow declaration — repeating it per comma layer invalidates the
     entire value (renders flat). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(76, 134, 216, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(76, 134, 216, 0.2) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.md-grid--dashboard .md-card--speak .md-btn--primary:hover,
.md-grid--dashboard .md-card--boards .md-btn--primary:hover,
.md-grid--dashboard .md-card--caseload .md-btn--primary:hover,
.md-grid--dashboard .md-card--rooms .md-btn--primary:hover,
.md-grid--dashboard .md-card--org-management .md-btn--primary:hover {
  background: rgba(76, 134, 216, 0.4) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(76, 134, 216, 0.22), 0 2px 4px rgba(27, 54, 93, 0.1), 0 12px 26px rgba(76, 134, 216, 0.28) !important;
}

.md-grid--dashboard .md-card--speak .md-btn--primary:active,
.md-grid--dashboard .md-card--boards .md-btn--primary:active,
.md-grid--dashboard .md-card--caseload .md-btn--primary:active,
.md-grid--dashboard .md-card--rooms .md-btn--primary:active,
.md-grid--dashboard .md-card--org-management .md-btn--primary:active {
  transform: translateY(0) !important;
}

.md-grid--dashboard .md-card--speak .md-btn--primary:focus-visible,
.md-grid--dashboard .md-card--boards .md-btn--primary:focus-visible,
.md-grid--dashboard .md-card--caseload .md-btn--primary:focus-visible,
.md-grid--dashboard .md-card--rooms .md-btn--primary:focus-visible,
.md-grid--dashboard .md-card--org-management .md-btn--primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px rgba(76, 134, 216, 0.2) !important;
}

/* "Create a Board" pill now matches the "View All Boards" button — it shares the
   `.md-grid--dashboard .md-card--boards .md-btn--primary` rule above (same shape,
   outline, lift, shadow, transition, focus). This carve-out keeps ONLY the
   verdigris BACKGROUND (per request) and disables the pill's backdrop blur so the
   surface matches View All; everything else falls through to that rule. (0,3,0)
   ties the primary rule and wins the bg via source order. */
.md-grid--dashboard .md-card--boards .md-btn--pill {
  background: rgba(44, 183, 176, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 14px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.md-grid--dashboard .md-card--boards .md-btn--pill:hover {
  background: rgba(44, 183, 176, 0.3) !important;
}

.md-grid--dashboard .md-card--boards {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 238, 243, 0.95)) !important;
  border: 1.5px solid rgba(27, 54, 93, 0.1) !important;
  border-bottom: 2.5px solid rgba(27, 54, 93, 0.12) !important;
}

.md-card--boards .md-card__boards-icon {
  width: 45px !important;
  height: 45px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  transform: scale(1.4) !important;
  transform-origin: center !important;
  margin-left: -1rem !important;
}

.md-stat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.65) !important;
}

/* Center "Back to Boards" button when new board form is open */
.md-card__head--center-back {
  position: relative !important;
  justify-content: center !important;
}

.md-card__head--center-back .md-card__left,
.md-card__head--center-back .md-stat {
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Inline Create a New Board form on Boards tab (same content as modal) */
.md-card__new-board-inline {
  margin-top: 16px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}

.md-card__new-board-inline .modal-content--standalone {
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.md-card__new-board-inline .board_drop {
  display: block !important;
}

/* New Board page/card – modern dashboard styling (standalone or inline) */
.new-board--modern {
  background: var(--md-surface) !important;
  border-radius: var(--md-r-lg) !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: var(--md-shadow) !important;
  overflow: hidden !important;
}

.new-board--modern .modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--md-line) !important;
  /* Transparent so the workspace's Focused-View boards surface shows through. */
  background: transparent !important;
}

.new-board--modern .modal-header h3 {
  margin: 0 !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -0.2px !important;
  color: var(--md-ink) !important;
}

.new-board--modern .create-board-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

/* Anchor for the absolute-positioned `.nb-generate-ai-btn` below —
   only applied in NON-AI mode (no `.nb-ai-mode-wrap` inside the
   action row). When AI mode is engaged the row contains the badge
   instead, and the badge's own absolute-on-the-title-row rule (see
   `.new-board--modern .modal-header .create-board-actions:has(.nb-ai-mode-wrap)
   .nb-ai-mode-badge` further down) needs `.modal-header` to be the
   nearest positioned ancestor — making the action row position:
   relative here would re-anchor the badge to the row instead, pull
   the badge out of the title-row spot, and collapse the Other Create
   Board Methods button on top of the badge caption. The `:not()`
   guard scopes the anchor to the only state that needs it. */
.new-board--modern .create-board-actions:not(:has(.nb-ai-mode-wrap)) {
  position: relative !important;
}

.new-board--modern .create-board-actions .btn,
.new-board--modern .create-board-actions button {
  padding: 10px 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--md-line) !important;
  font-weight: 750 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--md-ink) !important;
  box-shadow: var(--md-shadow-2) !important;
}

.new-board--modern .create-board-actions .btn:hover,
.new-board--modern .create-board-actions button:hover {
  background: rgba(255, 255, 255, 0.88) !important;
}

/* Top-right Create Board: visually match the footer primary CTA
   (teal→blue gradient) instead of inheriting the neutral header
   action-button look. Higher specificity than the rule above. */
.new-board--modern .create-board-actions .new-board__submit--top {
  /* Push only this button to the far right of the flex row; the
     Import / Paste HTML / Generate group stays left-aligned. */
  margin-left: auto !important;
  border: 1px solid rgba(44, 183, 176, 0.18) !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2)) !important;
  color: var(--md-ink) !important;
}

.new-board--modern .create-board-actions .new-board__submit--top:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.32), rgba(91, 141, 239, 0.28)) !important;
}

/* Import Board(s) wraps its button in a .file_select_holder span (so the
   hidden file input can intercept clicks). In a flex row, force the span
   to behave like a sibling button — and use overflow: visible so the
   button's box-shadow renders fully (the global .file_select_holder rule
   sets overflow: hidden, which would clip the shadow and make the button
   look subtly different from its neighbors). */
.new-board--modern .create-board-actions .file_select_holder {
  display: inline-flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
}

.new-board--modern .create-board-actions .file_select_holder > .btn,
.new-board--modern .create-board-actions .file_select_holder > button {
  margin: 0 !important;
}

.new-board--modern .modal-body {
  padding: 24px !important;
  /* Transparent so the workspace's Focused-View boards surface shows through. */
  background: transparent !important;
}

.new-board--modern .form-group {
  margin-bottom: 18px !important;
}

.new-board--modern .form-group label.control-label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  color: var(--md-ink) !important;
}

.new-board--modern .form-control {
  border-radius: 14px !important;
  border: 1px solid var(--md-line) !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--md-ink) !important;
}

.new-board--modern #new_board_name,
.new-board--modern #new_board_rows,
.new-board--modern #new_board_columns {
  font-size: 14px !important;
}

.new-board--modern .form-control:focus-visible {
  border-color: var(--md-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.2) !important;
}

.new-board--modern .input-group .btn {
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-weight: 700 !important;
}

.new-board--modern .input-group .form-control {
  border-radius: 14px !important;
}

.new-board--modern .modal-footer {
  padding: 20px 24px !important;
  border-top: 1px solid var(--md-line) !important;
  /* Transparent so the workspace's Focused-View boards surface shows through. */
  background: transparent !important;
}

.new-board--modern .modal-footer .new-board__submit,
.new-board--modern .modal-footer .btn-primary {
  padding: 12px 24px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(44, 183, 176, 0.18) !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2)) !important;
  color: var(--md-ink) !important;
  box-shadow: var(--md-shadow-2) !important;
}

.new-board--modern .modal-footer .new-board__submit:hover:not(:disabled),
.new-board--modern .modal-footer .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.32), rgba(91, 141, 239, 0.28)) !important;
}

.new-board--modern .modal-footer .new-board__submit:disabled,
.new-board--modern .modal-footer .btn-primary:disabled {
  /* Light gray bg + dark slate text for WCAG AA contrast (~12.5:1) — replaces
     the prior opacity: 0.7 treatment which washed out both layers and failed
     contrast against the footer background. */
  background: #e5e7eb !important;
  color: #1f2937 !important;
  border: 1px solid rgba(31, 41, 55, 0.18) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Standalone (page) footer: Cancel sits to the left of Create Board, group
   centered horizontally on the page. Cancel-then-primary follows modern
   web/SaaS convention (macOS HIG / Material / GitHub / Stripe / Figma). */
.new-board--modern .modal-footer .new-board__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* Row that holds a section's verdigris title pill + a small gray
   "optional" pill side-by-side. flex-start keeps both pinned to the
   left edge of the section, with a tight gap between the two. */
.nb-section__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  /* Cancel the parent .nb-section's flex gap on this row's bottom — the
     section's `gap: 12px` should remain between row and hint, but the
     row itself is just one logical line. */
  margin: 0;
}

/* Small gray "optional" chip. Sized to read as a sibling of the
   eyebrow pill but visually subordinate — neutral fill, lighter type,
   no uppercase. The pill chrome (rounded, soft border, faint inset
   highlight) mirrors the verdigris pill's shape so they read as a
   pair. */
.nb-section__optional-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(27, 54, 93, 0.62);
  background: rgba(13, 36, 56, 0.06);
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Field-level "optional" pill — sits inline next to a regular field
   label (Description, "Are you creating this board for someone else?")
   rather than next to a section eyebrow. Smaller and tighter than
   `.nb-section__optional-pill`, but same color language so the two
   read as a system. Margin-left pulls it off the label text by 8px. */
.nb-field__optional-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(27, 54, 93, 0.55);
  background: rgba(13, 36, 56, 0.05);
  border: 1px solid rgba(13, 36, 56, 0.09);
  border-radius: 999px;
  vertical-align: middle;
  /* Reset the label's bold weight + text-transform — the pill's own
     italic-lowercase styling should win regardless of whose child
     element it lives in. */
  text-decoration: none;
}

/* Required-field pill — same shape as the optional pill but a warm
   accent so "required" reads as a stronger signal than "optional". */
.nb-field__required-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  text-transform: lowercase;
  color: #b8761c;
  background: rgba(232, 163, 23, 0.12);
  border: 1px solid rgba(232, 163, 23, 0.32);
  border-radius: 999px;
  vertical-align: middle;
  text-decoration: none;
}

/* ── AI mode header: status pill + "other methods" pill ────────────
   The pill mirrors the board-detail edit "Editing…" badge
   (.md-board-detail-header__editing-badge): verdigris rounded pill,
   two-row column (icon+title row, caption row). The other-methods
   control sits below it and returns to the regular options. */
.nb-ai-mode-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nb-ai-mode-badge {
  flex-shrink: 0;
  /* `position: relative` anchors the `::before` ambient hotspot pseudo
     below, and lets `overflow: hidden` clip the hotspot's bleed at
     the chip's rounded corners. */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px 6px;
  /* Lowered from 999px (full pill) to 16px — refined corner radius
     reads as a premium AI action surface instead of a generic
     notification bubble. */
  border-radius: 16px;
  /* Layered background — soft cool-teal base + TWO ambient hotspots
     that balance each other: a periwinkle hint on the LEFT (under
     the icon, ties to the AI sparkle) and a teal hint on the RIGHT
     (ties to the brand-verdigris title family + visually rebalances
     the chip's left-leaning weight). Both are ultra-subtle (alpha
     ~0.08-0.10 fading to 0) — meant to be felt, not seen. The two
     radials sit on top in comma-stacked source order; the linear
     gradient is the base wash.

     `background-size: 180%` on the two radials gives them room to
     PAN — the `nb-ai-mode-bg-drift` keyframes below slide their
     centers slowly across the chip over 22 seconds, so the surface
     feels alive (premium AI ambient drift) instead of static.
     Position values match the keyframes' 0%/100% stops so the
     drift loops seamlessly. */
  background: radial-gradient(ellipse 60% 100% at 22% 50%, rgba(133, 133, 230, 0.1) 0%, rgba(133, 133, 230, 0) 70%), radial-gradient(ellipse 55% 100% at 86% 50%, rgba(42, 157, 143, 0.09) 0%, rgba(42, 157, 143, 0) 65%), linear-gradient(180deg, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0.06) 100%);
  background-size: 180% 180%, 180% 180%, 100% 100%;
  background-position: 22% 50%, 86% 50%, 0 0;
  animation: nb-ai-mode-bg-drift 22s ease-in-out infinite;
  /* Subtle dark hairline (not a bright raised rim) completes the
     recessed-well look. */
  border: 1px solid rgba(17, 24, 39, 0.1);
  /* INSET / recessed surface — this is a STATUS badge, not an actionable
     button, so it reads as pressed INTO the page rather than floating
     above it. A darker inner shadow at the top edge (as if light is
     occluded by the recess lip) plus a faint light inner highlight at the
     bottom gives the carved-in well; the old three-layer outer drop
     shadow (which made it look like a clickable, raised control) is gone. */
  box-shadow: inset 0 2px 5px rgba(17, 24, 39, 0.13), inset 0 1px 2px rgba(17, 24, 39, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  color: #1A7B7A;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Inner content needs to sit above the ambient hotspot — the badge's
   pseudo-less radial gradient is in `background:` (not a pseudo), so
   normal children render above it. This `z-index: 1` is a defensive
   stacking guard in case any descendant inadvertently lands behind. */
.nb-ai-mode-badge > * {
  position: relative;
  z-index: 1;
}

.nb-ai-mode-badge__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* Title text — gradient teal→slate-blue ink via background-clip:text.
   Shared across the badge (post-click) and the outer button (pre-
   click) so the click→badge transition reads as the same title
   morphing in place. The prior flat $brand-verdigris-aa color was
   technically accessible but felt static; a slight gradient (deeper
   teal blending into a cooler slate-blue) adds the 3-5% richness
   Traci flagged as missing without leaning on a saturated color.
   Falls back to a flat $brand-verdigris-aa on browsers without
   background-clip support (set via the `color` declaration; the
   gradient layers on top). */
.nb-ai-mode-badge__title,
.nb-generate-ai-btn__title {
  color: #1A7B7A;
  background: linear-gradient(135deg, #2E6F73 0%, #4B7C93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Inherit the parent's font-size + weight so the gradient text
     scales with whichever chip context (badge or button) it's in. */
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Per-letter bounce-in for the Generate with AI button title —
   mirrors the "Let's Communicate" cascade on the boards page hero
   (same @keyframes ub-letter-bounce defined globally near line
   ~27573). Each letter has its own `animation-delay` set inline in
   the template so the entrance cascades left to right over ~1.35s.

   IMPORTANT: each letter carries its OWN gradient (rather than
   inheriting the parent's clipped gradient through text). The
   parent's `background-clip: text` + `-webkit-text-fill-color:
   transparent` setup inherits `transparent` to inline-block
   children, but the parent's gradient doesn't paint inside the
   child's box (each inline-block has its own formatting context).
   Result without this per-letter gradient: letters render
   completely invisible. Each letter applies the same teal→slate
   gradient at 135°; on a 16px letter the gradient direction is
   nearly imperceptible, so the word still reads as a single
   color-graded line. */
.nb-generate-ai-btn__title .ub-letter {
  display: inline-block;
  font-size: inherit;
  opacity: 1;
  background: linear-gradient(135deg, #2E6F73 0%, #4B7C93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ub-letter-bounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.nb-generate-ai-btn__title .ub-letter--space {
  /* Spaces don't need the gradient (whitespace doesn't render any
     ink), but keep inline-block + the animation timing so the
     cascade rhythm stays contiguous across word boundaries. The
     `&nbsp;` provides the width. */
  background: none;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .nb-generate-ai-btn__title .ub-letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* Optical nudge — the sparkle disk visually centers ~1px high
   against the title's cap-height; this margin-top pulls it down so
   the icon's optical center aligns with the title's optical center.
   Tiny detail but matters for "polished" feel. */
.nb-ai-mode-badge__row .nb-ai-sparkle-badge {
  margin-top: 1px;
}

.nb-ai-mode-badge__caption {
  /* Opacity dropped 0.78 → 0.68 so the subtitle yields visual
     priority to the gradient title — supportive, not competing.
     Letter-spacing removed (was 0.01em) so the type feels tighter
     and less "spaced out" at the smaller weight. */
  margin-top: -1px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  color: #6B7280;
  opacity: 0.68;
}

.nb-ai-mode-other {
  appearance: none;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.7);
  background: rgba(13, 36, 56, 0.05);
  border: 1px solid rgba(13, 36, 56, 0.12);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* "Generate with AI" button on the create-board-new header (before AI
   mode is engaged). Visual identity: same family as the
   `.nb-ai-mode-badge` that replaces it once AI mode is engaged — soft
   verdigris glassy gradient, verdigris ink, bold weight, sparkle
   prefix — so the click→badge transition feels like the same chip
   morphing in place. Position: absolute-centered on the same row as
   Import / Paste so it visually anchors to the page midline (the badge
   uses the same `left: 50%` + `transform: translateX(-50%)` trick).
   Two-class specificity beats `.btn-default` / `.la-btn--ghost`. */
/* Higher-specificity selector — the existing
   `.new-board--modern .create-board-actions .btn` rule (line ~43676)
   and `.la-new-board-modal-wrap .la-new-board-modal-actions .la-btn--ghost`
   (line ~34119) both carry !important on their backgrounds and have
   specificity 0,3,0. To win, this rule prefixes the context so its
   specificity is 0,4,0 / 0,5,0 respectively — that lets the
   multi-layer ambient gradient land instead of the neutral white
   background those base rules paint. */
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn,
.la-new-board-modal-wrap .la-new-board-modal-actions .nb-generate-ai-btn.la-btn {
  /* Position-anchored to the .create-board-actions row's bounds (the
     row is `position: relative` per the rule above). Centered both
     vertically (top: 50%) and horizontally (left: 50%); the negative
     translate offsets pull the chip back onto its own center. */
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* Refined corner radius — moved from the inherited full-pill
     (.btn-default / .la-btn--ghost defaults) to 16px so the button
     reads as a premium AI action surface, matching the badge's
     border-radius for click→badge continuity. */
  border-radius: 16px !important;
  /* Asymmetric padding matching the badge — extra right padding
     pulls the optical center back toward true middle (the icon +
     bold title weight pulls left). 6px vertical mirrors the badge's
     6/7 vertical rhythm; 22/26 horizontal is identical to the badge. */
  padding: 6px 26px 7px 22px !important;
  /* 16px (down from 18px) — slightly more refined for the inline
     button context; the badge keeps its own 18px for the more
     prominent post-click state. */
  font-size: 16px !important;
  /* Same three-layer ambient background as the badge: two radial
     hotspots (periwinkle on the left under the icon, verdigris on
     the right balancing the chip's weight) over a soft cool-teal
     linear base. `background-size: 180%` gives the radials room to
     pan via the `nb-ai-mode-bg-drift` animation below — surface
     feels alive instead of static. */
  background: radial-gradient(ellipse 60% 100% at 22% 50%, rgba(133, 133, 230, 0.1) 0%, rgba(133, 133, 230, 0) 70%), radial-gradient(ellipse 55% 100% at 86% 50%, rgba(42, 157, 143, 0.09) 0%, rgba(42, 157, 143, 0) 65%), linear-gradient(180deg, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0.06) 100%) !important;
  background-size: 180% 180%, 180% 180%, 100% 100% !important;
  background-position: 22% 50%, 86% 50%, 0 0 !important;
  animation: nb-ai-mode-bg-drift 22s ease-in-out infinite !important;
  /* `overflow: hidden` clips the panned radial bleed at the rounded
     corners — without this, the radials would spill beyond the chip
     edge when their centers drift. */
  overflow: hidden !important;
  color: #1A7B7A !important;
  font-weight: 700 !important;
  /* Negative tracking matches the badge title for refined modern-
     SaaS display type. */
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  /* Icon-title gap matches the badge (6px, tightened from 10px to
     reduce the chip's left-lean). */
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  /* Same three-layer drop shadow as the badge — upper-mid alphas so
     the chip has a visible ground line without feeling weighed down. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 10px rgba(17, 24, 39, 0.07), 0 12px 28px rgba(17, 24, 39, 0.1) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:hover,
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:focus-visible,
.la-new-board-modal-wrap .la-new-board-modal-actions .nb-generate-ai-btn.la-btn:hover,
.la-new-board-modal-wrap .la-new-board-modal-actions .nb-generate-ai-btn.la-btn:focus-visible {
  /* Brighten the three ambient layers via `background-image` longhand
     so `background-size` + `background-position` from the resting
     state stay intact — without that, hovering would reset the
     bg-size to 100% and freeze the drift animation in place. The
     three layers (periwinkle radial, verdigris radial, linear base)
     all step up ~50% in alpha for the hover state. Lift 1px and
     intensify the dual periwinkle/verdigris glow. */
  background-image: radial-gradient(ellipse 60% 100% at 22% 50%, rgba(133, 133, 230, 0.15) 0%, rgba(133, 133, 230, 0) 70%), radial-gradient(ellipse 55% 100% at 86% 50%, rgba(42, 157, 143, 0.13) 0%, rgba(42, 157, 143, 0) 65%), linear-gradient(180deg, rgba(42, 157, 143, 0.16) 0%, rgba(42, 157, 143, 0.1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translate(-50%, calc(-50% - 1px)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 4px rgba(17, 24, 39, 0.05), 0 12px 32px rgba(133, 133, 230, 0.18), 0 12px 32px rgba(42, 157, 143, 0.1) !important;
  outline: none;
}

/* create-board-new PAGE: render the "Generate with AI" CTA 25% larger (per
   request). A uniform scale enlarges the WHOLE composed chip — sparkle badge,
   icon, label, padding, radius — while preserving the centering translate, so it
   stays centered on the actions row. The shared hover rule above resets transform
   to a 1px lift WITHOUT scale, so the scale must be re-applied for hover/focus.
   Scoped to the PAGE `.btn` variant only; the new-board MODAL (`.la-btn`) keeps
   its original size. */
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn {
  transform: translate(-50%, -50%) scale(1.25) !important;
}

.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:hover,
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:focus-visible {
  transform: translate(-50%, calc(-50% - 1px)) scale(1.25) !important;
}

/* Sparkle rotates ~8° on button hover — gives the chip a subtle
   AI-product micro-interaction without distracting the rest of the
   page. Pairs with the chip's 1px lift above. */
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:hover .nb-ai-sparkle.nb-generate-ai-btn__sparkle,
.new-board--modern .create-board-actions .nb-generate-ai-btn.btn:focus-visible .nb-ai-sparkle.nb-generate-ai-btn__sparkle,
.la-new-board-modal-wrap .la-new-board-modal-actions .nb-generate-ai-btn.la-btn:hover .nb-ai-sparkle.nb-generate-ai-btn__sparkle,
.la-new-board-modal-wrap .la-new-board-modal-actions .nb-generate-ai-btn.la-btn:focus-visible .nb-ai-sparkle.nb-generate-ai-btn__sparkle {
  transform: rotate(8deg);
  filter: drop-shadow(0 0 6px rgba(133, 133, 230, 0.55));
}

/* Sparkle prefix on the Generate with AI button. Reuses the
   `.nb-ai-sparkle` mask (star/sparkle shape) but overrides the base
   solid purple fill with a polished, shiny silver-into-periwinkle
   gradient. Two-class selector (.nb-ai-sparkle.nb-generate-ai-btn__sparkle)
   bumps specificity over the `.nb-ai-sparkle` base rule further down
   in this file (same single-class specificity would lose on source
   order since this rule comes first). Scaled to 16px to balance the
   button label (badge uses 28px instead).

   The gradient alternates bright/shadow bands across the star to
   simulate a chrome/silver reflection, dipping into $brand-right-logo
   (the LingoLinq logo periwinkle) at the midpoint and again at the
   bottom-right to tie the sparkle to the brand identity. The
   drop-shadow filter gives the sparkle a soft periwinkle halo so it
   visually pops off the verdigris glassy button background. */
.nb-ai-sparkle.nb-generate-ai-btn__sparkle {
  /* 16px (15% larger than the prior 14px) — fits inside the 22px
     .nb-generate-ai-btn__sparkle-badge wrapper with ~3px breathing
     room on each side, matching the badge variant's icon-to-disk
     ratio. */
  width: 16px;
  height: 16px;
  /* Softer, less-saturated purple gradient — the prior version used
     -30% / -22% lightness stops which made the chrome banding too
     aggressive for a small inline icon. Pulling the dark stops back
     to -15% / -10% and dialing saturation down ~12% turns the icon
     into a refined gem rather than a busy speck. Still anchored to
     the two brand purples ($brand-right-logo + $fitzgerald-question-purple)
     so the click→badge transition stays in the same color family. */
  background: linear-gradient(140deg, rgb(205.02, 175.1, 249.9) 0%, rgb(80.6852040816, 80.6852040816, 205.8147959184) 30%, rgb(204.68, 173.4, 251.6) 55%, #8585E6 80%, rgb(90.6734693878, 90.6734693878, 221.3265306122) 100%);
  /* Ambient periwinkle glow + subtle drop shadow. filter: drop-shadow
     respects the SVG mask shape (unlike box-shadow which would draw
     a rectangle behind the masked element), so the glow follows the
     star outline. Transition for the hover rotation defined in the
     hover block above. */
  filter: drop-shadow(0 0 4px rgba(133, 133, 230, 0.35)) drop-shadow(0 1px 2px rgba(133, 133, 230, 0.25));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nb-ai-mode-other:hover,
.nb-ai-mode-other:focus-visible {
  color: #1B365D;
  background: rgba(13, 36, 56, 0.09);
  border-color: rgba(13, 36, 56, 0.2);
  outline: none;
}

.md-board-detail--dark .nb-ai-mode-badge {
  background: rgba(42, 157, 143, 0.22);
  color: rgb(98.1577889447, 213.0422110553, 199.056281407);
}

.md-board-detail--dark .nb-ai-mode-badge__caption {
  color: rgb(98.1577889447, 213.0422110553, 199.056281407);
}

/* AI-mode header: keep the badge + "Other methods" button on a single
   left-aligned row, tucked just under the "Create a New Board" title.
   50% larger than the base pill/control sizes. Scoped via :has so the
   regular (non-AI) header layout is unaffected. */
.new-board--modern .create-board-actions:has(.nb-ai-mode-wrap),
.la-new-board-modal-actions:has(.nb-ai-mode-wrap) {
  width: 100% !important;
  justify-content: flex-start !important;
}

/* Generating badge left-aligned at the page edge and the Other Methods
   button pinned to the right edge — both on one row directly beneath the
   "Create a New Board" title. The two 1fr side columns let the badge sit
   flush left while the button stays flush right regardless of widths.
   `!important` is intentional here: an earlier same-selector
   `.nb-ai-mode-wrap` rule at the top of the AI-mode block (~line
   43934) declared `display: inline-flex; flex-direction: column`
   from the older "column stack" layout. Source order says the grid
   rule below should win, but `!important` on the grid declarations
   here guarantees the same-row layout sticks regardless of any
   inherited or specificity-equal override that might creep in. */
.nb-ai-mode-wrap {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  width: 100%;
  margin: 0;
  gap: 12px;
}

.nb-ai-mode-wrap .nb-ai-mode-other {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end;
}

.nb-ai-mode-wrap .nb-ai-mode-badge {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start;
  /* Inset from the (now zero-padding) AI header's left edge so the badge
     doesn't sit flush against it. */
  margin-left: 24px;
}

/* Both the "Other Create Board Methods" button and the
   "Generating with AI" badge sit on the SAME row directly beneath
   the "Create a New Board" title. The grid layout above
   (`.nb-ai-mode-wrap` = `1fr auto 1fr`) places:
     - Generating badge   in column 1, `justify-self: start` (left)
     - Other Methods button in column 3, `justify-self: end` (right)
   Title baseline remains the modal-header `<h3>`. Modal-header still
   needs `position: relative` for the create-board-actions row's own
   centering anchor (see .create-board-actions :not(:has) rule above).
   The earlier desktop-vs-narrow swap that lifted one element onto
   the title row is removed — single layout for all viewports.  */
.new-board--modern .modal-header {
  position: relative !important;
}

.nb-ai-mode-badge {
  /* Asymmetric horizontal padding (22px left, 26px right) balances
     the chip's visual weight — the icon + bold gradient title + the
     left-side ambient hotspot all add weight to the LEFT half, so
     bumping the right padding pulls the optical center back toward
     true center. */
  padding: 6px 26px 7px 22px;
  gap: 3px;
  font-size: 18px;
  /* Negative letter-spacing — tightens the title to a refined modern-
     SaaS feel (Stripe / Linear / shadcn pattern). Pairs with the
     gradient-text title to read as polished display type. */
  letter-spacing: -0.01em;
}

.nb-ai-mode-badge__row {
  /* Tightened from 8px → 6px so the icon sits closer to the title,
     further reducing the chip's visual left-lean. */
  gap: 6px;
}

.nb-ai-mode-badge__row svg {
  /* Smaller chrome — 22px star fits the new 18px title baseline
     visually, replacing the prior 28px which over-dominated the chip
     and read as "pasted-on" rather than integrated with the type. */
  width: 22px;
  height: 22px;
}

/* Circular glassy badge wrapping the sparkle icon. Same modern-glass
   chrome family as the surrounding `.nb-ai-mode-badge` chip — soft
   lavender gradient, translucent white inset highlight, frosted
   backdrop blur, layered drop shadow — so the icon reads as
   integrated into the chip composition (rather than a pasted-on
   speck floating above flat space). Inner sparkle keeps its own
   mask + purple gradient and ambient drop-shadow, so the visible
   composite is: glassy lavender disk → polished purple gem inside.

   Sized to 28px for the badge instance (the inner 23px sparkle gets
   ~2.5px breathing room on each side, plus a soft halo). The button
   variant overrides to 22px wrapper / 16px inner sparkle via the
   `.nb-generate-ai-btn__sparkle-badge` class below. */
.nb-ai-sparkle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Shrunk 28px → 24px so the disk reads as an elegant accent
     rather than dominating the chip as the focal point. Inner
     sparkle stays proportionally fitted (20px / ~83% disk fill). */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Layered background — soft lavender gradient + an inner radial
     "glow hotspot" so the disk reads as a tiny lit chamber rather
     than a flat fill. Two layers stacked via comma-separated
     `background:` shorthand: the radial sits on TOP (rendered first
     in source order), the linear gradient is the base. */
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, rgba(204, 170, 255, 0.32) 0%, rgba(204, 170, 255, 0.2) 55%, rgba(133, 133, 230, 0.18) 100%);
  /* Translucent white outer ring + a faint periwinkle inner ring,
     stacked via box-shadow `inset 0 0 0 Npx` rings to mimic the
     "watch bezel" detail Apple uses on its translucent system
     chips. The outer ring sits on top of the border below for a
     two-tier rim. */
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(133, 133, 230, 0.18), inset 0 -2px 4px rgba(133, 133, 230, 0.1), 0 1px 2px rgba(133, 133, 230, 0.1), 0 4px 12px rgba(133, 133, 230, 0.2);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.2s ease;
}

/* Button variant — tighter wrapper (22px) so the chip-as-a-whole stays
   compact in the inline button context. Inner sparkle scales down via
   the `.nb-generate-ai-btn__sparkle` class to 16px so the icon-to-disk
   ratio matches the badge variant. */
.nb-ai-sparkle-badge.nb-generate-ai-btn__sparkle-badge {
  width: 22px;
  height: 22px;
}

/* AI mode entry animation — fires ONCE when the user clicks the
   Generate with AI button and the badge mounts. 3 seconds total,
   single iteration, then settles into the resting state. Visual
   recipe follows the AI-product convention (Apple Intelligence /
   Notion AI / Copilot): a brief scale bloom with overshoot, gentle
   counter-rotation, and a periwinkle glow flicker — restrained,
   not flashy. Scoped to the wrapper INSIDE `.nb-ai-mode-badge` so
   the standalone Generate-with-AI button's sparkle (pre-click) does
   not animate; only the post-click badge entry does.
   Respects `prefers-reduced-motion`. */
@keyframes nb-ai-mode-icon-entry {
  0% {
    transform: scale(0.7) rotate(-12deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(133, 133, 230, 0.18), inset 0 -2px 4px rgba(133, 133, 230, 0.1), 0 0 0 rgba(133, 133, 230, 0);
  }
  22% {
    transform: scale(1.14) rotate(6deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(133, 133, 230, 0.3), inset 0 -2px 4px rgba(133, 133, 230, 0.18), 0 0 16px rgba(133, 133, 230, 0.55), 0 6px 18px rgba(133, 133, 230, 0.35);
  }
  45% {
    transform: scale(0.96) rotate(-2deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(133, 133, 230, 0.22), inset 0 -2px 4px rgba(133, 133, 230, 0.14), 0 0 10px rgba(133, 133, 230, 0.35), 0 4px 12px rgba(133, 133, 230, 0.24);
  }
  70% {
    transform: scale(1.04) rotate(2deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(133, 133, 230, 0.2), inset 0 -2px 4px rgba(133, 133, 230, 0.12), 0 0 8px rgba(133, 133, 230, 0.28), 0 4px 12px rgba(133, 133, 230, 0.22);
  }
  100% {
    transform: scale(1) rotate(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(133, 133, 230, 0.18), inset 0 -2px 4px rgba(133, 133, 230, 0.1), 0 1px 2px rgba(133, 133, 230, 0.1), 0 4px 12px rgba(133, 133, 230, 0.2);
  }
}
.nb-ai-mode-badge .nb-ai-sparkle-badge {
  animation: nb-ai-mode-icon-entry 3s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
  /* `transform-origin: center` keeps the scale/rotate pivot dead
     center so the disk doesn't drift off the title baseline. */
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .nb-ai-mode-badge .nb-ai-sparkle-badge {
    animation: none;
  }
}
/* Ambient background drift — the two radial hotspots' centers
   slowly pan across the chip over 22 seconds (slow enough to feel
   subliminal — modern AI products like Apple Intelligence use
   similar ambient motion to suggest a "live" / generative surface).
   Position shifts are small (~6-10%) and ease-in-out cycles so the
   motion never reads as deliberate, just present. Looped seamlessly
   by repeating the starting positions at 100%. Respects
   prefers-reduced-motion. */
@keyframes nb-ai-mode-bg-drift {
  0% {
    background-position: 22% 50%, 86% 50%, 0 0;
  }
  35% {
    background-position: 30% 56%, 78% 44%, 0 0;
  }
  65% {
    background-position: 18% 44%, 92% 56%, 0 0;
  }
  100% {
    background-position: 22% 50%, 86% 50%, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-ai-mode-badge {
    animation: none;
  }
}
/* The sparkle is a CSS mask of the icon shape. Resting state is a
   soft two-purple gradient (LingoLinq logo periwinkle + Fitzgerald
   lavender) with a periwinkle ambient halo so it reads as a refined
   gem instead of a generic purple speck. The --active shimmer
   treatment below replaces the entire `background` shorthand, so the
   resting gradient cleanly steps out of the way when the chip is
   generating. */
.nb-ai-sparkle {
  --nb-ai-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203l1.9%204.6L18.5%209.5%2013.9%2011.4%2012%2016l-1.9-4.6L5.5%209.5l4.6-1.9z'/%3E%3Cpath%20d='M19%2014l.8%202%202%20.8-2%20.8-.8%202-.8-2-2-.8%202-.8z'/%3E%3C/svg%3E");
  display: inline-block;
  /* Shrunk 23px → 20px to follow the wrapper down (28→24px).
     Maintains the same icon-to-disk ratio (~83%) so the wrapper
     still reads as a contained badge, not as too-tight crop. */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: linear-gradient(140deg, rgb(205.02, 175.1, 249.9) 0%, rgb(80.6852040816, 80.6852040816, 205.8147959184) 30%, rgb(204.68, 173.4, 251.6) 55%, #8585E6 80%, rgb(90.6734693878, 90.6734693878, 221.3265306122) 100%);
  filter: drop-shadow(0 0 4px rgba(133, 133, 230, 0.35)) drop-shadow(0 1px 2px rgba(133, 133, 230, 0.25));
  transition: transform 0.2s ease, filter 0.2s ease;
  -webkit-mask: var(--nb-ai-mask) center/contain no-repeat;
  mask: var(--nb-ai-mask) center/contain no-repeat;
}

/* Modern AI shimmer (Apple Intelligence / Gemini / shadcn pattern):
   cohesive AI gradient with a soft white band that sweeps DIAGONALLY
   across, then pauses before repeating. Pure CSS (no SVG SMIL) so
   prefers-reduced-motion can fully halt it. Constant geometry — no
   scale/brightness jumps, which read as clunky. Only runs once the
   user kicks off generation. */
.nb-ai-sparkle--active {
  background: linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%), linear-gradient(135deg, #4338ca 0%, #6d28d9 35%, #a21caf 65%, #0e7490 100%);
  background-repeat: no-repeat;
  background-size: 260% 260%, 100% 100%;
  background-position: 130% -30%, 0 0;
  filter: drop-shadow(0 0 2px rgba(124, 92, 246, 0.32));
  animation: nb-ai-sparkle-sheen 3.4s ease-in-out infinite;
}

@keyframes nb-ai-sparkle-sheen {
  0% {
    background-position: 130% -30%, 0 0;
  }
  42% {
    background-position: -30% 130%, 0 0;
  }
  100% {
    background-position: -30% 130%, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-ai-sparkle--active {
    animation: none;
    background-position: 50% 50%, 0 0;
  }
}
.nb-ai-mode-badge__caption {
  font-size: 16px;
}

.nb-ai-mode-other {
  padding: 9px 24px;
  font-size: 16px;
}

/* ── AI "Generate Labels" gate (Size & Labels body, pre-generation) ── */
.nb-ai-generate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 20px;
  text-align: center;
}

.nb-ai-generate__lead {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.7);
}

.nb-ai-generate .nb-alert {
  width: 100%;
  max-width: 480px;
  text-align: left;
}

.nb-ai-generate__btn.btn.btn-primary {
  padding: 12px 28px;
  border-radius: 16px;
  border: 1px solid rgba(44, 183, 176, 0.18);
  font-weight: 850;
  font-size: 15px;
  color: var(--md-ink, #1f2933);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.3), rgba(91, 141, 239, 0.26));
  box-shadow: 0 2px 6px rgba(13, 36, 56, 0.08);
}

.nb-ai-generate__btn.btn.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.4), rgba(91, 141, 239, 0.34));
}

/* Disabled until a description is entered (or while generating). */
.nb-ai-generate__btn.btn.btn-primary:disabled,
.nb-ai-generate__btn.btn.btn-primary[aria-disabled=true] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.new-board--modern .modal-footer .new-board__cancel {
  padding: 12px 24px !important;
  border-radius: 16px !important;
  border: 1px solid var(--md-line) !important;
  font-weight: 750 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--md-ink) !important;
  box-shadow: var(--md-shadow-2) !important;
}

.new-board--modern .modal-footer .new-board__cancel:hover {
  background: rgba(255, 255, 255, 0.88) !important;
}

.new-board--modern a[href="#"] {
  color: var(--md-teal) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.new-board--modern a[href="#"]:hover {
  text-decoration: underline !important;
}

.new-board--modern .nav-pills a {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.65) !important;
  color: var(--md-ink) !important;
  font-weight: 650 !important;
}

.new-board--modern .nav-pills li.active a {
  background: var(--md-teal-soft) !important;
  border-color: rgba(44, 183, 176, 0.3) !important;
  color: var(--md-ink) !important;
}

.new-board--modern .checkbox.big_checkbox label {
  font-weight: 650 !important;
  color: var(--md-ink) !important;
}

.new-board--modern .new-board-checkbox input[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(17, 26, 46, 0.2) !important;
  background: #fff !important;
  box-shadow: none !important;
  top: 2px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.new-board--modern .new-board-checkbox input[type=checkbox]:hover {
  border-color: rgba(17, 26, 46, 0.35) !important;
}

.new-board--modern input#word_suggestions[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.new-board--modern .new-board-checkbox input[type=checkbox]:checked {
  background: #316F70 !important;
  border-color: #316F70 !important;
  box-shadow: none !important;
}

.new-board--modern .new-board-checkbox input[type=checkbox]:checked::after {
  position: absolute !important;
  width: 6px !important;
  height: 11px !important;
  left: 7px !important;
  top: 3px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  content: "" !important;
  box-sizing: border-box !important;
}

.new-board--modern .new-board-checkbox-hint {
  display: block !important;
  margin: 6px 0 0 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-style: italic !important;
  color: var(--md-muted) !important;
  line-height: 1.4 !important;
}

.new-board--modern select.form-control {
  border-radius: 14px !important;
  cursor: pointer !important;
}

.new-board--modern select.new-board-visibility-select,
.new-board--modern .new-board-field--visibility select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 1.46rem !important;
  font-weight: 600 !important;
  color: var(--md-ink) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(17, 26, 46, 0.14) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 48px !important;
}

.new-board--modern select.new-board-visibility-select:hover,
.new-board--modern .new-board-field--visibility select.form-control:hover {
  border-color: rgba(17, 26, 46, 0.22) !important;
}

.new-board--modern select.new-board-visibility-select:focus-visible,
.new-board--modern .new-board-field--visibility select.form-control:focus-visible {
  border-color: var(--md-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15) !important;
}

.new-board--modern .modern-select {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

.new-board--modern .modern-select__trigger {
  display: block !important;
  width: 100% !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--md-ink) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(17, 26, 46, 0.14) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 48px !important;
  text-align: left !important;
  appearance: none !important;
}

.new-board--modern .modern-select.new-board-visibility-select .modern-select__trigger {
  font-size: 1.46rem !important;
}

.new-board--modern .modern-select__trigger:hover {
  border-color: rgba(17, 26, 46, 0.22) !important;
}

.new-board--modern .modern-select__trigger:focus-visible,
.new-board--modern .modern-select--open .modern-select__trigger {
  border-color: var(--md-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15) !important;
}

.new-board--modern .modern-select__list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 100 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  list-style: none !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(17, 26, 46, 0.12) !important;
  box-shadow: 0 8px 24px rgba(17, 26, 46, 0.12), 0 2px 8px rgba(17, 26, 46, 0.06) !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

.new-board--modern .modern-select__option {
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--md-ink) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.new-board--modern .modern-select__option:hover {
  background: rgba(44, 183, 176, 0.08) !important;
  color: #316F70 !important;
}

.new-board--modern .modern-select__option--selected {
  background: var(--md-teal-soft) !important;
  color: #316F70 !important;
  font-weight: 600 !important;
}

.new-board--modern .modern-select__option--selected:hover {
  background: rgba(44, 183, 176, 0.18) !important;
}

.new-board--modern #image_url,
.new-board--modern input#image_url.form-control {
  font-size: 14px !important;
}

.new-board--modern .new-board-field--key #new_board_key,
.new-board--modern .new-board-field--description #new_board_description {
  font-size: 14px !important;
}

.new-board--modern select.new-board-select--modern,
.new-board--modern .new-board-field--license select.form-control,
.new-board--modern .new-board-field--locale select.form-control,
.new-board--modern .new-board-field--labels select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--md-ink) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(17, 26, 46, 0.14) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 48px !important;
}

.new-board--modern select.new-board-select--modern:hover,
.new-board--modern .new-board-field--license select.form-control:hover,
.new-board--modern .new-board-field--locale select.form-control:hover,
.new-board--modern .new-board-field--labels select.form-control:hover {
  border-color: rgba(17, 26, 46, 0.22) !important;
}

.new-board--modern select.new-board-select--modern:focus-visible,
.new-board--modern .new-board-field--license select.form-control:focus-visible,
.new-board--modern .new-board-field--locale select.form-control:focus-visible,
.new-board--modern .new-board-field--labels select.form-control:focus-visible {
  border-color: var(--md-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15) !important;
}

.new-board--modern textarea.form-control {
  border-radius: 14px !important;
  min-height: 80px !important;
}

.new-board--modern .new-board-field--labels #new_board_labels {
  font-size: 14px !important;
  margin-bottom: 0 !important;
}

.new-board--modern .new-board-field--labels .modern-select {
  margin-bottom: 14px !important;
}

/* Label chips input — bulk-paste compatible chip/tag entry for board labels.
   Glassmorphic styling: translucent gradient surface, backdrop blur, layered
   highlight + ambient shadow. Cascades on --md-line / --md-ink / --md-teal. */
.label-chips {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.label-chips__container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 64px;
  border-radius: 25px;
  /* Visible 1.5px navy-tinted outline so the input field reads as
     an obvious target — the previous near-white border made it look
     like a passive container rather than an interactive input. Bumped
     background opacity (0.92 → 0.7) so the field clearly stands out
     from the section's frosted glass. */
  border: 1.5px solid rgba(13, 36, 56, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  color: var(--md-ink, #1f2933);
  cursor: text;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(13, 36, 56, 0.06), 0 4px 12px -4px rgba(13, 36, 56, 0.1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.label-chips__container:hover {
  border-color: rgba(13, 36, 56, 0.28);
}

.label-chips--focused .label-chips__container {
  border-color: rgba(44, 183, 176, 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(216, 246, 244, 0.45) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 0 0 4px rgba(44, 183, 176, 0.14), 0 12px 30px -10px rgba(44, 183, 176, 0.3);
}

/* Drag-and-drop reorder affordances:
   - `cursor: grab` on idle chips signals they're draggable; `:active`
     swaps to `grabbing` once the press begins.
   - `--dragging` fades + shrinks the source chip during the drag so the
     user can track which one they're moving.
   - `--drop-target` adds a verdigris border-glow to the chip currently
     under the cursor — the spot the source will land at on drop.
   The same visual language is mirrored on the preview grid cells below
   so the two reorderable surfaces feel like one mechanism. */
.label-chips__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(13, 36, 56, 0.18);
  border-radius: 999px;
  cursor: grab;
  user-select: none;
  /* Default chip: solid white. Mirrors the preview grid's no-color
     card — a chip without a POS-color match is a "clear" button, so
     its default state should read as white, not as a teal/mint
     gradient. POS-colored chips override `background` + `border-color`
     inline (see chip_items in label-chips.js), and `--colored` strips
     this base shadow so colored chips don't glow. */
  background: #fff;
  color: var(--md-ink, #1f2933);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  max-width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(13, 36, 56, 0.06), 0 6px 16px -6px rgba(13, 36, 56, 0.18);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease;
}

.label-chips__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%);
}

.label-chips__chip:hover {
  transform: translateY(-1px);
  border-color: rgba(44, 183, 176, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(13, 36, 56, 0.08), 0 12px 24px -8px rgba(44, 183, 176, 0.45);
}

/* Soft-orange highlight for duplicate label chips. The base chip's teal
   gradient is replaced with a warm amber gradient and the border tinted
   to match — readable as "needs attention" without shouting. */
/* Chip painted with its label's part-of-speech color. Inline `background`
   and `border-color` from the JS bg_style win on their own; this rule
   strips the mint-tinted halo from the base shadow so the colored fill
   doesn't get a green glow around it. */
.label-chips__chip--colored {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(13, 36, 56, 0.06), 0 6px 16px -6px rgba(13, 36, 56, 0.18);
}

.label-chips__chip--duplicate {
  border-color: rgba(217, 138, 36, 0.55);
  background: linear-gradient(135deg, rgba(255, 245, 224, 0.85) 0%, rgba(252, 209, 138, 0.4) 55%, rgba(252, 209, 138, 0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(13, 36, 56, 0.06), 0 6px 16px -6px rgba(217, 138, 36, 0.4);
}

.label-chips__chip--duplicate:hover {
  border-color: rgba(217, 138, 36, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(13, 36, 56, 0.08), 0 12px 24px -8px rgba(217, 138, 36, 0.55);
}

.label-chips__chip-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18em;
}

.label-chips__chip-label-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: text;
  text-align: left;
}

/* Duplicate-label warning icon on the chip — sits to the left of the
   label text, mirroring the preview-card warning. Sized to the chip
   line-height (11px) with a small cream pill backdrop so the amber
   triangle stays readable on POS-colored chips (yellow pronouns,
   blue adjectives, etc). pointer-events:none so it doesn't intercept
   the chip's edit/drag click targets. */
.label-chips__chip-warning {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #b8761c;
  background: rgba(255, 247, 220, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.45);
  pointer-events: none;
}

.label-chips__chip-warning svg {
  display: block;
}

.label-chips__chip--editing {
  padding: 4px 8px;
}

.label-chips__chip:active {
  cursor: grabbing;
}

.label-chips__chip--dragging {
  opacity: 0.4;
  transform: scale(0.96);
}

.label-chips__chip--drop-target {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.25);
}

/* While any chip is being dragged, soften everything so the source chip
   and the active drop target stand out. */
.label-chips--dragging .label-chips__chip:not(.label-chips__chip--dragging):not(.label-chips__chip--drop-target) {
  opacity: 0.7;
}

.label-chips__chip-edit-input {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink, #1f2933);
  min-width: 4em;
  width: auto;
  field-sizing: content;
}

.label-chips__chip-remove {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0.75px solid rgba(44, 183, 176, 0.65);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--md-ink, #1f2933);
  opacity: 0.85;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(13, 36, 56, 0.08);
  transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.label-chips__chip-remove:hover {
  opacity: 1;
  background: rgba(230, 57, 70, 0.18);
  border-color: rgba(230, 57, 70, 0.5);
  color: #b3303a;
  transform: scale(1.08);
}

.label-chips__chip-remove:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .label-chips__chip-remove:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.label-chips__chip-remove:focus-visible {
  opacity: 1;
}

.label-chips__input {
  flex: 1 1 8em;
  min-width: 8em;
  align-self: center;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--md-ink, #1f2933);
  margin: 0;
  padding: 6px 8px;
  height: auto;
  /* textarea-specific: hide the resize grabber and the scrollbar that
     textareas show by default, and stop text from wrapping on desktop
     so it behaves like a single-line input. The mobile @media block
     below re-enables wrap so the placeholder spans 2 lines on phones. */
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  font-family: inherit;
}

.label-chips__input::placeholder {
  color: rgba(31, 41, 51, 0.45);
}

/* Display-only chips list (rendered inside the Preferences & Labels panel
   when showInput=false). No typing input, so the container has no
   minimum height and a tighter look. */
.label-chips__container--display-only {
  min-height: 0;
  padding: 8px 10px;
  cursor: default;
}

.label-chips__container--display-only:empty {
  display: none;
}

.new-board-prefs-labels {
  margin-bottom: 8px;
}

.new-board-prefs-labels__count {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}

/* Size & Preview block — rows/cols inputs side-by-side at top of a live grid preview. */
.new-board-dimensions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

/* Compact two-column "definition list" for the advanced-options fields (macOS/
   iOS settings style): a FIXED-width label column + a flexible control column,
   so Fill order / Board key / Language all line up on a consistent grid instead
   of stacking label-over-control. */
.new-board--modern .new-board-field--key,
.new-board--modern .new-board-field--locale,
.new-board--modern .new-board-field--fill-order {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
}

.new-board--modern .new-board-field--key > .nb-field__label,
.new-board--modern .new-board-field--locale > .nb-field__label,
.new-board--modern .new-board-field--fill-order > .nb-field__label {
  margin: 0;
}

/* Hint reads inline in the content column (no full-width line / extra margin),
   with a little left padding so it's spaced off the "Language" label. */
.new-board--modern .new-board-field--locale .nb-field__hint {
  margin: 0;
  padding-left: 8px;
}

.new-board-dimensions__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.new-board-dimensions__sublabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink, #1f2933);
  margin: 0;
}

.new-board-dimensions__field .input-group {
  width: 160px;
}

/* Modern stepper — single glass pill with inline +/- icon buttons.
   Replaces the Bootstrap input-group for the rows/cols inputs. */
.nb-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 48px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.4) 100%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(13, 36, 56, 0.05), 0 4px 12px -4px rgba(13, 36, 56, 0.1);
  width: fit-content;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nb-stepper:focus-within {
  border-color: rgba(44, 183, 176, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 0 0 3px rgba(44, 183, 176, 0.15), 0 6px 16px -6px rgba(44, 183, 176, 0.3);
}

.nb-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-ink, #1f2933);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-stepper__btn:hover {
  background: rgba(44, 183, 176, 0.14);
  color: var(--md-teal, #2cb7b0);
}

.nb-stepper__btn:active {
  transform: scale(0.92);
}

.nb-stepper__btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .nb-stepper__btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.nb-stepper__btn svg {
  display: block;
}

.nb-stepper__input {
  width: 56px;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--md-ink, #1f2933);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
  align-self: center;
}

.nb-stepper__input::-webkit-outer-spin-button,
.nb-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Composite stepper pair — Rows + Cols inline in one glass pill,
   separated by a vertical divider. More compact than two stacked steppers. */
.nb-stepper-mini {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 36px;
  padding: 3px 7px 1px 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  /* Match the workspace's Focused-View surface (white sheen over the blue-white
     focus tint on a white base) so the steppers read as part of the surface. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%), #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(27, 54, 93, 0.06), 0 4px 10px -4px rgba(27, 54, 93, 0.12);
  width: fit-content;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nb-stepper-mini:focus-within {
  border-color: rgba(44, 183, 176, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 0 0 3px rgba(44, 183, 176, 0.15), 0 6px 16px -6px rgba(44, 183, 176, 0.3);
}

.nb-stepper-mini__label {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(31, 41, 51, 0.55);
  padding-right: 7px;
  margin-right: 3px;
}

.nb-stepper-mini__label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(31, 41, 51, 0.16);
}

.nb-stepper-mini__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-ink, #1f2933);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-stepper-mini__btn:hover {
  background: rgba(44, 183, 176, 0.14);
  color: var(--md-teal, #2cb7b0);
}

.nb-stepper-mini__btn:active {
  transform: scale(0.92);
}

.nb-stepper-mini__btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .nb-stepper-mini__btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.nb-stepper-mini__btn svg {
  display: block;
}

.nb-stepper-mini__input {
  /* The number sits in a glass circle, matching the beta-welcome step numbers
     (.beta-welcome-steps__num): denim→verdigris glass disc with a specular sheen,
     light rim, and layered inner highlight + colored under-glow. Sized to fit the
     36px stepper. */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: 0 4px 10px rgba(76, 134, 216, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(42, 157, 143, 0.16);
  outline: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
  align-self: center;
}

.nb-stepper-mini__input::-webkit-outer-spin-button,
.nb-stepper-mini__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Create-board-new preview mockup wrapper. Wraps the .md-board-detail-grid
   so the preview gets the same look as the live board-detail page. The
   wrapper toggles between dark and light by adding/removing the
   .md-board-detail--dark class (which the existing board-detail dark-mode
   rules cascade into). */
/* ── Preview stage: board mockup flush against the (empty) edit rail ──
   Mirrors the board-detail edit layout: a fixed-width right panel with
   the grid attached to its left edge (shared seam, no gap). */
.nb-preview-stage {
  display: flex;
  /* Plain flex row: wrap on the left, rail on the right. With
     `align-items: stretch`, both children share the same height —
     whichever child is taller drives the stage height and the
     shorter child stretches to match. */
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.nb-preview-stage .new-board-mockup-wrap {
  flex: 1 1 auto;
  /* Bigger: fill the stage instead of the prior fixed caps. */
  max-width: none;
  max-height: none;
  margin: 0;
  /* Attach to the rail — square the seam-side corners, drop the
     shared border so the two read as one surface. */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.nb-create-rail.md-board-edit-right-panel {
  /* Reuse all the board-detail panel styling, but neutralise the
     page-level sticky/full-viewport rules for in-modal use. The base
     rule pins the edit-page rail to the viewport with
     `height: calc(100dvh - topbar - 16)` + sticky positioning so it
     stays in place while the long board scrolls. In the create-page
     preview stage the rail is a sibling of the board mockup wrap and
     should size to the WRAP's content — clear the height caps and the
     sticky props so `align-items: stretch` on the stage governs
     instead. */
  position: static;
  top: auto;
  height: auto;
  max-height: none;
  overflow-y: visible;
  /* Edit-page rail fills its 15% grid track at EVERY width (no
     max-width cap — the grid owns the fixed 15%/70%/15% ratio).
     `flex: 0 0 250px` is kept ONLY for the in-modal `.nb-create-rail`
     use (flex parent → flex-basis governs there, modal unaffected);
     on the edit PAGE this is a grid item so width:100% follows the
     15% track. Mirrors the left .md-board-edit-panel rule. */
  flex: 0 0 250px;
  width: 100%;
  max-width: none;
  min-height: 0;
  align-self: stretch;
  /* Attach to the grid — square the seam-side corners AND drop the
     shared left border so the rail and grid read as one surface (mirrors
     the mockup-wrap's `border-right: none`). Without this, the panel's
     left border — a near-white hairline in dark mode (rgba(255,255,255,
     0.06)) — shows as a white seam between the grid and the panel. */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

/* Short responsive section labels — hidden by default (full labels show at
   >1024px); the ≤1024px block below swaps them in. */
.nb-create-rail .nb-rail-label__short {
  display: none;
}

/* ≤1024px: narrow the edit-tools rail by 25% (250px → 187.5px) so the board
   mockup keeps more room as the viewport tightens, and fit the section content
   to the tighter rail. Only the rail's flex-basis changes (flex-grow/shrink stay
   0/0). */
@media (max-width: 1024px) {
  .nb-create-rail.md-board-edit-right-panel {
    flex-basis: 187.5px;
  }
  /* Swap the long section labels for their short forms (Board Symbols → Symbols,
     Shape & Border → Border) so they fit the narrower rail. */
  .nb-create-rail .nb-rail-label__full {
    display: none;
  }
  .nb-create-rail .nb-rail-label__short {
    display: inline;
  }
  /* Reclaim a little content width by tightening the section bodies' side
     padding (12px → 8px). */
  .nb-create-rail .md-board-edit-right-panel__section-body {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Cap the open dropdown menus to the rail's inner width so their options
     can't bleed past the rail edge over the board, and lift them above
     adjacent sections so the open list shows in full. */
  .nb-create-rail .md-settings-dropdown-menu {
    max-width: 160px;
    z-index: 1000;
  }
  /* Drill-down navigation on narrow rails: once a section is open, collapse
     the rail to JUST that section (hide the other section toggles and the
     group subheader) and surface a Back button to return to the full list.
     Above 1024px the accordion shows every section at once, so .nb-rail-back
     stays hidden and nothing is suppressed. */
  .nb-create-rail .md-board-edit-right-panel__group--section-open .md-board-edit-right-panel__section:not(.md-board-edit-right-panel__section--open) {
    display: none;
  }
  .nb-rail-back {
    display: inline-flex;
  }
  /* Reorder: move the Symbols section below Speak Bar (and keep Text Settings
     last). The group is a flex column, so giving only these two a positive
     order floats them after the natural-order (order:0) sections, which stay
     in DOM order. Result: …Skin Tones, Speak Bar, Symbols, Text Settings. */
  .nb-create-rail .md-board-edit-right-panel__section[data-section-id=symbols] {
    order: 1;
  }
  .nb-create-rail .md-board-edit-right-panel__section[data-section-id=text] {
    order: 2;
  }
}
/* Modern Back affordance — hidden by default; only the <=1024px rule above
   reveals it when a section is open. Soft pill with a leading chevron. */
.nb-rail-back {
  display: none;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  color: #1B365D;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 14px -8px rgba(27, 54, 93, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.nb-rail-back:hover,
.nb-rail-back:focus-visible {
  transform: translateX(-2px);
  border-color: rgba(27, 54, 93, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #e9eef6 100%);
}

.nb-rail-back:active {
  transform: translateX(0);
}

.nb-rail-back__icon {
  flex: 0 0 auto;
}

/* Grid sizes to its own content. The base grid uses
   `grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr))` +
   an aspect-ratio, which forces every row to an equal slice of a
   width-derived height — slices smaller than the cells' 110px
   min-height, so cells overflowed their tracks and overlapped. In
   the preview stage drop the aspect-ratio and make each row grow
   from a 110px floor, so the grid's real height = rows × ≥110px.
   The stage uses align-items: stretch, so the mockup wrap grows to
   the grid and the rail stretches to match — the two stay
   equal-height and "attached", driven by the taller grid. */
.nb-preview-stage .md-board-detail-grid--preview {
  max-height: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  grid-template-rows: repeat(var(--board-rows, 3), minmax(110px, auto)) !important;
  /* The base .md-board-detail-grid is `flex: 1 1 0; min-height: 0`
     (built to fill a fixed-height board page). Inside the preview
     wrap's flex column that makes it a zero-basis item the wrap
     doesn't reserve height for, so its real content spilled out the
     bottom. Make it a normal content-sized item so the wrap (and
     stage, and stretched rail) grow with it. */
  flex: 0 0 auto !important;
  min-height: auto !important;
}

.nb-preview-stage .new-board-mockup-wrap {
  display: flex;
  flex-direction: column;
}

/* Light/Dark toggle relocated into the rail header, pinned top-right. */
.nb-create-rail .md-board-edit-right-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nb-create-rail__theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
}

/* create-board-new rail: sub-category labels render in proper casing
   rather than the UPPERCASE + tracked treatment used on the
   board-detail edit panel. The base rules at lines ~82322
   (__subheader), ~82663 (__row-pair-label) and ~83074
   (__palette-label) all set `text-transform: uppercase` +
   letter-spacing for the edit-page treatment; this override neutralises
   both for the create-board-new rail only. Same casing/tracking
   neutralisation applied to the section toggles so "Color" / "Shape" /
   etc. read in proper case alongside the surrounding labels. */
.nb-create-rail .md-board-edit-right-panel__subheader,
.nb-create-rail .md-board-edit-right-panel__row-pair-label,
.nb-create-rail .md-board-edit-right-panel__palette-label,
.nb-create-rail .md-board-edit-right-panel__section-label {
  text-transform: none;
  letter-spacing: normal;
}

/* create-board-new rail: color paint-grid pills overflow on the longer
   POS labels ("Preposition", "Determiner"). Grid items default to
   `min-width: auto` which forces grid columns to expand to the natural
   width of their content; without `min-width: 0` on the pill, the
   pill-label's `text-overflow: ellipsis` (set on the label at line
   ~83150) can't kick in. The base edit-page rail is wider so this
   only surfaces in create-board-new's narrower rail. */
.nb-create-rail .md-board-edit-right-panel__paint-pill {
  min-width: 0;
}

/* Paint section header as the ACTIVE paint-mode indicator/toggle. When a color
   is armed (paint_mode set → the --paint-armed modifier from create-board-new.hbs),
   the section reads as "painting is ON" with a verdigris accent on its chip + label
   — distinct from the neutral slate "just open" state. Clicking the header again
   clears paint_mode (create-board-new.js#toggle_create_rail_section), removing this
   class so the icon dims back to neutral. Scoped to the create rail. */
.nb-create-rail .md-board-edit-right-panel__section--paint-armed {
  background: rgba(42, 157, 143, 0.14);
  border-color: rgba(42, 157, 143, 0.45);
}

.nb-create-rail .md-board-edit-right-panel__section--paint-armed .md-board-edit-right-panel__section-toggle,
.nb-create-rail .md-board-edit-right-panel__section--paint-armed .md-board-edit-right-panel__section-label {
  color: #2A9D8F;
  font-weight: 700;
}

.nb-create-rail .md-board-edit-right-panel__section--paint-armed .md-board-edit-right-panel__section-icon {
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.3), 0 1px 2px rgba(27, 54, 93, 0.08);
}

/* Clear Grid footer on the create-board-new live edit rail — sits below the
   divider under Text Settings (see create-board-new.hbs). Centers the reused
   `.nb-link--danger` "clear grid" button with breathing room below the sections. */
.nb-create-rail__clear-grid {
  display: flex;
  justify-content: center;
  padding: 12px 8px 4px;
}

/* Primary actions docked at the bottom of the Edit Tools rail:
   Create Board (compact) stacked above a plain-link Cancel. */
.nb-create-rail__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding: 14px 4px 2px;
  border-top: 1px solid rgba(13, 36, 56, 0.1);
}

.nb-create-rail__submit {
  /* Same teal→blue dimensional face as the old footer CTA, but tighter
     padding so it reads as a compact rail button. */
  width: 100%;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(44, 183, 176, 0.18) !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2)) !important;
  color: var(--md-ink) !important;
  box-shadow: var(--md-shadow-2) !important;
}

.nb-create-rail__submit:hover:not(.new-board__submit--invalid) {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.32), rgba(91, 141, 239, 0.28)) !important;
}

/* Dark mode: the teal/blue face goes muddy and the dark ink text is
   unreadable on the dark panel. Lift to a brighter glassy gradient with
   light (near-white) text. */
.md-board-detail--dark.nb-create-rail .nb-create-rail__submit {
  background: linear-gradient(135deg, rgba(76, 215, 200, 0.42), rgba(123, 165, 247, 0.38)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f4f8ff !important;
}

.md-board-detail--dark.nb-create-rail .nb-create-rail__submit:hover:not(.new-board__submit--invalid) {
  background: linear-gradient(135deg, rgba(76, 215, 200, 0.54), rgba(123, 165, 247, 0.5)) !important;
}

/* Context-scoped (0,3,0) + !important so it beats the base
   `.new-board--modern .create-board-actions button` rule (line ~48687),
   which forces a flat white background, neutral border and shadow with
   !important — that's what was flattening this button. Same winning
   pattern used by `.new-board__submit--top` just above. */
.new-board--modern .create-board-actions .nb-other-methods-btn {
  margin: 0;
  /* Raised, dimensional pill (not the flat .nb-ai-mode-other chip): a
     diagonal top-left → bottom-right gradient (light-lit upper-left corner
     falling to a deeper shade at the lower-right) for a sense of 3D depth,
     plus inset highlight/lower-edge + layered ambient shadow. */
  padding: 9px 18px !important;
  color: #1B365D !important;
  background: linear-gradient(135deg, #ffffff 0%, #eef2f8 55%, #dde4f0 100%) !important;
  border: 1px solid rgba(90, 106, 133, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(27, 54, 93, 0.06), 0 2px 4px rgba(27, 54, 93, 0.08), 0 8px 18px -6px rgba(27, 54, 93, 0.16) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.new-board--modern .create-board-actions .nb-other-methods-btn:hover,
.new-board--modern .create-board-actions .nb-other-methods-btn:focus-visible {
  transform: translateY(-2px);
  color: #1B365D !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9eef6 55%, #d4dcec 100%) !important;
  border-color: rgba(90, 106, 133, 0.42) !important;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -2px 0 rgba(27, 54, 93, 0.07), 0 4px 8px rgba(27, 54, 93, 0.12), 0 14px 26px -8px rgba(27, 54, 93, 0.2) !important;
  outline: none;
}

.new-board--modern .create-board-actions .nb-other-methods-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.14), 0 2px 6px rgba(27, 54, 93, 0.1) !important;
}

/* 2-column intro header: title + subtitle on the left, the actions (Other Create
   Board Methods + the conditional Create Board) aligned to the right. */
.nb-create-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.nb-create-header__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-align the title + subtitle */
  text-align: left;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto; /* fill the available width (the actions stay right) */
}

.nb-create-header__intro > h3,
.nb-create-header__subtitle {
  text-align: left !important;
  align-self: stretch;
}

.nb-create-header__subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.62);
}

.nb-create-header .create-board-actions {
  flex: 0 0 auto;
  margin-top: 0 !important;
  /* Nudge left so the button clears the top-right close (X) chip. */
  margin-right: 44px;
  justify-content: flex-end;
}

/* ── AI-mode header refinements (standalone create-board) ────────────────────
   Scoped via :has(.nb-ai-mode-wrap) so ONLY the "Generate with AI" header is
   affected — the regular (non-AI) header keeps the base 20px 24px padding. Same
   conditional-override pattern the create-board-actions :has rule already uses.
   The base `.new-board--modern .modal-header` padding can't express an AI-only
   variant, so this scoped rule (not a cascade hack) carries the difference. */
.new-board--modern .modal-header:has(.nb-ai-mode-wrap) {
  /* Title + checklist hug the card's left edge (indentation removed) and the
     bottom padding collapses so the form below tucks tight under the intro. */
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

/* Breathing room below the "Create a New Board with AI" title before the
   checklist (the base h3 rule sets margin: 0). AI header only. */
.new-board--modern .modal-header:has(.nb-ai-mode-wrap) h3 {
  margin-bottom: 12px !important;
}

/* Reused .la-checklist (the project's existing checkmark-list style) at this
   placement: 15px rows with a touch more breathing room between the two items.
   Scoped to the header intro so the shared component's own defaults are
   untouched. */
.nb-create-header__intro .la-checklist {
  gap: 12px;
}

.nb-create-header__intro .la-checklist li {
  font-size: 15px;
}

/* ── Create-method chooser modal (create-board-new) ─────────────────────────
   Full-screen scrim + centered card with three stylized options that rise in
   successively (staggered inline animation-delay + nb-chooser-rise). z-index
   sits above the form but below the ≤768px landscape overlay (100000), so on a
   phone the rotate prompt still gates first. */
.nb-create-chooser {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 38%, rgba(27, 54, 93, 0.5), rgba(27, 54, 93, 0.78));
  backdrop-filter: blur(7px) saturate(0.92);
  -webkit-backdrop-filter: blur(7px) saturate(0.92);
  animation: md-portrait-overlay-fade 0.2s ease-out;
}

.nb-create-chooser__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 25px 38px 36px;
  border-radius: 22px;
  /* Match the Focused View "Boards" card surface: a white top-sheen over the
     blue-white focus-surface tint (#ECF1FA → #D4DCEC). Layered on an opaque white
     base so it reads light over the dark chooser scrim. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%), #ffffff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 24px 60px rgba(27, 54, 93, 0.28), 0 4px 12px rgba(27, 54, 93, 0.14);
  text-align: center;
}

/* Close chip — top-right of the panel; returns to the originating page. */
.nb-create-chooser__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(27, 54, 93, 0.04);
  color: rgba(27, 54, 93, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nb-create-chooser__close:hover,
.nb-create-chooser__close:focus-visible {
  background: rgba(27, 54, 93, 0.09);
  border-color: rgba(27, 54, 93, 0.18);
  color: #1B365D;
  transform: scale(1.05);
  outline: none;
}

.nb-create-chooser__title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: #1B365D;
}

/* Modern separator under the title — brand verdigris→navy gradient hairline that
   fades at both ends (the app's standard modern divider), tidily capped under
   the heading rather than spanning the full panel. */
.nb-create-chooser__separator {
  height: 2px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.45) 18%, rgba(27, 54, 93, 0.32) 50%, rgba(26, 123, 122, 0.35) 82%, rgba(27, 54, 93, 0) 100%);
}

.nb-create-chooser__options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.nb-create-chooser__btn {
  display: flex;
  align-items: center;
  justify-content: center; /* center the icon + label group */
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(90, 106, 133, 0.22);
  /* Dimensional surface: top-lit gradient + inset highlight/lower-edge + layered
     ambient shadow so each option reads as a raised, pressable key. */
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  color: #1B365D;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(27, 54, 93, 0.06), 0 2px 4px rgba(27, 54, 93, 0.08), 0 10px 22px rgba(27, 54, 93, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  /* Successive entrance: hidden (opacity 0, `both` fill) until each element's
     inline animation-delay elapses, then rises into place. */
  animation: nb-chooser-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nb-create-chooser__btn:hover,
.nb-create-chooser__btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(90, 106, 133, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #e9eef6 100%);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -2px 0 rgba(27, 54, 93, 0.07), 0 4px 8px rgba(27, 54, 93, 0.12), 0 18px 34px rgba(27, 54, 93, 0.16);
  outline: none;
}

.nb-create-chooser__btn:active {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.14), 0 2px 6px rgba(27, 54, 93, 0.1);
}

.nb-create-chooser__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Raised glassy chip: gradient fill + top highlight + soft drop so the icon
     sits proud of the button face. */
  background: linear-gradient(180deg, rgba(90, 106, 133, 0.16), rgba(90, 106, 133, 0.07));
  color: #5A6A85;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.12);
}

.nb-create-chooser__btn-label {
  flex: 0 0 auto;
}

.nb-create-chooser__btn--ai {
  border-color: rgba(42, 157, 143, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, rgba(42, 157, 143, 0.13) 100%);
}

.nb-create-chooser__btn--ai:hover,
.nb-create-chooser__btn--ai:focus-visible {
  border-color: rgba(42, 157, 143, 0.6);
  background: linear-gradient(180deg, #ffffff 0%, rgba(42, 157, 143, 0.18) 100%);
}

.nb-create-chooser__sparkle-badge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.nb-create-chooser__or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 4px;
  color: rgba(27, 54, 93, 0.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  animation: nb-chooser-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nb-create-chooser__or::before,
.nb-create-chooser__or::after {
  content: "";
  /* Half the previous full-fill length: cap each line at ~90px (was filling the
     row, ~180px each) and center the group so the extra space goes to the sides. */
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: rgba(27, 54, 93, 0.14);
}

@keyframes nb-chooser-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-create-chooser__btn,
  .nb-create-chooser__or {
    animation: none;
  }
}
/* create-board-new rail: font dropdown extends past the rail's left
   edge. The base rule at ~66191 sets `max-width: 240px` and the
   right-panel override at ~86319 anchors the menu to `right: 0` (the
   menu opens leftward toward the page interior — appropriate for the
   wider board-detail edit rail). In create-board-new the rail is
   narrower so the 240px max-width extends past the rail's left edge.
   Cap the menu width so it fits within the rail's inner space. */
.nb-create-rail .md-settings-dropdown-menu {
  max-width: 220px;
}

/* The grid now sizes to its own content (rows × ≥110px) and the
   stage grows with it, so the old fixed `min-height: 760px` on the
   expanded state is obsolete — it only added dead space at the
   bottom of the rail/grid when a section was open. The stage just
   tracks its content height in both states. */
.nb-preview-stage--expanded .new-board-mockup-wrap,
.nb-preview-stage--expanded .md-board-detail-grid--preview {
  max-height: none !important;
}

/* Sentence-bar + home mockup that sits inside the board preview,
   above the top row. Flex item that doesn't grow (the grid takes the
   remaining height). */
.nb-preview-sentence-row {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Preview speak bar — same fill as the home button beside it
   (rgba(110,122,140,.32)) so the two read as one tier in light mode. */
.nb-preview-sentence-row .md-board-detail-sentence-bar {
  background: rgba(110, 122, 140, 0.32);
}

/* Speak Bar → "Sentence Bar" size: the preview speak bar grows with
   the chosen vocalization_height so the control has a visible effect
   (px values match the dropdown labels). The home button is a flex
   sibling and stretches to match via the row's default align-items. */
.nb-preview-sentence-row.nb-preview-sentence-bar--small .md-board-detail-sentence-bar {
  min-height: 90px;
}

.nb-preview-sentence-row.nb-preview-sentence-bar--medium .md-board-detail-sentence-bar {
  min-height: 100px;
}

.nb-preview-sentence-row.nb-preview-sentence-bar--large .md-board-detail-sentence-bar {
  min-height: 150px;
}

.nb-preview-sentence-row.nb-preview-sentence-bar--huge .md-board-detail-sentence-bar {
  min-height: 200px;
}

.nb-preview-sentence-bar__placeholder {
  opacity: 0.55;
  font-style: italic;
}

/* Clip the create-board-new preview speak bar's content to its own box so a
   just-tapped word/symbol can never visibly bleed into the action buttons (or
   below the bar) for the frame before the overflow check resets it (see
   create-board-new.js#speak_word). Scoped to the preview row so the live
   board-detail sentence bar's own scroll/wrap behavior is untouched. */
.nb-preview-sentence-row .md-board-detail-sentence-bar__text {
  overflow: hidden;
  /* Scale the placeholder / tapped words down on smaller screens (was a fixed
     21px) so the message fits the narrower bar. */
  font-size: clamp(14px, 2.4vw, 21px);
}

/* Tapped words rendered in the preview speak bar (create-board-new). Each word
   is a soft chip, mirroring the sentence box filling up in board-detail speak
   mode. Wraps/scrolls within the bar like the real sentence row. */
.nb-preview-sentence-bar__word {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 8px;
  background: rgba(90, 106, 133, 0.12);
  color: #1B365D;
  font-weight: 600;
  white-space: nowrap;
}

/* Drop the right-side 1px divider on the mockup's speak bar (the
   live board-detail bar keeps it; the preview mockup doesn't need
   it). */
.nb-preview-sentence-row .md-board-detail-sentence-bar::after {
  display: none;
}

/* Edit Tools rail — same surface COLOR as the labels div (.nb-words-grid), but
   NOT its recessed/inset treatment: only the bg gradient is applied (no inset
   shadows), so the panel reads flush rather than dented. */
/* Light mode only: recessed "labels div" surface for the rail. Dark mode
   (`.md-board-detail--dark` on the same aside) is excluded so it keeps its
   own dark panel background instead of this light gradient. */
.nb-create-rail.md-board-edit-right-panel:not(.md-board-detail--dark) {
  background: linear-gradient(180deg, rgba(13, 36, 56, 0.06) 0%, rgba(13, 36, 56, 0.02) 35%, rgba(255, 255, 255, 0.55) 100%) !important;
}

.new-board-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 850px;
  max-height: 700px;
  margin: 0 auto;
  padding: 14px 0;
  border-radius: 18px;
  /* Same recessed surface as the labels div (.nb-words-grid). */
  background: linear-gradient(180deg, rgba(13, 36, 56, 0.06) 0%, rgba(13, 36, 56, 0.02) 35%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(13, 36, 56, 0.06);
  box-shadow: inset 0 3px 8px rgba(13, 36, 56, 0.14), inset 0 1px 2px rgba(13, 36, 56, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.55);
}

.new-board-mockup-wrap--dark {
  /* Mirrors the .md-shell--board-detail dark page treatment so the preview
     reads as the actual board background, not a panel. */
  background: radial-gradient(900px 500px at 10% 5%, rgba(49, 111, 112, 0.18), transparent 50%), radial-gradient(800px 400px at 90% 15%, rgba(70, 80, 95, 0.16), transparent 50%), radial-gradient(700px 400px at 50% 95%, rgba(55, 65, 81, 0.22), transparent 55%), linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* The create-board-new "Show/Hide Preferences" collapsible + the
   ported board-detail prefs inset were removed — every control
   migrated into the Edit Tools rail (create_rail_sections). All
   `.new-board-prefs-collapsible/-toggle/-inset` + the duplicate-label
   warn-glow styles were deleted along with them. */
.new-board-mockup-toolbar {
  position: absolute;
  top: 0;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Compact "exit paint" close button next to the palette trigger in the
   prefs toolbar Paint section. Mirrors the .md-board-detail-edit-toolbar__btn
   footprint so it lines up with the palette pill — small, square, no
   extra chrome. */
.md-board-detail-edit-toolbar__paint-exit {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* Paint-mode cursor + click affordances on the preview grid. While
   `paint_mode` is armed, every populated cell signals "click me to
   paint" via the crosshair cursor and a light highlight on hover. The
   inner label-button keeps the same crosshair so the affordance
   reads consistently whether the user clicks the cell padding or the
   text. Painted cells get a faint inset ring so the user can see
   their manual overrides at a glance. */
.md-board-detail-grid--paint-mode {
  cursor: crosshair;
}

.md-board-detail-grid--paint-mode .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty),
.md-board-detail-grid--paint-mode .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty) .md-board-detail-symbol-card__label-btn {
  cursor: crosshair !important;
}

.md-board-detail-grid--paint-mode .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty):hover .md-board-detail-symbol-card {
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.5);
}

.md-board-detail-grid__cell--painted .md-board-detail-symbol-card {
  box-shadow: inset 0 0 0 1px rgba(13, 36, 56, 0.18);
}

/* "Clear" preview cards: a populated label that resolved to no POS color
   (or to white/conjunction). Without this rule the card still picked up
   the base `.md-board-detail-symbol-card`'s drop shadow + inset white
   highlight, which read as a subtle gradient against the green/yellow/
   pink colored cards beside it. Flat white bg, no outline color, no
   inset highlight — matches what a "clear" button looks like on the
   live page. Painted/duplicate cells override this via the rules below
   (their box-shadows use `!important`). */
.md-board-detail-grid--preview .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty) .md-board-detail-symbol-card--no-color {
  background: #fff;
  box-shadow: none;
}

.md-board-detail--dark .md-board-detail-grid--preview .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty) .md-board-detail-symbol-card--no-color {
  /* Dark preview: keep the no-color card solid white so it doesn't
     wash out against the dark background. The base "until painted"
     state of a button is white in this app, and the preview should
     match that — not fade to a translucent ghost. */
  background: #fff;
  box-shadow: none;
}

/* Duplicate-label warning state. The glow sits *on the card itself*
   (not on a wrapping pseudo-element) so it follows the card's own
   rounded corners and hugs its outline with no gap. Stacked amber
   box-shadows produce the layered halo: a tight 2px ring directly on
   the edge, then two soft outer falloffs at 10px and 22px radii.
   The inset 1.5px ring matches the painted-cell pattern so painted+
   duplicate cells stay readable. */
/* No-Fitzgerald-category highlight. A cool indigo ring — deliberately
   a different hue from the amber duplicate glow so the two states are
   distinguishable at a glance. No !important, so when a cell is BOTH
   duplicate and uncolored the amber duplicate ring (which is
   !important) takes visual precedence. */
.md-board-detail-grid__cell--no-category {
  position: relative;
  z-index: 1;
}

.md-board-detail-symbol-card--no-category {
  /* Amber to match the "no color category" warning banner. Plus a
     second outline OUTSIDE the button (outline-offset gap) so the
     flagged buttons stand out beyond their own border. */
  box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.8), 0 0 10px 0 rgba(232, 163, 23, 0.5), 0 0 22px 4px rgba(232, 163, 23, 0.24), inset 0 0 0 1.5px rgba(232, 163, 23, 0.7);
  outline: 2px solid rgba(232, 163, 23, 0.85);
  outline-offset: 4px;
}

.md-board-detail-grid__cell--duplicate {
  position: relative;
  z-index: 1;
}

.md-board-detail-symbol-card--duplicate {
  box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.7), 0 0 10px 0 rgba(232, 163, 23, 0.55), 0 0 22px 4px rgba(232, 163, 23, 0.28), inset 0 0 0 1.5px rgba(232, 163, 23, 0.7) !important;
}

/* Drop cue while dragging an external image over a labeled tile (set by
   cellDragOver in create-board-new). Brand teal so it reads as "drop here to
   set this symbol", distinct from the amber duplicate/no-category warnings. */
.md-board-detail-grid__cell--image-drop {
  position: relative;
  z-index: 2;
}

.md-board-detail-grid__cell--image-drop .md-board-detail-symbol-card {
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.85), 0 0 12px 0 rgba(42, 157, 143, 0.55), 0 0 24px 4px rgba(42, 157, 143, 0.28), inset 0 0 0 1.5px rgba(42, 157, 143, 0.75) !important;
  outline: 2px dashed rgba(42, 157, 143, 0.9);
  outline-offset: 3px;
  transition: box-shadow 0.12s ease, outline-color 0.12s ease;
}

/* Bottom-left warning triangle. Absolutely positioned inside the card
   so it floats over the symbol image without disrupting the existing
   centered layout. Amber fill + dark outline for contrast on both
   light and dark preview backgrounds; tiny drop shadow keeps it
   readable when the card is itself a warm color (orange/yellow). */
.md-board-detail-symbol-card__warning {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8761c;
  background: rgba(255, 247, 220, 0.95);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(13, 36, 56, 0.18), 0 0 0 1px rgba(232, 163, 23, 0.4);
  z-index: 2;
  pointer-events: none;
}

.md-board-detail-symbol-card__warning svg {
  display: block;
}

/* Top-right remove button on the preview card. Mirrors the
   `.label-chips__chip-remove` chip-list X both visually and
   functionally — clicking either removes the same label from the
   `parsed_labels` array. Sized 18×18 to match the warning icon and
   pinned to the corner with a subtle hover lift so it reads as
   interactive. The card itself is now `position: relative` for any
   non-empty cell (rule below) so this absolute anchor works. */
.md-board-detail-symbol-card__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(13, 36, 56, 0.55);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.md-board-detail-symbol-card__remove:hover {
  color: #c43d3d;
  background: #fff;
  border-color: rgba(196, 61, 61, 0.45);
  transform: scale(1.08);
}

.md-board-detail-symbol-card__remove:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.6);
  outline-offset: 2px;
}

.md-board-detail-symbol-card__remove svg {
  display: block;
}

/* Symbol card needs `position: relative` so the absolutely-positioned
   warning icon (bottom-left) and remove button (top-right) anchor to
   the card, not the grid. Apply to every populated cell, not only
   duplicate ones, so the X works on every card. */
.md-board-detail-grid--preview .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty) .md-board-detail-symbol-card {
  position: relative;
}

/* Compact 2-icon segmented switch — sun on the left (light), moon on the
   right (dark). The thumb slides under the active icon. Matches the
   restrained look of the rest of the form. */
.new-board-mockup-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 56px;
  height: 26px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(13, 36, 56, 0.06);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.new-board-mockup-toggle--dark {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.new-board-mockup-toggle:hover {
  border-color: rgba(13, 36, 56, 0.22);
}

.new-board-mockup-toggle--dark:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.new-board-mockup-toggle__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  transition: color 0.18s ease;
}

.new-board-mockup-toggle__icon--sun {
  color: rgba(13, 36, 56, 0.9);
}

.new-board-mockup-toggle__icon--moon {
  color: rgba(13, 36, 56, 0.45);
}

.new-board-mockup-toggle--dark .new-board-mockup-toggle__icon--sun {
  color: rgba(255, 255, 255, 0.45);
}

.new-board-mockup-toggle--dark .new-board-mockup-toggle__icon--moon {
  color: rgba(255, 255, 255, 0.95);
}

.new-board-mockup-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
  box-shadow: 0 1px 2px rgba(13, 36, 56, 0.18);
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.new-board-mockup-toggle--dark .new-board-mockup-toggle__thumb {
  /* Slide right ~ 28px to sit under the moon icon */
  transform: translate(28px, -50%);
  background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Preview-sized board-detail grid: clamp height + aspect-ratio so it fits
   inside the form section instead of inheriting the live page's
   calc(100dvh - 120px) height. */
.md-board-detail-grid--preview {
  width: 100%;
  /* Stretch to fill the wrap's padded width (the .new-board-mockup-wrap
     applies the breathing room around the grid). aspect-ratio still drives
     the height from the width, but cells become slightly horizontal
     rectangles on wide viewports — matching the live page's "wider than
     square" feel instead of being capped at 1200px. */
  max-width: 100%;
  /* Hard cap matched to the wrap's 480px max-height (minus 28px padding
     and ~40px toolbar). When the aspect-ratio-derived height exceeds this
     cap, the browser scales BOTH dimensions down proportionally so the
     grid fits within the wrap without overflowing. */
  max-height: 400px;
  height: auto !important;
  aspect-ratio: var(--board-columns, 4)/var(--board-rows, 4);
  margin: 0 auto;
  gap: clamp(4px, 1vw, 12px) !important;
  padding-left: 8px;
  padding-right: 8px;
  background: transparent;
}

/* Left ("Fit cell" / square) shape: the cards already fill the cell
   height, so the full inter-row gap reads as too much dead space in
   the preview. Tighten only the vertical gap; column spacing stays. */
.md-board-detail-grid--preview.md-board-detail-grid--shape-square {
  row-gap: clamp(2px, 0.35vw, 5px) !important;
}

/* Preview cells: drop the live-page interactive affordances so the mockup
   reads as a static visual. We deliberately do NOT override --empty or
   --no-color appearance — those classes carry the canonical live styles
   (light gradient bg, soft shadow, 0.55 opacity, outline behavior) and the
   user wants the mockup to match the live page exactly. */
.md-board-detail-grid--preview .md-board-detail-symbol-card {
  cursor: default;
  width: 100%;
  height: 100%;
}

/* Drag-and-drop reorder on the preview grid. Filled cells advertise the
   grab cursor (mirrors the chip list) and lift slightly on dragover so the
   user sees which cell their drop will swap with. Empty cells stay inert —
   `draggable={{unless cell.empty "true"}}` prevents the browser from
   starting a drag from them. The matching .label-chips__chip--dragging /
   --drop-target rules higher up keep both surfaces visually consistent. */
.md-board-detail-grid--preview .md-board-detail-grid__cell {
  cursor: grab;
  min-height: 110px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* On narrow viewports cap each preview cell card at 80px tall so the
   preview grid stays compact alongside the rail. Shrinks the cell's
   min-height (110px → 80px) and the grid row floor (also 110 → 80) in
   tandem so the layout collapses cohesively rather than leaving the
   card clipped inside a taller cell. MUST come after the base
   .md-board-detail-grid--preview .md-board-detail-grid__cell rule above
   (equal specificity, source-order decides). */
@media (max-width: 1024px) {
  .md-board-detail-grid--preview .md-board-detail-symbol-card {
    max-height: 80px;
  }
  .md-board-detail-grid--preview .md-board-detail-grid__cell {
    min-height: 80px;
  }
  .nb-preview-stage .md-board-detail-grid--preview {
    /* Fixed 80px row track (not minmax(80px, auto)) so the row cannot
       grow past the card's 80px cap and leave dead space below. */
    grid-template-rows: repeat(var(--board-rows, 3), 80px) !important;
  }
}
.md-board-detail-grid--preview .md-board-detail-grid__cell:active {
  cursor: grabbing;
}

.md-board-detail-grid--preview .md-board-detail-grid__cell--empty {
  cursor: default;
}

.md-board-detail-grid--preview .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--empty):hover {
  transform: translateY(-1px);
}

.new-board-preview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--preview-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--preview-rows, 4), minmax(0, 1fr));
  width: 100%;
  max-width: min(100%, 520px * var(--preview-cols, 4) / var(--preview-rows, 4));
  aspect-ratio: var(--preview-cols, 4)/var(--preview-rows, 4);
  margin: 0 auto;
  gap: clamp(4px, 1.2vw, 18px);
  padding: clamp(8px, 1.4vw, 18px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: radial-gradient(ellipse 80% 60% at 25% 15%, rgba(255, 255, 255, 0.55) 0%, transparent 70%), linear-gradient(135deg, rgba(216, 232, 245, 0.32) 0%, rgba(216, 246, 244, 0.18) 100%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 8px -2px rgba(13, 36, 56, 0.08), 0 1px 2px rgba(13, 36, 56, 0.04), 0 6px 18px -8px rgba(13, 36, 56, 0.12);
  overflow: hidden;
}

.new-board-preview__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid rgba(44, 183, 176, 0.3);
  border-radius: 14px;
  cursor: grab;
  user-select: none;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(244, 252, 252, 0.95) 50%, rgba(216, 246, 244, 0.55) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--md-ink, #1f2933);
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(44, 183, 176, 0.18), 0 2px 4px rgba(13, 36, 56, 0.18), 0 6px 12px rgba(13, 36, 56, 0.2), 0 14px 28px -2px rgba(13, 36, 56, 0.22), 0 18px 36px -4px rgba(44, 183, 176, 0.28);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, opacity 0.22s ease;
}

.new-board-preview__cell::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0) 100%);
}

.new-board-preview__cell:hover {
  transform: translateY(-2px);
  border-color: rgba(44, 183, 176, 0.55);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(13, 36, 56, 0.08), 0 14px 26px -6px rgba(44, 183, 176, 0.4);
}

.new-board-preview__cell:active {
  cursor: grabbing;
}

.new-board-preview__cell--empty {
  cursor: default;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 252, 252, 0.85) 50%, rgba(216, 246, 244, 0.45) 100%);
  border: 1px solid rgba(44, 183, 176, 0.22);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(44, 183, 176, 0.12), 0 2px 4px rgba(13, 36, 56, 0.1), 0 6px 12px rgba(13, 36, 56, 0.12), 0 14px 28px -2px rgba(13, 36, 56, 0.14);
}

.new-board-preview__cell--empty::after {
  display: block;
}

.new-board-preview__cell--empty:hover {
  transform: none;
  border-color: rgba(44, 183, 176, 0.35);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(44, 183, 176, 0.14), 0 12px 22px -8px rgba(44, 183, 176, 0.28);
}

.new-board-preview__label {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.new-board-preview__label-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: text;
  text-align: center;
}

.new-board-preview__cell--editing {
  cursor: text;
}

/* icon-select preview swatch.
   Default look preserves the original 42x42 gray-bordered square for
   surfaces outside the new-board modal. Inside .nb-form we render it
   to match the .new-board-preview__cell glass treatment. */
.icon-select__preview {
  margin-top: 12px;
  float: left;
  height: 42px;
  width: 42px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.icon-select__preview .icon-select__preview-img {
  width: 40px;
  height: 40px;
}

/* Basics section: two side-by-side card containers at md+, each with
   the same dented well treatment for focused visual weight.
   Left  = Name + Description.
   Right = "Creating for someone else?" toggle + dropdown (when shown).
   align-items: stretch so the two cards match heights — they read as
   "the same row, just different sections." Collapses to single column
   on narrow viewports and when no right column is rendered. */
.nb-basics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 18px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .nb-basics-grid:has(.nb-basics-grid__col--right) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.nb-basics-grid__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 36, 56, 0.06) 0%, rgba(13, 36, 56, 0.02) 35%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(13, 36, 56, 0.06);
  box-shadow: inset 0 3px 8px rgba(13, 36, 56, 0.14), inset 0 1px 2px rgba(13, 36, 56, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nb-basics-grid__col .nb-field__label {
  padding-left: 0;
}

/* Name + Description sit side-by-side: Name (first, left) takes 30% of the
   card, Description (right) the remaining 70%. Below 768px they stack —
   Description wraps to its own row underneath the Name. */
.nb-basics-grid__col--left {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  align-items: start;
  gap: 14px;
}

/* Name + Description must read as one matched pair: equal-height labels (the
   Description label carries an optional/required pill that would otherwise
   make its row taller and push its input out of line) and equal-height
   inputs, so both labels AND both inputs line up across the two columns. */
.nb-basics-grid__col--left .nb-field__label {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  line-height: 1.2;
}

.nb-basics-grid__col--left .nb-field__input {
  min-height: 44px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .nb-basics-grid__col--left {
    grid-template-columns: minmax(0, 1fr);
  }
}
.nb-basics-grid__col--right {
  justify-content: flex-start;
}

/* When the toggle is "No" (the dropdown's collapse wrapper has no
   --open modifier), let the right card shrink to its content height
   instead of stretching to match the left card. Half the bottom
   padding so the empty space below the toggle row doesn't look loose. */
.nb-basics-grid__col--right:has(.new-board-for-collapse:not(.new-board-for-collapse--open)) {
  align-self: start;
  padding-bottom: 9px;
}

/* Compact Description: one line tall by default, auto-grows with
   content via field-sizing where supported (Chrome 123+/Edge 123+);
   the rows="1" attr on the Textarea handles older browsers, and
   users can drag-resize taller via the corner handle.
   Scoped under both containers with !important because
   .new-board--modern textarea.form-control locks min-height:80px
   !important elsewhere. */
.new-board--modern .nb-basics-grid textarea.nb-field__input--fill,
.la-new-board-modal-wrap .la-new-board-form .nb-basics-grid textarea.nb-field__input--fill {
  /* Match the single-line Name <input> height (44px) so the Description
     textarea and the Name input line up; field-sizing lets it grow if the
     description wraps. */
  min-height: 44px !important;
  height: auto !important;
  resize: vertical !important;
  field-sizing: content;
}

/* Match the "For" dropdown placeholder color to the page's helper-text
   gray (.nb-section__hint), without italics — so it reads like a hint,
   not a chosen value. */
.new-board-for-select .modern-select__trigger-text--placeholder {
  color: rgba(31, 41, 51, 0.62);
  font-style: normal;
}

/* Words section: outer dented well groups the Labels block. Matches the
   subsection well treatment (.nb-basics-grid__col). */
.nb-words-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
  align-items: stretch;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 36, 56, 0.06) 0%, rgba(13, 36, 56, 0.02) 35%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(13, 36, 56, 0.06);
  box-shadow: inset 0 3px 8px rgba(13, 36, 56, 0.14), inset 0 1px 2px rgba(13, 36, 56, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nb-words-grid__col--order {
  order: 0;
}

.nb-words-grid__col--labels {
  order: 1;
}

/* Remove the inner well treatment — the outer .nb-words-grid now provides
   the dented background, so the col would otherwise double-up. */
.nb-words-grid > .nb-basics-grid__col {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.nb-words-grid__col--order .nb-field__radio-group {
  margin-top: 0;
}

/* In the labels well, push the count 2rem off the "Labels" label, then let
   the chip input fill the remaining vertical space. The placeholder /
   single-line input stays vertically centered via the container's existing
   align-items: center; chips pack to the top via align-content: flex-start. */
.nb-words-grid__col--labels .nb-field__meta > :first-child {
  margin-left: 4rem;
}

.nb-words-grid__col--labels .nb-field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.nb-words-grid__col--labels .label-chips {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

.nb-words-grid__col--labels .label-chips__container {
  flex: 0 0 auto;
  align-content: flex-start;
  padding: 4px;
  min-height: 0;
}

.nb-words-grid__col--labels .label-chips__input {
  align-self: center;
  margin-top: 0;
}

#within_ember .nb-words-grid__col--labels .label-chips__input:focus-visible {
  border-radius: 18px;
}

/* Match chip height to the input field's visible chrome (input + focus ring)
   so chips and input align on the same baseline without shifting either. */
.nb-words-grid__col--labels .label-chips__chip {
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.nb-form .icon-select {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}

.nb-form .icon-select > .form-control {
  grid-column: 1/-1;
  grid-row: 1;
}

.nb-form .icon-select > .icon-select__preview {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.nb-form .icon-select > .icon_urls {
  grid-column: 2;
  grid-row: 2;
  margin-top: 12px;
  align-self: start;
}

.nb-form .icon-select > div[style*=clear] {
  display: none;
}

.nb-form .icon-select__preview {
  position: relative;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 12px 0 0;
  padding: 6px;
  border: 1px solid rgba(44, 183, 176, 0.3);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgb(255, 255, 255) 0%, rgba(216, 246, 244, 0.45) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(44, 183, 176, 0.18), 0 2px 4px rgba(13, 36, 56, 0.18), 0 6px 12px rgba(13, 36, 56, 0.2), 0 14px 28px -2px rgba(13, 36, 56, 0.22), 0 18px 36px -4px rgba(44, 183, 176, 0.28);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;
}

.nb-form .icon-select__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
}

.nb-form .icon-select__preview--filled:hover {
  transform: translateY(-2px);
  border-color: rgba(44, 183, 176, 0.55);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(13, 36, 56, 0.08), 0 14px 26px -6px rgba(44, 183, 176, 0.4);
}

.nb-form .icon-select__preview--empty {
  background: rgba(255, 255, 255, 0.16);
  border: 1px dashed rgba(44, 183, 176, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 0 18px rgba(31, 41, 51, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(13, 36, 56, 0.08), 0 4px 10px rgba(13, 36, 56, 0.1), 0 8px 18px -4px rgba(13, 36, 56, 0.18);
}

.nb-form .icon-select__preview--empty::after {
  display: none;
}

.nb-form .icon-select__preview .icon-select__preview-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.new-board-preview__edit-input {
  position: relative;
  z-index: 1;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--md-ink, #1f2933);
}

/* ============================================================
   nb-form: section-based, vertical-stacked layout for the new
   create-board modal. Each section is a discernible glass card
   with a title + hint. Fields stack labels above their controls.
   ============================================================ */
.nb-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px 8px;
}

.nb-form .form-group {
  margin-bottom: 0;
}

.nb-form .form-control {
  width: 100%;
  border-radius: 12px;
}

.nb-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  /* Solid translucent gradient that mimics the frosted-glass look the
     `backdrop-filter: blur(16px) saturate(150%)` used to produce — but
     without the per-scroll rasterize/blur cost. High-opacity near-white
     stops (~92-96%) so almost nothing of the page background shows
     through, with a subtle cool-blue tint at the top edge to keep the
     same "cooled-down" feel the saturation pass gave. */
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nb-section:has(.modern-select--open) {
  z-index: 50;
}

/* Advanced-options disclosure: the entire .nb-section--advanced row
   acts as a single clickable button (modern iOS / macOS Settings
   pattern). The surrounding .nb-section keeps its glass-pill chrome
   (rounded card, soft tinted background, blur, inset highlights) —
   the toggle button sits inside it as the full-width hit area. Title
   on top, helper text below, modern outline-chevron right that
   rotates 180° on expand. */
.nb-section--advanced {
  /* Tighten the section padding slightly so the toggle row reads as
     a single bar rather than a tall card with a button inside. The
     glass background + rounded corners from `.nb-section` still
     apply — that's the "pill" the user sees. */
  padding: 6px;
  gap: 0;
}

.nb-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #1B365D;
  font: inherit;
  transition: background 0.15s ease;
  /* Slightly tighter than the parent section's 22px so the hover
     fill nests cleanly inside the pill. */
  border-radius: 16px;
}

.nb-advanced-toggle:hover {
  background: rgba(27, 54, 93, 0.05);
}

.nb-advanced-toggle:focus-visible {
  outline: none;
  background: rgba(27, 54, 93, 0.06);
  box-shadow: inset 0 0 0 2px rgba(42, 157, 143, 0.45);
}

/* Header lockup: verdigris pill (.nb-section__title) on top, inline
   bullet list (.nb-section__hint) below — same chrome as Visibility,
   Basics, Size & Labels, etc. */
.nb-advanced-toggle__lockup {
  /* Title + "optional" pill and the hint list (Fill order · Board key · Language
     · Icon) sit INLINE on one row (wrapping if needed) rather than stacked. */
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}

/* The toggle title reuses .nb-section__title's full pill styling.
   No font/background overrides here — keeps it visually identical
   to every other section header (Visibility, Basics, etc.). */
.nb-advanced-toggle__title {
  /* alignment-only reset — pill chrome is inherited from .nb-section__title */
  margin: 0;
}

.nb-advanced-toggle__hint {
  /* Inline bullet list — each item flows horizontally with a soft
     dot separator between, wrapping naturally on narrower widths.
     Reads as a quick-scan checklist of what's behind the disclosure. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.62);
  line-height: 1.4;
}

.nb-advanced-toggle__hint-item {
  display: inline-flex;
  align-items: center;
}

.nb-advanced-toggle__hint-item:not(:last-child)::after {
  content: "•";
  display: inline-block;
  margin: 0 8px;
  color: rgba(27, 54, 93, 0.3);
  font-size: 10px;
  line-height: 1;
  /* Slight optical alignment so the dot sits centered on the text x-height. */
  transform: translateY(-1px);
}

.nb-advanced-toggle__chevron {
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.22s ease, color 0.15s ease;
}

.nb-advanced-toggle:hover .nb-advanced-toggle__chevron {
  color: #1B365D;
}

.nb-advanced-toggle--open .nb-advanced-toggle__chevron {
  transform: rotate(180deg);
  color: #2A9D8F;
}

/* When expanded, draw a soft hairline divider beneath the toggle
   (pill + helper list) so the header reads as a separate band from
   the form panel below. Inset by 16px on each side so it doesn't
   touch the section's rounded glass edge. */
.nb-advanced-toggle--open {
  position: relative;
}

.nb-advanced-toggle--open::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: rgba(27, 54, 93, 0.12);
  pointer-events: none;
}

/* Expanded panel: pad it inside the pill so the form fields don't
   crash into the card edge. */
.nb-section--advanced:has(.nb-advanced-toggle--open) .nb-section__body {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Icon-picker disclosure: nested collapsible inside the advanced
   panel. Same disclosure pattern as .nb-advanced-toggle but lighter
   chrome (no glass pill — it's already inside one). Default
   collapsed; clicking the row reveals the icon-select grid. */
.nb-icon-disclosure {
  /* Override the default .nb-field column layout so the toggle
     header and panel manage their own spacing. */
  display: block;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  background: rgba(27, 54, 93, 0.02);
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nb-icon-disclosure:hover {
  border-color: rgba(27, 54, 93, 0.18);
}

.nb-icon-disclosure--open {
  background: #fff;
  border-color: rgba(27, 54, 93, 0.14);
}

.nb-icon-disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #1B365D;
  font: inherit;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.nb-icon-disclosure__toggle:hover {
  background: rgba(27, 54, 93, 0.04);
}

.nb-icon-disclosure__toggle:focus-visible {
  outline: none;
  background: rgba(27, 54, 93, 0.06);
  box-shadow: inset 0 0 0 2px rgba(42, 157, 143, 0.45);
}

.nb-icon-disclosure__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Specificity bump: the base `.nb-field__label` rule lives further
   down the file, so a single-class selector loses on source order
   even at equal specificity. Pairing the parent class makes this
   rule (0,2,0) — beats `.nb-field__label` (0,1,0). */
.nb-icon-disclosure .nb-icon-disclosure__label {
  /* Override .nb-field__label's default block layout + 14px left
     padding so it sits in the lockup as inline text, flush-left to
     the toggle's own padding edge — not a full-width form label. */
  display: inline-block;
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1B365D;
}

.nb-icon-disclosure__chevron {
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.5);
  transition: transform 0.22s ease, color 0.15s ease;
}

.nb-icon-disclosure__toggle:hover .nb-icon-disclosure__chevron {
  color: #1B365D;
}

.nb-icon-disclosure--open .nb-icon-disclosure__chevron {
  transform: rotate(180deg);
  color: #2A9D8F;
}

.nb-icon-disclosure__panel {
  padding: 4px 16px 16px;
}

.nb-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Inset checklist living inside the section head, between the eyebrow
   pill and the size steppers. Recessed glass treatment, sized to its
   content, height matched to the 44px nb-stepper-mini so the inset and
   steppers form a visually aligned band. Aligned to flex-start in the
   head so it sits at the top of the row beside the eyebrow pill. */
.nb-section__head-checklist {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 0 4px !important;
  padding: 6px 12px !important;
  align-self: flex-start;
  align-items: center;
  border-radius: 22px;
  background: rgba(13, 36, 56, 0.04);
  box-shadow: inset 0 1px 2px rgba(13, 36, 56, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

.nb-checklist--inset {
  justify-content: flex-start !important;
}

/* On narrow screens (≤ $aac-breakpoint-sm), center the section-head
   checklist + the steppers below it so the column reads as a centered
   stack instead of left-pinned with empty space. */
@media (max-width: 640px) {
  .nb-section__head {
    justify-content: center;
  }
  .nb-section__head-checklist {
    align-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .nb-checklist--inset {
    justify-content: center !important;
  }
  .nb-section__head .new-board-dimensions {
    align-self: center;
    justify-content: center;
  }
}
/* Pull the inset + steppers to the top of the section head, leaving the
   eyebrow pill's intrinsic height to drive the row's overall height. */
.nb-section__head .new-board-dimensions {
  align-self: flex-start;
}

.nb-section__title {
  align-self: flex-start;
  display: inline-block;
  margin: 0;
  padding: 6px 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d5c5f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(20, 127, 130, 0.08) 35%, rgba(20, 127, 130, 0.18) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(20, 127, 130, 0.15);
}

/* Inline sub-heading variant for nested titles (e.g., the Words sub-heading
   that now lives inside the Size & preview section). Drops the eyebrow pill
   chrome since it would compete visually with the parent section's primary
   title. */
.nb-section__title--inline {
  display: block;
  align-self: stretch;
  padding: 0;
  margin: 4px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.nb-section__hint {
  margin: -4px 0 0;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(31, 41, 51, 0.62);
}

/* Section header that lays the title pill and its hint on ONE row
   (e.g. Basics: "Give your board a name and brief description." sits
   inline after the BASICS pill), wrapping on narrow widths. */
.nb-section__header-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.nb-section__header-inline .nb-section__hint {
  margin: 0;
  padding-left: 0;
}

.nb-section__toggle {
  font-size: 14px;
  font-weight: 600;
}

.nb-section__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.nb-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-field--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Yes/No question + iOS-style switch row. Used for "Are you creating this
   board for someone else?" — controls visibility of the For dropdown. */
.nb-toggle-row {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.nb-toggle-row__question {
  flex: 0 1 auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-ink, #1f2933);
}

.nb-toggle-row__control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.nb-toggle-row__state {
  font-size: 14px;
  font-weight: 600;
  color: rgba(13, 36, 56, 0.4);
  transition: color 0.18s ease;
  user-select: none;
}

.nb-toggle-row__state--active {
  color: var(--md-ink, #1f2933);
}

.nb-toggle__switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.18);
  background: rgba(13, 36, 56, 0.1);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex: 0 0 auto;
  vertical-align: middle;
}

.nb-toggle__switch--on {
  background: rgba(44, 183, 176, 0.55);
  border-color: rgba(44, 183, 176, 0.7);
}

.nb-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 36, 56, 0.18), 0 1px 3px rgba(13, 36, 56, 0.22);
  transform: translateY(-50%);
  transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-toggle__switch--on .nb-toggle__thumb {
  left: 24px;
}

.nb-toggle__switch:focus-visible {
  outline: 2px solid rgba(44, 183, 176, 0.6);
  outline-offset: 3px;
}

/* Smoothly collapses the For dropdown when the toggle is set to No.
   Animating max-height is the "modern" cheap way to do open/close
   without measuring scroll height in JS. */
.new-board-for-collapse {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  pointer-events: none;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin-top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-board-for-collapse--open {
  max-height: 220px;
  opacity: 1;
  margin-top: 4px;
  pointer-events: auto;
}

/* Once the user opens the dropdown trigger, allow the list to spill
   outside the collapse wrapper. Without this, the collapse's
   overflow:hidden clips the absolutely-positioned <ul>, making the
   dropdown look like it's not opening. Scoping under --open means we
   don't fight the collapse animation — by the time the trigger can be
   clicked, the wrapper is already fully expanded. */
.new-board-for-collapse--open:has(.modern-select--open) {
  overflow: visible;
}

/* Soft teal attention glow on the supervisee dropdown when the toggle
   is "Yes" but no person has been picked yet. Pulses gently so the
   user's eye is drawn to it without it reading as an error. Falls off
   the moment the user picks someone (or flips back to "No") via the
   `for_user_needs_attention` computed.
   `overflow: visible` is required here so the glow can spill past the
   rounded trigger — the parent collapse wrapper sets overflow:hidden
   during its open/close animation, which would otherwise clip the
   shadow into a rectangle. Safe to relax during needs-attention because
   the wrapper is always fully open when this class is active. */
.new-board-for-collapse--needs-attention {
  overflow: visible;
}

.new-board-for-collapse--needs-attention .new-board-for-select,
.new-board-for-collapse--needs-attention .modern-select__trigger {
  /* Explicit border-radius makes the rounded shape unambiguous in case
     a future override drops it on the trigger; the box-shadow follows
     this radius automatically. */
  border-radius: 10px !important;
  border-color: rgba(42, 157, 143, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.2), 0 0 4px rgba(42, 157, 143, 0.24) !important;
  animation: new-board-for-pulse 2.4s ease-in-out infinite;
}

@keyframes new-board-for-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.2), 0 0 4px rgba(42, 157, 143, 0.24);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.32), 0 0 6px rgba(42, 157, 143, 0.4);
  }
}
/* Respect users who've asked for reduced motion — keep the glow but
   drop the pulse animation. */
@media (prefers-reduced-motion: reduce) {
  .new-board-for-collapse--needs-attention .new-board-for-select,
  .new-board-for-collapse--needs-attention .modern-select__trigger {
    animation: none;
  }
}
.nb-field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.nb-field__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
}

.nb-field__label {
  display: block;
  margin: 0;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--md-ink, #1f2933);
}

.nb-field__sublabel {
  display: inline-block;
  margin: 0 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(31, 41, 51, 0.7);
}

.nb-field__input--narrow {
  max-width: 260px;
}

.nb-field__hint {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(31, 41, 51, 0.6);
}

.nb-field__radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nb-field__sublabel--legend {
  display: block;
  width: auto;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-ink, #1f2933);
}

.nb-field__hint--legend {
  margin: 2px 0 8px;
  padding-left: 14px;
}

/* Inline layout: legend on the left, radio chips immediately to the right
   with comfortable spacing. Replaces the stacked legend + hint + radios.
   Why `flex-direction: row` is explicit: the base `.nb-field__radio-group`
   declares `flex-direction: column`, and the `--inline` modifier needs to
   override that — without this, `align-items: center` centers the radios
   horizontally because the cross-axis is horizontal in a column flex. */
.nb-field__radio-group--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  justify-content: flex-start;
}

.nb-field__radio-group--inline .nb-field__radio-row {
  justify-content: flex-start;
  margin-right: auto;
}

.nb-field__radio-group--inline .nb-field__sublabel--legend {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.nb-field__radio-group--inline .nb-field__radio-row {
  margin: 0;
}

/* Page-center variant for the inline radio group: legend pinned left,
   radios truly centered relative to the row's full width, spacer on the
   right mirrors the legend column for symmetry. Mirrors the
   .nb-field__label-row--page-center pattern used by the Labels row. */
.nb-field__radio-group--page-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.nb-field__radio-group--page-center .nb-field__sublabel--legend {
  justify-self: start;
}

.nb-field__radio-group--page-center .nb-field__radio-row {
  justify-self: center;
}

@media (max-width: 600px) {
  .nb-field__radio-group--page-center {
    grid-template-columns: 1fr;
  }
  .nb-field__radio-group--page-center .nb-field__radio-row {
    justify-self: start;
  }
}
.nb-field__radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.nb-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 100%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink, #1f2933);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(13, 36, 56, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.nb-radio:hover {
  border-color: rgba(44, 183, 176, 0.45);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(216, 246, 244, 0.4) 100%);
}

.nb-radio:has(input:checked) {
  border-color: rgba(44, 183, 176, 0.7);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(216, 246, 244, 0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 16px -8px rgba(44, 183, 176, 0.35);
}

.nb-radio input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2cb7b0;
  cursor: pointer;
  flex-shrink: 0;
}

.nb-radio__label {
  line-height: 1.3;
}

.nb-field__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(31, 41, 51, 0.7);
}

.nb-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.nb-field__label-row .nb-field__label {
  margin: 0;
}

.nb-field__label-row .nb-field__meta {
  margin-top: 0;
}

.nb-field__meta--center {
  justify-content: center;
  margin-top: 10px;
}

/* 3-column grid: label on the far left, meta truly centered relative to
   the row's full width (not just the remaining space), spacer on the right
   to mirror the label column for visual balance. */
.nb-field__label-row--page-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
}

.nb-field__label-row--page-center .nb-field__label {
  justify-self: start;
  margin: 0;
}

.nb-field__label-row--page-center .nb-field__meta {
  justify-self: center;
  margin-top: 0;
  transform: translateX(-18px);
}

/* When the clear-grid button is present in the meta block (only rendered
   once the user has labels), the meta block grows wide enough to compress
   the right-hand column below the import-csv min-width and force "import
   csv" to wrap. In that case only, switch the row to `auto 1fr auto` so
   the meta items sit immediately after the "Labels" label and the rest of
   the row width becomes flex space, leaving the import-csv column free to
   stay on a single line. Without clear-grid, the original 1fr-auto-1fr
   centered layout is preserved. Uses `:has()` (supported in all major
   browsers as of late 2023). */
.nb-field__label-row--page-center:has(.nb-field__meta .nb-link--danger) {
  grid-template-columns: auto 1fr auto;
}

.nb-field__label-row--page-center:has(.nb-field__meta .nb-link--danger) .nb-field__meta {
  justify-self: start;
  transform: none;
}

.nb-field__label-row__spacer {
  display: block;
}

.nb-field__label-row__actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.nb-field__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .nb-field__label-row--page-center {
    grid-template-columns: 1fr;
  }
  /* Center the labels-row meta block and the import-csv action under the
     "Labels" heading so the wrapped pills (label count, pick-from-core,
     speech recognition, clear grid, import csv) read as a centered group
     instead of left-aligned with ragged whitespace on the right. Also
     center-align inside each flex container so wrapped lines stay centered
     too. Centers the "Labels" heading itself for symmetry. */
  .nb-field__label-row--page-center .nb-field__label {
    justify-self: center;
    text-align: center;
  }
  .nb-field__label-row--page-center .nb-field__meta {
    justify-self: stretch;
    justify-content: center;
    text-align: center;
    width: 100%;
    /* The desktop rule above this @media block applies translateX(-18px)
       as a visual nudge — on mobile (full-width meta) that shifts the
       whole row 18px left of center. Reset. */
    transform: none;
  }
  /* The desktop rule .nb-words-grid__col--labels .nb-field__meta > :first-child
     adds margin-left: 4rem to the first meta item ("N labels") to push it
     away from the "Labels" heading. On mobile that creates an off-center
     first row — kill it. */
  .nb-words-grid__col--labels .nb-field__meta > :first-child {
    margin-left: 0;
  }
  .nb-field__label-row__spacer {
    display: none;
  }
  .nb-field__label-row__actions {
    justify-self: center;
    justify-content: center;
  }
  /* Drop "speech recognition" onto its own centered row, separate from the
     dot-separated "label count · pick from core lists [· clear grid]"
     group. Hides the dot that would otherwise trail at the end of the
     first row, and forces the speech link to take a full-width flex slot
     so following items wrap to the next line cleanly. */
  .nb-field__sep--before-speech {
    display: none;
  }
  .nb-field__meta .nb-link--speech {
    flex-basis: 100%;
    justify-content: center;
  }
  /* On phone widths the labels input grows to three lines so the entire
     wrapped placeholder is visible without scrolling. Desktop above
     keeps it single-line via white-space: nowrap; here we re-enable
     wrap, set min-height to fit the longest placeholder text, and use
     overflow: hidden so no scrollbar appears (the placeholder always
     fits, and user-typed content stays bound to the value via Ember
     even if it visually clips). Wider horizontal padding so the wrapped
     text isn't crammed against the rounded edges. */
  .label-chips__input {
    white-space: normal;
    word-wrap: break-word;
    min-height: 5em;
    overflow: hidden;
    padding: 6px 16px;
    text-align: center;
  }
}
/* Modern link-styled button.
   Uses real <button type="button"> for proper keyboard semantics; visually
   reads as a link. The global :focus-visible rule still draws the focus ring
   so keyboard a11y is preserved. */
.nb-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #0d5c5f;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, text-decoration-color 0.18s ease;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.nb-link:hover {
  color: #2cb7b0;
  text-decoration: underline;
  text-decoration-color: rgba(44, 183, 176, 0.6);
}

.nb-link:active {
  color: #094547;
}

.nb-link[disabled],
.nb-link:disabled {
  color: rgba(13, 92, 95, 0.45);
  cursor: not-allowed;
  text-decoration: none;
}

.nb-link__icon {
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
}

/* Destructive variant for clearing/deleting actions. Stays subtle at rest
   (no red wash) but turns to a brand red on hover so the action reads as
   intentional. */
.nb-link--danger {
  color: #b3303a;
}

.nb-link--danger:hover {
  color: #d63b48;
  text-decoration: underline;
  text-decoration-color: rgba(214, 59, 72, 0.55);
  background-color: rgba(214, 59, 72, 0.08);
}

.nb-link--danger:active {
  color: #8c2530;
}

/* Modern inline alert for in-form notices (over-limit, validation, etc.). */
.nb-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(13, 36, 56, 0.04);
}

.nb-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.nb-alert__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nb-alert__title {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.nb-alert__text {
  margin: 0;
  font-weight: 400;
}

.nb-alert--warning {
  color: #7a4a08;
  border-color: rgba(217, 138, 36, 0.35);
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.95) 0%, rgba(255, 235, 199, 0.85) 100%);
}

.nb-alert--warning .nb-alert__icon {
  color: #c97b14;
}

/* Speech-recognition listening UI — clear visual state so the user can
   tell the mic is hot, see audio level, and stop / chunk dictation. */
.nb-speech {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(44, 183, 176, 0.06);
  border: 1px solid rgba(44, 183, 176, 0.18);
}

.nb-speech__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.nb-speech__indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(44, 183, 176, 0.12);
  color: rgba(44, 183, 176, 0.7);
  flex: 0 0 auto;
}

.nb-speech__indicator--active {
  color: #c44;
  background: rgba(220, 60, 60, 0.12);
}

.nb-speech__indicator--active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(220, 60, 60, 0.7);
  animation: nb-speech-pulse 1.4s ease-out infinite;
}

@keyframes nb-speech-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.nb-speech__status {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-ink, #1f2933);
  flex: 0 0 auto;
}

.nb-speech__meter {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.08);
  overflow: hidden;
  min-width: 80px;
}

.nb-speech__meter-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(44, 183, 176, 0.85), rgb(44, 183, 176));
  border-radius: inherit;
  transition: width 0.08s linear;
  width: 0%;
}

.nb-speech__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.nb-speech__btn--stop {
  border-color: rgba(180, 60, 60, 0.4);
  color: #b3303a;
}

.nb-speech__btn--stop:hover {
  background: rgba(220, 60, 60, 0.08);
}

.nb-speech__hint {
  font-size: 14px;
  color: var(--md-muted, #4a6e8e);
  margin: 0 0 8px;
}

.nb-speech__words {
  margin-bottom: 0;
}

.nb-speech__error {
  position: relative;
  padding-right: 36px;
}

.nb-speech__error-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}

.nb-speech__error-dismiss:hover,
.nb-speech__error-dismiss:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

/* Stylish info chip — used for inline recommendations / soft notes that
   shouldn't carry the visual weight of a full alert. Glass pill in brand
   teal with an info icon, label, and emphasized value. */
/* Hint row: section hint paragraph on the left, fill-direction radios on
   the right — both anchored to opposite edges of the section width. The
   hint absorbs leftover horizontal space so the radios always sit flush
   right at any width. */
.nb-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: -8px 0 8px;
}

/* When the hint-row immediately follows the section head (e.g., the Size &
   Labels descriptor pills under the SIZE & LABELS eyebrow), pull it up
   tighter against the section title — the .nb-section gap (12px) + the
   head's intrinsic spacing otherwise pushes the pills too far down. */
.nb-section__head + .nb-hint-row {
  margin-top: -10px;
}

.nb-hint-row__text {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}

.nb-hint-row__controls {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Sleek inline pill checklist — succinct chips with the check tucked inside
   each pill, wrapping on a single row. Used inside .nb-section bodies. */
.nb-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 8px;
}

.nb-checklist__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(31, 41, 51, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 100%);
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  /* Layered shadow for visual lift: inset highlight on the top edge,
     a soft close shadow at 2px for definition, and a wider, softer
     shadow at 8px to seat the pill against the inset checklist
     background — matches the elevation language of the Fitzgerald
     paint swatches and stepper pills. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(13, 36, 56, 0.1), 0 4px 10px -2px rgba(13, 36, 56, 0.12);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}

.nb-checklist__item::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%232cb7b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.2 L5.75 9.8 L11 4.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nb-note {
  display: inline-flex;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  margin: 4px auto 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  border: 1px solid rgba(44, 183, 176, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(216, 246, 244, 0.65) 100%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(13, 36, 56, 0.05), 0 4px 10px -4px rgba(44, 183, 176, 0.25);
  color: #0d5c5f;
  white-space: nowrap;
}

.nb-note__icon {
  flex-shrink: 0;
  color: #2cb7b0;
}

.nb-note__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  opacity: 0.75;
}

.nb-note__value {
  position: relative;
  padding-left: 12px;
  font-weight: 600;
  color: #094547;
}

.nb-note__value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(13, 92, 95, 0) 0%, rgba(13, 92, 95, 0.35) 50%, rgba(13, 92, 95, 0) 100%);
}

/* Compact warning pill — for soft, inline notices (e.g., duplicate labels).
   Smaller than .nb-alert, no body, just an icon + line. */
.nb-pill {
  display: inline-flex;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  margin: 0 0 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.nb-pill__icon {
  flex-shrink: 0;
}

.nb-pill--warn {
  color: #7a4a08;
  border-color: rgba(217, 138, 36, 0.4);
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.85) 0%, rgba(252, 215, 156, 0.6) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(13, 36, 56, 0.04), 0 4px 10px -4px rgba(217, 138, 36, 0.25);
}

.nb-pill--warn .nb-pill__icon {
  color: #c97b14;
}

.nb-field__sep {
  color: rgba(31, 41, 51, 0.3);
}

.nb-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink, #1f2933);
}

.nb-checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  /* Lock the box size: in the inline-flex row a long label would
     otherwise let the checkbox shrink, so the two rows rendered at
     different sizes. flex-shrink + min dimensions keep both 18x18. */
  flex-shrink: 0;
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--md-teal, #2cb7b0);
  cursor: pointer;
}

.new-board--modern #grid_selection .cell {
  border-radius: 6px !important;
}

.new-board--modern #grid_selection .cell.preview {
  background: var(--md-teal-soft) !important;
}

.md-stat__num {
  font-weight: 950;
  font-size: 26px;
  line-height: 1;
}

.md-grid--dashboard .md-card__title {
  font-size: 20px !important;
}

.md-grid--dashboard .md-card--boards .md-card__title {
  color: #1B365D !important;
}

/* Gentle layout: Tier-2 boards title (22px) + (Page-sets) clarifier (22px). */
.md-grid--layout-gentle .md-card--boards .md-card__title {
  font-size: 22px !important;
}

.md-grid--layout-gentle .md-card--boards .md-card__title-accent--verdigris {
  font-size: 22px !important;
}

/* Gentle layout: card sub/status text at 18px — "Games & Resources",
   "Ready to communicate", "Manage your boards". */
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__sub,
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__sub,
.md-grid .md-card.md-card--speak-as-button .md-card__status,
.md-grid--layout-gentle .md-card--boards .md-card__sub {
  font-size: 18px !important;
}

/* "(Page-sets)" parenthetical clarifier rendered inline after the
   "Boards" word inside the boards card's h3 title. Verdigris brand
   color signals a clarifier; weight 900 mirrors the title's weight
   so the two words read at matching boldness, distinguished only by
   color and a 2px size drop (18px vs the dashboard title's 20px set
   at `.md-grid--dashboard .md-card__title` above). Scoped to
   .md-card--boards so the modifier class is reserved for this use;
   if other cards adopt the same pattern, generalize the selector
   at that point. */
.md-card--boards .md-card__title-accent--verdigris {
  /* AA-contrast verdigris (#1A7B7A, 4.73:1 on white). Plain $brand-verdigris
     (#2A9D8F) is only ~2.7:1, which fails AA for this 18px/600 parenthetical.
     Mirrors the Speak card's status-line contrast fix. */
  color: #1A7B7A;
  font-weight: 600;
  font-size: 18px;
}

/* ≤460px: drop the "(Page-sets)" parenthetical onto its own line
   below "Boards" — at this width the inline placement was wrapping
   awkwardly inside the cramped card head. The span is still a
   child of the same h3 so the parenthetical stays semantically
   part of the title; only the display mode changes. */
@media (max-width: 460px) {
  .md-card--boards .md-card__title-accent--verdigris {
    display: block;
  }
}
/* ≤640px: scale the Boards card header + "(Page-sets)" clarifier + subheader down
   so they fit the narrow card instead of staying at the wide-screen 22px/18px.
   Layout-agnostic (.md-grid--dashboard) + later source order beats the gentle
   22px rules above at this width. */
@media (max-width: 640px) {
  .md-grid--dashboard .md-card--boards .md-card__title,
  .md-grid--dashboard .md-card--boards .md-card__title-accent--verdigris {
    font-size: 18px !important;
  }
  .md-grid--dashboard .md-card--boards .md-card__sub {
    font-size: 15px !important;
  }
}
.md-stat__meta {
  font-size: 0.9375rem;
  color: #1B365D;
} /* 15px — secondary metadata (WCAG 3:1 for small text OK with navy) */
.md-stat__meta .md-muted {
  font-size: 0.9375rem;
}

.md-stat__label {
  font-size: 1rem;
  color: #1B365D;
  align-self: center;
} /* 16px — label readability */
.md-strip {
  margin-top: 14px !important;
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  /* The Home Board tile pins a `.md-strip__home-badge` at `top: -10px`
     so the badge visibly crowns the tile poking up above its top edge.
     `overflow-x: auto` here forces `overflow-y` to clip too (CSS spec
     for scroll containers), which was chopping the badge in half.
     Reserve ~14px above the tiles so the badge renders inside the
     scroll container's box. The home tile also carries a 4px
     verdigris halo via `box-shadow: 0 0 0 4px ...` on
     `.md-strip__item--home`; without inset side padding the halo
     gets clipped at the scroll container's left edge when the home
     tile is the first item (and at the right edge when scrolled to
     the last). 8px of horizontal padding on each side gives the
     halo enough room to render without changing the visible tile
     gap or scroll geometry meaningfully. */
  padding-top: 14px !important;
  padding-left: 12px !important;
  padding-right: 8px !important;
  padding-bottom: 8px !important;
  /* Teach the scroll snapper where the visible "start" actually is.
     Without scroll-padding, `scroll-snap-align: start` on each tile
     snaps its leading edge to the scroll container's border edge
     (ignoring the inner padding-left), so on release the first
     tile snapped flush against the container's left rim and the
     padding-left was effectively only visible mid-drag. Matches
     `padding-left` so the snap rests with the tile's halo intact. */
  scroll-padding-left: 12px !important;
  scroll-snap-type: x mandatory !important;
}

.md-strip__item {
  min-width: 150px !important;
  scroll-snap-align: start !important;
  text-align: left !important;
  padding: 14px 12px; /* 12 * 1.2 */
  border-radius: 18px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--md-shadow-2) !important;
  /* Top-align the contents (thumb + label) so they hug the top of
     the tile when the tile is taller than its natural content
     height — which happens on the dashboard Boards card where the
     strip flex-grows to fill the column. Without explicit
     justify-content: flex-start, the <button> default styling can
     end up centering the children vertically when the parent is
     much taller than the content. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.md-strip__item:active {
  transform: scale(var(--md-tap));
}

/* Home Board tile distinction — applied to the previewBoards tile
   that represents the user's preferences.home_board (set via the
   isHome flag in components/dashboard/authenticated-view.js).
   Brand-verdigris outline + soft glow halo so the home tile reads as
   "special" without overpowering the rest of the strip, plus a
   pinned "Home Board" badge crowning the tile. !important on border/
   box-shadow because the base .md-strip__item rule above declares
   both with !important. The Home Board badge uses absolute
   positioning so the thumb/label layout stays identical to the
   non-home tiles (no row reflow). */
.md-strip__item--home {
  position: relative;
  border-color: #2A9D8F !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.12), 0 8px 24px rgba(42, 157, 143, 0.18), var(--md-shadow-2) !important;
}

.md-strip__home-badge {
  /* Small pill centered near the top of the tile (was a larger crowning
     "ribbon"). Reads as a quiet tag, not a banner. */
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2A9D8F, #1A7B7A);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.md-strip__label {
  margin-top: 10px; /* 8 * 1.2 */
  font-weight: 800;
  color: #1B365D;
  text-align: center;
}

/* Clean single-line truncation for the board name — one line with an ellipsis
   rather than the old multi-line break-word wrap, so every tile's title row is
   the same height and reads tidily. The full name is still available via the
   tile's title/aria. */
.md-strip__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-strip__lang {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.65);
}

/* Dashboard home only: increase height of boards and extras cards */
.md-grid--dashboard .md-card--boards {
  padding-bottom: calc(10px + 1rem) !important;
}

.md-grid--dashboard .md-card--boards .md-strip {
  margin-top: calc(4px + 0.6rem) !important;
}

.md-grid--dashboard .md-card--boards .md-btn--wide {
  margin-top: 24px !important;
  /* Shrink to fit its label ("View All Boards →") instead of spanning the
     full card width (the base .md-btn--wide is width:100%, and .md-btn is a
     block-level flex container so plain width:auto would still fill). Auto
     horizontal margins center it regardless of the card's flex direction. */
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.md-grid--dashboard .md-card--extras,
.md-grid--dashboard .md-card--badge-action {
  /* Match the Speak Mode card's padding (20px top/bottom, 32px left/right).
     Flex column + centered so the icon + header sit vertically centered on
     the button (the .md-card__extras-wave is position:absolute, so it's
     unaffected by the flex layout). */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 20px 32px !important;
  min-height: 180px !important;
}

/* Dashboard home only: Boards card – larger previews for visual prominence */
.md-grid--dashboard .md-card--boards .md-strip__item {
  transform: scale(1) !important;
  min-width: 170px !important;
  max-width: 175px !important;
  border: 1.5px solid rgba(27, 54, 93, 0.08) !important;
}

/* Full-width Boards card — Focused (always) and Gentle when Boards spans BOTH
   columns (flagged md-grid--boards-full). The tiles keep a comfortable ~160px width
   and WRAP to new rows on smaller screens rather than shrinking or horizontally
   scrolling: the strip wraps + centers, the tiles are a fixed basis. */
.md-grid.md-grid--layout-focused .md-card--boards .md-strip,
.md-grid--layout-gentle.md-grid--boards-full .md-card--boards .md-strip {
  flex-wrap: wrap !important;
  justify-content: center !important;
  overflow: visible !important;
}

.md-grid.md-grid--layout-focused .md-card--boards .md-strip__item,
.md-grid--layout-gentle.md-grid--boards-full .md-card--boards .md-strip__item {
  flex: 0 0 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

.md-grid--dashboard .md-card--boards .md-strip__item:active {
  transform: scale(var(--md-tap)) !important;
}

.md-grid--dashboard .md-card--boards .md-thumb {
  height: 80px !important;
  border-radius: 12px; /* 14 * 0.9 */
}

/* Admin / supervisor dashboards: bump the boards preview thumbnail
   height by 20% (80 → 96px) so each preview has room to render the
   full board image without vertical clipping. Scoped via the same
   role-driven body classes that the .md-grid template already adds:
     - .md-grid--with-caseload   → supervisor (caseload) view
     - .md-grid--with-org-mgmt   → admin (organization management) view
   Communicators (no extra class) keep the original 80px thumb. */
.md-grid--dashboard.md-grid--with-caseload .md-card--boards .md-thumb,
.md-grid--dashboard.md-grid--with-org-mgmt .md-card--boards .md-thumb {
  height: 96px !important;
}

.md-grid--dashboard .md-card--boards .md-thumb__icon {
  width: 38px; /* 32 * 1.2 */
  height: 38px !important;
}

.md-grid--dashboard .md-card--boards .md-strip__label {
  margin-top: 7px; /* 6 * 1.2 */
}

/* ── Boards card — Gentle View premium pass (all home pages) ─────────────────
   Slightly larger tiles + a stronger, layered card shadow so the board strip
   reads as part of the same premium card family as the rest of the dashboard.
   Scoped to Gentle View; Focused View keeps its own sizing. Source-ordered after
   the .md-grid--dashboard rules above so the equal-specificity sizes win. */
.md-grid--layout-gentle .md-card--boards .md-strip__item {
  min-width: 188px !important;
  max-width: 196px !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 16px rgba(27, 54, 93, 0.1), 0 18px 36px rgba(27, 54, 93, 0.12) !important;
}

/* Boards spanning both columns (boards-full, e.g. supervisor home) — keep the
   larger fixed tile basis (overrides the 160px boards-full rule above). */
.md-grid--layout-gentle.md-grid--boards-full .md-card--boards .md-strip__item {
  flex: 0 0 188px !important;
  min-width: 188px !important;
  max-width: 196px !important;
}

/* Taller thumbnail to match the bigger tile (0,4,0 beats the 80px base + the
   96px supervisor/admin rule). */
.md-grid--layout-gentle.md-grid--dashboard .md-card--boards .md-thumb {
  height: 106px !important;
}

/* ≤1024px: trim the strip to Home Board + the first preferred board + the
   Emergency/Crisis board (3 total). The sibling combinator hides every regular
   tile that FOLLOWS another regular tile, so only the first preferred one (the
   top favourite/other) survives alongside Home and Emergency. */
@media (max-width: 1024px) {
  .md-grid--layout-gentle .md-card--boards .md-strip__item:not(.md-strip__item--home):not(.md-strip__item--emergency) ~ .md-strip__item:not(.md-strip__item--home):not(.md-strip__item--emergency) {
    display: none !important;
  }
}
/* ≤768px: drop the preferred board too — just Home + Emergency (2 total). The
   rest stay reachable via "View All Boards". */
@media (max-width: 768px) {
  .md-grid--layout-gentle .md-card--boards .md-strip__item:not(.md-strip__item--home):not(.md-strip__item--emergency) {
    display: none !important;
  }
}
.md-thumb {
  height: 72px; /* 60 * 1.2 */
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  /* White glassy card chrome — vertical gradient white → barely-off-
     white, with a 1px inset top highlight and a hairline bottom
     darken so the card reads as a layered glass tile under the
     board icon. Replaces the previous flat dark-tint background.
     Transparent areas of the board icon (most PNG icons have an
     alpha channel) now show through this white surface instead of
     a grey haze. */
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(248, 250, 252, 0.94) 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(17, 26, 46, 0.04), 0 1px 2px rgba(17, 26, 46, 0.04) !important;
}

.md-thumb--with-icon {
  display: grid !important;
  place-items: center !important;
}

.md-thumb__board-img {
  width: 100% !important;
  height: 100% !important;
  /* `contain` so the WHOLE icon is visible inside the tile (no
     cropping). Combined with the `padding: 0` further down, the
     icon scales to the largest size that fits the tile while
     preserving its aspect ratio — fills the long axis edge-to-edge
     and centers on the short axis. The white glassy chrome on the
     parent .md-thumb shows around the image where the aspect ratio
     leaves room, AND through transparent regions of the PNG. */
  object-fit: contain !important;
  /* Pin board preview thumbnails to the TOP of their tile so cards
     where the icon naturally sits low (single-character icons like
     "1", or icons with bottom whitespace) don't leave a gap above
     them. Top-aligned previews read as a more uniform grid. */
  object-position: top !important;
  border-radius: inherit !important;
  /* Padding removed — the user explicitly asked the image to fill
     the tile's height (and proportional width). Padding here would
     stop it from reaching the tile edges. */
  padding: 0 !important;
}

.md-grid--dashboard .md-thumb .md-thumb__board-img {
  filter: saturate(0.55) !important;
}

.md-thumb__icon {
  width: 43px; /* 36 * 1.2 */
  height: 43px !important;
  object-fit: contain !important;
}

.md-thumb--a {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(255, 255, 255, 0));
}

.md-thumb--b {
  background: linear-gradient(135deg, rgba(91, 141, 239, 0.18), rgba(255, 255, 255, 0));
}

.md-thumb--c {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.16), rgba(255, 255, 255, 0));
}

.md-thumb--d {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.14), rgba(255, 255, 255, 0));
}

.md-thumb--e {
  background: linear-gradient(135deg, rgba(91, 141, 239, 0.14), rgba(255, 255, 255, 0));
}

.md-thumb--f {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.12), rgba(255, 255, 255, 0));
}

.md-strip__item--new .md-thumb--new {
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: rgba(17, 26, 46, 0.55) !important;
  background: rgba(44, 183, 176, 0.14) !important;
}

/* --- Supervisors Card --- */
.md-card--sup {
  grid-area: sup !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* Top padding halved (2rem) vs bottom (4rem). Horizontal padding is
     intentionally 0 at every viewport so the supervisee grid spans the full
     card width and the caseload tray sits flush with the workspace edges.
     (Previously 4rem 8rem with a ≤1200px override; no longer needed.) */
  padding: 2rem 0 4rem 0 !important;
}

/* On narrow viewports the 8rem horizontal padding squeezes the
   communicator cards so much they wrap or clip. Drop the left/right
   padding entirely at the same breakpoint we collapse the rest of
   the caseload layout. Vertical padding stays so the card still
   reads as a distinct surface. (The background-gradient override
   for this breakpoint lives directly after the gradient-defining
   rule near the end of this file so it wins on source order.) */
@media (max-width: 1200px) {
  .md-card--sup {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Tight title/subtitle stack on the My Caseload card. Visible gap
   between "My Caseload" and "People you support" is eliminated
   structurally:
   1. Wrapper uses CSS Grid with row-gap: 0 so children flow with
      no inter-row spacing.
   2. Both children get line-height matched to font-size (so the
      line box equals the visible glyph height, no leading).
   3. All margin/padding zeroed on the elements.
   No negative margins required. */
.md-card--sup .md-card__head,
.md-card--sup .md-card__head--between {
  /* Clean inline header — no divider, no shadow. The visual
     separation between the header and the supervisee grid below
     comes from the sunken `.md-caseload` container, not a line. */
  padding: 0;
  margin-bottom: 16px;
  border-bottom: none;
  box-shadow: none;
}

/* Inline header — title and subtitle on the same row, separated by
   a small dot bullet with comfortable padding around it. */
.md-card--sup .md-card__head > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.md-card--sup .md-card__title {
  /* Global h1 rule (line ~1292) gives every <h1> a fixed
     `height: 60px; margin: 5px 0 0 5px`. Reset for inline layout. */
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-block;
}

.md-card--sup .md-card__sub {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

/* Dot separator between title and subtitle. Uses ::before so no
   markup change is required. */
.md-card--sup .md-card__sub::before {
  content: "•";
  margin-right: 12px;
  color: rgba(27, 54, 93, 0.35);
  font-size: 14px;
  font-weight: 700;
}

/* Supervisors page: same card and div style as home page (.md-grid .md-card) */
.md-supervisors-page .md-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
  border-radius: var(--md-r-lg) !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  padding: 18px !important;
}

.md-supervisors-page .md-card--sup {
  padding: 4rem 8rem 8rem 8rem !important;
}

.md-supervisors-page .md-card--manage {
  padding-bottom: 4rem !important;
}

.md-people {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.md-person {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: var(--md-r-lg) !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.65) !important;
}

/* Supervisors page: person tiles match home page card style */
.md-supervisors-page .md-person {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--md-r-lg) !important;
  padding: 18px !important;
}

.md-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(17, 26, 46, 0.08) !important;
  background: rgba(17, 26, 46, 0.06) !important;
}

.md-avatar--p1 {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(255, 255, 255, 0));
}

.md-avatar--p2 {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.14), rgba(255, 255, 255, 0));
}

.md-avatar--p3 {
  background: linear-gradient(135deg, rgba(91, 141, 239, 0.18), rgba(255, 255, 255, 0));
}

.md-avatar--p4 {
  background: linear-gradient(135deg, rgba(120, 80, 160, 0.18), rgba(255, 255, 255, 0));
}

.md-avatar--p5 {
  background: linear-gradient(135deg, rgba(230, 180, 70, 0.22), rgba(255, 255, 255, 0));
}

.md-avatar--p6 {
  background: linear-gradient(135deg, rgba(60, 160, 120, 0.18), rgba(255, 255, 255, 0));
}

.md-avatar--p7 {
  background: linear-gradient(135deg, rgba(200, 90, 140, 0.16), rgba(255, 255, 255, 0));
}

.md-avatar--p8 {
  background: linear-gradient(135deg, rgba(70, 130, 200, 0.16), rgba(255, 255, 255, 0));
}

.md-person__name {
  font-weight: 900;
}

.md-person__role {
  color: var(--md-muted);
  font-size: 1rem;
} /* 16px */
/* Supervisors page: supervisee cards with links (authenticated-view content) */
.md-person--linked {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.md-person__main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 12px !important;
  padding: 4px 0 !important;
}

.md-person__main:hover {
  color: var(--md-accent, #2A9D8F);
}

.md-avatar--img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  border: 1px solid rgba(17, 26, 46, 0.08) !important;
}

.md-person__meta {
  position: relative;
  flex: 1;
  min-width: 0;
}

.md-person__badge {
  position: absolute !important;
  top: -4px !important;
  right: 0 !important;
  min-width: 18px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: var(--md-danger, #e74c3c) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.md-person__links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  font-size: 14px !important;
}

.md-person__links a,
.md-person__links .ember-view {
  color: var(--md-muted) !important;
  text-decoration: none !important;
}

.md-person__links a:hover,
.md-person__links .ember-view:hover {
  color: var(--md-accent, #2A9D8F);
}

.md-card__head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.md-info-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: rgba(17, 26, 46, 0.65) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(17, 26, 46, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.04) !important;
}

.md-info-badge__dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(17, 26, 46, 0.35) !important;
  flex-shrink: 0 !important;
}

.md-info-badge--below-sub {
  display: inline-flex !important;
  margin-top: 10px !important;
}

.md-card__sup-inline {
  margin-top: 14px !important;
}

.md-card__sup-inline .ll-bento-supervision-inline {
  padding: 0 !important;
}

.md-supervisors-page .ll-bento-supervision-inline {
  margin-top: 4rem !important;
}

.md-supervisors-page .ll-bento-supervision-inline .md-btn + .md-btn {
  margin-left: 1.5rem !important;
}

.md-supervisors-page .ll-bento-supervision-inline .text-info {
  padding-top: 2rem !important;
}

.md-card__sup-inline h3 {
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.md-card--rooms .md-rooms-list {
  margin-top: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
}

.md-rooms-list__item .ember-view {
  color: var(--md-accent, #2A9D8F) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.md-rooms-list__item .ember-view:hover {
  text-decoration: underline;
}

/* Add Supervisor modal – modern dashboard (supervisors page): outer container wraps inner content, same corner rounding */
.modal .modal-dialog:has(.md-add-supervisor) {
  width: fit-content;
  max-width: calc(100vw - 2rem);
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal-content:has(.md-add-supervisor) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-width: 560px;
  width: fit-content;
  max-height: none !important;
}

.md-add-supervisor {
  min-width: 0;
}

.md-add-supervisor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.md-add-supervisor__title {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

.md-add-supervisor__close {
  padding: 4px 10px;
  margin: -4px -10px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--md-muted);
  cursor: pointer;
  border-radius: 12px;
}

.md-add-supervisor__close:hover {
  color: var(--md-ink);
  background: rgba(17, 26, 46, 0.06);
}

.md-add-supervisor__close:active {
  transform: scale(var(--md-tap));
}

.md-add-supervisor__body {
  padding: 24px;
}

.md-add-supervisor__intro {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}

.md-add-supervisor__link {
  color: var(--md-teal);
  font-weight: 700;
  text-decoration: none;
}

.md-add-supervisor__link:hover {
  text-decoration: underline;
}

.md-add-supervisor__form {
  margin-top: 0;
}

.md-add-supervisor__field {
  margin-bottom: 18px;
}

.md-add-supervisor__field--checkbox {
  margin-top: 4px;
  margin-bottom: 20px;
}

.md-add-supervisor__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--md-ink);
}

.md-add-supervisor__input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  color: var(--md-ink);
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.04);
}

.md-add-supervisor__input::placeholder {
  color: var(--md-muted);
}

.md-add-supervisor__input:focus-visible {
  outline: none;
  border-color: rgba(44, 183, 176, 0.4);
  background: rgba(255, 255, 255, 0.9);
}

/* Access dropdown: modern native select with custom chevron */
.md-add-supervisor__select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
  min-height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.md-add-supervisor__select:hover {
  background-color: rgba(255, 255, 255, 0.95);
}

.md-add-supervisor__select:focus-visible,
.md-add-supervisor__select:active {
  border-color: rgba(44, 183, 176, 0.5);
  box-shadow: 0 0 0 3px rgba(44, 183, 176, 0.15);
  /* Keep chevron when focused/active; .md-add-supervisor__input:focus-visible sets background shorthand and wipes background-image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  background-color: rgba(255, 255, 255, 0.9);
}

.md-add-supervisor__select option {
  padding: 12px 14px;
  font-size: 15px;
}

.md-add-supervisor__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.md-add-supervisor__options .md-btn {
  flex: 0 0 calc(50% - 4px);
  white-space: nowrap;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  text-align: center;
  justify-content: center;
}

.md-add-supervisor__hint {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  font-style: italic;
}

.md-add-supervisor__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--md-ink);
  cursor: pointer;
}

.md-add-supervisor__checkbox-label input {
  margin-top: 3px;
  flex-shrink: 0;
}

.md-add-supervisor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 4px;
}

.md-add-supervisor__error {
  color: var(--md-coral);
  font-size: 14px;
  margin: 8px 0 0;
}

/* Getting Started modal – modern dashboard / landing style (same tokens as md-shell, md-card) */
.modal .modal-dialog:has(.md-getting-started-modal) {
  width: 100%;
  max-width: 520px;
  border-radius: var(--md-r-lg);
  overflow: hidden;
}

.modal-content:has(.md-getting-started-modal) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-radius: var(--md-r-lg);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  padding: 0;
  overflow: hidden;
  max-height: none !important;
}

.md-getting-started-modal {
  color: var(--md-ink);
  min-width: 0;
}

.md-getting-started-modal__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.md-getting-started-modal__title {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  flex: 1 1 auto;
  min-width: 0;
}

.md-getting-started-modal__header-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.md-getting-started-modal__progress {
  flex: 1 1 auto;
  min-width: 64px;
  max-width: 120px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.08);
  overflow: hidden;
}

.md-getting-started-modal__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(44, 183, 176, 0.5);
  transition: width 0.25s ease;
}

.md-getting-started-modal__stage {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-right: 12px;
}

/* Specificity over Bootstrap .close and other modal close rules */
.md-getting-started-modal .md-getting-started-modal__header .md-getting-started-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background-color: #E8ECF1 !important;
  background: #E8ECF1 !important;
  color: var(--md-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}

.md-getting-started-modal .md-getting-started-modal__header .md-getting-started-modal__close:hover {
  color: var(--md-ink);
  background-color: #D4DAE2 !important;
  background: #D4DAE2 !important;
  border-color: rgba(17, 26, 46, 0.2);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14), 0 2px 4px rgba(17, 26, 46, 0.08);
}

.md-getting-started-modal .md-getting-started-modal__header .md-getting-started-modal__close:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.08);
}

.md-getting-started-modal__close-icon {
  display: block;
}

.md-getting-started-modal__body {
  padding: 24px;
}

.md-getting-started-modal__intro {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--md-ink);
}

.md-getting-started-modal__checklist {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.md-getting-started-modal__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.md-getting-started-modal__item:last-child {
  margin-bottom: 0;
}

.md-getting-started-modal__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  color: var(--md-teal);
}

.md-getting-started-modal__icon-svg {
  display: block;
  width: 28px;
  height: 28px;
}

.md-getting-started-modal__item--done .md-getting-started-modal__icon {
  color: var(--md-muted);
}

.md-getting-started-modal__item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.md-getting-started-modal__item-link {
  font-weight: 750;
  font-size: 16px;
  color: var(--md-ink);
  text-decoration: none;
}

.md-getting-started-modal__item-link:hover {
  color: var(--md-teal);
  text-decoration: underline;
}

.md-getting-started-modal__item-hint {
  font-size: 14px;
  line-height: 1.4;
  color: var(--md-muted);
}

.md-getting-started-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.md-getting-started-modal__btn {
  flex: 0 0 auto;
}

.md-getting-started-modal__actions .md-btn--primary.md-btn--pill {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.24), rgba(91, 141, 239, 0.2));
  border-color: rgba(44, 183, 176, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover effect for the text "Close" button (not the X) */
.md-getting-started-modal__actions .md-btn--ghost.md-getting-started-modal__btn {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}

.md-getting-started-modal__actions .md-btn--ghost.md-getting-started-modal__btn:hover {
  background: rgba(17, 26, 46, 0.1);
  border-color: rgba(17, 26, 46, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.1);
}

.md-getting-started-modal__actions .md-btn--ghost.md-getting-started-modal__btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.08);
}

/* Hover effect for "I'm Done with this Checklist" button */
.md-getting-started-modal__actions .md-btn--primary.md-getting-started-modal__btn {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease-out, box-shadow 0.2s ease;
}

.md-getting-started-modal__actions .md-btn--primary.md-getting-started-modal__btn:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.28), rgba(91, 141, 239, 0.24));
  border-color: rgba(44, 183, 176, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(44, 183, 176, 0.25), 0 2px 6px rgba(17, 26, 46, 0.08);
}

.md-getting-started-modal__actions .md-btn--primary.md-getting-started-modal__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(44, 183, 176, 0.15);
}

.md-morepill {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 850;
  color: #1B365D;
}

.md-morepill:active {
  transform: scale(var(--md-tap));
}

/* --- Reports, Extras & Org --- */
.md-card--reports {
  grid-area: reports;
}

.md-card--extras {
  grid-area: extras;
  align-self: stretch;
}

.md-card--extras .md-card__extras-wave {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url(/images/extras-wave.png) !important;
  background-size: cover !important;
  /* Move the wave image DOWN ~1rem. The 300×200 source is scaled up by
     `cover` on this much wider/shorter button, so there's plenty of vertical
     overflow and the box always stays fully covered (top + right included —
     no gap). A background-position-y BELOW 50% shifts the image downward;
     ~43% ≈ 1rem of downward shift at the dashboard card width. (`center
     bottom` did the opposite — it revealed the lower part of the image,
     pulling content up.) Lower this % to drop the image further. */
  background-position: center 43% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Lift the head above the absolutely-positioned wave bg + the as-button
   gloss `::before`. */
.md-card--extras .md-card__head,
.md-card--badge-action .md-card__head {
  position: relative !important;
  z-index: 1 !important;
  /* No divider line under the head now that the card IS the button
     (matches the speak/caseload as-button heads). */
  border-bottom: none !important;
  /* Drop the base .md-card__head 12px bottom padding — the card IS the
     button, so the head doesn't need the separation gap. */
  padding-bottom: 0 !important;
}

.md-miniStats {
  margin-top: 12px !important;
  display: flex !important;
  gap: 10px !important;
}

.md-miniStat {
  flex: 1 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.65) !important;
}

.md-miniStat__num {
  font-weight: 950;
  font-size: 22px;
}

.md-miniStat__label {
  margin-top: 4px;
  color: var(--md-muted);
  font-weight: 650;
}

.md-spark {
  margin-top: 12px !important;
  height: 62px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17, 26, 46, 0.08) !important;
  background: linear-gradient(180deg, rgba(44, 183, 176, 0.12), transparent), radial-gradient(circle at 20% 70%, rgba(91, 141, 239, 0.18), transparent 60%), rgba(17, 26, 46, 0.04);
}

/* `.md-extrasIcon` was removed when the Extras icon was promoted to
   a direct child of `.md-card__head` (matching every other dashboard
   card) — see `.md-card__icon--extras` (~l. 44323) for the
   replacement modifier. */
/* ---------- Bottom Focus Bar ---------- */
.md-focusbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow);
  backdrop-filter: blur(18px);
}

.md-focusbar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 18px;
  color: rgba(17, 26, 46, 0.72);
  font-weight: 850;
}

.md-focusbar__item.is-active {
  background: rgba(44, 183, 176, 0.14);
  border: 1px solid rgba(44, 183, 176, 0.18);
  color: rgba(17, 26, 46, 0.92);
}

.md-focusbar__item:active {
  transform: scale(var(--md-tap));
}

.md-focusbar__icon {
  opacity: 0.9;
}

.md-focusbar__text {
  font-size: 1rem;
} /* 16px */
/* ---------- Search Overlay ---------- */
.md-searchOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  background: rgba(238, 241, 246, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

.md-searchOverlay__top {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.md-searchOverlay__input {
  flex: 1 !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: var(--md-shadow-2) !important;
  outline: none !important;
}

.md-searchOverlay__input:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-searchOverlay__input:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-searchOverlay__body {
  margin-top: 14px !important;
  overflow: auto !important;
  padding-bottom: 100px !important;
}

.md-row {
  width: 100% !important;
  text-align: left !important;
  padding: 14px 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--md-line) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--md-shadow-2) !important;
  margin-top: 10px !important;
}

.md-row:active {
  transform: scale(var(--md-tap));
}

/* Prevent black flash on modern-dashboard load: paint content area with dashboard bg as soon as route is active */
#within_ember #content.modern-dashboard {
  background: var(--md-bg);
}

#within_ember #content:has(.md-shell) {
  background: var(--md-bg);
}

#within_ember #content.stats-page {
  background: var(--md-bg);
}

/* Dashboard-style pages (extras/home/boards/stats): shared top padding so all four tabs align under the fixed header */
#within_ember #content.modern-dashboard,
#within_ember #content.home-page,
#within_ember #content.boards-page,
#within_ember #content.stats-page {
  padding-top: calc(var(--topbar-height) + 1rem) !important;
}

/* At ≤1024px the four dashboard pages need extra clearance below the fixed
   navbar — placed immediately after the base rule so source-order wins the
   !important tie (same specificity as the rule above). */
@media (max-width: 1024px) {
  #within_ember #content.home-page,
  #within_ember #content.boards-page,
  #within_ember #content.stats-page,
  #within_ember #content.extras-page,
  #within_ember #content.modern-dashboard {
    padding-top: 52px !important;
  }
}
/* Stats page: allow scrolling when in page-footer layout (#content is not .index so it needs explicit scroll) */
#within_ember:has(.page-footer) #content.stats-page.with_user {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#within_ember:has(.page-footer) #content.stats-page.with_user > .ember-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Search page: #content is scroll container when not on index (fixed header + footer layout); bg matches .md-shell / authenticated-view */
#within_ember.bento-page-with-footer #content:has(.search-page),
#within_ember:has(.page-footer) #content:has(.search-page) {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: calc(var(--topbar-height) + 3rem);
  padding-bottom: var(--bottombar-height);
  /* Match authenticated home (#content.index.with_user): blue → gold → green top-down gradient */
  background: linear-gradient(to bottom, rgba(126, 184, 224, 0.25) 0%, rgba(212, 168, 75, 0.12) 50%, rgba(61, 122, 92, 0.14) 100%);
  color: var(--md-ink);
}

#within_ember:has(.page-footer) #content:has(.search-page) > .ember-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Stats page (user.stats): same look as modern-dashboard and reports ---------- */
.md-stats-page {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(44, 183, 176, 0.12), transparent 55%), radial-gradient(1200px 600px at 80% 15%, rgba(240, 106, 91, 0.1), transparent 60%), radial-gradient(1000px 700px at 60% 85%, rgba(91, 141, 239, 0.12), transparent 60%), var(--md-bg);
  color: var(--md-ink);
}

/* Parts of Speech chart: stretch to full workspace width */
.md-stats-page .col-sm-8:has([id^=sankey-parts-of-speech]),
.md-stats-page .col-sm-8:has([id^=sankey-word-pairs]) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.md-stats-main {
  max-width: 1120px;
  margin: 5rem auto 0;
  /* Top padding 18px → 8px and side padding tightened ~22% to compress the
     overall vertical rhythm (the page read too airy between sections). */
  padding: 8px calc((16px + 2rem) * 1.55) 24px;
  /* Reserve space above the fixed bottom navbar so content doesn't overflow into it */
  padding-bottom: calc((24px + var(--bottombar-height, 59px)) / 2);
}

/* Stats hero: about-page style — transparent container, eyebrow badge, title, separator */
.md-stats-hero-card {
  width: auto;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  /* Top padding cut 2.5rem → 0.25rem: the hero title inside is
     display:none on the reports view (the page title is the md-hero
     above), so this card was an empty 40px spacer. Collapsing it removes
     the biggest dead gap before the report content. */
  padding: 0.25rem 2rem 0;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.md-stats-hero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #316F70;
  background: rgba(20, 127, 130, 0.1);
  border: 1px solid rgba(20, 127, 130, 0.25);
}

.md-stats-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.md-stats-hero__title {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 34.5px);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #1b2a4a;
  line-height: 1.2;
}

.md-stats-page .md-stats-hero__title {
  margin-bottom: 24px;
}

.md-stats-hero__title em {
  color: #3A6BC7;
  font-style: italic;
  font-weight: 800;
}

.md-stats-hero__action {
  flex-shrink: 0;
}

/* Reports page: inherits the project-wide thin-line divider from the base rule;
   only the bottom-margin tweak remains here. */
.md-stats-page .la-about-hero-separator {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .md-stats-hero-card {
    padding: 1.75rem 1.25rem 0 !important;
  }
  .md-stats-hero__title {
    font-size: 19.5px !important;
  }
}
/* Notice states (logging disabled / unauthorized / premium required) carry a
   `.md-stats-text` and no data grid — center the message + action both
   vertically and horizontally in the panel. `:has(.md-stats-text)` targets
   only these states (the data view has no .md-stats-text). */
.md-stats-main:has(.md-stats-text) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48vh;
  /* Even top/bottom padding so justify-content:center is truly centered — the
     base bottom padding reserves ~83px for the bottom navbar (uneven vs the
     8px top), which pushed the content up. The centered notice is short and
     never reaches the bottom, so the reservation isn't needed here. */
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.md-stats-text {
  margin: 0 auto 16px;
  color: var(--md-muted);
  max-width: 56ch;
  text-align: center;
}

.md-stats-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Dashboard section headers — light "stopping points" that split the report
   into Report Summary / Communication Usage / Vocabulary Analysis (single-
   period view). A small uppercase label + a hairline rule filling the rest
   of the row, so the page reads as distinct sections, not one long panel. */
.md-stats-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 14px;
}

.md-stats-section-head--first {
  margin-top: 6px;
}

.md-stats-section-head__label {
  margin: 0;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* !important to beat the global `h2 { font-size: 25px !important }` (~l.2589)
     — these section labels are <h2> headings. */
  font-size: clamp(18px, 2.2vw, 22px) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.6);
}

.md-stats-section-head__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0.16), rgba(27, 54, 93, 0.02));
}

/* Tiny scanability icon before a metric-card label (Sessions/Words/etc.). */
.md-stat-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-right: 6px;
  color: rgba(27, 54, 93, 0.5);
}

.md-stats-summary-row--1 .panel.panel-default.summary .panel-heading .md-stat-icon {
  color: #1A7B7A;
}

/* Summary panels → md-miniStat style (stats page). Stronger surface +
   shadow than the washed-out 0.65 white so the metric cards read as
   solid, elevated tiles (matches the home/board-detail card language). */
.md-stats-page .panel.panel-default.summary,
.md-eval-report .panel.panel-default.summary {
  border-radius: 18px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(27, 54, 93, 0.07), 0 8px 20px rgba(27, 54, 93, 0.08);
}

/* The metric VALUE — large, bold, navy — so it dominates the small muted
   label above it (the hierarchy the cards were missing). */
.md-stats-page .panel.panel-default.summary .panel-body {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1B365D;
  padding: 14px 10px 16px;
}

.md-stats-page .panel.panel-default.summary .panel-heading,
.md-eval-report .panel.panel-default.summary .panel-heading {
  background: transparent;
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
  color: var(--md-muted);
  font-weight: 650;
  font-size: 14px;
  padding: 12px 14px 10px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px -1px rgba(17, 26, 46, 0.06);
}

/* Eval results report (user/log.hbs): reuse the stats-page metric-card language
   (rules above) + light layout polish so the report matches the reports page. */
.md-eval-report {
  margin-top: 6px;
}

.md-eval-report .row {
  margin-bottom: 8px;
}

/* Values here are text (dates, "0 hits, 0%", "Touch", "N/A") not short numbers,
   so the stats-page big-number size overflows/truncates. Use a readable size
   that wraps to the full value instead of clipping. */
.md-eval-report .panel.panel-default.summary .panel-body {
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #1B365D;
  padding: 12px 12px 14px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.md-eval-report h3 {
  color: #1B365D;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 26px;
  margin-bottom: 12px;
}

/* Same panel heading dimension + tint for comparison/trends/other pages with summary panels */
.panel.panel-default.summary .panel-heading {
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
  color: var(--md-muted);
  font-weight: 650;
  font-size: 14px;
  padding: 12px 14px 10px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px -1px rgba(17, 26, 46, 0.06);
  background: linear-gradient(180deg, rgba(17, 26, 46, 0.06) 0%, rgba(17, 26, 46, 0.02) 100%);
}

/* Summary card header backgrounds: one per row type, slight tint + dimension.
   Visual hierarchy — the PRIMARY totals (row 1) read heavier than the rate
   metrics (row 2): more-saturated header + deeper shadow + larger value;
   row 2 is deliberately quieter. */
.md-stats-summary-row--1 .panel.panel-default.summary .panel-heading {
  background: linear-gradient(180deg, rgba(44, 183, 176, 0.26) 0%, rgba(44, 183, 176, 0.14) 100%);
}

.md-stats-summary-row--2 .panel.panel-default.summary .panel-heading {
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.12) 0%, rgba(91, 141, 239, 0.06) 100%);
}

/* Row 1 (primary): deeper shadow + slightly larger value. */
.md-stats-summary-row--1 .panel.panel-default.summary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 8px rgba(27, 54, 93, 0.1), 0 14px 30px rgba(27, 54, 93, 0.13) !important;
}

.md-stats-summary-row--1 .panel.panel-default.summary .panel-body {
  font-size: clamp(32px, 3.7vw, 46px);
}

/* Row 2 (rates): quieter surface, flatter shadow, smaller muted value. */
.md-stats-summary-row--2 .panel.panel-default.summary {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.05), 0 4px 12px rgba(27, 54, 93, 0.05) !important;
}

.md-stats-summary-row--2 .panel.panel-default.summary .panel-body {
  font-size: clamp(24px, 2.7vw, 34px);
  color: rgba(27, 54, 93, 0.74);
}

/* Compare view row tints: need .md-stats-page so they override base .panel-heading { background: transparent } */
.md-stats-page .md-stats-compare-group .md-stats-compare-group__row:nth-child(1) .panel-heading {
  background: linear-gradient(180deg, rgba(44, 183, 176, 0.18) 0%, rgba(44, 183, 176, 0.1) 100%);
}

.md-stats-page .md-stats-compare-group .md-stats-compare-group__row:nth-child(2) .panel-heading {
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.18) 0%, rgba(91, 141, 239, 0.1) 100%);
}

.md-stats-page .md-stats-compare-group .md-stats-compare-group__row:nth-child(3) .panel-heading {
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.18) 0%, rgba(212, 168, 75, 0.1) 100%);
}

.md-stats-page .md-stats-compare-group .md-stats-compare-group__row:nth-child(4) .panel-heading {
  background: linear-gradient(180deg, rgba(160, 120, 200, 0.18) 0%, rgba(160, 120, 200, 0.1) 100%);
}

/* split=1 (compare view): same panel heading format as single-period stats page */
.md-stats-page .md-stats-compare-group .panel.panel-default.summary .panel-heading {
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
  color: var(--md-muted);
  font-weight: 650;
  font-size: 14px;
  padding: 12px 14px 10px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px -1px rgba(17, 26, 46, 0.06);
}

.md-stats-page .panel.panel-default.summary .panel-body {
  padding: 12px;
  font-weight: 950;
  font-size: 22px;
  color: var(--md-ink);
}

/* Compare mode: left and right groups wrapping all four stat rows */
.md-stats-compare-group {
  border-radius: 14px;
  border: 1px solid rgba(17, 26, 46, 0.08);
  background: rgba(255, 255, 255, 0.5);
  padding: 12px 10px 14px;
  box-sizing: border-box;
}

.md-stats-compare-group__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-stats-compare-group__row {
  margin-left: -4px;
  margin-right: -4px;
  display: flex;
  flex-wrap: wrap;
}

.md-stats-compare-group__row > [class*=col-] {
  padding-left: 4px;
  padding-right: 4px;
  margin-bottom: 0;
}

/* Speech / modeling toggle: pill segmented control with sliding pill animation */
.md-stats-page .md-stats-modeling-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.5);
  padding: 2px;
  margin-bottom: 8px;
  float: right;
  margin-top: 0;
}

.md-stats-page .md-stats-modeling-toggle__slider {
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.2) 0%, rgba(91, 141, 239, 0.12) 100%);
  border: 1px solid rgba(44, 183, 176, 0.3);
  transition: transform 0.25s ease;
  z-index: 0;
  pointer-events: none;
}

.md-stats-page .md-stats-modeling-toggle--modeling .md-stats-modeling-toggle__slider {
  transform: translateX(100%);
}

.md-stats-page .md-stats-modeling-toggle__option {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--md-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: inherit;
  position: relative;
  z-index: 1;
}

.md-stats-page .md-stats-modeling-toggle__option:hover {
  color: var(--md-ink);
}

.md-stats-page .md-stats-modeling-toggle__option--active {
  color: var(--md-ink);
}

.md-stats-page .md-stats-modeling-toggle__option:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-stats-page .md-stats-modeling-toggle__option:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-stats-page .md-stats-modeling-toggle__heading {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink);
}

/* Word Usage chart: modern card container + chart styling */
.md-stats-page .md-stats-chart--word-usage {
  border-radius: 14px;
  border: 1px solid rgba(17, 26, 46, 0.08);
  background: rgba(255, 255, 255, 0.6);
  padding: 12px;
  margin-top: 4px;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
}

.md-stats-page .md-stats-chart--word-usage .daily_stats {
  border-radius: 8px;
  min-height: 280px;
  width: 100%;
}

/* Force Google Chart wrapper to fill container width (overrides inline width: 408px) */
.md-stats-page .md-stats-chart--word-usage .daily_stats > div {
  width: 100% !important;
  max-width: 100%;
  height: 320px !important;
  box-sizing: border-box;
}

.md-stats-page .md-stats-chart--word-usage .daily_stats svg {
  width: 100% !important;
  height: 100% !important;
}

/* Stats page rows and filter form */
.md-stats-page .row {
  margin-left: -8px;
  margin-right: -8px;
}

.md-stats-page .row [class*=col-] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 12px;
}

.md-stats-page .form-inline .form-group {
  margin-right: 8px;
  margin-bottom: 8px;
}

.md-stats-page .form-inline .form-control {
  border-radius: 12px;
  border: 1px solid var(--md-line);
  padding: 8px 12px;
}

.md-stats-page .form-inline .btn-default,
.md-stats-page .btn.btn-default {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  padding: 10px 16px;
}

.md-stats-page .form-inline .btn-default:hover,
.md-stats-page .btn.btn-default:hover {
  background: rgb(255, 255, 255);
}

.md-stats-page a:not(.md-btn):not([class*=LinkTo]) {
  color: var(--md-ink);
  font-weight: 600;
}

.md-stats-page .well {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--md-line);
  border-radius: 12px;
}

/* Stats filter: label, modern layout, primary Apply, Compare button */
.md-stats-filter {
  padding: 16px 0;
}

.md-stats-filter__label {
  display: block;
  margin-top: -3rem;
  margin-bottom: 10px;
  margin-left: 1rem;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--md-muted);
}

.md-stats-filter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.md-stats-filter__form .form-group {
  margin-right: 0;
  margin-bottom: 0;
}

/* Report period: ungrouped (no toolbar card). A "Report period" section-head
   label + short fading divider sits ABOVE the controls row (period select +
   "+ Compare period"). */
.md-stats-filter__period-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

/* "Report period" reuses the dashboard section-head look (uppercase label +
   fading rule), but SHORTER than the full-width REPORT SUMMARY divider, and
   without the section head's large vertical margin. The head hugs its content,
   so the rule gets a FIXED short width (the section-head's `flex: 1 1 auto`
   would otherwise collapse to 0 here — no remaining space to fill). */
.md-stats-filter__period-head {
  width: auto;
  max-width: 100%;
  margin: 0 !important;
}

.md-stats-filter__period-head .md-stats-section-head__rule {
  flex: 0 0 auto;
  width: 200px;
  max-width: 46vw;
  height: 3px;
  border-radius: 3px;
}

/* The REPORT PERIOD filter label is smaller than the page section headers
   (it's a control label, not a top-level section). !important to beat the
   `.md-stats-section-head__label` clamp above. */
.md-stats-filter__period-head .md-stats-section-head__label {
  font-size: 15px !important;
}

/* Controls row — the period select + compare button, side by side. */
.md-stats-filter__period-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

/* Compare button — sits next to the period select in the controls row.
   Height matched to the select so the two line up. */
.md-stats-filter__period-bar .md-stats-filter__compare {
  height: 42px !important;
  min-height: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Match the boards-page "New Board" CTA (.ub-boards-page__new-board-btn ~l.60554):
     subtle 135deg verdigris→denim translucent gradient, white hairline border,
     pill, dark ink, layered shadow. */
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1)) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 999px !important;
  color: var(--md-ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22) !important;
}

.md-stats-filter__period-bar .md-stats-filter__compare:hover,
.md-stats-filter__period-bar .md-stats-filter__compare:focus-visible {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15)) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--md-ink) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28) !important;
}

.md-stats-filter__period-bar .md-stats-period-select__trigger {
  height: 42px;
  min-height: 42px;
  /* Raised "lift" — layered soft shadow + a subtle hover rise. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px rgba(27, 54, 93, 0.1), 0 6px 16px rgba(27, 54, 93, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.md-stats-filter__period-bar .md-stats-period-select__trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 3px 8px rgba(27, 54, 93, 0.12), 0 12px 26px rgba(27, 54, 93, 0.18);
}

/* The period-select component root is a <span class="md-stats-period-select">
   (inline by default), so the inline-flex 42px trigger baseline-aligns inside
   its line box and sits low. Make the root a flex container so the trigger is
   vertically centered in it. */
.md-stats-filter__period-bar .md-stats-period-select {
  display: inline-flex;
  align-items: center;
}

/* The select wrap is a `.form-group`, and `.md-stats-page .form-inline
   .form-group { margin-bottom: 8px }` (0,3,0) beats the wrap's own margin:0 —
   in the align-items:center toolbar that bottom margin shifts the select UP by
   ~4px. Zero it so the select centers with the label and compare button. */
.md-stats-filter__period-bar .md-stats-filter__period-wrap {
  margin: 0 !important;
}

/* Mobile: stack the select + compare button full-width under the label. */
@media (max-width: 600px) {
  .md-stats-filter__period-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .md-stats-filter__period-controls .md-stats-filter__compare {
    justify-content: center;
  }
}
/* Secondary "+ Compare period" button + its leading plus. */
.md-stats-filter__compare-plus {
  font-weight: 800;
  margin-right: 6px;
  font-size: 1.05em;
  line-height: 1;
}

.md-stats-filter__row--period-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.md-stats-filter__row--stacked {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.md-stats-filter__period-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
}

.md-stats-filter__period-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  gap: 8px;
}

.md-stats-filter__period-head .form-group {
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
  top: 4px;
}

.md-stats-filter__period-title {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--md-muted);
  line-height: 1.35;
  white-space: nowrap;
}

.md-stats-filter__period-divider {
  display: none;
}

.md-stats-filter__period-below {
  display: flex;
  justify-content: center;
  width: auto;
}

.md-stats-filter__period-below .md-stats-filter__compare {
  margin-left: 0;
  height: auto;
  min-height: 28px;
  padding: 6px 14px;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

.md-stats-filter__period-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

/* Report period dropdown: same pill style as identity_button (adapted for light background) */
.md-stats-filter__select,
.md-stats-filter .form-control.md-stats-filter__select {
  min-width: 160px;
  padding: 8px 36px 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(255, 255, 255, 0.65);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23112a2e' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--md-ink);
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  appearance: none;
}

.md-stats-filter__select:hover,
.md-stats-filter .form-control.md-stats-filter__select:hover {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.12);
}

.md-stats-filter__select:focus-visible,
.md-stats-filter .form-control.md-stats-filter__select:focus-visible {
  outline: none;
  border-color: rgba(44, 183, 176, 0.4);
  background-color: rgba(255, 255, 255, 0.85);
}

/* Stats period select: custom dropdown with same content style as identity .dropdown-menu */
.md-stats-period-select {
  position: relative;
  display: inline-block;
}

.md-stats-period-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 160px;
  height: 26px;
  min-height: 26px;
  padding: 0 28px 0 12px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--md-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}

.md-stats-period-select__trigger:hover {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.12);
}

.md-stats-period-select__caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.8;
}

.md-stats-period-select__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 8px 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  background: #fff;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  overflow: hidden;
  z-index: 100;
}

.md-stats-period-select__option {
  display: block;
  width: 100%;
  padding: 10px 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  color: #333;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.4;
}

.md-stats-period-select__option:hover:not(:disabled),
.md-stats-period-select__option:focus-visible {
  background: #f0f4fa;
  color: #1a3a6e;
  outline: none;
}

.md-stats-period-select__option--selected {
  font-weight: 600;
  color: #1a3a6e;
}

.md-stats-period-select__option:disabled {
  cursor: default;
  color: #8c95a6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 4px;
}

.md-stats-filter__dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.md-stats-filter__to {
  font-size: 14px;
  color: var(--md-muted);
  font-weight: 600;
}

.md-stats-filter__chip {
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
}

.md-stats-filter__well {
  padding: 0 10px !important;
}

/* Apply + Compare: same height as dropdown trigger (26px) */
.md-stats-filter__apply,
.md-stats-filter__compare {
  height: 26px;
  min-height: 26px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  box-sizing: border-box;
}

.md-stats-filter__compare {
  margin-left: 4px;
  background: linear-gradient(135deg, rgba(118, 147, 185, 0.2), rgba(70, 80, 95, 0.2));
  border: 1px solid rgba(70, 80, 95, 0.12);
  box-shadow: 0 1px 2px rgba(55, 65, 81, 0.04);
  color: #374151;
  font-weight: 700;
}

.md-stats-filter__compare:hover {
  background: linear-gradient(135deg, rgba(118, 147, 185, 0.3), rgba(70, 80, 95, 0.3));
  border-color: rgba(70, 80, 95, 0.2);
  box-shadow: 0 2px 6px rgba(55, 65, 81, 0.08);
}

/* Remove this period: pill with cancel symbol, dark text */
.md-stats-filter__clear {
  margin-left: -0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(220, 224, 230, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(120, 120, 130, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: 14px;
  color: var(--md-ink, #1b2a4a);
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.md-stats-filter__clear:hover,
.md-stats-filter__clear:focus-visible {
  background: rgba(235, 238, 243, 0.6);
  border-color: rgba(100, 100, 110, 0.65);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--md-ink, #1b2a4a);
}

.md-stats-filter__clear:active {
  transform: scale(var(--md-tap, 0.99));
}

.md-stats-filter__clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.md-stats-filter__clear-icon svg,
.md-stats-filter__clear-svg {
  flex-shrink: 0;
  display: block;
}

.md-stats-filter__clear-label {
  line-height: 1.2;
}

/* Stats load status: no data / loading / error messages */
.md-stats-load-status {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-stats-load-status__message {
  font-size: 14px;
  color: var(--md-muted);
}

.md-stats-load-status__message--error {
  color: var(--md-ink);
  font-weight: 600;
}

/* No data: no container, full width, one line */
.md-stats-load-status__no-data {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-muted);
  text-align: center;
  line-height: 1.45;
  white-space: nowrap;
}

.md-stats-filter .md-stats-load-status__no-data {
  margin-top: 0.5rem;
  margin-left: -2rem;
}

.md-stats-page .table {
  color: var(--md-ink);
}

.md-stats-page .table > thead > tr > th {
  border-color: var(--md-line);
  color: var(--md-muted);
  font-weight: 650;
}

/* Compare view: badge label only (no outer container), tight to groupings below */
.md-stats-compare-filter-group {
  margin-bottom: 2px;
}

/* Single-period: vertically center filter block; center on page (override Bootstrap col float) */
.md-stats-page .md-stats-compare-filter-group:not(.md-stats-compare-filter-group--active) > .row:first-of-type {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* 9rem → 4rem: the filter was vertically centered in a 144px-tall block,
     which was the bulk of the "lots of space" gap before the cards. */
  min-height: 4rem;
}

.md-stats-page .md-stats-compare-filter-group:not(.md-stats-compare-filter-group--active) > .row:first-of-type > .md-stats-filter {
  float: none;
  flex: 0 1 100%;
  max-width: 100%;
}

.md-stats-page .md-stats-compare-filter-group:not(.md-stats-compare-filter-group--active) .md-stats-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.md-stats-compare-filter-group--active {
  text-align: center;
}

/* Match landing-alt "Why LingoLinq" eyebrow (la-section-eyebrow-badge + #la-features glass) */
.md-stats-compare-filter-group__badge {
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0d5c5f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(20, 127, 130, 0.08) 35%, rgba(20, 127, 130, 0.18) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 6px 20px;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(20, 127, 130, 0.15);
  opacity: 1;
}

/* Compare view (split=1): left vs right sides clearly distinguishable, modern look */
.md-stats-compare-row {
  gap: 0;
}

/* Filter row in compare: each side its own grouped card, close under badge */
.md-stats-compare-row--filter {
  margin-top: 0;
  padding-left: 10rem;
  padding-right: 10rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

/* All three divs on the row: flex with content centered */
.md-stats-compare-row--filter > * {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.md-stats-compare-row--filter > .md-stats-filter:first-child,
.md-stats-compare-row--filter > [class*=col-]:first-child {
  border-radius: 12px;
  padding: 10px 14px 12px !important;
  margin-right: 0;
  margin-left: 0;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  flex: 1 1 0;
  min-width: 0;
  /* col-xs-6 is 50% of full row — breaks 3-column flex (Period 1 hugged toward center image) */
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.md-stats-compare-filter-group__between {
  flex: 0 0 auto;
  padding: 0 4px;
}

.md-stats-compare-filter-group__between-img {
  max-width: 320px;
  max-height: 192px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.md-stats-compare-row--filter > .md-stats-filter:nth-child(3),
.md-stats-compare-row--filter > [class*=col-]:nth-child(3) {
  border-radius: 12px;
  border-left-width: 1px;
  padding: 10px 14px 12px !important;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.05);
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.md-stats-compare-row--filter > [class*=col-]:nth-child(3)[style*=border-left] {
  border-left: 1px solid rgba(240, 106, 91, 0.35) !important;
}

/* Form inside period columns: full width, flex, center its content */
.md-stats-compare-row--filter > .md-stats-filter:first-child .md-stats-filter__form,
.md-stats-compare-row--filter > [class*=col-]:first-child .md-stats-filter__form,
.md-stats-compare-row--filter > .md-stats-filter:nth-child(3) .md-stats-filter__form,
.md-stats-compare-row--filter > [class*=col-]:nth-child(3) .md-stats-filter__form {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100%;
}

/* Comparison: compact single-row layout per side, centered */
.md-stats-compare-row .md-stats-filter .md-stats-filter__form {
  justify-content: center;
}

.md-stats-compare-row .md-stats-filter .md-stats-filter__row--period-actions {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.md-stats-compare-row .md-stats-filter .md-stats-filter__period-wrap {
  order: 2;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.md-stats-compare-row .md-stats-filter .md-stats-filter__period-wrap .md-stats-filter__label {
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  font-size: 14px;
}

.md-stats-compare-row .md-stats-filter .md-stats-filter__clear {
  order: 1;
  padding: 5px 10px 5px 8px;
  font-size: 14px;
}

.md-stats-compare-row .md-stats-filter .md-stats-filter__clear-icon svg,
.md-stats-compare-row .md-stats-filter .md-stats-filter__clear-svg {
  width: 16px;
  height: 16px;
}

/* Colored column backgrounds only on the filter row (Period 1 / Period 2), not on data rows */
.md-stats-compare-row--filter > .md-stats-filter:first-child,
.md-stats-compare-row--filter > [class*=col-]:first-child {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.08) 0%, rgba(91, 141, 239, 0.06) 100%);
  border-radius: 16px;
  border: 1px solid rgba(44, 183, 176, 0.2);
  padding: 16px 14px 18px !important;
  margin-right: 6px;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
}

.md-stats-compare-row--filter > .md-stats-filter:nth-child(3),
.md-stats-compare-row--filter > [class*=col-]:nth-child(3) {
  background: linear-gradient(135deg, rgba(240, 106, 91, 0.06) 0%, rgba(212, 168, 75, 0.08) 100%);
  border-radius: 16px;
  border: 1px solid rgba(240, 106, 91, 0.22);
  border-left: 2px solid rgba(240, 106, 91, 0.45);
  padding: 16px 14px 18px !important;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
}

.md-stats-compare-row--filter > [class*=col-]:nth-child(3)[style*=border-left] {
  border-left: 2px solid rgba(240, 106, 91, 0.45) !important;
}

/* ---------- Board view (Boards tab: only boards card expanded, 12 boards grid) ---------- */
/* Only animate children (hero, grid, cards); do not transition .md-main to avoid black flash on route load */
.md-hero {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease !important;
}

.md-grid {
  transition: gap 0.35s ease, grid-template-columns 0.35s ease, grid-template-rows 0.35s ease, grid-template-areas 0.35s ease !important;
}

.md-card {
  transition: opacity 0.3s ease, transform 0.3s ease, grid-area 0.35s ease !important;
}

.md-card--boards {
  transition: opacity 0.3s ease, transform 0.3s ease, grid-area 0.35s ease, min-height 0.35s ease !important;
}

.md-card--boards .md-strip {
  transition: display 0s linear 0.35s, margin 0.35s ease, gap 0.35s ease, overflow 0.35s ease !important;
}

.md-card--sup {
  transition: opacity 0.3s ease, transform 0.3s ease, grid-area 0.35s ease, min-height 0.35s ease !important;
}

.md-card--sup .md-people {
  transition: margin 0.35s ease, gap 0.35s ease, grid-template-columns 0.35s ease !important;
}

.md-shell--board-view .md-hero {
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.md-shell--board-view .md-grid {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "boards";
  gap: 0;
  align-items: stretch;
  min-height: 60vh;
}

.md-shell--board-view .md-card--speak,
.md-shell--board-view .md-card--sup,
.md-shell--board-view .md-card--reports,
.md-shell--board-view .md-card--extras {
  grid-area: 1/1;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* Boards tab: no card container (md-boards-page), content ~20% larger */
.md-shell--board-view .md-boards-page {
  grid-area: 1/1;
  min-height: 72vh; /* 60 * 1.2 */
  display: flex;
  flex-direction: column;
  padding: 22px; /* 18 * 1.2 */
}

.md-shell--board-view .md-boards-page .md-card__head--between {
  gap: 14px;
}

/* Boards page md-stat: same styling as home page boards card */
.md-shell--board-view .md-boards-page .md-stat {
  padding: 10px 12px;
}

.md-shell--board-view .md-boards-page .md-stat .md-card__boards-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
  flex-shrink: 0;
  transform: scale(1.4);
  transform-origin: center;
  margin-left: -1rem;
}

.md-shell--board-view .md-boards-page .md-stat__num {
  font-size: 23.4px; /* 26 * 0.9 */
  margin-left: -2rem;
}

.md-shell--board-view .md-boards-page .md-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px; /* 14 * 1.2 */
  overflow: visible;
  margin-top: 22px; /* 18 * 1.2 */
  padding-bottom: 10px;
  flex: 1;
  align-content: start;
}

.md-shell--board-view .md-boards-page .md-strip__item {
  min-width: 0;
  width: 100%;
  padding: 14px;
  border-radius: 22px;
}

.md-shell--board-view .md-boards-page .md-strip__label {
  margin-top: 10px;
}

.md-shell--board-view .md-boards-page .md-thumb {
  height: 72px;
  border-radius: 17px;
}

.md-shell--board-view .md-boards-page .md-thumb__icon {
  width: 43px;
  height: 43px;
}

.md-shell--board-view .md-boards-page .md-btn {
  padding: 14px 19px;
  border-radius: 19px;
}

.md-shell--board-view .md-boards-page .md-btn--primary {
  background: rgba(44, 183, 176, 0.22);
  color: #1B365D;
  border-color: rgba(44, 183, 176, 0.18);
}

.md-shell--board-view .md-boards-page .md-btn--primary:hover {
  background: rgba(44, 183, 176, 0.3);
}

.md-shell--board-view .md-boards-page .md-btn--wide {
  margin-top: 22px; /* 18 * 1.2 */
}

.ub-boards-page__gs-secondary-btn {
  color: #3A506E;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.ub-boards-page__gs-secondary-btn:hover {
  color: #1B365D;
  text-decoration: underline;
}

/* ---------- Supervisor view (Supervisors tab: only supervisors card expanded, full list) ---------- */
.md-shell--supervisor-view .md-hero {
  opacity: 0 !important;
  transform: translateY(-12px) scale(0.98) !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.md-shell--supervisor-view > .md-workspace {
  padding-bottom: 32px !important;
}

.md-shell--supervisor-view .md-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  grid-template-areas: "sup" !important;
  gap: 0 !important;
  align-items: start !important;
  max-width: 56rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.md-shell--supervisor-view .md-card--speak,
.md-shell--supervisor-view .md-card--boards,
.md-shell--supervisor-view .md-card--reports,
.md-shell--supervisor-view .md-card--extras {
  grid-area: 1/1 !important;
  opacity: 0 !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

.md-shell--supervisor-view .md-boards-page,
.md-shell--supervisor-view .md-extras-page {
  grid-area: 1/1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.md-supervisors-page {
  width: fit-content !important;
  max-width: 100% !important;
  align-self: start !important;
  justify-self: center !important;
  border-radius: var(--md-r-lg) !important;
}

.md-shell--supervisor-view .md-supervisors-page {
  grid-area: 1/1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  overflow: visible !important;
  min-height: 0 !important;
}

.md-shell--supervisor-view .md-card--sup {
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
}

.md-shell--supervisor-view .md-card--sup .md-people {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-top: 18px !important;
  flex: 0 0 auto !important;
  align-content: start !important;
}

@media (min-width: 700px) {
  .md-shell--supervisor-view .md-card--sup .md-people {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 960px) {
  .md-shell--supervisor-view .md-card--sup .md-people {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* ---------- Reports view (Reports tab: only reports card expanded, full content) ---------- */
.md-shell--reports-view .md-hero {
  opacity: 0 !important;
  transform: translateY(-12px) scale(0.98) !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Reports page: smooth fade-in for the shell. The hero title/subtitle keep the
   home page's from-left / from-right motion (inherited from `.md-hero--dashboard`
   at 1s, subtitle delayed 0.5s) — no reports-specific speed-up, so they move at
   the same pace as the home hero. */
.md-shell--reports-view {
  animation: md-reports-fade-in 0.3s ease-out both;
}

@keyframes md-reports-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Dashboard greeting above stats outlet (user.hbs) — same hero as home; override reports-shell hide */
.md-shell--reports-view .md-hero--reports-dashboard {
  opacity: 1 !important;
  transform: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  /* 24px top padding for breathing room above the title. Must live HERE (on the
     un-hide rule) rather than as a title margin-top — the hero's own padding was
     `0` (from `.md-shell--reports-view .md-hero`), so a title margin just collapses
     through the hero's top edge instead of insetting the title. */
  padding: 24px 16px 18px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  visibility: visible !important;
  max-width: 1120px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.md-shell--reports-view .md-hero--reports-dashboard .md-hero__title {
  /* Tightened from 40px → 16px so the report data sits closer to the
     nav/title and the user reaches it faster (was a large dead gap). */
  margin-top: 16px !important;
}
.md-shell--reports-view .md-hero--reports-dashboard .md-hero__sub {
  margin-bottom: 0 !important;
}

.md-shell--reports-view .md-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "reports" !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 60vh !important;
}

.md-shell--reports-view .md-card--speak,
.md-shell--reports-view .md-card--boards,
.md-shell--reports-view .md-card--sup,
.md-shell--reports-view .md-card--extras {
  grid-area: 1/1 !important;
  opacity: 0 !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

.md-shell--reports-view .md-card--reports {
  grid-area: 1/1 !important;
  min-height: 60vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.md-shell--reports-view .md-card--reports .md-reports-expanded {
  margin-top: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.md-reports-expanded__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 520px) {
  .md-reports-expanded__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.md-reports-expanded__chart {
  flex: 1;
  min-height: 120px;
}

.md-spark--tall {
  height: 100%;
  min-height: 120px;
}

.md-reports-expanded__list-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink);
}

.md-reports-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 18px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.md-reports-list__row {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--md-line);
  cursor: pointer;
  transition: background 0.15s ease;
}

.md-reports-list__row:last-child {
  border-bottom: none;
}

.md-reports-list__row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.md-reports-list__row:active {
  transform: scale(var(--md-tap));
}

.md-shell--reports-view .md-card--reports .md-btn--wide {
  margin-top: 8px;
}

/* ---------- Extras view (Extras tab: same hero as home, then extras grid) ---------- */
.md-shell--extras-view .md-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "extras-page" !important;
  gap: 0 !important;
  align-items: start !important;
}

.md-shell--extras-view .md-grid > .md-card {
  grid-area: 1/1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.md-extras-page {
  grid-area: extras-page !important;
  width: 100% !important;
  padding: 0 0 2rem !important;
}

.md-extras-page__title {
  margin: 0 0 4px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  color: var(--md-ink) !important;
}

.md-extras-page__sub {
  margin: 0 0 20px !important;
  font-size: 16px !important;
  color: var(--md-muted) !important;
}

.md-extras-page__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Extras page cards: same styling as home page .md-grid .md-card */
.md-extras-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* Vertically center the head within the (grid-stretched) card; content stays
     left-aligned horizontally. */
  justify-content: center !important;
  padding: 18px !important;
  border-radius: var(--md-r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
  border: 1px solid var(--md-line) !important;
  /* Glassy raised as-button shadow stack — matches the My Organizations
     card-as-button. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.1) !important;
  overflow: hidden !important;
  /* Native <button> resets so the whole card reads as the card (now that the
     card itself is the action button, with no separate CTA inside). */
  text-align: left !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.md-extras-card:hover,
.md-extras-card:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.07), 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 18px rgba(27, 54, 93, 0.1), 0 20px 44px rgba(27, 54, 93, 0.14) !important;
}

.md-extras-card:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55) !important;
  outline-offset: 3px !important;
}

.md-extras-card__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  /* No button below the head anymore (the whole card is the action), so drop
     the trailing gap — keeps the head truly centered. */
  margin-bottom: 0 !important;
}

.md-extras-card__icon-wrap {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(44, 183, 176, 0.12) !important;
  border: 1px solid var(--md-line) !important;
}

.md-extras-card__icon-wrap--new-board {
  overflow: visible !important;
}

.md-extras-card__icon-wrap--new-board .md-extras-card__img {
  width: 28px !important;
  height: 28px !important;
  transform: scale(3) !important;
  object-fit: contain !important;
}

.md-extras-card__svg-icon {
  width: 28px !important;
  height: 28px !important;
}

/* Per-action icon tile — background tinted to match that card's own icon
   color, plus a soft ambient glow behind the icon in the SAME color. !important
   so they win over the base .md-extras-card__icon-wrap background. (supervisors
   moved blue-grey → dusty-denim to match its denim icon.) */
.md-extras-card__icon-wrap--intro {
  background: rgba(42, 157, 143, 0.12) !important;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.28) !important;
}

.md-extras-card__icon-wrap--sync_details {
  background: rgba(76, 134, 216, 0.12) !important;
  box-shadow: 0 0 14px rgba(76, 134, 216, 0.28) !important;
}

.md-extras-card__icon-wrap--goals {
  background: rgba(49, 111, 112, 0.12) !important;
  box-shadow: 0 0 14px rgba(49, 111, 112, 0.28) !important;
}

.md-extras-card__icon-wrap--reports {
  background: rgba(76, 134, 216, 0.12) !important;
  box-shadow: 0 0 14px rgba(76, 134, 216, 0.28) !important;
}

.md-extras-card__icon-wrap--record_note {
  background: rgba(118, 147, 185, 0.14) !important;
  box-shadow: 0 0 14px rgba(118, 147, 185, 0.3) !important;
}

.md-extras-card__icon-wrap--run_eval {
  background: rgba(242, 185, 90, 0.14) !important;
  box-shadow: 0 0 14px rgba(242, 185, 90, 0.32) !important;
}

.md-extras-card__icon-wrap--account {
  background: rgba(70, 80, 95, 0.12) !important;
  box-shadow: 0 0 14px rgba(70, 80, 95, 0.24) !important;
}

.md-extras-card__icon-wrap--supervisors {
  background: rgba(76, 134, 216, 0.12) !important;
  box-shadow: 0 0 14px rgba(76, 134, 216, 0.28) !important;
}

.md-extras-card__icon-wrap--lessons {
  background: rgba(42, 157, 143, 0.12) !important;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.28) !important;
}

.md-extras-card__icon-wrap--offline_boards {
  background: rgba(201, 173, 122, 0.16) !important;
  box-shadow: 0 0 14px rgba(201, 173, 122, 0.36) !important;
}

.md-extras-card__img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.md-extras-card__body {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.md-extras-card__title {
  margin: 0 0 4px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  color: var(--md-ink) !important;
}

.md-extras-card__sub {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  color: var(--md-muted) !important;
  line-height: 1.35 !important;
}

.md-extras-card__btn-wrap {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(17, 26, 46, 0.08) !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.md-extras-card__btn {
  width: 108px;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important;
  /* Compact chip — no top/bottom padding; tighter line-height and a
     reduced min-height (44px - 6px = 38px) shrink the button height
     below the shared .md-btn defaults. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 14px !important;
  min-height: 38px !important;
  /* Fully-round pill — set explicitly on the button's own rule so it
     wins regardless of source order / inheritance from .md-btn. */
  border-radius: 999px !important;
  background: rgba(76, 134, 216, 0.3) !important;
  border-color: rgba(76, 134, 216, 0.22) !important;
  color: #1B365D !important;
  /* Sleeker, more actionable CTA — mirrors the modern dashboard/tour
     button vocabulary: top inner sheen + faint lower inner edge for
     surface curvature, a tight contact shadow, and a soft diffuse
     denim-tinted lift so the button reads as a raised, tappable control
     rather than a flat wash. Stays navy-on-light (AAC contrast intact). */
  /* NOTE: `!important` may appear only ONCE, at the end of the whole
     declaration — putting it after each comma layer invalidates the
     entire box-shadow (that bug made these buttons render flat). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(76, 134, 216, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(76, 134, 216, 0.2) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.md-extras-card__btn:hover {
  background: rgba(76, 134, 216, 0.4) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(76, 134, 216, 0.22), 0 2px 4px rgba(27, 54, 93, 0.1), 0 12px 26px rgba(76, 134, 216, 0.28) !important;
}

.md-extras-card__btn:active {
  transform: translateY(0) !important;
}

.md-extras-card__btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px rgba(76, 134, 216, 0.2) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-header__brand {
    margin-left: -8px !important;
  }
  #within_ember > header.header-index-with-dark-toggle:has(.app-navbar) {
    min-height: 0 !important;
  }
  /* Zero the shell's 3rem top padding on narrow viewports so authenticated
     pages sit flush against the navbar — EXCEPT the create-board-new shell,
     which keeps its own (smaller) padding so the modal-card has breathing
     room below the (hidden) topbar. */
  .md-shell:not(.md-shell--create-board-new) {
    padding-top: 0 !important;
  }
  /* Create-board-new shell: drop from base 3rem to 1rem at ≤1024px so the
     modal-card sits closer to the top while still breathing. */
  .md-shell--create-board-new {
    padding-top: 1rem !important;
  }
  #content,
  #content > .ember-view,
  #index_view,
  .md-shell,
  .md-workspace,
  .md-workspace > .md-main,
  .md-user-layout,
  .md-pillnav,
  .md-pillnav--user {
    overflow-x: hidden !important;
  }
  /* Dashboard card glow "cut off on the right": the real clipper is .md-main,
     not the workspace. At ≤1024 the scroll guard puts overflow-x:hidden on
     .md-main (the grid's parent); on desktop .md-main has no such clip — which
     is why the glow shows there. .md-main's own horizontal padding is only
     ~16px, far less than the ~38px resting glow, so it clips ~16px from the
     card edge. .md-grid--dashboard is overflow:visible, so the shadow can
     escape the grid: inset the cards 28px inside the grid and the glow paints
     across that 28px gutter + .md-main's 16px (≈44px) before .md-main's clip,
     showing the full resting shadow. (Not an overflow change.) */
  .md-grid.md-grid--dashboard {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  #index_view.main_columns {
    padding-bottom: 0 !important;
  }
  .md-workspace {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }
  .md-shell {
    background: radial-gradient(800px 500px at 5% 0%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(700px 400px at 95% 10%, rgba(76, 134, 216, 0.18), transparent 50%), radial-gradient(900px 500px at 50% 100%, rgba(42, 157, 143, 0.16), transparent 45%), radial-gradient(600px 400px at 80% 50%, rgba(118, 147, 185, 0.14), transparent 50%), radial-gradient(500px 300px at 20% 70%, rgba(242, 185, 90, 0.1), transparent 50%), radial-gradient(600px 350px at 60% 30%, rgba(70, 80, 95, 0.12), transparent 50%), linear-gradient(180deg, #fefefe 0%, #fafafa 50%, #f7f7f7 100%) !important;
  }
}
@media (max-width: 950px) {
  /* Modern dashboard: single-column layout under 945px; workspace expands to content, #content scrolls vertically */
  .md-pillnav {
    margin-top: 2rem !important;
  }
  #index_view {
    padding-bottom: 0 !important;
  }
  .md-shell {
    background: radial-gradient(800px 500px at 5% 0%, rgba(49, 111, 112, 0.22), transparent 50%), radial-gradient(700px 400px at 95% 10%, rgba(76, 134, 216, 0.18), transparent 50%), radial-gradient(900px 500px at 50% 100%, rgba(42, 157, 143, 0.16), transparent 45%), radial-gradient(600px 400px at 80% 50%, rgba(118, 147, 185, 0.14), transparent 50%), radial-gradient(500px 300px at 20% 70%, rgba(242, 185, 90, 0.1), transparent 50%), radial-gradient(600px 350px at 60% 30%, rgba(70, 80, 95, 0.12), transparent 50%), linear-gradient(180deg, #fefefe 0%, #fafafa 50%, #f7f7f7 100%) !important;
  }
  .md-shell,
  #content .ember-view > .md-shell,
  #content > .md-shell {
    min-height: auto !important;
    flex: 0 0 auto !important;
  }
  .md-shell > .md-workspace {
    flex: 0 0 auto !important;
    min-height: min-content !important;
  }
  .md-workspace > .md-main {
    flex: 0 0 auto !important;
    min-height: min-content !important;
  }
  .md-workspace {
    margin: 0 !important;
    padding: calc(32px + 2rem) 16px calc(24px - 9rem) 16px !important;
    border-radius: 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* …but the Extras page keeps its DESKTOP workspace treatment at ≤950px so
     its layout doesn't alter at this breakpoint (this 0,2,0 selector also wins
     over the ≤820/≤640 `.md-workspace` rules, which this media query covers).
     overflow:visible also stops the Extras cards' raised shadows clipping. */
  .md-shell--extras-view > .md-workspace {
    margin: 40px auto !important;
    max-width: min(1200px, 100% - 24px) !important;
    padding: 40px 40px calc(40px - 9rem) 40px !important;
    border-radius: 48px !important;
    overflow: visible !important;
  }
  /* Board-picker is a short standalone page rendered straight into `#content`
     ({{outlet}}, no `.ember-view`/`#index_view` wrapper), so the dashboard's
     shrink-to-content rules above (`.md-shell` → min-height:auto;flex:0 0 auto,
     `.md-shell > .md-workspace` → flex:0 0 auto;min-height:min-content) leave the
     glass card stopping at its content while the `#within_ember` mesh fills below
     it — the "card ends, shell shows" gap. Restore the shell's full height AND let
     the workspace grow into it (both are required: a previous attempt that only
     flex-grew the workspace failed because the shell stayed collapsed). Scoped via
     `#within_ember:has(.board-picker-page)` (proven to match this page, robust to
     wrapper structure, specificity (1,2,0)/(1,3,0) wins over the generic rules). */
  #within_ember:has(.board-picker-page) .md-shell--board-picker {
    min-height: 100vh !important;
  }
  #within_ember:has(.board-picker-page) .md-shell--board-picker > .md-workspace {
    flex: 1 1 auto !important;
    min-height: auto !important;
  }
  .md-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "speak" "boards" "extras" !important;
    grid-template-rows: auto auto auto !important;
    grid-auto-rows: auto !important;
  }
  .md-grid .md-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Gentle View ≤950px: the inline 2-column grid-template-areas (applied !important
     by gridStyle) wins over the single-column `.md-grid` rule above, leaving a
     skewed 2-col layout. Switch to a flex COLUMN (flex ignores grid-template-areas)
     and flex-`order` each card by the reading-order `--ord-*` vars the grid emits,
     so the small-screen order MATCHES the large-screen (drag-aware) arrangement.
     Focused View has its OWN ≤1024px flex fallback (scoped to --layout-focused), so
     this never touches it. */
  .md-grid.md-grid--dashboard.md-grid--layout-gentle {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .md-grid--layout-gentle > .md-card--caseload {
    order: var(--ord-caseload, 1) !important;
  }
  .md-grid--layout-gentle > .md-card--rooms {
    order: var(--ord-rooms, 2) !important;
  }
  .md-grid--layout-gentle > .md-card--attention {
    order: var(--ord-attention, 3) !important;
  }
  .md-grid--layout-gentle > .md-card--account {
    order: var(--ord-account, 2) !important;
  }
  .md-grid--layout-gentle > .md-card--speak {
    order: var(--ord-speak, 3) !important;
  }
  .md-grid--layout-gentle > .md-card--org-management {
    order: var(--ord-org, 4) !important;
  }
  .md-grid--layout-gentle > .md-card--boards {
    order: var(--ord-boards, 5) !important;
  }
  .md-grid--layout-gentle > .md-card--create-board {
    order: var(--ord-createboard, 6) !important;
  }
  .md-grid--layout-gentle > .md-card--extras {
    order: var(--ord-extras, 7) !important;
  }
  .md-grid--layout-gentle > .md-card--reports {
    order: var(--ord-reports, 8) !important;
  }
  .md-grid--layout-gentle > .md-card--edit-dashboard {
    order: var(--ord-editdashboard, 9) !important;
  }
  /* Centre the BUTTON cards' content (icon cluster + title/sub text) now that each
     spans the full width in the single column — per request. Includes the Speak Mode
     button (`.md-card--speak`, whose class is `md-card--speak-as-button`, not the
     generic `md-card--as-button`). Boards (a strip card, not a button) is excluded. */
  .md-grid--layout-gentle .md-card--as-button .md-card__head,
  .md-grid--layout-gentle .md-card--speak .md-card__head {
    justify-content: center !important;
  }
  .md-grid--layout-gentle .md-card--as-button .md-card__titles,
  .md-grid--layout-gentle .md-card--speak .md-card__titles {
    text-align: center !important;
  }
  /* Show sup row only when supervisors tab is active */
  .md-grid:has(.md-supervisors-page) {
    grid-template-areas: "speak" "boards" "extras" "sup" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .md-grid--with-getting-started {
    grid-template-areas: "getting_started" "speak" "boards" "extras" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .md-grid--with-getting-started:has(.md-supervisors-page) {
    grid-template-areas: "getting_started" "speak" "boards" "extras" "sup" !important;
    grid-template-rows: auto auto auto auto auto !important;
  }
  /* ≤950px single-column variants containing BOTH cards: Speak rises
     to the top, then Boards, then Extras ABOVE My Organizations (org
     grounded at the bottom). Card-level `grid-area` assignments are
     untouched; only the row order in grid-template-areas moves.
     Variants without org_mgmt have no second card to swap with and are
     left alone. */
  .md-grid--with-org-mgmt {
    grid-template-areas: "speak" "boards" "extras" "org_mgmt" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  /* Caseload variants at ≤950px: Caseload and Speak Mode sit
     INLINE on the top row (2-column row). All other cards span
     both columns. Switching the grid back to 2 columns is scoped
     to these variants only — variants without caseload keep the
     single-column layout defined on the base `.md-grid` rule
     above. */
  .md-grid--with-caseload:not(.md-grid--with-org-mgmt) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "caseload speak" "boards   boards" "extras   extras" !important;
    grid-template-rows: auto auto auto !important;
  }
  .md-grid--with-caseload.md-grid--with-org-mgmt {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "caseload speak" "boards   boards" "extras   extras" "org_mgmt org_mgmt" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .md-grid--with-org-mgmt:has(.md-supervisors-page) {
    grid-template-areas: "speak" "boards" "extras" "org_mgmt" "sup" !important;
    grid-template-rows: auto auto auto auto auto !important;
  }
  .md-grid--with-getting-started.md-grid--with-org-mgmt {
    grid-template-areas: "getting_started" "speak" "boards" "extras" "org_mgmt" !important;
    grid-template-rows: auto auto auto auto auto !important;
  }
  .md-grid--with-getting-started.md-grid--with-caseload.md-grid--with-org-mgmt {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "getting_started getting_started" "caseload speak" "boards   boards" "extras   extras" "org_mgmt org_mgmt" !important;
    grid-template-rows: auto auto auto auto auto !important;
  }
  .md-shell--board-view .md-grid {
    grid-template-areas: "boards" !important;
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-shell--supervisor-view .md-grid {
    grid-template-areas: "sup" !important;
    grid-template-rows: auto !important;
  }
  .md-shell--reports-view .md-grid {
    grid-template-areas: "reports" !important;
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-shell--extras-view .md-grid {
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-grid__divider {
    display: none !important;
  }
  /* Boards card: in column layout size to content so it doesn't collapse */
  .md-grid .md-card--boards {
    height: auto !important;
    min-height: auto !important;
    align-self: start !important;
  }
  .md-grid .md-card--boards .md-strip {
    flex: 0 1 auto !important;
    min-height: min-content !important;
  }
  .md-grid .md-card--boards .md-btn--wide {
    margin-top: 20px !important;
  }
}
/* ≤640px: split Caseload and Speak Mode back into their own rows.
   At ≤950px (block above) the caseload variants share a 2-column
   top row that pairs `caseload speak` inline; at this narrower
   breakpoint there isn't room for the two card-as-button pills
   side by side, so we collapse back to a single column and stack
   them vertically. Other rows (boards / extras / org_mgmt /
   getting_started) were already single-column at ≤950px and stay
   that way — the only override here is dropping the top row's
   `1fr 1fr` columns and splitting the `caseload speak` cell pair
   into two rows. Speak Mode stays directly under Caseload, then
   boards / extras / org_mgmt keep the order they had at ≤950px
   (Extras above My Organizations, org grounded at the bottom). */
@media (max-width: 640px) {
  .md-grid--with-caseload:not(.md-grid--with-org-mgmt) {
    grid-template-columns: 1fr !important;
    grid-template-areas: "caseload" "speak" "boards" "extras" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .md-grid--with-caseload.md-grid--with-org-mgmt {
    grid-template-columns: 1fr !important;
    grid-template-areas: "caseload" "speak" "boards" "extras" "org_mgmt" !important;
    grid-template-rows: auto auto auto auto auto !important;
  }
  .md-grid--with-getting-started.md-grid--with-caseload.md-grid--with-org-mgmt {
    grid-template-columns: 1fr !important;
    grid-template-areas: "getting_started" "caseload" "speak" "boards" "extras" "org_mgmt" !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }
}
@media (max-width: 820px) {
  .md-pillnav {
    flex-wrap: wrap !important;
    overflow: visible !important;
    border-radius: 24px !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  .md-pillnav__pill {
    padding: 4px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* At this breakpoint the global "active pill padding-left: 18px"
     rules still apply and break the symmetry of the tighter 4px 12px
     padding above — pulling the active pill wider than the inactive
     one. Force padding-left back to 12px so all four sides match the
     inactive pill (4/12/4/12). The `.md-pillnav--user` selectors are
     listed explicitly because the account-page active-pill rule
     (app.scss ~41743) is specificity (0,4,1) — higher than the generic
     fix — so matching that specificity (and winning on source order)
     is required for the account pills to come out symmetric too. */
  .md-pillnav__pill.is-active:not(:first-child),
  a.md-pillnav__pill.active:not(:first-child),
  .md-pillnav--user a.md-pillnav__pill.is-active:not(:first-child),
  .md-pillnav--user a.md-pillnav__pill.active:not(:first-child) {
    padding-left: 12px !important;
  }
  .nav-header__brand {
    margin-left: -12px !important;
  }
  /* Tighter workspace spacing and strip/people grids; workspace still expands to content with vertical scroll */
  .md-workspace {
    margin: 0 !important;
    padding: calc(20px + 2rem) 12px calc(20px - 9rem) 12px !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .md-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "speak" "boards" "extras" !important;
    grid-template-rows: auto auto auto !important;
  }
  .md-grid--with-getting-started {
    grid-template-areas: "getting_started" "speak" "boards" "extras" !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .md-shell--board-view .md-grid {
    grid-template-areas: "boards" !important;
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-shell--board-view .md-boards-page .md-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .md-shell--supervisor-view .md-grid {
    grid-template-areas: "sup" !important;
    grid-template-rows: auto !important;
  }
  .md-shell--supervisor-view .md-card--sup .md-people {
    grid-template-columns: 1fr !important;
  }
  .md-shell--reports-view .md-grid {
    grid-template-areas: "reports" !important;
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-reports-expanded__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-pillnav {
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }
  .md-pillnav__spacer {
    display: none;
  }
  .md-pillnav__upgrade {
    margin-left: auto;
  }
}
/* Small screens: collapsible dropdown – active action shown, list of all actions */
.md-pillnav-dropdown {
  display: none;
}

@media (max-width: 550px) {
  .nav-header__brand {
    margin-left: -16px !important;
  }
  .md-pillnav,
  .md-pillnav--dashboard {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .md-pillnav .md-pillnav__pill,
  .md-pillnav--dashboard .md-pillnav__pill {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
  .md-shell--user > .md-workspace {
    padding-top: var(--topbar-height, 68px) !important;
  }
  .md-pillnav--user {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }
  .md-pillnav--user .md-pillnav__pill {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  .md-pillnav-dropdown {
    display: none !important;
    position: relative !important;
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .md-pillnav-dropdown__trigger {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    /* Brand-slate-blue gradient — same palette family as the
       elsewhere-used `linear-gradient(135deg, $brand-slate-blue,
       $brand-charcoal-dark)` (see e.g. l. ~4632). 135deg diagonal
       gives a top-left → bottom-right depth sweep; the resulting
       tone reads as slate-blue with a darker grounding instead of
       the previous verdigris/smart-blue mix that no longer fit
       this surface. */
    background: linear-gradient(135deg, #5A6A85 0%, #374151 100%) !important;
    border: 1px solid rgba(90, 106, 133, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }
  .md-pillnav-dropdown__trigger:hover,
  .md-pillnav-dropdown__trigger:focus-visible {
    border-color: rgba(90, 106, 133, 0.65) !important;
    box-shadow: 0 2px 12px rgba(90, 106, 133, 0.28) !important;
    outline: none !important;
  }
  .md-pillnav-dropdown.is-open .md-pillnav-dropdown__trigger {
    border-color: rgba(90, 106, 133, 0.65) !important;
    box-shadow: 0 2px 12px rgba(90, 106, 133, 0.32) !important;
  }
  .md-pillnav-dropdown__label {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .md-pillnav-dropdown__chevron {
    flex-shrink: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid rgba(255, 255, 255, 0.9) !important;
    transition: transform 0.2s ease !important;
  }
  .md-pillnav-dropdown.is-open .md-pillnav-dropdown__chevron {
    transform: rotate(180deg) !important;
  }
  .md-pillnav-dropdown__list {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
    /* Fully opaque white so page content underneath can't bleed
       through the menu rows; rgba(...,0.99) was effectively the
       same numerically but rendering pipelines that round can
       still produce a hint of show-through. */
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    /* Z-index bumped from 100 → 1500 so the open menu always sits
       above page-level chrome (hero cards, board grid, sticky
       headers) and isn't covered by elements that share or exceed
       the previous 100 ceiling. Stays below modal/popover layers
       (10000+) so app dialogs still win. */
    z-index: 1500 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.2s ease, opacity 0.2s ease !important;
  }
  .md-pillnav-dropdown.is-open .md-pillnav-dropdown__list {
    max-height: 320px !important;
    opacity: 1 !important;
  }
  .md-pillnav-dropdown__icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
  }
  .md-pillnav-dropdown__option {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(75, 78, 92, 0.9) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }
  .md-pillnav-dropdown__option:hover {
    /* Slate-blue tinted hover wash — replaces the verdigris tint
       so the option states stay in the same palette family as the
       slate-blue trigger button + active option below. */
    background: rgba(90, 106, 133, 0.08) !important;
    color: #374151 !important;
  }
  .md-pillnav-dropdown__option.is-active {
    /* Matches the collapsed-trigger button background exactly: the
       slate-blue → charcoal-dark gradient set on
       `.md-pillnav-dropdown__trigger` above. Same border tint, same
       shadow weight — the active option reads as the same surface
       as the trigger that opened the menu. */
    background: linear-gradient(135deg, #5A6A85 0%, #374151 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(90, 106, 133, 0.45) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  .md-pillnav-dropdown__option:active {
    background: rgba(90, 106, 133, 0.2) !important;
  }
}
/* Very small screens: keep all pillnavs compact */
@media (max-width: 375px) {
  .md-pillnav,
  .md-pillnav--dashboard {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    justify-content: center !important;
  }
  .md-pillnav .md-pillnav__pill,
  .md-pillnav--dashboard .md-pillnav__pill {
    font-size: 14px !important;
    padding: 6px 8px !important;
  }
  .md-pillnav-dropdown {
    display: none !important;
  }
}
@media (max-width: 375px) {
  .nav-header__brand {
    margin-left: -20px !important;
  }
  .md-pillnav {
    display: none !important;
  }
  .ub-boards-page__getting-started-actions {
    justify-content: center !important;
  }
  .md-pillnav-dropdown {
    display: block !important;
    width: 40% !important;
    margin-top: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   User page (.md-pillnav--user) — collapse the pill row into the shared
   dropdown drawer at ≤460px, mirroring the home page's md-pillnav-dropdown.
   Uses native <details>/<summary> (see user.hbs), so the [open] attribute
   replaces the JS-driven .is-open reveal — same end state, different open
   signal (identical approach to .md-pillnav-dropdown--caseload). The shared
   trigger/list/option styling lives in the ≤550px block above and applies
   here unchanged, so the drawer looks the same as home. This block sits
   after the ≤375px + ≤550px pillnav blocks so its display swap wins on
   source order (equal specificity). */
.md-pillnav-dropdown--user {
  list-style: none;
}

.md-pillnav-dropdown--user > summary {
  list-style: none;
}

.md-pillnav-dropdown--user > summary::-webkit-details-marker {
  display: none;
}

.md-pillnav-dropdown--user > summary::marker {
  content: "";
}

.md-pillnav-dropdown--user[open] .md-pillnav-dropdown__chevron {
  transform: rotate(180deg) !important;
}

.md-pillnav-dropdown--user[open] .md-pillnav-dropdown__trigger {
  border-color: rgba(90, 106, 133, 0.65) !important;
  box-shadow: 0 2px 12px rgba(90, 106, 133, 0.32) !important;
}

.md-pillnav-dropdown--user[open] .md-pillnav-dropdown__list {
  max-height: 320px !important;
  opacity: 1 !important;
}

/* LinkTo renders <a>; keep the option row clean. */
.md-pillnav-dropdown--user .md-pillnav-dropdown__option {
  text-decoration: none;
}

/* The swap: hide the pill row, show the dropdown drawer (centered, matching
   the home drawer's 40%-width centered geometry) at ≤460px. */
@media (max-width: 460px) {
  .md-pillnav--user {
    display: none !important;
  }
  .md-pillnav-dropdown--user {
    display: block !important;
    width: 40% !important;
    margin: 20px auto 0 !important;
  }
}
@media (max-width: 550px) {
  .md-focusbar__text {
    display: none;
  }
  .md-focusbar__item {
    gap: 0;
  }
}
/* ─── Home dashboard: single-column stack at ≤950px ──────────────────
   The ≤950px single-column stack now lives in ONE place: the `.md-grid--layout-gentle`
   rule inside the earlier `@media (max-width: 950px)` block (display:flex column +
   drag-aware `order: var(--ord-*)` per card + centered button content). Focused View
   gets its own flex fallback from the `@media (max-width: 1024px)` block below. This
   superseded generic block (hardcoded order on only 5 cards, which fought the dynamic
   `--ord-*` order and left the action cards unsequenced) was removed so the two
   layouts each have a single authoritative small-screen rule. */
/* Extra breathing room above the nav-pill menu on small screens. */
@media (max-width: 640px) {
  .md-workspace > .md-pillnav {
    margin-top: 48px !important;
  }
}
/* Let home card titles, sub-text, and inner buttons WRAP instead of overflowing
   on smaller screens (md-card text has no nowrap, but flex items need min-width:0
   to wrap, and .md-btn ships Bootstrap's white-space:nowrap). */
@media (max-width: 640px) {
  .md-grid--dashboard .md-card__titles {
    min-width: 0;
  }
  .md-grid--dashboard .md-card__title,
  .md-grid--dashboard .md-card__sub,
  .md-grid--dashboard .md-card__status {
    overflow-wrap: break-word;
  }
  .md-grid--dashboard .md-btn {
    white-space: normal !important;
  }
}
/* Focused View responsive: the four action cards drop from the 4-up row to a 2×2
   grid at ≤1024px, then a single column at ≤640px. `display:flex` makes the inline
   grid-template (applied !important, so CSS can't reflow the grid itself) inert,
   and `order` fixes the sequence. `.md-grid.md-grid--dashboard.md-grid--layout-focused`
   (0,3,0) outranks the generic ≤950px single-column dashboard rule (0,2,0), so
   Focused View keeps its 2×2 in that range. */
@media (max-width: 1024px) {
  .md-grid.md-grid--dashboard.md-grid--layout-focused {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    /* Kill the base grid's gap/template transition here — otherwise crossing the
       breakpoint animates the gap (28px→16px) and the 50% cards briefly overflow
       and wrap to a single column mid-animation. */
    transition: none !important;
  }
  /* EVERY card pulls its order from the user's drag-to-reorder preference (`--ord-*`
     vars emitted by gridStyle, identical to the Gentle ≤950px rule) — never a hardcoded
     sequence. A mixed system (some cards hardcoded, some preference) sorts the two groups
     on different scales and mis-places cards (e.g. a Reports action card floating above
     the Boards card). Fallbacks match the canonical defaults. Flex BASIS still differs
     per card type (full-width feature cards vs. the 2×2 action tiles); only ORDER is
     preference-driven. */
  .md-grid--layout-focused > .md-card--speak-focused {
    order: var(--ord-speak, 3) !important;
    flex: 1 1 100% !important;
  }
  .md-grid--layout-focused > .md-card--boards {
    order: var(--ord-boards, 5) !important;
    flex: 1 1 100% !important;
  }
  .md-grid--layout-focused > .md-card--caseload {
    order: var(--ord-caseload, 1) !important;
    flex: 1 1 100% !important;
  }
  .md-grid--layout-focused > .md-card--org-management {
    order: var(--ord-org, 4) !important;
    flex: 1 1 100% !important;
  }
  .md-grid--layout-focused > .md-card--account {
    order: var(--ord-account, 2) !important;
  }
  .md-grid--layout-focused > .md-card--create-board {
    order: var(--ord-createboard, 6) !important;
  }
  .md-grid--layout-focused > .md-card--reports {
    order: var(--ord-reports, 8) !important;
  }
  .md-grid--layout-focused > .md-card--edit-dashboard {
    order: var(--ord-editdashboard, 9) !important;
  }
  .md-grid--layout-focused > .md-card--account,
  .md-grid--layout-focused > .md-card--create-board,
  .md-grid--layout-focused > .md-card--reports,
  .md-grid--layout-focused > .md-card--edit-dashboard {
    /* Basis slightly under half (16px gap → −8px) plus a rounding buffer, with
       flex-grow:1 so the pair still fills the row exactly. Prevents a sub-pixel
       overflow from wrapping them to one column. */
    flex: 1 1 calc(50% - 12px) !important;
    min-width: 0 !important;
  }
}
@media (max-width: 640px) {
  /* Single column — the four action cards each take the full row. */
  .md-grid--layout-focused > .md-card--account,
  .md-grid--layout-focused > .md-card--create-board,
  .md-grid--layout-focused > .md-card--reports,
  .md-grid--layout-focused > .md-card--edit-dashboard {
    flex: 1 1 100% !important;
  }
  /* "View All Boards" is pinned to the card's top-right on Focused View
     (absolute, see ~46980). At ≤640px the header row is too cramped for it
     beside the title + "+", so drop it back into normal flow — it wraps down
     below the header/sub-header, shrinks to fit its own content (never
     full-width), and centers on the page via auto side margins. */
  .md-grid.md-grid--layout-focused .md-card--boards .md-btn--wide {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: fit-content !important;
    margin: 12px auto 0 !important;
  }
}
/* Focused View — at ≤375px the pill-nav collapses to the dropdown; the 24px top
   margin goes on the TRIGGER (the visible button) so it actually shifts down (the
   container's margin wasn't moving it). Also pull the dashboard's L/R padding in
   to 6px so the narrow content uses the full width. */
@media (max-width: 375px) {
  .md-shell--layout-focused .md-pillnav-dropdown__trigger {
    margin-top: 24px !important;
  }
  .md-shell--layout-focused > .md-workspace {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* Focused View — center the Speak hero ("Let's Communicate") title + subtitle on
   small screens, where the icon+text stack rather than sit side-by-side. */
@media (max-width: 460px) {
  .md-card--speak-focused__text {
    align-items: center !important;
    text-align: center !important;
  }
}
/* Focused View — keep the workspace top MARGIN at 0 for ≤950px (matches the
   general .md-workspace, which drops to 0 there); the base focused 16px rule
   above would otherwise leak down to small screens via specificity. */
@media (max-width: 950px) {
  .md-shell--layout-focused > .md-workspace {
    margin-top: 0 !important;
  }
}
/* Shrink home dashboard card content on very small screens (<475px): smaller
   icons, title/sub text, head gap, and a narrower title divider. (Base sizes use
   !important, so these do too; the divider width does not.) */
@media (max-width: 474px) {
  .md-grid .md-card.md-card--speak-as-button .md-card__icon,
  .md-grid .md-card.md-card--caseload-as-button .md-card__icon,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon,
  .md-grid .md-card.md-card--org-management.md-card--as-button .md-card__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  .md-grid--dashboard .md-card__title,
  .md-grid--dashboard .md-card--boards .md-card__title,
  .md-grid .md-card.md-card--speak-as-button .md-card__title,
  .md-grid .md-card.md-card--caseload-as-button .md-card__title {
    font-size: 18px !important;
  }
  .md-grid--dashboard .md-card__sub,
  .md-grid--dashboard .md-card__status,
  .md-grid .md-card.md-card--caseload-as-button .md-card__sub,
  .md-grid .md-card.md-card--speak-as-button .md-card__status {
    font-size: 13px !important;
  }
  .md-grid .md-card.md-card--speak-as-button .md-card__head,
  .md-grid .md-card.md-card--caseload-as-button .md-card__head,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__head,
  .md-grid .md-card.md-card--org-management.md-card--as-button .md-card__head {
    gap: 14px !important;
  }
}
/* ≤640px (supervisor / non-communicator home): make EVERY action-card "button"
   divider the same 180px — including the badge-action cards (My Account, Create a
   Board, Reports, Edit Dashboard) the old ≤474px rule missed, and at the wider
   640px breakpoint. !important + this 0,5,1 specificity beat the per-card 260px /
   208px widths and the Focused-layout 150px !important divider. */
@media (max-width: 640px) {
  .md-grid .md-card.md-card--speak-as-button .md-card__title::after,
  .md-grid .md-card.md-card--caseload-as-button .md-card__title::after,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__title::after,
  .md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__title::after,
  .md-grid .md-card.md-card--org-management.md-card--as-button .md-card__title::after {
    width: 180px !important;
  }
}
/* ≤640px: unify the icon→header/subheader gap on EVERY action button to match the
   Extras card's 28px. The badge-action cards (My Account / Create a Board / Reports /
   Edit Dashboard) and Speak were landing on a tighter gap than Extras (which is pinned
   to 28px by a higher-specificity ≤1024px rule). 0,5,0 selectors + !important + this
   late source order beat every per-card gap (the 6px centering value, the Focused 11px,
   the 30px speak, the per-card 28px). */
@media (max-width: 640px) {
  .md-grid .md-card.md-card--speak-as-button .md-card__head,
  .md-grid .md-card.md-card--caseload-as-button .md-card__head,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__head,
  .md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__head {
    gap: 28px !important;
  }
}
/* ≤460px: tighten that same icon→header gap to 12px (same selectors as the 28px
   rule above; later source wins at this narrower width). */
@media (max-width: 460px) {
  .md-grid .md-card.md-card--speak-as-button .md-card__head,
  .md-grid .md-card.md-card--caseload-as-button .md-card__head,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__head,
  .md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__head {
    gap: 12px !important;
  }
}
/* Take a Tour + Getting Started triggers float (position:fixed → viewport) on
   large screens. At ≤950px the .md-home-actions row (above the pill-nav, just
   below the inner header) lays them out in normal flow instead — Take a Tour on
   the left, Getting Started on the right — so they push the content down rather
   than floating over it. On large screens .md-home-actions is empty of flow
   (its children stay fixed) and collapses to nothing. */
@media (max-width: 950px) {
  .md-home-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .md-home-actions .md-tour__trigger,
  .md-home-actions .md-home-steps {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin: 0 !important;
  }
  /* Keep the Getting Started badge on the right even when the tour button is
     absent (home_tour flag off). */
  .md-home-actions .md-home-steps {
    margin-left: auto !important;
  }
}
/* ─── Board-alt edit mode: lean inner_header ─────────────────────────
   In edit mode, only the editing toolbar (Edit, Paint, Undo, Redo,
   Grid +/-, Ideas, More, Save, Cancel) should be visible in the
   #inner_header. The brand logo, identity dropdown, beta-feedback link,
   support link, settings, and style switcher all hide. */
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header h1.with_board {
  display: none !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #identity {
  display: none !important;
}
#within_ember.board-alt-view.edit-mode-active {
  /* With logo + identity hidden, center the remaining edit toolbar
     buttons horizontally inside the inner_header. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header {
  text-align: center !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header {
  display: block !important;
  text-align: center !important;
  width: 100%;
}

/* ─── Wide / Skinny edit-toolbar buttons: responsive breakpoints ─────
   Default app rules render `.skinny` always-on and `.wide` always-off.
   Inside the board-alt edit toolbar, swap that so the text-labeled
   "wide" buttons show on >= 900px screens and the icon-only "skinny"
   buttons show below 900px. */
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn .skinny,
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn.wide {
  display: none !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn .wide {
  display: inline !important;
}
@media (max-width: 899px) {
  #within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn .skinny {
    display: inline !important;
  }
  #within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn .wide {
    display: none !important;
  }
}

#within_ember.board-alt-view .board {
  background: #46505F !important;
}
#within_ember.board-alt-view:has(#nav_header) .board {
  margin-top: 2.25rem;
}
#within_ember.board-alt-view:has(#nav_header) #stash_hover {
  /* Positioning kept exactly as the original (margins 0/0). Only
     the fixed 82×82 / 41px-block sizing is relaxed to auto so the
     27px icon + two-line label is no longer clipped. */
  margin-top: 0 !important;
  margin-left: 0 !important;
  width: max-content !important;
  height: auto !important;
}
#within_ember.board-alt-view:has(#nav_header) #stash_hover .option {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
#within_ember.board-alt-view:has(#nav_header) #stash_hover .option:last-child {
  border-left: none !important;
  border-top: 1px solid #ccc !important;
  padding-left: 5px !important;
}
#within_ember.board-alt-view .board .button {
  border: 2px solid var(--btn-bg, #EDE9E0) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(27, 42, 74, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: #1b2a4a !important;
}
#within_ember.board-alt-view {
  /* Add interior padding directly on the <a class="button"> link element.
     The inner img_holder and button-label-holder are absolutely positioned
     against this link's padding box, so insetting them by 4px each gives
     the visible "more padding inside the button" effect. */
}
#within_ember.board-alt-view .board a.button {
  padding: 4px !important;
}
#within_ember.board-alt-view .board a.button .img_holder {
  top: 4px !important;
  left: 4px !important;
  right: 4px !important;
  width: calc(100% - 8px) !important;
}
#within_ember.board-alt-view .board a.button .button-label-holder {
  left: 4px !important;
  width: calc(100% - 8px) !important;
}
#within_ember.board-alt-view .board a.button .button-label-holder:not(.top) {
  bottom: 2px !important;
}
#within_ember.board-alt-view .board a.button .button-label-holder.top {
  top: 2px !important;
}
#within_ember.board-alt-view {
  /* The shared `.button span.button-label` sets a fixed height equal to
     the font-size with `line-height: 1.1` and `overflow: hidden`, so the
     bottom of descenders ("p", "g", "y" in "Top Page" / "dining room")
     gets clipped on the board-alt grid. The global border-box means
     adding padding-bottom alone would eat the fixed height and clip
     MORE — so switch this label to content-box and add a font-relative
     bottom pad. content-box keeps the fixed line height while the extra
     0.3em sits BELOW it inside the overflow box, so the full glyph shows
     at every text size. Scoped to board-alt; board-detail uses a
     different label element and is unaffected. */
}
#within_ember.board-alt-view .board a.button span.button-label {
  box-sizing: content-box !important;
  padding-bottom: 0.3em !important;
}
#within_ember.board-alt-view .board .button.dim_button {
  opacity: 0.4 !important;
  filter: saturate(45%) brightness(0.88) !important;
}
#within_ember.board-alt-view.mid_dim .board .button.dim_button {
  opacity: 0.32 !important;
  filter: saturate(38%) brightness(0.84) !important;
}
#within_ember.board-alt-view.extra_dim .board .button.dim_button {
  opacity: 0.22 !important;
  filter: saturate(30%) brightness(0.78) !important;
}
#within_ember.board-alt-view .board .button.focus_word_button {
  opacity: 1 !important;
  filter: saturate(100%) brightness(1) !important;
  outline: 3px solid rgba(42, 157, 143, 0.95) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(42, 157, 143, 0.22), 0 4px 16px rgba(27, 54, 93, 0.12) !important;
  z-index: 2;
}
#within_ember.board-alt-view .board .button.touched,
#within_ember.board-alt-view .board .button:focus-visible {
  border-width: 2px !important;
  border-color: #7BAE8C !important;
  box-shadow: 0 0 0 3px rgba(123, 174, 140, 0.25) !important;
}
#within_ember.board-alt-view .board .button .img_holder {
  background: #e8f5f4 !important;
}
#within_ember.board-alt-view {
  /* Transparent label-holder lets the button's bg show through so the top
     section matches the rest of the button. The 2px border reads uniformly
     because the label-holder no longer paints over it. */
}
#within_ember.board-alt-view .board .button .button-label-holder {
  background: transparent !important;
}
#within_ember.board-alt-view .board .button .button-label {
  font-weight: 700 !important;
  color: #1b2a4a !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
#within_ember.board-alt-view {
  /* Match the board-detail "Colored Corner" folder setting:
     a square quarter-circle "fan" wedge in the top-right, fully
     saturated (no brightness filter), painted with the button's
     darkened ring color — same depth as the inner ring on its
     siblings, mirroring board-detail's use of `var(--btn-border)`.
     `--btn-ring-color` is set by bound_classes alongside `--btn-bg`
     (autoBorder.darken(20)) for every colored button, so the corner
     reads at the same depth as the outline rather than the lighter
     fill. Falls back to `--btn-bg` for legacy buttons that only have
     a fill set. Size scales fluidly with button width via clamp(),
     so small buttons get small corners and large buttons get
     proportionally larger ones — no text-size-class breakpoints. */
}
#within_ember.board-alt-view .board .button .action_container.folder,
#within_ember.board-alt-view .board .button .action_container.integration {
  top: 0 !important;
  right: 0 !important;
  width: clamp(10px, 22%, 28px) !important;
  height: clamp(10px, 22%, 28px) !important;
  border: none !important;
  border-radius: 0 0 0 100% !important;
  background: var(--btn-ring-color, var(--btn-bg, currentColor)) !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 3;
  pointer-events: none;
  transform: none !important;
}
#within_ember.board-alt-view .board .button .action_container.folder .action,
#within_ember.board-alt-view .board .button .action_container.integration .action {
  visibility: hidden !important;
}

#within_ember.board-alt-view #inner_header:has(#speak) {
  background: #374151 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  border-bottom: none !important;
}
#within_ember.board-alt-view header.new_index.speaking:has(#speak),
#within_ember.board-alt-view header.new_index:has(#speak) {
  border-bottom: none !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker {
  padding: 0 8px 0 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn {
  background: color-mix(in oklch, #46505F 75%, white) !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn .glyphicon-home,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn .glyphicon-home {
  display: none;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn::after,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn:hover, #within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn:focus-visible,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn:hover,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn:focus-visible {
  background: color-mix(in oklch, #46505F 60%, white) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
  transform: translateY(-1px);
  filter: none;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn:active,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn.dim,
#within_ember.board-alt-view #inner_ember.board-alt-view #inner_header:has(#speak) #home_button.btn.dim {
  opacity: 0.5;
}
#within_ember.board-alt-view #inner_header:has(#speak) #back_button {
  background: #4C86D8 !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #back_button .glyphicon-arrow-left {
  display: none;
}
#within_ember.board-alt-view #inner_header:has(#speak) #back_button::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#speak) #back_button:hover {
  filter: brightness(1.12);
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap {
  background: color-mix(in oklch, #46505F 75%, white) !important;
  border: none !important;
  border-radius: 12px !important;
  /* Top padding 4px (was 6px) so the speak-bar chips aren't pushed
     down; matches the 4px bottom for symmetric breathing room. */
  padding: 4px 6px 4px 6px !important;
  min-height: 60px !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap #button_list {
  color: rgba(255, 255, 255, 0.9) !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options .glyphicon-chevron-down {
  display: none;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button {
  background: #7693B9 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  margin-left: 4px !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button img {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z'/%3E%3Cline x1='18' y1='9' x2='12' y2='15'/%3E%3Cline x1='12' y1='9' x2='18' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z'/%3E%3Cline x1='18' y1='9' x2='12' y2='15'/%3E%3Cline x1='12' y1='9' x2='18' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#speak) #clear_button {
  background: color-mix(in oklch, #46505F 75%, white) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #clear_button .glyphicon-remove {
  display: none;
}
#within_ember.board-alt-view #inner_header:has(#speak) #clear_button::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#speak) #clear_button:hover {
  filter: brightness(1.12);
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity .user_holder {
  background-color: #46505F !important;
}
#within_ember.board-alt-view .user_holder--default {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='42' fill='%2346505F'/%3E%3Ccircle cx='48' cy='48' r='40.75' fill='none' stroke='%23FFFFFF' stroke-opacity='0.59' stroke-width='2'/%3E%3Ccircle cx='48' cy='48' r='25' fill='%23ABB1BA' stroke='%23B3B8C1' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='48' cy='38.5' r='8.5' fill='%238585E6'/%3E%3Cpath d='M31.8 62.5C34.6 53.8 40.7 49.7 48 49.7C55.3 49.7 61.4 53.8 64.2 62.5C60.5 65.8 55 67.7 48 67.7C41 67.7 35.5 65.8 31.8 62.5Z' fill='%231B1F4A'/%3E%3C/svg%3E") !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity #identity_button .caret {
  border-top-color: #B5B8BF !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity #identity_button.btn {
  background-color: #46505F !important;
  background-image: none !important;
  border-color: #46505F !important;
  color: #fff !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity .logging_enabled {
  background: transparent !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity .logging_enabled.glyphicon-briefcase::before {
  content: "" !important;
  width: 0 !important;
  overflow: hidden !important;
}
#within_ember.board-alt-view #inner_header:has(#speak) #identity .logging_enabled.glyphicon-briefcase::after {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background: white !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

#within_ember.board-alt-view #inner_header:has(#nav_header) {
  background: #374151 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  border-bottom: none !important;
  padding-bottom: 0.25rem !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__app-name-primary,
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__app-name-accent {
  color: #fff !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done {
  background: color-mix(in oklch, #46505F 75%, white) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 10px 18px !important;
  width: auto !important;
  height: auto !important;
  min-width: 72px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done .board-done__exit-icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #fff !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5 h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  flex-shrink: 0 !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done .board-done__exit-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done {
  position: relative !important;
  margin-right: 10px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done::after {
  content: "" !important;
  position: absolute !important;
  right: -9px !important;
  top: 15% !important;
  height: 70% !important;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1px;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn[data-ember-action]:has(.glyphicon-arrow-left),
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn .glyphicon-arrow-left {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left) {
  background: #4C86D8 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left) .glyphicon-arrow-left {
  display: none;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left) span {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left)::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left):hover {
  filter: brightness(1.12);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode {
  background: #7693B9 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode .glyphicon-volume-up, #within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode .skinny, #within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode .real_skinny {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home):hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) .glyphicon-home, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) .skinny, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) .real_skinny {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home)::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.badge) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.badge) img {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.badge)::before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) .glyphicon-pencil, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) .skinny, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) .real_skinny {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil)::before {
  content: "" !important;
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) .glyphicon-share, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) .skinny, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) .real_skinny {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share)::before {
  content: "" !important;
  display: block !important;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) .glyphicon-chevron-down, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) .skinny, #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) .real_skinny {
  display: none !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down)::before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode {
  width: 100% !important;
  min-width: 360px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_id {
  position: fixed !important;
  top: calc(68.1px + 0.5rem) !important;
  left: 0 !important;
  z-index: 300 !important;
  background: rgba(55, 65, 81, 0.92) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 4px 12px 4px 10px !important;
  border-radius: 0 0 10px 10px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: 100vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_id a, #within_ember.board-alt-view #inner_header:has(#nav_header) #board_id span {
  color: rgba(255, 255, 255, 0.9) !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_id img {
  opacity: 0.85;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .btn-default,
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .btn-primary:not(#speak_mode) {
  background: color-mix(in oklch, #46505F 75%, white) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .btn-default:hover,
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .btn-primary:not(#speak_mode):hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view {
  /* "Modern View" button: match the board-alt Speak Mode button
     exactly (blue-grey pill). The extra .board-view-modern-btn class
     keeps specificity above the generic board-bar button theming. */
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .board-view-modern-btn {
  background: #7693B9 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar .board-view-modern-btn:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar {
  align-self: center !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .nav-header__board-bar-right {
  justify-content: center !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode {
  margin-top: 0.85rem !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn,
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn--support,
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn--support .ll-bento-help-btn__icon,
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn--support .ll-bento-help-btn__support-icon {
  color: #fff !important;
}

.board-alt-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(55, 65, 81, 0.1) !important;
  margin-right: 4px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.board-alt-view-toggle:hover {
  filter: brightness(0.9);
  text-decoration: none !important;
}

.board-alt-view-toggle__icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #374151;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#within_ember.board-alt-view .board-alt-view-toggle {
  background: #7693B9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}
#within_ember.board-alt-view .board-alt-view-toggle:hover {
  filter: brightness(1.12);
}
#within_ember.board-alt-view .board-alt-view-toggle.board-alt-view-toggle--active {
  background: #7693B9 !important;
  box-shadow: 0 2px 6px rgba(118, 147, 185, 0.4) !important;
}
#within_ember.board-alt-view .board-alt-view-toggle__icon {
  background-color: #fff;
}

/* ── Board header responsive: hide buttons into hamburger ──
   Breakpoint bumped from 1024px → 1500px (matches the
   `.la-board-hamburger` show-rule at line 1216) so the action
   cluster hides at the same width the hamburger appears. Previously
   the hamburger toggled on at 1024 but the original board-alt rules
   here only matched at 1024 too — now both are at 1500 so the
   hamburger reveals action items the header was no longer rendering
   at the wider 1024-1500 range. */
@media (max-width: 1500px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #board_done,
  #within_ember.board-view #inner_header:has(#nav_header) #board_done {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.badge) {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-usd) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.badge) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) {
    display: none !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-usd) {
    display: none !important;
  }
  /* Also hide the More dropdown and Copies/My Copy/Original buttons */
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode > span.dropdown,
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode > span:has(.btn-info),
  #within_ember.board-view .nav-header__board-bar #normal_mode > span.dropdown,
  #within_ember.board-view .nav-header__board-bar #normal_mode > span:has(.btn-info) {
    display: none !important;
  }
  /* Keep visible: back button */
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left) {
    display: inline-flex !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left) {
    display: inline-flex !important;
  }
  /* Keep visible: speak mode */
  #within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode {
    display: inline-flex !important;
  }
  #within_ember.board-view #inner_header:has(#nav_header) #speak_mode {
    display: inline-flex !important;
  }
  #within_ember.board-alt-view #inner_header #normal_mode .btn-group:has(#speak_mode),
  #within_ember.board-view #inner_header #normal_mode .btn-group:has(#speak_mode) {
    display: inline-flex !important;
  }
  #within_ember.board-alt-view #inner_header #normal_mode .btn-group:has(#speak_mode) .btn,
  #within_ember.board-view #inner_header #normal_mode .btn-group:has(#speak_mode) .btn {
    display: inline-flex !important;
  }
  /* Keep visible: hamburger */
  #within_ember.board-alt-view #inner_header .la-board-hamburger,
  #within_ember.board-view #inner_header .la-board-hamburger {
    display: flex !important;
  }
}
/* Style switcher component (Try New Style dropdown) */
.la-style-switcher-wrapper {
  display: inline !important;
}

.la-style-switcher {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-right: 4px;
}

.la-style-switcher__btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: rgba(255, 255, 255, 0.9);
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.la-style-switcher__btn:hover {
  background: #fff;
  color: #2A9D8F;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.12);
}

.la-style-switcher__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 6px 24px rgba(27, 54, 93, 0.18);
  padding: 6px;
  z-index: 1000;
  min-width: 170px;
}

.la-style-switcher__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.la-style-switcher__item:hover {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.06));
  color: #2A9D8F;
}

#within_ember.board-view {
  background: linear-gradient(160deg, rgb(254.7884615385, 254.7692307692, 254.7115384615) 0%, rgb(245.8510638298, 244.4787234043, 242.6489361702) 40%, #eaf2f1 100%) !important;
}
#within_ember.board-view #content .board {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 32px rgba(17, 26, 46, 0.09), 0 1px 4px rgba(17, 26, 46, 0.05) !important;
}
#within_ember.board-view .board .button {
  background: color-mix(in oklch, var(--btn-bg, #EDE9E0) 50%, white) !important;
  border: 2px solid var(--btn-bg, #EDE9E0) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(27, 42, 74, 0.06) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  color: #1b2a4a !important;
  filter: saturate(70%);
}
#within_ember.board-view .board .button.dim_button {
  opacity: 0.38 !important;
  filter: saturate(38%) brightness(0.9) !important;
}
#within_ember.board-view.mid_dim .board .button.dim_button {
  opacity: 0.3 !important;
  filter: saturate(32%) brightness(0.85) !important;
}
#within_ember.board-view.extra_dim .board .button.dim_button {
  opacity: 0.2 !important;
  filter: saturate(26%) brightness(0.78) !important;
}
#within_ember.board-view .board .button.focus_word_button {
  opacity: 1 !important;
  filter: saturate(100%) brightness(1) !important;
  outline: 3px solid rgba(42, 157, 143, 0.95) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(42, 157, 143, 0.22), 0 4px 16px rgba(27, 54, 93, 0.12) !important;
  z-index: 2;
}
#within_ember.board-view #inner_header:has(#speak) {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 2px 12px rgba(17, 26, 46, 0.1) !important;
  border-bottom: 1px solid rgba(17, 26, 46, 0.07) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn {
  background: #3a5c8a !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(58, 92, 138, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn .glyphicon-home,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn .glyphicon-home {
  display: none;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn::after,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn {
  transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn:hover, #within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn:focus-visible,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn:hover,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn:focus-visible {
  background: #4e72aa !important;
  box-shadow: 0 4px 16px rgba(58, 92, 138, 0.5) !important;
  transform: translateY(-1px);
  filter: none;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn:active,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(58, 92, 138, 0.3) !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-header__home-marker .btn.dim,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn.dim {
  opacity: 0.5;
}
#within_ember.board-view #inner_header:has(#speak) #back_button {
  background: #4C86D8 !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(76, 134, 216, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
}
#within_ember.board-view #inner_header:has(#speak) #back_button .glyphicon-arrow-left {
  display: none;
}
#within_ember.board-view #inner_header:has(#speak) #back_button::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#speak) #back_button:hover {
  filter: brightness(1.12);
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap {
  background: rgba(44, 99, 157, 0.09) !important;
  border: 1.5px solid rgba(44, 99, 157, 0.18) !important;
  border-radius: 12px !important;
  padding: 6px 6px 6px 12px !important;
  min-height: 52px !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap #button_list {
  color: #1b2a4a !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options {
  background: rgba(44, 99, 157, 0.1) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #3a5c8a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options .glyphicon-chevron-down {
  display: none;
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: #3a5c8a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a5c8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a5c8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#speak) .speak-bar__button-list-wrap #speak_options:hover {
  background: rgba(44, 99, 157, 0.18) !important;
}
#within_ember.board-view #inner_header:has(#speak) #backspace_button {
  background: #7693B9 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(118, 147, 185, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  margin-left: 4px !important;
}
#within_ember.board-view #inner_header:has(#speak) #backspace_button img {
  display: none !important;
}
#within_ember.board-view #inner_header:has(#speak) #backspace_button::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z'/%3E%3Cline x1='18' y1='9' x2='12' y2='15'/%3E%3Cline x1='12' y1='9' x2='18' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z'/%3E%3Cline x1='18' y1='9' x2='12' y2='15'/%3E%3Cline x1='12' y1='9' x2='18' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#speak) #backspace_button:hover {
  filter: brightness(1.1);
}
#within_ember.board-view #inner_header:has(#speak) #clear_button {
  background: #3a5c8a !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(58, 92, 138, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
}
#within_ember.board-view #inner_header:has(#speak) #clear_button .glyphicon-remove {
  display: none;
}
#within_ember.board-view #inner_header:has(#speak) #clear_button::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#speak) #clear_button:hover {
  filter: brightness(1.12);
}
#within_ember.board-view #inner_header:has(#speak) #identity .user_holder {
  background-color: rgba(255, 255, 255, 0.72) !important;
}
#within_ember.board-view #inner_header:has(#speak) #identity #identity_button.btn {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  border-color: rgba(17, 26, 46, 0.12) !important;
  color: #1b2a4a !important;
}
#within_ember.board-view #inner_header:has(#speak) #identity .logging_enabled {
  background: transparent !important;
}
#within_ember.board-view #inner_header:has(#nav_header) {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 2px 12px rgba(17, 26, 46, 0.09) !important;
  border-bottom: 1px solid rgba(17, 26, 46, 0.07) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#within_ember.board-view #inner_header:has(#nav_header) .btn {
  border-radius: 10px !important;
  border-color: rgba(17, 26, 46, 0.15) !important;
}
#within_ember.board-view #inner_header:has(#nav_header) #home_button.btn {
  background: #3a5c8a !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(58, 92, 138, 0.28) !important;
}
#within_ember.board-view #inner_header:has(#nav_header) #home_button.btn .glyphicon-home {
  display: none;
}
#within_ember.board-view #inner_header:has(#nav_header) #home_button.btn::after {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 24px;
  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#within_ember.board-view #inner_header:has(#nav_header) #home_button.btn:hover {
  filter: brightness(1.12);
}
#within_ember.board-view:has(#nav_header) .board {
  margin-top: 2.25rem !important;
}

@keyframes board-picker-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes board-picker-expand {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.04) scaleX(0.18) translateY(-6px);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) scaleX(1) translateY(0);
  }
}
@keyframes board-picker-icon-to-x {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(90deg) scale(0.9);
  }
}
#board_picker_backdrop {
  cursor: default;
  animation: board-picker-backdrop-in 0.2s ease both;
}

.board-picker-btn--open {
  background: rgba(76, 134, 216, 0.15) !important;
  border-color: rgba(76, 134, 216, 0.4) !important;
  color: #2c5fa8 !important;
}
.board-picker-btn--open svg {
  animation: board-picker-icon-to-x 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#board_picker {
  position: fixed;
  top: var(--topbar-height);
  left: 50%;
  transform: translateX(-50%);
  width: min(80vw, 960px);
  bottom: 12px;
  z-index: 901;
  background: rgba(246, 247, 250, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  animation: board-picker-expand 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(17, 26, 46, 0.18);
  isolation: isolate;
}
#board_picker::before, #board_picker::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
#board_picker::before {
  width: 420px;
  height: 420px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(76, 134, 216, 0.13) 0%, rgba(76, 134, 216, 0) 70%);
}
#board_picker::after {
  width: 360px;
  height: 360px;
  bottom: -60px;
  left: -40px;
  background: radial-gradient(circle, rgba(63, 127, 123, 0.1) 0%, rgba(63, 127, 123, 0) 70%);
}

#board_picker_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 5% 14px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.15);
}

#board_picker_header .la-section-eyebrow-badge {
  margin-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #1B365D !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
}

.board-picker__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 26, 46, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: #3a4a66;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.board-picker__close:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(17, 26, 46, 0.22);
  color: #1b2a4a;
  box-shadow: 0 4px 14px rgba(17, 26, 46, 0.13), inset 0 1px 0 rgb(255, 255, 255);
}
.board-picker__close:active {
  background: rgba(240, 242, 248, 0.95);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.1);
}

.board-picker__filter-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  /* Row now hosts just Change Home Board + New Board (the Home Board
     shortcut and Filter input were lifted out to other slots). Center
     the pair on the modal centerline so they read as a focused
     two-button group, rather than getting glued to the left/right
     edges by `margin-left: auto`. */
  justify-content: center;
  width: 92%;
  max-width: 720px;
  /* 1rem top margin so the row sits lower in the modal, off the
     header's bottom edge. */
  margin: 1rem auto 0;
}

/* "Set Home Board" / "Change Home Board" toggle. Base style copied
   verbatim from the (removed) `.board-picker__home-btn` so the
   visual continuity carries: same white pill, navy ink, 1.5px subtle
   border, verdigris hover accent. The --active (selection mode)
   variant stays loud-verdigris so the modal still announces "you're
   now picking a home board" when toggled on. */
.board-picker__set-home-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.board-picker__set-home-btn:hover {
  border-color: #2A9D8F;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(42, 157, 143, 0.12);
}

.board-picker__set-home-btn--active {
  background: #1A7B7A;
  border-color: #1A7B7A;
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 123, 122, 0.3);
}

.board-picker__set-home-btn--active:hover {
  background: #2A9D8F;
  border-color: #2A9D8F;
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 123, 122, 0.3);
}

/* Home-glyph icon to the left of the label — verdigris-aa fill so it
   reads as the "home" accent and not as decoration. In --active mode
   the parent flips to a verdigris fill, so the icon needs to flip to
   white to stay legible against it. */
.board-picker__set-home-btn-icon {
  flex-shrink: 0;
  color: #1A7B7A;
}

.board-picker__set-home-btn--active .board-picker__set-home-btn-icon {
  color: #fff;
}

/* "New Board" — pushed to the far right of the filter row via
   margin-left: auto. Background mirrors the home-page dashboard's
   `.md-btn--primary.md-btn--pill` so the entry-point reads the same
   wherever the user sees it (home dashboard, My Boards modal,
   boards page). Text/border colors match too, since the gradient is
   light enough that white text would be unreadable. */
.board-picker__new-board-btn {
  flex-shrink: 0;
  /* `margin-left: auto` previously pushed this to the far right of
     the filter row. Removed so the parent's `justify-content: center`
     can keep the (Change Home Board + New Board) pair grouped on
     the centerline instead. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  /* Stronger shadow so the low-contrast translucent gradient still
     reads as a raised, tappable control against the modal/page
     background (the gradient alone fails WCAG vs the surrounding
     surface). Outer drop + close inner lift + subtle inset top
     highlight for depth. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.board-picker__new-board-btn:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
  color: var(--md-ink);
}

/* Boards page "New Board" button (components/boards-browser.hbs) had
   no styling — gets the same gradient look as the My Boards modal +
   home dashboard pill, plus the matching pill shape since browser
   defaults left it unstyled before. */
.ub-boards-page__new-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: calc(6px + 0.25rem) calc(12px + 0.25rem);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  /* Stronger shadow so the low-contrast translucent gradient still
     reads as a raised, tappable control against the modal/page
     background (the gradient alone fails WCAG vs the surrounding
     surface). Outer drop + close inner lift + subtle inset top
     highlight for depth. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ub-boards-page__new-board-btn:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
  color: var(--md-ink);
}

/* Selection-mode banner: shown above the filter row while the user
   is in "Set/Change Home Board" mode. Reuses the verdigris notice
   styling from __no-home-msg so the two messages read as a family. */
.board-picker__selecting-home-msg {
  width: 92%;
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  background: rgba(26, 123, 122, 0.14);
  border: 1px solid rgba(26, 123, 122, 0.4);
  border-radius: 10px;
  color: #1A7B7A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.board-picker__home-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target. */
  min-height: 44px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.board-picker__home-btn:hover {
  border-color: #2A9D8F;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(42, 157, 143, 0.12);
}

.board-picker__home-btn--unset {
  border-color: rgba(26, 123, 122, 0.45);
  background: rgba(26, 123, 122, 0.06);
}

.board-picker__home-btn--unset:hover {
  border-color: #1A7B7A;
  background: rgba(26, 123, 122, 0.1);
}

.board-picker__no-home-msg {
  width: 90%;
  max-width: 480px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  background: rgba(26, 123, 122, 0.08);
  border: 1px solid rgba(26, 123, 122, 0.25);
  border-radius: 10px;
  color: #1B365D;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.board-picker__home-btn-icon {
  flex-shrink: 0;
  color: #1A7B7A;
}

.board-picker__home-btn-label {
  white-space: nowrap;
}

.board-picker__filter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.board-picker__filter:focus-within {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

.board-picker__filter-icon {
  flex-shrink: 0;
  color: #9CA3AF;
}

.board-picker__filter-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1B365D;
  min-width: 0;
}

.board-picker__filter-input:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .board-picker__filter-input:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.board-picker__filter-input::placeholder {
  color: #9CA3AF;
}

.board-picker__filter-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.08);
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.board-picker__filter-clear:hover {
  background: rgba(27, 54, 93, 0.14);
  color: #1B365D;
}

.board-picker__empty {
  grid-column: 1/-1;
  text-align: center;
  color: #9CA3AF;
  font-size: 15px;
  padding: 24px 0;
}

/* Tab strip — rendered as a single segmented-control unit so the
   individual pills read as one group. Shared across:
     - My Boards picker          (.board-picker__tabs)
     - Boards page tab strip     (.ub-boards-page__tabs — boards-browser)
     - Account page tab strip    (.ub-boards-page__tabs — user/index)
     - Home dashboard's boards   (.ub-boards-page__tabs — dashboard-user-boards)
   All four use the same class chain because the boards-browser /
   dashboard-user-boards components emit the same markup. Treatment:
   - Outer UL gets a tinted track + rounded container that "holds"
     the pills; `width: fit-content` + `margin: auto` centers it.
   - Above the group, a thin top divider visually separates it from
     whatever sits above (filter row / boards header / etc.).
   - Inner pills sit flush together (gap: 4px) and shed their
     individual borders, letting the active fill stand out against
     the shared track. */
.board-picker__tabs,
.ub-boards-page__tabs {
  list-style: none;
  padding: 4px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  background: rgba(13, 36, 56, 0.06);
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.05);
  position: relative;
}

/* Underline-style tab variant — drops the pill chrome (background,
   border, rounded shell, inset shadow) and treats each tab as a
   flat label with a verdigris-aa underline on the active item.
   Used by the boards page where the tabs sit BELOW the Boards
   Filter row instead of above it. Sits flush against the bottom
   edge of the filter row with a hairline separator above the
   active underline. */
.ub-boards-page__tabs.ub-boards-page__tabs--underline {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 4px 0 16px;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  gap: 0;
}

.ub-boards-page__tabs.ub-boards-page__tabs--underline > li {
  margin: 0;
}

.ub-boards-page__tabs.ub-boards-page__tabs--underline > li > a,
.ub-boards-page__tabs.ub-boards-page__tabs--underline > li > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  margin-bottom: -1px; /* overlap parent border so active underline replaces it */
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #5A6A85 !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ub-boards-page__tabs.ub-boards-page__tabs--underline > li > a:hover,
.ub-boards-page__tabs.ub-boards-page__tabs--underline > li > .dropdown-toggle:hover {
  color: #1B365D !important;
  border-bottom-color: rgba(27, 54, 93, 0.25) !important;
}

.ub-boards-page__tabs.ub-boards-page__tabs--underline > li.is-active > a,
.ub-boards-page__tabs.ub-boards-page__tabs--underline > li.is-active > .dropdown-toggle {
  color: #1B365D !important;
  border-bottom-color: #1A7B7A !important;
  font-weight: 700;
}

.ub-boards-page__tabs.ub-boards-page__tabs--underline > li.dropdown > .dropdown-menu {
  margin-top: 6px;
}

/* "More…" view dropdown on the Boards page — give it an opaque white panel and
   lift it above the board grid. It was rendering transparent (board cards
   showed through) and behind the cards. Covers both tab variants
   (--underline and --boards). */
.ub-boards-page__tabs li.dropdown > .dropdown-menu {
  background: #ffffff !important;
  z-index: 1080 !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(27, 54, 93, 0.16), 0 2px 6px rgba(27, 54, 93, 0.08) !important;
}

/* When the "More" dropdown is OPEN, raise its <li> above the board content below.
   The menu itself is z-index:1080, but the `> li { z-index: 1 }` rule above makes
   each tab its own stacking context — so without this the menu is capped to that
   level and the board grid (a later sibling) paints over it. Scoped to `.open`
   (Bootstrap toggles it on the li) so the closed pills never sit above the navbar. */
.ub-boards-page__tabs li.dropdown.open {
  z-index: 1080 !important;
}

/* Boards-page tab variant — segmented "chip" tabs that read as
   clearly tappable controls (vs. the prior underline-only treatment
   that AAC users mistook for plain text labels) WITHOUT borrowing
   the full-radius pill chrome the main navbar uses for the
   primary Home / Boards / Reports / Extras nav. Each tab is a
   rounded rectangle (8px radius — distinctly NOT pill) with a
   filled inactive surface so the affordance is visible from a
   glance, and an active state lifted by a verdigris fill so the
   selected view reads at a distance. Critically, the strip sits
   flush against the boards grid below — no separator, no margin
   gap, no border — so the tabs read as the "header" of the
   content they switch between, not a disconnected control. */
/* Row wrapper hosting the tab strip + the right-aligned "+ New
   Board" button on the same baseline. Owns the layered gradient
   divider beneath (moved off the tab <ul> so the seam spans the
   full row, including the button column on the right). */
.ub-boards-page__tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  position: relative;
  margin: 8px 0 18px;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Bottom padding lifts the pills off the row's gradient divider for breathing room. */
  padding: 0 0 8px;
  /* Tabs no longer carry the row margin — the parent .tabs-row
     does. Allow the tab strip to grow so it occupies all the width
     left of the trailing button. */
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 6px;
  position: relative;
}

/* ≤640px boards-section picker — at this width the styled
   `.ub-boards-page__tabs--boards` pill row collapses into a single
   native <select> dropdown so the section picker fits comfortably
   next to the New Board button on a phone-width viewport. The
   select fires the same `set_selected` action with the option's
   value (mine / public / root / starred / shared / private /
   prior_home), so all wiring is identical to the desktop pills. */
.ub-boards-page__tabs-mobile-select {
  display: none;
}

@media (max-width: 640px) {
  .ub-boards-page__tabs-row > .ub-boards-page__tabs.ub-boards-page__tabs--boards {
    display: none !important;
  }
  .ub-boards-page__tabs-mobile-select {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* Chunky pill so the control reads as a primary affordance at
       phone widths instead of a tiny system control. Native styling
       reset (appearance:none) so we control the chrome; a chevron
       SVG via background-image gives the dropdown affordance. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 36px 10px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1B365D;
    background-color: rgba(255, 255, 255, 0.92);
    /* Chevron stroke is %231B365D (URL-encoded $la-navy = #1B365D);
       hardcoded so we don't need Sass string interpolation inside
       the data URI, which sassc choked on in earlier attempts. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="%231B365D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    border: 1px solid rgba(27, 54, 93, 0.18);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05);
    cursor: pointer;
  }
  .ub-boards-page__tabs-mobile-select:focus-visible {
    outline: 2px solid rgba(42, 157, 143, 0.55);
    outline-offset: 2px;
  }
  /* New Board button drops to its own row beneath the picker.
     The tabs-row already has the select on it; allowing wrap and
     forcing both children to 100% basis stacks them vertically
     instead of cramming both into the single narrow row. */
  .ub-boards-page__tabs-row {
    flex-wrap: wrap !important;
  }
  .ub-boards-page__tabs-mobile-select {
    flex: 1 1 100% !important;
  }
  .ub-boards-page__boards-summary-new-btn--in-tabs-row {
    flex: 1 1 100% !important;
    margin-top: 8px !important;
  }
  /* Folders header — at this width the [+ New folder] / [Tag a board]
     action pills drop to their own row directly below the FOLDERS
     title/chevron row. Switched from flex-wrap (which left the
     chevron stranded on its own row depending on basis math) to
     CSS Grid with explicit `grid-template-areas`. Grid honors the
     area assignment regardless of source order, so the actions
     <div> between the toggle and the chevron in the DOM still
     visually lands on row 2 while the chevron stays on row 1's
     right edge. The subtitle stays hidden at this width to keep
     row 1 uncluttered. */
  .ub-boards-page__folders-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "toggle chevron" "actions actions" !important;
    align-items: center !important;
  }
  .ub-boards-page__folders-toggle {
    grid-area: toggle !important;
  }
  .ub-boards-page__folders-chevron-btn {
    grid-area: chevron !important;
  }
  .ub-boards-page__folders-subtitle {
    display: none !important;
  }
  .ub-boards-page__folders-actions--header {
    grid-area: actions !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    border-top: 1px solid rgba(17, 26, 46, 0.06) !important;
  }
  /* Boards-summary header — flex-column layout. Children stack
     vertically with explicit align-self per item:
       Row 1: BOARDS title    (align-self: flex-start, left)
       Row 2: Stats pills      (align-self: flex-start, left)
       Row 3: Change Home Board (align-self: flex-end, right)
     Replaces a prior CSS Grid attempt that should have worked per
     the cascade math but the user reported as not visibly applying.
     flex-column achieves the same row-separation without the
     grid-template-areas math, eliminating any chance of a
     grid-specific quirk. Parent-anchored selector keeps specificity
     at (0,2,0) so the cascade is unambiguous over the base rule
     defined later in source order. */
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 6px !important;
  }
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header > .ub-boards-page__boards-summary-title {
    align-self: flex-start !important;
  }
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header > .ub-boards-page__boards-summary-stats {
    align-self: flex-start !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  /* Change Home Board lands on its own row beneath the stats and
     centers via align-self: center. The base `--in-header
     { margin-left: auto }` is overridden with symmetric auto margins
     in the ≤768px rule below so it stays centered (a single auto
     margin would pin it to one edge). */
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header > .ub-boards-page__set-home-btn {
    align-self: center !important;
  }
  /* Hairline ::before was a row-separator between title and stats
     when they shared a row. Stats now sit in their own row, so
     hide the divider to avoid a stray vertical pip floating at
     row 2. */
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header > .ub-boards-page__boards-summary-stats::before {
    display: none !important;
  }
}
/* ≤460px — Boards-section in-tabs-row New Board button hides at
   this very narrow viewport. The page-level
   `.ub-boards-page__new-board-btn` at the top of the boards page
   (see boards-browser.hbs:18-24) stays as the only New Board
   affordance at this width. All other mobile-collapse behavior
   (folders-header grid, boards-summary-header grid, mobile select
   picker, etc.) lives in the ≤640px block above and cascades down
   to ≤460 via the standard @media min-/max-width chain. */
@media (max-width: 460px) {
  .ub-boards-page__boards-summary-new-btn--in-tabs-row {
    display: none !important;
  }
}
/* Modern layered divider — sits flush with the tab bottoms. Three
   stacked visual elements give it depth without resorting to a
   plain 1px line:
     1. Top hairline: a near-white highlight (1px) so the divider
        catches light along its top edge — reads as a polished
        seam, not a flat gray line.
     2. Mid line: a multi-stop gradient (transparent → verdigris
        bloom → navy → fade) — colored center, transparent ends so
        the line never terminates in hard pixels.
     3. Drop-shadow halos beneath: a tight 4px navy halo plus a
        wider 16px verdigris-tinted bloom, both with negative
        y-offsets so the depth fades into the body content.
   The active tab overlaps this divider (white border-bottom +
   z-index above) so the hairline "stops" behind the selected
   tab — sells the "tabs riding on top of the panel" metaphor. */
.ub-boards-page__tabs-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.45) 14%, rgba(27, 54, 93, 0.32) 42%, rgba(27, 54, 93, 0.22) 70%, rgba(26, 123, 122, 0.25) 88%, rgba(27, 54, 93, 0) 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.65), 0 2px 4px -1px rgba(27, 54, 93, 0.2), 0 6px 14px -6px rgba(26, 123, 122, 0.28), 0 12px 28px -14px rgba(27, 54, 93, 0.18);
  pointer-events: none;
  z-index: 1;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li {
  margin: 0;
  position: relative;
  z-index: 1;
  /* Each tab shrinks to fit its own content width (not stretched). */
  flex: 0 0 auto;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > a,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > .dropdown-toggle {
  /* Pill BUTTONS — matches the board-picker page's board-option pills
     (rounded 999px, soft white gradient, verdigris glow on hover/active).
     Replaced the former file-folder tabs. Padding/font kept slightly larger
     than the picker's for the AAC touch-target baseline. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #1B365D !important;
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > a:hover,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > a:focus-visible,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > .dropdown-toggle:hover,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li > .dropdown-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #1B365D !important;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.22), 0 6px 16px rgba(26, 123, 122, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  outline: none;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li.is-active > a,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li.is-active > .dropdown-toggle {
  /* Active pill — same soft white pill as the board-picker's selected
     option, lifted with the verdigris glow (no top accent bar / folder
     overlap tricks; this is a free-floating pill, not a folder tab). */
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #1B365D !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.22), 0 6px 16px rgba(26, 123, 122, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  z-index: 2;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li.is-active > a:hover,
.ub-boards-page__tabs.ub-boards-page__tabs--boards > li.is-active > .dropdown-toggle:hover {
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #1B365D !important;
}

.ub-boards-page__tabs.ub-boards-page__tabs--boards > li.dropdown > .dropdown-menu {
  margin-top: 6px;
}

/* Divider removed — the {{board-folders-section}} component now
   sits between the filter row and the tabs (Mine tab only) and
   provides its own visual section break. */
/* ──────────────────────────────────────────────────────────────
   board-folders-section — reusable folders accordion shared by the
   boards page (available-boards-section) and the My Boards picker.
   Visual vocabulary borrowed from the boards-page rules at
   .ub-boards-page__folders-section so the two surfaces read as the
   same control. */
.board-folders-section {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 720px;
  /* Bottom margin pushes the section away from the Mine/Public tab
     strip below — without it, the tabs sit immediately under the
     accordion. 18px matches the gap the boards page uses between
     its surrounding sections. */
  margin: 12px auto 18px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  border-radius: 22px;
  /* Match `.nb-section` (create-board-new chrome) — the same
     "sunken-in" inset shadow + cool-tinted near-white gradient the
     boards page now reads as. Gives the folders accordion the
     pressed-into-the-surface look the boards page has and the modal
     was missing. */
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.board-folders-section--open {
  border-color: rgba(13, 36, 56, 0.12);
  /* Keep the inset chrome AND add a soft outer halo when expanded
     so the accordion reads as the active section. */
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(13, 36, 56, 0.08);
}

.board-folders-section__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #1B365D;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.board-folders-section__toggle:hover,
.board-folders-section__toggle:focus-visible {
  background: rgba(27, 54, 93, 0.04);
  outline: none;
}

.board-folders-section__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.board-folders-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.board-folders-section__subtitle {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 400;
  color: rgba(27, 54, 93, 0.62);
  letter-spacing: 0.005em;
}

.board-folders-section__chevron {
  flex: 0 0 auto;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.18s ease;
}

.board-folders-section--open .board-folders-section__chevron {
  transform: rotate(180deg);
}

.board-folders-section__body {
  padding: 4px 16px 14px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-folders-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.board-folders-section__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.board-folders-section__action-btn:hover,
.board-folders-section__action-btn:focus-visible {
  background: rgba(27, 54, 93, 0.06);
  border-color: rgba(27, 54, 93, 0.24);
  outline: none;
}

.board-folders-section__filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.board-folders-section__filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.board-folders-section__filter-input {
  flex: 1 1 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  font-size: 13px;
  color: #1B365D;
}

.board-folders-section__filter-clear {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  color: #1B365D;
}

.board-folders-section__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-folders-section__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.board-folders-section__chip:hover,
.board-folders-section__chip:focus-visible {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.3);
  transform: translateY(-1px);
  outline: none;
}

.board-folders-section__chip-back,
.board-folders-section__chip-tab,
.board-folders-section__chip-card {
  display: inline-flex;
  align-items: center;
}

.board-folders-section__chip-name {
  letter-spacing: 0.005em;
}

.board-folders-section__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
  font-size: 11px;
  font-weight: 700;
}

.board-folders-section__strip-empty {
  font-size: 12px;
  color: rgba(27, 54, 93, 0.5);
  padding: 6px 4px;
}

.board-folders-section__strip-empty-text {
  font-style: italic;
}

.board-folders-section__drilled-in {
  width: 92%;
  max-width: 720px;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid rgba(42, 157, 143, 0.22);
}

.board-folders-section__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.board-folders-section__back:hover,
.board-folders-section__back:focus-visible {
  background: rgba(27, 54, 93, 0.06);
  border-color: rgba(27, 54, 93, 0.24);
  outline: none;
}

.board-folders-section__back-arrow {
  font-size: 14px;
  line-height: 1;
}

.board-folders-section__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1A7B7A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* Push the tabs down so the ::before divider has room to sit above
   the segmented control without overlapping whatever's above it. */
.board-picker__filter-row + .board-picker__tabs,
.ub-boards-page__boards-header + .ub-boards-page__tabs {
  margin-top: 18px;
}

.board-picker__tabs > li,
.ub-boards-page__tabs > li {
  display: inline-flex;
}

.board-picker__tabs > li > a,
.board-picker__tabs > li > .dropdown-toggle,
.ub-boards-page__tabs > li > a,
.ub-boards-page__tabs > li > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(13, 36, 56, 0.7);
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.board-picker__tabs > li > a:hover,
.board-picker__tabs > li > a:focus-visible,
.board-picker__tabs > li > .dropdown-toggle:hover,
.board-picker__tabs > li > .dropdown-toggle:focus-visible,
.ub-boards-page__tabs > li > a:hover,
.ub-boards-page__tabs > li > a:focus-visible,
.ub-boards-page__tabs > li > .dropdown-toggle:hover,
.ub-boards-page__tabs > li > .dropdown-toggle:focus-visible {
  color: #1B365D;
  background: rgba(13, 36, 56, 0.07);
  outline: none;
  text-decoration: none;
}

.board-picker__tabs > li.is-active > a,
.board-picker__tabs > li.is-active > .dropdown-toggle,
.ub-boards-page__tabs > li.is-active > a,
.ub-boards-page__tabs > li.is-active > .dropdown-toggle {
  color: #fff;
  background: #46505F;
}

.board-picker__tabs > li.is-active > a:hover,
.board-picker__tabs > li.is-active > .dropdown-toggle:hover,
.ub-boards-page__tabs > li.is-active > a:hover,
.ub-boards-page__tabs > li.is-active > .dropdown-toggle:hover {
  color: #fff;
  background: #46505F;
}

/* Filter input sits in its own row directly below the tab strip
   (was previously in .board-picker__filter-row alongside the buttons).
   Constrains width and centers so the filter doesn't stretch full-bleed
   on wide modals. 12px top margin gives breathing room from the
   segmented tab control above. */
.board-picker__filter-below-tabs {
  width: 92%;
  max-width: 720px;
  margin: 12px auto 0;
}

/* ──────────────────────────────────────────────────────────────
   FOLDERS STRIP in the My Boards picker (Mine tab only) — mirrors
   the boards-page folders accordion at
   .ub-boards-page__folders-section but scoped to the modal width
   constraints and the picker's flat-tile vocabulary. Sits between
   the tab strip and the filter input as a section break (replacing
   the prior implicit divider).
   ────────────────────────────────────────────────────────────── */
.board-picker__folders {
  width: 92%;
  max-width: 720px;
  margin: 12px auto 0;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.025), rgba(27, 54, 93, 0.015));
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.board-picker__folders--open {
  border-color: rgba(27, 54, 93, 0.16);
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.06);
}

.board-picker__folders-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #1B365D;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.board-picker__folders-toggle:hover,
.board-picker__folders-toggle:focus-visible {
  background: rgba(27, 54, 93, 0.04);
  outline: none;
}

.board-picker__folders-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.board-picker__folders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.board-picker__folders-subtitle {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 400;
  color: rgba(27, 54, 93, 0.62);
  letter-spacing: 0.005em;
}

.board-picker__folders-chevron {
  flex: 0 0 auto;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.18s ease;
}

.board-picker__folders--open .board-picker__folders-chevron {
  transform: rotate(180deg);
}

.board-picker__folders-body {
  padding: 4px 16px 14px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-picker__folders-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.board-picker__folders-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.board-picker__folders-action-btn:hover,
.board-picker__folders-action-btn:focus-visible {
  background: rgba(27, 54, 93, 0.06);
  border-color: rgba(27, 54, 93, 0.24);
  outline: none;
}

.board-picker__folder-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.board-picker__folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.board-picker__folder-chip:hover,
.board-picker__folder-chip:focus-visible {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.3);
  transform: translateY(-1px);
  outline: none;
}

.board-picker__folder-chip-name {
  letter-spacing: 0.005em;
}

.board-picker__folder-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
  font-size: 11px;
  font-weight: 700;
}

/* Drilled-in state — replaces the accordion entirely with a
   back-to-all affordance + current-folder label. */
.board-picker__folder-drilled-in {
  width: 92%;
  max-width: 720px;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid rgba(42, 157, 143, 0.22);
}

.board-picker__folder-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #1B365D;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.board-picker__folder-back:hover,
.board-picker__folder-back:focus-visible {
  background: rgba(27, 54, 93, 0.06);
  border-color: rgba(27, 54, 93, 0.24);
  outline: none;
}

.board-picker__folder-back-arrow {
  font-size: 14px;
  line-height: 1;
}

.board-picker__folder-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1A7B7A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

#board_picker_inner {
  /* Modal body now renders the shared {{available-boards-section}}
     component (same one the boards page uses). The component owns
     its own grid layout (`.ub-boards-page__board-grid`), filter
     row, tabs row, and folders strip — this wrapper is just a
     block container that sets the modal's inner padding + max
     width. The earlier CSS grid declarations were dropped because
     they conflicted with the component's internal flex/grid
     layouts (each of the component's top-level elements would
     have been treated as a grid cell here). */
  width: 92%;
  margin: 0 auto;
  padding: 16px 0 32px;
}

.board-picker__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  font-size: 1.125rem; /* ~18px — honors AAC "~30% larger" font-size requirement */
  font-weight: 500;
  color: #1f2937; /* 14.68:1 contrast on white — far exceeds WCAG AAA */
  text-align: center;
}

.board-picker__loading-text {
  display: inline-block;
}

.board-picker__loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(42, 157, 143, 0.18);
  border-top-color: #2a9d8f;
  animation: ll-loading-overlay-spin 0.9s linear infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .board-picker__loading-spinner {
    animation-duration: 2.5s;
  }
}
.board-picker__item {
  /* Transparent position-relative wrapper. The actual card chrome
     (background, border, hover lift, image, name) is rendered by
     the nested {{board-icon}} component's .simple_board_icon shell
     — same component the boards page uses — so the picker stays
     visually in sync with the boards page automatically. This
     wrapper only provides:
       - position: relative for the floating HOME BOARD / CURRENTLY
         VIEWING badges and the heart pill positioned inside it
       - --home / --current / --liked outline halos (see below)
     The old standalone card chrome (background, border-radius,
     padding, hover lift) was removed when this surface switched
     to the shared component on 2026-05-23. */
  position: relative;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
}

.board-picker__thumb {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(76, 134, 216, 0.1), rgba(76, 134, 216, 0.05));
  border: 1px solid rgba(27, 42, 74, 0.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
  transition: box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.board-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.board-picker__item:hover .board-picker__thumb {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.board-picker__name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  max-width: 100%;
  color: #2d3f5e;
  transition: color 0.18s ease;
}

/* Home Board tile distinction in the My Boards picker — mirrors the
   dashboard board strip's `.md-strip__item--home` + `.md-strip__home-
   badge` treatment so the user's home board reads as the "primary"
   tile in this list too. Verdigris outline + soft glow halo on the
   tile, floating uppercase "HOME BOARD" pill crowning it. */
.board-picker__item--home {
  position: relative;
}

/* Halo paint moved to the INNER .btn.simple_board_icon — the
   outer .board-picker__item wrapper is now a transparent
   position-relative container (chrome lives on the shared
   board-icon component). Higher specificity beats the base
   .simple_board_icon rule. */
.board-picker__item--home .btn.simple_board_icon {
  border-color: #2A9D8F !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.12), 0 8px 24px rgba(42, 157, 143, 0.18), 0 2px 8px rgba(17, 26, 46, 0.05) !important;
}

.board-picker__home-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2A9D8F, #1A7B7A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.22);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Currently-viewing tile + badge — distinct visual treatment from
   the home-board tile so users can tell the two states apart at a
   glance. Uses the brand slate-blue family (rather than verdigris)
   for the outline and shadow halo; the bottom-anchored "CURRENTLY
   VIEWING" badge mirrors the top-anchored "HOME BOARD" pill so when
   a tile is BOTH home AND currently active, the two badges stack
   nicely (home on top, current on bottom). */
.board-picker__item--current {
  position: relative;
}

/* Halo paint moved to the INNER .btn.simple_board_icon (same
   pattern as --home above). */
.board-picker__item--current .btn.simple_board_icon {
  border-color: #5A6A85 !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(90, 106, 133, 0.14), 0 8px 24px rgba(90, 106, 133, 0.2), 0 2px 8px rgba(17, 26, 46, 0.05) !important;
}

/* Stack the two pills when a tile is both home AND current. The
   home pill sits at top:-10px; the current pill sits at bottom:-10px
   so they don't overlap. */
.board-picker__current-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #5A6A85, #46505F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.22);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Filled-heart indicator in the top-right of a liked (starred) tile.
   The tile itself is the clickable target, so the heart needs to be
   inert (pointer-events:none) so a click on it still navigates.
   Same visual treatment across all three surfaces (My Boards picker,
   boards page, dashboard preview strip) so the meaning carries. */
.board-picker__item--liked,
.ub-boards-page__board-item--liked,
.md-strip__item--liked {
  position: relative;
}

.board-picker__heart,
.ub-boards-page__board-item-heart,
.md-strip__heart {
  position: absolute;
  /* Sits in the top-right of the tile, BELOW the grid-size badge so
     the two stack vertically without overlapping. Size badge is ~20px
     tall at top:8px (ends around y=28); heart starts at top:34px to
     leave a small gap. Stays right-anchored at 12px. */
  top: 34px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Glassy raised pill — three stacked background layers for an
     unmissable difference from the prior flat translucent chip:
       1. A bright crescent radial highlight at the top — the obvious
          glass sheen (95% white, extends nearly halfway down).
       2. A soft warmer radial blush at the bottom — pulls in a hint
          of pink so the disc reads as "warm glass over a heart".
       3. A vertical linear gradient white → faint pink as the
          mid-tone fill underneath both highlights.
     Stronger backdrop blur + saturation for a fuller frosted read.
     Multi-layer outer shadow with deeper alphas so the disc lifts
     clearly off the tile (~16px halo). !important defends against
     the `> *` shorthand resets the boards-page grid applies to
     direct children of liked tiles. */
  /* Neutral white-to-pale-silver disc — the previous pink tint
     clashed with the new silver/verdigris heart and read as too
     attention-grabbing. Now reads as a cool glass tile that lets
     the silver-verdigris heart inside lead. */
  background: radial-gradient(circle at 50% 12%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 238, 244, 0.86) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgb(255, 255, 255) !important;
  /* `color` is no longer wired to the heart fill (SVG fill replaced
     by a CSS gradient mask) but kept defined for any other inline
     accent that might still inherit it. */
  color: #2a9d8f !important;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 -1.5px 0 rgba(13, 36, 56, 0.08), 0 1px 2px rgba(13, 36, 56, 0.1), 0 6px 14px rgba(13, 36, 56, 0.16), 0 16px 32px rgba(13, 36, 56, 0.14) !important;
  pointer-events: none;
  z-index: 2;
}

/* On the boards page, a `> .simple_board_holder > *` rule earlier in
   app.scss (line ~36561) forces every direct child to `width: 100%;
   display: flex; flex-direction: column; align-items: stretch`,
   which stretches the heart's white circle into a wide rectangle and
   distorts the SVG. This higher-specificity selector (0,3,1) wins
   against the offending (0,2,1) rule and restores the small square
   heart pill. Same defensive boost given to the SVG inside. */
.ub-boards-page__board-item.simple_board_holder > .ub-boards-page__board-item-heart {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

/* Heart icon TOP-LEFT placement — consistent across the boards
   page, the My Boards picker modal, AND the dashboard home strip.
   Top-left is empty real estate on every surface (the
   `.board-icon__info` i+grid chip lives top-right, the home-board
   badge sits top-center), so the heart anchors there cleanly
   without competing with the grid-size pill. The dashboard-specific
   `.md-strip__heart` override further down adjusts size + offsets
   for the smaller strip tile but keeps the same top-left anchor. */
.ub-boards-page__board-item-heart {
  top: 12px;
  left: 12px;
  right: auto;
}

/* My Boards modal — heart moved to the TOP-LEFT corner to match the
   boards-page placement. The right edge of the modal tile already
   holds nothing competing (the home-board badge centers above the
   card, the CURRENTLY-VIEWING badge anchors to the bottom), so the
   heart can park cleanly in either corner — top-left is consistent
   with the boards page. Overrides the shared top:34px/right:12px
   rule above via class specificity (0,1,0 each, but this rule wins
   by source order — comes after — and explicitly sets right: auto
   so the right anchor is released). */
.board-picker__heart {
  top: 12px;
  left: 12px;
  right: auto;
}

.ub-boards-page__board-item.simple_board_holder > .ub-boards-page__board-item-heart svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Hide the inline red heart SVG — replaced by a CSS-rendered
   silver→verdigris gradient heart on the parent span's ::before
   pseudo-element below. No template changes required; the SVG
   stays in markup (good for SEO/printed view fallback if CSS
   doesn't load) but is visually swapped out. */
.board-picker__heart svg,
.ub-boards-page__board-item-heart svg,
.md-strip__heart svg {
  display: none !important;
}

/* Silver → verdigris gradient heart, rendered via SVG mask on a
   ::before pseudo so a single CSS rule covers all four template
   surfaces (picker / boards page / dashboard strip / user.boards
   page sibling). The mask uses the same heart path data as the
   inline SVG; the gradient runs cool silver at the top to the
   project's verdigris brand color at the bottom. Subtle drop-
   shadow keeps the heart looking embossed inside the glass disc
   without the pink-red distraction. */
.board-picker__heart::before,
.ub-boards-page__board-item-heart::before,
.md-strip__heart::before {
  content: "";
  display: block;
  width: 65%;
  height: 65%;
  background: linear-gradient(180deg, #c8d2de 0%, #2A9D8F 100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-7.5-4.5-9.5-9.5C1.2 7.6 3.6 4 7.3 4c2 0 3.5 1 4.7 2.6C13.2 5 14.7 4 16.7 4c3.7 0 6.1 3.6 4.8 7.5C19.5 16.5 12 21 12 21z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-7.5-4.5-9.5-9.5C1.2 7.6 3.6 4 7.3 4c2 0 3.5 1 4.7 2.6C13.2 5 14.7 4 16.7 4c3.7 0 6.1 3.6 4.8 7.5C19.5 16.5 12 21 12 21z"/></svg>') center/contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 2px rgba(13, 36, 56, 0.25));
}

/* Dashboard strip tile is smaller than the picker/boards-page tiles,
   so dial the heart down a notch. Anchored top-LEFT to match the
   boards-page + picker placement; the shared base rule sets the
   right anchor so we release it here. */
.md-strip__heart {
  width: 22px;
  height: 22px;
  top: 4px;
  left: 4px;
  right: auto;
}

#within_ember.board-alt-view #inner_header:has(#speak) #home_button.btn::after,
#within_ember.board-view #inner_header:has(#speak) #home_button.btn::after {
  display: none !important;
}

/* ============================================================
   User Boards Page  (user.boards route)
   Styled to match authenticated-view / landing-alt aesthetic
   ============================================================ */
.ub-boards-page {
  padding: 0 0 48px;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  min-height: 80vh;
  box-sizing: border-box;
  animation: md-reports-fade-in 0.25s ease-out both;
  /* ── Folders accordion (boards-page inline variant, restored from
     pre-c8ffbc58c styling). Distinct from the My Boards modal's
     reusable `{{board-folders-section}}` component — kept inline here
     so the boards-page treatment can stay bespoke (sunken-in
     nb-section chrome, larger header, gradient strip).
     The picker keeps `.board-folders-section`; this is `.ub-boards-page__folders-section`. */
}
.ub-boards-page__folders-section {
  /* Sunken-in surface mirroring create-board-new `.nb-section`
     chrome (cool-blue gradient + inset top shadow + subtle
     highlights). Resting state; body padding grows when expanded. */
  margin: 0 0 16px;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.ub-boards-page__folders-toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.12s ease;
}
.ub-boards-page__folders-toggle:hover {
  background: rgba(13, 36, 56, 0.04);
}
.ub-boards-page__folders-toggle:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.5);
  outline-offset: -2px;
}
.ub-boards-page__folders-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
}
.ub-boards-page__folders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(26, 123, 122, 0.14);
  color: #1A7B7A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ub-boards-page__folders-subtitle {
  font-weight: 400;
  font-size: 14.3px;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7a8e;
  /* Divider moved to the LEFT of the count chip (see
     &__folders-count::before above) — subtitle just gets a
     padding-left for clean adjacent spacing now. */
  padding-left: 8px;
  margin-left: 4px;
  margin-right: 12px;
}
.ub-boards-page__folders-chevron {
  margin-left: auto;
  color: rgba(13, 36, 56, 0.45);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.ub-boards-page__folders-section--open .ub-boards-page__folders-chevron {
  transform: rotate(180deg);
}
.ub-boards-page__folders-body {
  /* Padding + gap + display live on the duplicate folders-body
     rule lower in this file (under the second &__folders-section
     cluster) — that rule wins the cascade. Keep this rule scoped
     to the visual additions (divider, glow gradient, layered
     shadow) so devtools shows a single padding source. */
  border-top: 1px solid rgba(13, 36, 56, 0.12);
  background: radial-gradient(ellipse 80% 70% at 30% 10%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 75%), radial-gradient(ellipse 60% 60% at 80% 90%, rgba(44, 183, 176, 0.1) 0%, rgba(44, 183, 176, 0.04) 50%, rgba(44, 183, 176, 0) 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 2px 4px -1px rgba(27, 54, 93, 0.16), inset 0 8px 14px -8px rgba(27, 54, 93, 0.12);
}
.ub-boards-page {
  /* Shared glassy chip used to host the small section-header icons
     (folder icon in the Folders accordion, grid icon in the Boards
     summary header). Squarish — rounded square, not pill — with a
     translucent white background + backdrop blur + soft inset
     highlight + subtle outer shadow so the icon sits in a frosted
     glass tile on top of the sunken nb-section gradient behind it. */
}
.ub-boards-page__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.08), 0 4px 12px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.04);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: #46505F;
  flex: 0 0 auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ub-boards-page__section-icon > svg {
  display: block;
}
.ub-boards-page {
  /* ── Boards Summary section (sibling of __folders-section, below it).
     Same sunken-in nb-section chrome — cool-blue gradient + inset
     shadow — so the two surfaces read as the same control family.
     Distinct from folders by being static (no toggle, no chevron) and
     by surfacing the BOARDS / FAVORITES counts + New Board CTA in
     the header. Body is always-open and wraps the filter row, tabs,
     drill-in context, and the board grid. */
}
.ub-boards-page__boards-summary-section {
  margin: 0 0 16px;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
  /* overflow: hidden removed — Chromium and WebKit can clip the
     HTML5 drag preview to an ancestor's overflow:hidden box,
     which made board-card dragstart appear to "do nothing"
     (the user couldn't see the drag ghost leave the section).
     The body element below applies matching bottom-corner radii
     to its own background so we don't lose the rounded clipping
     on the inner gradient. */
}
.ub-boards-page__boards-summary-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.ub-boards-page__boards-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
  flex: 0 0 auto;
}
.ub-boards-page {
  /* Dual-stat split — replaces the prior single "boards count" chip.
     One pill for "in folders" (slate-navy, matches the Folders section
     family above), one for "in this section" (verdigris, matches the
     BOARDS section's own accent). Same hairline-divider-before-stats
     treatment as the Folders header (see &__folders-count::before),
     so the BOARDS label is visually separated from the stats group. */
}
.ub-boards-page__boards-summary-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  position: relative;
}
.ub-boards-page__boards-summary-stats::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(17, 26, 46, 0.22);
  pointer-events: none;
}
.ub-boards-page__boards-summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.ub-boards-page {
  /* Folder-tagged subset — slate tone so the eye reads it as "lives
     up in the folders strip", not as the BOARDS section's own count. */
}
.ub-boards-page__boards-summary-stat--in-folders {
  background: rgba(27, 54, 93, 0.08);
  color: rgba(27, 54, 93, 0.78);
}
.ub-boards-page {
  /* Unfiled subset — verdigris tint matches the BOARDS section's
     primary accent (same family as the old count chip color). */
}
.ub-boards-page__boards-summary-stat--unfiled {
  background: rgba(26, 123, 122, 0.14);
  color: #1A7B7A;
}
.ub-boards-page__boards-summary-stat-icon {
  flex-shrink: 0;
  opacity: 0.9;
}
.ub-boards-page__boards-summary-stat-num {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.ub-boards-page__boards-summary-stat-label {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ub-boards-page {
  /* Tiny middle-dot between the two stat pills. Same hairline color
     as the divider before the group so the dot reads as a peer mark. */
}
.ub-boards-page__boards-summary-stats-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.22);
  flex-shrink: 0;
}
.ub-boards-page {
  /* Info affordance to the right of the "in this section" pill —
     only renders when the user's home board is tagged into a folder
     (myBoardsUnfiledCount adds +1 for the duplicate-visible-tile rule
     in that case). Clicking the icon opens a small popover that
     explains the +1 to the user. */
}
.ub-boards-page__boards-summary-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}
.ub-boards-page__boards-summary-info-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(27, 54, 93, 0.55);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.12s ease, color 0.12s ease;
}
.ub-boards-page__boards-summary-info-btn:hover, .ub-boards-page__boards-summary-info-btn:focus-visible {
  background: rgba(27, 54, 93, 0.06);
  color: #1A7B7A;
  outline: none;
}
.ub-boards-page__boards-summary-info-btn--open {
  background: rgba(26, 123, 122, 0.14);
  color: #1A7B7A;
}
.ub-boards-page {
  /* Popover panel — anchored under the icon, modern glass chrome
     matching the page's other floating chips (the .info / .board-icon__info
     family). Capped width so long copy wraps cleanly; z-index sits
     below the topbar per the $aac-z-* contract. */
}
.ub-boards-page__boards-summary-info-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 150;
  min-width: 260px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08), 0 12px 28px rgba(27, 54, 93, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #46505F;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  /* Triangular caret pointing up at the trigger icon. */
}
.ub-boards-page__boards-summary-info-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid rgba(27, 54, 93, 0.12);
  border-left: 1px solid rgba(27, 54, 93, 0.12);
  transform: rotate(45deg);
  box-shadow: -1px -1px 1px rgba(27, 54, 93, 0.02);
}
.ub-boards-page__boards-summary-info-popover-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1A7B7A;
  margin-bottom: 4px;
}
.ub-boards-page__boards-summary-info-popover-body {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(27, 54, 93, 0.82);
}
.ub-boards-page {
  /* New Board CTA — pinned right via margin-left:auto. Pill chrome
     matches the boards-page New Board button family (rounded, light
     tactile shadow, hover lift). */
  /* Matches the Change Home Board button (set-home-btn) so the two
     boards-page entrypoints read as the same button family. */
}
.ub-boards-page__boards-summary-new-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__boards-summary-new-btn:hover, .ub-boards-page__boards-summary-new-btn:focus-visible {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}
.ub-boards-page {
  /* In-tabs-row positional modifier — lifts the button 1rem off the
     layered divider beneath the tabs so it doesn't sit directly on
     the gradient hairline. The parent .tabs-row uses
     align-items: flex-end so without this nudge the button's
     bottom edge would touch the divider. */
}
.ub-boards-page__boards-summary-new-btn--in-tabs-row {
  margin-bottom: 1rem;
}
.ub-boards-page__boards-summary-body {
  /* Matches the folders body's top padding + layered divider so
     both sections read as members of the same chrome family.
     Bottom-corner radii match the parent section — replaces the
     parent's overflow:hidden so the body's gradient still hugs
     the rounded shell without clipping any drag previews that
     leave the section. */
  padding: 26px 22px 18px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(13, 36, 56, 0.12);
  /* Soft inner glow — same two-layer radial bloom as the folders
     body. Primary near-white bloom top-left + cooler verdigris
     bloom lower-right keeps the glow asymmetric and modern. */
  background: radial-gradient(ellipse 80% 70% at 30% 10%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 75%), radial-gradient(ellipse 60% 60% at 80% 90%, rgba(44, 183, 176, 0.1) 0%, rgba(44, 183, 176, 0.04) 50%, rgba(44, 183, 176, 0) 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 2px 4px -1px rgba(27, 54, 93, 0.16), inset 0 8px 14px -8px rgba(27, 54, 93, 0.12);
}
.ub-boards-page {
  /* Section heading aliases ("(Vocabularies & Page-Sets)") — modern
     parenthetical treatment. Lighter weight than the primary "Boards"
     heading, muted color, slightly smaller. The aliases sit inline
     after the primary term so the three names read as synonyms of
     one concept, not three separate things. */
}
.ub-boards-page__boards-title-primary {
  font-weight: inherit;
  color: inherit;
}
.ub-boards-page__boards-title-aliases {
  margin-left: 0.5em;
  font-weight: 400;
  /* Slightly smaller than the .ub-boards-page__boards-title
     primary heading (1.97rem). Using calc keeps the size offset
     stable even if the rem root changes — same visual relationship
     at any zoom level. 2px feels just-smaller-than-heading so the
     aliases read as part of the same title line, not a subtitle. */
  font-size: calc(1.97rem - 2px);
  letter-spacing: 0.015em;
  /* Brand verdigris-AA — the same accent the folders count chip
     uses, so the alias parenthetical reads as a teal "aka" hint
     that ties back to the section accent palette. */
  color: #1A7B7A;
  vertical-align: middle;
  white-space: nowrap;
}
.ub-boards-page {
  /* Narrow viewports: when the parenthetical aliases wrap to a new
     line below the primary "Boards" heading, the 0.5em left margin
     (used for the inline gap on wider screens) becomes a leftover
     indent on the wrapped line. Reset it to 0 so the wrapped
     aliases align flush with the heading's left edge. */
}
@media (max-width: 555px) {
  .ub-boards-page__boards-title-aliases {
    margin-left: 0;
  }
}
.ub-boards-page__folders-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ub-boards-page {
  /* Toolbar row: Folders Filter on the left, action buttons on the
     right. Sits at the top of the expanded folders body, between the
     divider beneath the title row and the folder strip below. */
}
.ub-boards-page__folders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ub-boards-page__folders-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #fff;
  color: #46505F;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* Subtle layered shadow lifts the pills off the inset folders
     surface — soft outer drop + 1px highlight at the top so the
     white pill reads as a tactile control rather than sinking into
     the cool-blue gradient behind it. Hover deepens the lift for
     press feedback. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 2px 8px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folders-action-btn:hover {
  background: rgba(17, 26, 46, 0.05);
  border-color: rgba(17, 26, 46, 0.2);
  color: #1b2a4a;
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.ub-boards-page__folder-filter-form {
  display: flex;
  /* Left-aligned now that the filter shares a row with the New
     folder / Tag a board action buttons (see __folders-toolbar). */
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.ub-boards-page__folder-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.ub-boards-page {
  /* Folder filter input — premium glassy treatment matching the
     boards filter input. See &__filter-input above for design
     rationale (cool inset gradient + navy hairline + verdigris
     focus glow + italic muted-slate placeholder). */
}
.ub-boards-page__folder-filter-input {
  width: 100%;
  max-width: 300px;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.95) 0%, rgba(252, 253, 255, 0.95) 100%);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__folder-filter-input::placeholder {
  color: rgba(90, 106, 133, 0.65);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.ub-boards-page__folder-filter-input:hover {
  border-color: rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, rgba(248, 251, 254, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.ub-boards-page__folder-filter-input:focus, .ub-boards-page__folder-filter-input:focus-visible {
  outline: none;
  border-color: rgba(26, 123, 122, 0.55);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 0 0 3px rgba(26, 123, 122, 0.18), 0 1px 2px rgba(27, 54, 93, 0.04);
}
.ub-boards-page__folder-filter-clear {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #5A6A85;
  background: rgba(246, 247, 250, 0.9);
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  cursor: pointer;
  white-space: nowrap;
}
.ub-boards-page__folder-filter-clear:hover {
  color: #147F82;
  border-color: rgba(20, 127, 130, 0.35);
  background: rgba(20, 127, 130, 0.06);
}
.ub-boards-page__folder-filter-clear:focus-visible {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.ub-boards-page__folder-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  grid-auto-rows: 1fr;
  gap: 14px;
  padding: 20px;
  list-style: none;
  /* Glossier inner surface — brighter mid-stop, thicker white
     top-highlight stripe, soft glow halo. The outer folders panel
     still uses the cool-blue sunken gradient; this inner strip
     lifts toward near-pure white so it reads as glossy/elevated
     against the panel rather than another sunken layer. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.97) 35%, rgba(255, 255, 255, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 1px 12px rgba(91, 141, 239, 0.05), 0 1px 2px rgba(27, 54, 93, 0.04), 0 6px 18px rgba(27, 54, 93, 0.08);
}
.ub-boards-page__folder-strip-empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.ub-boards-page__folder-strip-empty-text {
  font-size: 15px;
  color: #8a96a8;
  font-style: italic;
}
.ub-boards-page {
  /* Whole-card drag — when a board tile is `--draggable`, the parent
     wrapper carries `draggable="true"` and a `dragstart` handler.

     IMPORTANT: do NOT add `user-drag: none` on inner button/a/img
     here. An earlier version of this rule did exactly that with the
     intent of "letting the parent take the drag from a click
     anywhere on the card." It actually had the opposite effect — a
     known Chrome/Webkit quirk where `-webkit-user-drag: none` on a
     child blocks the BROWSER's drag initiation on any ancestor too,
     not just on the child itself. So mousedowns on the IMG (the
     biggest, most-likely click target inside the tile) suppressed
     the parent's `dragstart` entirely, and the subsequent mouseup
     was interpreted as a click and triggered the Pick action,
     navigating to speak mode instead of dragging.

     The correct mechanism for "don't drag this child, drag the
     parent instead" is the HTML attribute `draggable="false"` on
     the child element, which is applied in board-icon.hbs to the
     inner <img>. Buttons don't have implicit drag, so they don't
     need it.

     The grab cursor gives visual confirmation that the tile is
     pickable — without it users couldn't tell which tiles support
     drag-to-folder. */
}
.ub-boards-page .ub-boards-page__board-item--draggable {
  cursor: grab;
}
.ub-boards-page .ub-boards-page__board-item--draggable:active {
  cursor: grabbing;
}
.ub-boards-page {
  /* Card chrome to match the home-page boards card (.md-grid .md-card).
     Same surface + border + subtle vertical gradient + grounded bottom
     so the boards page reads as a single card surface like the home
     page's Boards block. Scoped to the boards page (.ub-boards-page) so
     other surfaces using the same class (search page, dashboard embed)
     keep their existing treatments. */
}
.ub-boards-page .ub-boards-page__boards-section {
  border-radius: var(--md-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 242, 245, 0.95));
  border: 1px solid var(--md-line);
  border-bottom: 2px solid rgba(27, 54, 93, 0.08);
  padding: 24px 24px 32px;
}
.ub-boards-page {
  /* Primary nav is user.hbs md-pillnav--dashboard above outlet */
}
.ub-boards-page--below-dashboard-pills {
  padding-top: 24px;
}
@media (max-width: 768px) {
  .ub-boards-page--below-dashboard-pills {
    padding-top: 16px;
  }
}
.ub-boards-page__page-header {
  /* Tighter bottom padding pulls the subtitle closer to the
     board-management UI below — the hero used to feel like a
     free-floating headline with too much air beneath it before
     the content began. */
  padding: 0 32px 8px;
  max-width: 748px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 0;
  text-align: center;
}
.ub-boards-page__page-header .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
}
.ub-boards-page__page-header .la-hero-title-wrap {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
}
.ub-boards-page__page-header {
  /* Loading-state placeholder for the "Let's Communicate" title.
     During my_boards loading, the real animated title is gated
     behind {{#if my_boards.done}} so its per-letter animation
     only plays once on real mount. We swap in this placeholder
     so the wrap reserves the title's vertical space — without
     it, the hero collapses by ~50px during loading and the rest
     of the page shifts up, then shifts back down on data load. */
}
.ub-boards-page__page-header .la-hero-title--placeholder {
  visibility: hidden;
  pointer-events: none;
}
.ub-boards-page__page-header .la-hero-title {
  font-family: "Maitree", serif;
  font-size: 35px;
  font-weight: normal;
  color: #1b2a4a;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0;
  /* Smaller top margin — earlier 24px left a noticeable
     "headline floating high" feel. 12px keeps the title
     comfortably clear of whatever sits above without
     exaggerating the vertical air. */
  margin-top: 12px;
  line-height: 1.15;
  display: block;
}
@media (max-width: 1366px) {
  .ub-boards-page__page-header .la-hero-title {
    font-size: 32px;
  }
}
@media (max-width: 1200px) {
  .ub-boards-page__page-header .la-hero-title {
    font-size: 30px;
  }
}
@media (max-width: 1024px) {
  .ub-boards-page__page-header .la-hero-title {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .ub-boards-page__page-header .la-hero-title {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .ub-boards-page__page-header .la-hero-title {
    font-size: 26px;
  }
}
.ub-boards-page__page-header .ub-communicate {
  font-size: inherit;
  margin-left: 0.25em;
  display: inline-block;
  overflow: visible;
}
@media (max-width: 1024px) {
  .ub-boards-page__page-header .ub-communicate {
    margin-left: 0.4em;
  }
}
@media (max-width: 480px) {
  .ub-boards-page__page-header .ub-communicate {
    margin-left: 0.35em;
  }
}
.ub-boards-page__page-header .ub-letter {
  display: inline-block;
  font-size: inherit;
  opacity: 1;
  animation: ub-letter-bounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.ub-boards-page__page-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0;
  margin-top: -2rem;
  margin-bottom: 0;
  opacity: 0;
  animation: la-hero-title-from-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.85s forwards;
}
.ub-boards-page__page-header .la-pricing-hero-subtitle {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  /* Slightly smaller subtitle than the marketing pages — the
     boards-page hero needs to feel like a section intro, not a
     hero pitch, so the type drops to 19px from the global 24px. */
  font-size: 19px;
  /* Tight line-height — global is 1.75 which created a giant
     gap between the two subtitle lines after the <br>. 1.35
     keeps lines clearly separated for readability while
     halving the vertical air. */
  line-height: 1.35;
  /* Small breath between title and subtitle (~10px). Earlier
     margin-top:0 read as too tight; 0.6rem gives the two
     elements a relationship without becoming a stack. */
  margin-top: 0.6rem;
  /* Pulled in so the hero composes as a unit and transitions
     smoothly into the content section beneath. */
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.ub-boards-page__page-header .la-pricing-hero-subtitle em {
  font-style: normal;
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ub-boards-page__subtitle-link {
  background: linear-gradient(90deg, #2A9D8F, #4C86D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
}
.ub-boards-page__subtitle-link:hover {
  text-decoration: none;
}
.ub-boards-page__content {
  padding: 0 24px 48px;
  /* Rounded bottom corners — matches the curved bottom edge of
     the page card the content sits inside. Top stays squared so
     it meets the hero / page header flush. */
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.ub-boards-page {
  /* Page-loading: handled by the global `.ll-premium-progress` card
     (z-index 10054, same chrome as the bootstrap skeleton and
     index-loading template). Template renders it OUTSIDE the
     .ub-boards-page wrapper so it sits above the navbar and any
     other in-page content. */
}
.ub-boards-page__hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border-radius: 18px;
  border: 1px solid rgba(17, 26, 46, 0.07);
  box-shadow: 0 4px 20px rgba(17, 26, 46, 0.06);
}
.ub-boards-page__hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ub-boards-page__hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(20, 127, 130, 0.22);
  box-shadow: 0 2px 10px rgba(17, 26, 46, 0.1);
}
.ub-boards-page__online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #34c47c;
  border: 2px solid #fff;
}
.ub-boards-page__hero-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1b2a4a;
  margin: 0 0 2px;
}
.ub-boards-page__hero-username {
  font-size: 14px;
  color: #5A6A85;
  margin: 0 0 4px;
}
.ub-boards-page__hero-meta {
  font-size: 14px;
  color: #7a8a9e;
  margin: 0;
}
.ub-boards-page__stats-accordion {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.ub-boards-page__stats-accordion-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: #1B365D;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ub-boards-page__stats-accordion-toggle:hover {
  background: rgba(13, 36, 56, 0.04);
}
.ub-boards-page__stats-accordion-toggle:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.5);
  outline-offset: -2px;
}
.ub-boards-page__stats-accordion-label {
  flex: 0 0 auto;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: #46505F;
}
.ub-boards-page {
  /* Inline stat chips row — flex middle slot between label + chevron. */
}
.ub-boards-page__stats-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.ub-boards-page__stats-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  color: rgba(13, 36, 56, 0.78);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ub-boards-page__stats-chip-num {
  font-weight: 800;
  color: #1B365D;
  font-size: 12px;
}
.ub-boards-page__stats-chip-label {
  color: rgba(13, 36, 56, 0.55);
}
.ub-boards-page {
  /* Generic chip icon (board-grid glyph on the BOARDS chip etc.) —
     same muted-ink color as the label so the number stays the loud
     element. flex-shrink keeps it from squishing when the row wraps. */
}
.ub-boards-page__stats-chip-icon {
  color: rgba(13, 36, 56, 0.55);
  flex-shrink: 0;
}
.ub-boards-page {
  /* Liked chip gets the red heart accent matching the board-tile heart. */
}
.ub-boards-page__stats-chip--liked {
  background: rgba(224, 36, 94, 0.1);
}
.ub-boards-page__stats-chip--liked .ub-boards-page__stats-chip-num {
  color: #b51d4a;
}
.ub-boards-page__stats-chip-heart {
  color: #e0245e;
  flex-shrink: 0;
}
.ub-boards-page {
  /* Status chip (PUBLIC / PRIVATE) — colored fill to communicate state. */
}
.ub-boards-page__stats-chip--status {
  padding: 4px 10px;
}
.ub-boards-page__stats-chip--public {
  background: rgba(26, 123, 122, 0.14);
  color: #1A7B7A;
}
.ub-boards-page__stats-chip--private {
  background: rgba(13, 36, 56, 0.1);
  color: #1B365D;
}
.ub-boards-page__stats-accordion-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(13, 36, 56, 0.45);
  transition: transform 0.18s ease;
}
.ub-boards-page__stats-accordion--open .ub-boards-page__stats-accordion-chevron {
  transform: rotate(180deg);
}
.ub-boards-page__stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .ub-boards-page__stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ub-boards-page__stats-row {
    grid-template-columns: 1fr;
  }
}
.ub-boards-page__stats-accordion .ub-boards-page__stats-row {
  margin: 0;
  padding: 4px 18px 18px;
}
.ub-boards-page__stat-card {
  background: #ffffff;
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-top: 3px solid rgba(20, 127, 130, 0.3);
  border-radius: 12px;
  padding: 20px 22px 18px;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04);
  transition: box-shadow 0.18s ease, border-top-color 0.18s ease;
  text-align: center;
}
.ub-boards-page__stat-card:hover {
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.09), 0 6px 24px rgba(17, 26, 46, 0.07);
  border-top-color: rgba(20, 127, 130, 0.45);
}
.ub-boards-page__stat-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5A6A85;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.09);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
}
.ub-boards-page__stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a4a;
  line-height: 1.2;
  padding-top: 2px;
  text-align: center;
}
.ub-boards-page__stat-link {
  color: #147F82;
  text-decoration: none;
}
.ub-boards-page__stat-link:hover {
  text-decoration: underline;
}
.ub-boards-page__stat-none {
  color: #7a8a9e;
  font-weight: 500;
  font-style: italic;
}
.ub-boards-page__stat-loading {
  color: #c5cfe0;
  font-weight: 500;
}
.ub-boards-page__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ub-boards-page__badge--public {
  background: linear-gradient(135deg, rgba(52, 196, 124, 0.14), rgba(20, 186, 100, 0.08));
  color: #1a7a4a;
  border: 1px solid rgba(52, 196, 124, 0.35);
  box-shadow: 0 1px 4px rgba(52, 196, 124, 0.15);
}
.ub-boards-page__badge--private {
  background: linear-gradient(135deg, rgba(180, 60, 60, 0.12), rgba(160, 40, 40, 0.07));
  color: #8b2a2a;
  border: 1px solid rgba(180, 60, 60, 0.28);
  box-shadow: 0 1px 4px rgba(180, 60, 60, 0.12);
}
.ub-boards-page__actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.ub-boards-page__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(17, 26, 46, 0.09);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.06);
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ub-boards-page__action-btn:hover {
  background: rgba(20, 127, 130, 0.08);
  border-color: rgba(20, 127, 130, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 26, 46, 0.1);
  color: #0d5c5f;
  text-decoration: none;
}
.ub-boards-page__action-btn--extras {
  position: relative;
}
.ub-boards-page__action-icon {
  width: 28px;
  height: 28px;
  display: block;
  opacity: 0.75;
}
.ub-boards-page__action-label {
  line-height: 1.2;
  text-align: center;
}
.ub-boards-page__extras-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  width: 100%;
}
.ub-boards-page__getting-started-wrap--hidden {
  display: none !important;
}
.ub-boards-page__getting-started {
  margin-bottom: 24px;
}
.ub-boards-page__starting-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 8px;
}
.ub-boards-page__starting-boards .simple_board_holder {
  margin: 0;
}
.ub-boards-page__starting-board-item {
  flex: 0 0 auto;
}
.ub-boards-page__getting-started-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.ub-boards-page__boards-section {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(17, 26, 46, 0.07);
  border-radius: 18px;
  padding: 24px 24px 32px;
  box-shadow: 0 4px 20px rgba(17, 26, 46, 0.06);
}
.ub-boards-page__boards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  /* Anchor for the gradient divider beneath. */
  position: relative;
  padding-bottom: 14px;
}
.ub-boards-page {
  /* Modern gradient divider under the section title — a three-stop
     hairline that fades transparent → verdigris-AA → navy → fades
     transparent, paired with a soft drop-shadow halo for layered
     depth. Verdigris bloom in the center-left ties the divider to
     the brand accent used in the title's alias parenthetical
     ("(Vocabularies & Page-Sets)"); the navy shoulder on the right
     keeps the line from feeling overly tinted. Reads as a designed
     seam between the section heading and the controls below. */
}
.ub-boards-page__boards-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(26, 123, 122, 0.55) 18%, rgba(27, 54, 93, 0.35) 50%, rgba(27, 54, 93, 0.18) 80%, rgba(27, 54, 93, 0) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px -4px rgba(27, 54, 93, 0.16), 0 10px 22px -12px rgba(26, 123, 122, 0.18);
  pointer-events: none;
}
.ub-boards-page__boards-title {
  font-size: 1.97rem;
  font-weight: 900;
  color: #1b2a4a;
  letter-spacing: -0.2px;
  margin: 0;
}
.ub-boards-page__new-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.15);
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--md-ink);
  text-shadow: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.12), 0 1px 3px rgba(17, 26, 46, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__new-board-btn:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.15), 0 2px 6px rgba(17, 26, 46, 0.1);
}
.ub-boards-page {
  /* Boards Filter row: filter form on the left (aligned with the
     grid below), Set/Change Home Board button on the right. The
     wrapper flexes them onto one line with space-between, and the
     form itself drops its centering so it left-aligns. */
}
.ub-boards-page__boards-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 20px;
}
.ub-boards-page__filter-form {
  /* Sits inside __boards-filter-row now — drop the centering and
     the outer margins (the row provides them). Flex-grow so the
     input stretches across the available width up to its own
     max-width cap. */
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.ub-boards-page {
  /* Set / Change Home Board button — boards-page mount. Styled to
     match `.board-picker__new-board-btn` (same translucent
     dusty-denim gradient pill) so the two surfaces' primary
     entrypoints read as siblings. The verdigris ring on the original
     `.board-picker__set-home-btn` in the modal is intentionally not
     applied here. */
}
.ub-boards-page__set-home-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* Pill radius matches the "+ New Board" CTA so the two boards-page
     entrypoints read as the same button family. */
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__set-home-btn:hover {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--md-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}
.ub-boards-page {
  /* Selection-mode active state — verdigris fill so users see the
     "you're picking a home board now" signal at a glance. */
}
.ub-boards-page__set-home-btn--active {
  background: #1A7B7A;
  border-color: #1A7B7A;
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 123, 122, 0.3);
}
.ub-boards-page__set-home-btn--active:hover {
  background: #2A9D8F;
  border-color: #2A9D8F;
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 123, 122, 0.3);
}
.ub-boards-page {
  /* Positional modifier — only applies when the Set/Change Home
     Board button lives in the boards-summary section header (vs.
     the filter row, where flex-grow on the filter form already
     pushes it right). margin-left:auto pins it to the far right
     of the header so it sits opposite the BOARDS title. */
}
.ub-boards-page__set-home-btn--in-header {
  margin-left: auto;
}
.ub-boards-page {
  /* ≤768px — replace the right-pin with symmetric auto margins so the button
     centers: in the ≤640px column header it sits centered on its own row
     (with align-self: center above), and in the 641–768px row the equal
     auto margins center it in the available space rather than pinning it to
     the far edge. Placed after the base rule so it wins on source order
     (equal specificity). */
}
@media (max-width: 768px) {
  .ub-boards-page__set-home-btn--in-header {
    margin-left: auto;
    margin-right: auto;
  }
}
.ub-boards-page__set-home-btn-icon {
  flex-shrink: 0;
  color: #1A7B7A;
}
.ub-boards-page__set-home-btn--active .ub-boards-page__set-home-btn-icon {
  color: #fff;
}
.ub-boards-page__filter-label {
  font-size: 14px;
  font-weight: 500;
  color: #5A6A85;
  cursor: pointer;
  margin: 0;
}
.ub-boards-page__filter-label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.ub-boards-page__filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.ub-boards-page {
  /* Premium filter input — refined to match the glassy chrome family
     used by the folders-section card and pill buttons elsewhere on
     the page. Combines:
     (1) Cool inset gradient field — softer than a flat fill
     (2) Navy hairline border + inset top shadow — gives the input
         a subtle "recessed" feel without going full skeuomorphic
     (3) Refined placeholder typography — slate-blue, italic, slight
         letter-spacing for a more deliberate hint
     (4) Focus state — brand verdigris border + soft glow ring +
         bright white field shift for clear active feedback */
}
.ub-boards-page__filter-input {
  width: 100%;
  max-width: 400px;
  padding: 10px 16px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.95) 0%, rgba(252, 253, 255, 0.95) 100%);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__filter-input::placeholder {
  color: rgba(90, 106, 133, 0.65);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.ub-boards-page__filter-input:hover {
  border-color: rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, rgba(248, 251, 254, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.ub-boards-page__filter-input:focus, .ub-boards-page__filter-input:focus-visible {
  outline: none;
  border-color: rgba(26, 123, 122, 0.55);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 0 0 3px rgba(26, 123, 122, 0.18), 0 1px 2px rgba(27, 54, 93, 0.04);
}
.ub-boards-page__filter-clear {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #5A6A85;
  background: rgba(246, 247, 250, 0.9);
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  cursor: pointer;
  white-space: nowrap;
}
.ub-boards-page__filter-clear:hover {
  color: #147F82;
  border-color: rgba(20, 127, 130, 0.35);
  background: rgba(20, 127, 130, 0.06);
}
.ub-boards-page__filter-clear:focus-visible {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}
.ub-boards-page__folders-section {
  /* Sunken-in surface that mirrors the create-board-new `.nb-section`
     chrome (cool-blue gradient + inset top shadow + subtle highlights).
     This is the collapsed/resting state — when expanded the body
     padding grows to make room for the inner content. */
  margin: 0 0 16px;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(242, 246, 250, 0.94) 0%, rgba(252, 253, 254, 0.95) 45%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: inset 0 1px 8px rgba(13, 36, 56, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.ub-boards-page {
  /* Header row — three children: toggle on the left (title +
     collapsed-state subtitle), action buttons in the middle (only
     when expanded), chevron button on the right. The toggle and
     chevron buttons both fire toggleFoldersExpanded; the action
     buttons use `bubbles=false` on their actions so their clicks
     don't propagate to the toggle. */
}
.ub-boards-page__folders-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.ub-boards-page__folders-toggle {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.12s ease;
}
.ub-boards-page__folders-toggle:hover {
  background: rgba(13, 36, 56, 0.04);
}
.ub-boards-page__folders-toggle:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.5);
  outline-offset: -2px;
}
.ub-boards-page {
  /* Header-row action buttons — sit between the toggle and the
     chevron button. Slightly tighter padding than the body-toolbar
     variant since they share a row with the title and chevron. */
}
.ub-boards-page__folders-actions--header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex: 0 0 auto;
}
.ub-boards-page {
  /* Chevron click target — pulled out of the toggle so the action
     buttons can sit between the toggle and the chevron in the same
     row. Same toggle action, separate <button> so we don't nest. */
}
.ub-boards-page__folders-chevron-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: background 0.12s ease;
}
.ub-boards-page__folders-chevron-btn:hover {
  background: rgba(13, 36, 56, 0.04);
}
.ub-boards-page__folders-chevron-btn:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.5);
  outline-offset: -2px;
}
.ub-boards-page__folders-chevron {
  margin-left: auto;
  color: rgba(13, 36, 56, 0.45);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.ub-boards-page__folders-section--open .ub-boards-page__folders-chevron {
  transform: rotate(180deg);
}
.ub-boards-page {
  /* Compact "N" count pill shown next to the FOLDERS label so users
     see how many folders exist without expanding. A 1px navy
     hairline now sits in the margin-gap BEFORE the count — painted
     via ::before so it lives outside the rounded chip background.
     Replaces the former border-left on __folders-subtitle so the
     divider visually separates the label from the count first
     (and the subtitle from the count second by adjacency). */
}
.ub-boards-page__folders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-left: 18px;
  border-radius: 999px;
  background: rgba(26, 123, 122, 0.14);
  color: #1A7B7A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  position: relative;
}
.ub-boards-page__folders-count::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(17, 26, 46, 0.22);
  pointer-events: none;
}
.ub-boards-page {
  /* Inner body — only renders when the accordion is expanded. Inherits
     the panel's gradient + inset shadow. Top padding is generous so
     the FOLDERS FILTER row breathes well clear of the layered divider
     above; bottom padding mirrors the nb-section spacing. */
}
.ub-boards-page__folders-body {
  padding: 30px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ub-boards-page {
  /* The previous `__folders-header` rule here (flex-wrap: wrap,
     padding: 0 20px, margin-bottom: 16px) was for an older header
     structure that no longer exists — it was conflicting with the
     newer `__folders-header` rule above and forcing the toggle /
     actions / chevron onto separate rows via flex-wrap. The newer
     rule above (display:flex without wrap, children handle their
     own padding) is the canonical one now. */
}
.ub-boards-page__folders-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
}
.ub-boards-page__folders-subtitle {
  font-weight: 400;
  font-size: 14.3px;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7a8e;
  /* Divider moved to the LEFT of the count chip (see
     &__folders-count::before above) — subtitle just gets a
     padding-left for clean adjacent spacing now. */
  padding-left: 8px;
  margin-left: 4px;
  margin-right: 12px;
}
.ub-boards-page__folders-actions {
  display: flex;
  gap: 8px;
  /* Always pinned to the right edge of the toolbar — works
     whether the filter form sits to the left (folders exist) or
     the toolbar is button-only (empty state). margin-left:auto
     overrides the toolbar's default flex justification and keeps
     the button cluster right-aligned in both cases. */
  margin-left: auto;
}
.ub-boards-page__folders-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #fff;
  color: #46505F;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* Subtle layered shadow lifts the pills off the inset folders
     surface — soft outer drop + 1px highlight at the top so the
     white pill reads as a tactile control rather than sinking into
     the cool-blue gradient behind it. Hover deepens the lift for
     press feedback. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 2px 8px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folders-action-btn:hover {
  background: rgba(17, 26, 46, 0.05);
  border-color: rgba(17, 26, 46, 0.2);
  color: #1b2a4a;
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.08), 0 6px 16px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.ub-boards-page__folders-hint {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #8a96a8;
  font-style: italic;
}
.ub-boards-page__folder-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  grid-auto-rows: 1fr;
  gap: 14px;
  padding: 20px;
  list-style: none;
  /* Bright, glossy inner surface — pure-opaque white core so the
     body's cool-blue/verdigris glow behind doesn't tint through,
     layered with a near-white tint at the bottom for subtle
     polish. Bright top highlight + cool inner halo + soft outer
     lift make it read as a clearly elevated, "lit" inner card. */
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 50%, #ffffff 100%);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 22px;
  box-shadow: inset 0 2px 0 rgb(255, 255, 255), inset 0 1px 14px rgba(91, 141, 239, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.05), 0 8px 22px rgba(27, 54, 93, 0.1);
}
.ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder, .ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:hover, .ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:focus-visible {
  transform: none !important;
  transition: none !important;
}
.ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-back, .ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:focus-visible .ub-boards-page__tag-folder-back {
  box-shadow: 0 4px 16px rgba(27, 42, 65, 0.2), 0 8px 32px rgba(27, 42, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  filter: none !important;
  transition: none !important;
}
.ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-tab, .ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:focus-visible .ub-boards-page__tag-folder-tab {
  background: rgb(115, 137, 163) !important;
  filter: none !important;
  transition: none !important;
}
.ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-card, .ub-boards-page__folder-strip--no-hover .ub-boards-page__tag-folder:focus-visible .ub-boards-page__tag-folder-card {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.12), 0 8px 24px rgba(27, 42, 65, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: none !important;
}
.ub-boards-page__folder-strip-empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.ub-boards-page__folder-strip-empty-text {
  font-size: 15px;
  color: #8a96a8;
  font-style: italic;
}
.ub-boards-page {
  /* Compact informational empty state — lives in the toolbar row,
     to the LEFT of the New folder / Tag a board action buttons,
     occupying the slot the folder-filter form takes when folders
     exist. No border or background fill — reads as soft inline copy
     in the toolbar, not as a second chrome surface. Doubles as a
     drop target (via emptyFolderDragOver / emptyFolderDrop) so a
     user can drag a board onto it to create the first folder. */
}
.ub-boards-page__folders-empty {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  color: rgba(27, 54, 93, 0.62);
}
.ub-boards-page__folders-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: rgba(27, 54, 93, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(27, 54, 93, 0.1);
}
.ub-boards-page__folders-empty-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
  min-width: 0;
}
.ub-boards-page__folders-empty-headline {
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.78);
  letter-spacing: 0.005em;
}
.ub-boards-page__folders-empty-hint {
  font-size: 12px;
  font-weight: 400;
  color: rgba(27, 54, 93, 0.55);
}
.ub-boards-page__folder-filter-form {
  display: flex;
  /* Left-aligned now that the filter shares a row with the New
     folder / Tag a board action buttons (see __folders-toolbar). */
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.ub-boards-page__folder-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.ub-boards-page {
  /* Folder filter input — premium glassy treatment matching the
     boards filter input. See &__filter-input above for design
     rationale (cool inset gradient + navy hairline + verdigris
     focus glow + italic muted-slate placeholder). */
}
.ub-boards-page__folder-filter-input {
  width: 100%;
  max-width: 300px;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.95) 0%, rgba(252, 253, 255, 0.95) 100%);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ub-boards-page__folder-filter-input::placeholder {
  color: rgba(90, 106, 133, 0.65);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.ub-boards-page__folder-filter-input:hover {
  border-color: rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, rgba(248, 251, 254, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.ub-boards-page__folder-filter-input:focus, .ub-boards-page__folder-filter-input:focus-visible {
  outline: none;
  border-color: rgba(26, 123, 122, 0.55);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 0 0 3px rgba(26, 123, 122, 0.18), 0 1px 2px rgba(27, 54, 93, 0.04);
}
.ub-boards-page__folder-filter-clear {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #5A6A85;
  background: rgba(246, 247, 250, 0.9);
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  cursor: pointer;
  white-space: nowrap;
}
.ub-boards-page__folder-filter-clear:hover {
  color: #147F82;
  border-color: rgba(20, 127, 130, 0.35);
  background: rgba(20, 127, 130, 0.06);
}
.ub-boards-page__tag-folder {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  min-height: 80px;
  padding: 6px 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ub-boards-page__tag-folder:hover, .ub-boards-page__tag-folder:focus-visible {
  outline: none;
}
.ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-back {
  box-shadow: 0 6px 24px rgba(27, 42, 65, 0.25), 0 12px 48px rgba(27, 42, 65, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-tab {
  background: #5d6878;
}
.ub-boards-page__tag-folder:hover .ub-boards-page__tag-folder-card {
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.16), 0 12px 36px rgba(27, 42, 65, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgb(255, 255, 255);
}
.ub-boards-page__tag-folder--dropping {
  transform: translateY(-3px);
}
.ub-boards-page__tag-folder--dropping .ub-boards-page__tag-folder-back {
  background: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.3), 0 6px 24px rgba(20, 127, 130, 0.2);
}
.ub-boards-page__tag-folder--dropping .ub-boards-page__tag-folder-tab {
  background: #1a9a9d;
}
.ub-boards-page__tag-folder--animating {
  animation: folder-full 0.6s ease-out forwards !important;
  transition: none !important;
}
.ub-boards-page__tag-folder--animating .ub-boards-page__tag-folder-card {
  animation: folder-card-full 0.6s ease-out forwards !important;
  transition: none !important;
}
.ub-boards-page__tag-folder--animating .ub-boards-page__tag-folder-back {
  animation: folder-back-full 0.8s ease-out forwards !important;
  transition: none !important;
}
.ub-boards-page__tag-folder--animating .ub-boards-page__tag-folder-tab {
  animation: folder-tab-full 0.6s ease-out forwards !important;
  transition: none !important;
}
.ub-boards-page__tag-folder--animating .ub-boards-page__tag-folder-count {
  animation: folder-count-full 0.5s ease-out forwards !important;
}
.ub-boards-page__tag-folder-back {
  position: absolute;
  top: 2px;
  left: -2px;
  right: -2px;
  bottom: -3px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  border-radius: 10px 10px 14px 14px;
  z-index: 0;
  box-shadow: 0 4px 16px rgba(27, 42, 65, 0.2), 0 8px 32px rgba(27, 42, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.ub-boards-page__tag-folder-tab {
  position: absolute;
  top: -8px;
  left: 8px;
  width: 40%;
  height: 10px;
  background: rgb(115, 137, 163);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -2px 8px rgba(27, 42, 65, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.25s ease;
}
.ub-boards-page__tag-folder-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 12px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.12), 0 8px 24px rgba(27, 42, 65, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.ub-boards-page__tag-folder-name {
  text-align: left;
  word-break: break-word;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.3;
  flex: 1;
}
.ub-boards-page__tag-folder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-width: 2rem;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #147F82;
  background: rgba(20, 127, 130, 0.12);
}
.ub-boards-page {
  /* Folder destination view — a contained card surface that visually
     groups the breadcrumb, identity, and actions into a single
     "destination" panel. Three-layer composition inside:
     (1) breadcrumb on top — navigation context
     (2) large icon + title + subtitle — identity
     (3) pill action buttons on the right — secondary controls
     Each layer has breathing room so the user reads navigation,
     identity, and actions as distinct purposes — while the outer
     card frames them as one cohesive surface.

     Chrome: soft cool-blue gradient field with a verdigris glow at
     the top-right corner, a 1px navy hairline, and a layered drop
     shadow + inset top highlight. Same family as the
     __boards-section / __folders-section surfaces above so the
     folder card reads as a sibling card in the same composition. */
}
.ub-boards-page__folder-context {
  display: grid;
  /* 3-column grid (left identity, center boards-dropdown, right
     actions). The middle column is `1fr` so the dropdown can claim
     the slack and self-center horizontally; the side columns shrink
     to their content. The breadcrumb row above spans 1 / -1. */
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 20px;
  padding: 18px 22px 20px;
  /* Top margin (10px) gives the card a small sectional gap from
     the filter/toolbar row above without making it feel
     disconnected. Bottom margin (18px) carries the same idea
     into the boards grid below. */
  margin: 10px auto 18px;
  /* Capped content rail — wide enough for breadcrumb + name +
     subtitle + actions to breathe, narrow enough to read as a
     focused destination card rather than spanning the full
     page-width parent (which weakens intimacy on desktop/tablet).
     Auto horizontal margins keep the card centered when the
     parent is wider; on narrow viewports the card collapses to
     100% naturally. */
  max-width: 880px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: radial-gradient(ellipse 60% 80% at 95% 0%, rgba(26, 123, 122, 0.12) 0%, rgba(26, 123, 122, 0.05) 40%, rgba(26, 123, 122, 0) 75%), linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(248, 251, 254, 0.98) 55%, rgba(240, 245, 251, 0.96) 100%);
  /* Strengthened layered shadow — close 1px hairline + 3px tight
     grounding + 12px ambient lift. The wider/darker shadow gives
     the card more obvious elevation above the inset folders-body
     gradient behind it, so the two surfaces read as distinct
     depth layers instead of one continuous panel. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 1px rgba(27, 54, 93, 0.06), 0 3px 6px rgba(27, 54, 93, 0.08), 0 12px 30px rgba(27, 54, 93, 0.14);
}
.ub-boards-page {
  /* Breadcrumb row — small text "← Folders / Food". Spans the full
     width above the identity + actions row. Hierarchy is intentional:
     the back link reads as muted, low-contrast navigation chrome;
     the separator slips further back; the current location is the
     darkest, heaviest piece — anchors the eye on "where you are now"
     rather than competing equally with "where you came from". */
}
.ub-boards-page__folder-context-breadcrumb {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.5);
}
.ub-boards-page__folder-context-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 5px;
  margin-left: -7px;
  border: none;
  border-radius: 6px;
  background: transparent;
  /* Muted — clearly secondary to the current location below */
  color: rgba(27, 54, 93, 0.52);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ub-boards-page__folder-context-breadcrumb-back:hover {
  background: rgba(17, 26, 46, 0.05);
  color: rgba(27, 54, 93, 0.78);
}
.ub-boards-page__folder-context-breadcrumb-back svg {
  flex-shrink: 0;
}
.ub-boards-page__folder-context-breadcrumb-sep {
  color: rgba(27, 54, 93, 0.22);
  font-weight: 400;
}
.ub-boards-page__folder-context-breadcrumb-current {
  /* Strongest text in the breadcrumb row — anchors "you are here".
     Slightly smaller font size than the back link so the back link
     reads as the primary clickable affordance while the current
     location's heavier weight + darker color still anchor "you
     are here" visually. */
  color: rgba(27, 54, 93, 0.88);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.ub-boards-page {
  /* Identity block — large folder icon on the left, name + subtitle
     stacked next to it. Title is the largest text on the row and
     reads as the "destination" anchor. */
}
.ub-boards-page__folder-context-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.ub-boards-page {
  /* Premium folder tile — refined depth treatment for the identity
     anchor. Three layered effects build the sophistication:
     (1) Multi-stop background gradient: cool white top-left, soft
         verdigris mid, slate-blue bottom-right. Creates the
         impression of light catching a real surface from above.
     (2) Hairline border + inset top highlight: catches the eye on
         the upper rim, sells the "rounded tile" form.
     (3) Layered drop shadow: tight 1px close shadow for grounding
         + 8px soft far shadow for elevation. Reads as floating on
         the destination card behind it.
     The inner folder SVG itself gets a back/front two-path setup
     (see template) so the folder reads as a layered manila card
     rather than a flat silhouette. */
}
.ub-boards-page__folder-context-identity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  /* Gradient starts at a near-opaque off-white (not transparent
     white) so the top-left corner reads against the card's
     white-ish background instead of fading invisibly into it.
     Slight cool tint at the start keeps the tile distinct from
     the field behind it without sacrificing the "light catching"
     feel of the 135deg ramp. Verdigris mid-stop and slate-blue
     bottom-right give the diagonal depth. */
  background: linear-gradient(135deg, rgba(248, 251, 254, 0.98) 0%, rgba(26, 123, 122, 0.22) 45%, rgba(90, 106, 133, 0.26) 100%);
  /* Navy-tinted hairline border (was white) — defines the edge of
     the tile reliably regardless of the card's background color.
     The inset top highlight below still catches light on the upper
     rim, but the actual silhouette now stays crisp. */
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #46505F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.1), 0 6px 14px rgba(27, 54, 93, 0.1);
}
.ub-boards-page {
  /* SVG drop-shadow for the folder glyph itself — subtle inner
     depth so the folder doesn't look pasted flat onto the tile. */
}
.ub-boards-page__folder-context-identity-icon .ub-boards-page__folder-context-identity-icon-svg {
  filter: drop-shadow(0 1px 1px rgba(27, 54, 93, 0.18));
}
.ub-boards-page {
  /* Two-tone folder paths — the back (tab + body) takes a darker
     navy tint; the front face takes a slightly lighter shade so the
     folder reads as a layered card with a visible tab. */
}
.ub-boards-page__folder-context-identity-icon-back {
  fill: rgba(90, 106, 133, 0.95);
}
.ub-boards-page__folder-context-identity-icon-front {
  fill: rgba(70, 80, 95, 0.85);
}
.ub-boards-page__folder-context-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ub-boards-page__folder-context-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-word;
  /* Flex row so the inline rename pencil sits right after the name
     on the baseline rather than wrapping under it. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ub-boards-page__folder-context-name-text {
  min-width: 0;
}
.ub-boards-page {
  /* Verdigris inline pencil — replaces the old standalone "Edit" pill
     in the actions row. Ghost-y default (no border/bg) so the icon
     reads as a quiet inline affordance, not a heavy action chip.
     Hover firms up the brand teal + a soft halo for the touch target.
     Same `startFolderRename` action wired to it. */
}
.ub-boards-page__folder-context-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #2A9D8F;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folder-context-name-edit:hover, .ub-boards-page__folder-context-name-edit:focus-visible {
  background: rgba(42, 157, 143, 0.1);
  color: rgb(31.2361809045, 116.7638190955, 106.351758794);
  transform: translateY(-1px);
  outline: none;
}
.ub-boards-page__folder-context-name-edit:active {
  transform: translateY(0);
}
.ub-boards-page__folder-context-name-edit svg {
  flex-shrink: 0;
}
.ub-boards-page__folder-context-description {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(27, 54, 93, 0.58);
  line-height: 1.35;
}
.ub-boards-page {
  /* Centered "Boards in this folder" dropdown — lives in the middle
     column of the folder-context grid. Trigger uses the same glassy
     pill chrome as the action buttons on the right so the three header
     elements (identity, dropdown, actions) read as a coherent family.
     Panel is absolute-positioned so it floats below the trigger
     without disturbing the grid row height. */
}
.ub-boards-page__folder-context-boards-menu {
  position: relative;
  grid-column: 2;
  align-self: end;
  justify-self: center;
  padding-bottom: 2px;
}
.ub-boards-page__folder-context-boards-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 253, 0.85) 100%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #46505F;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.04), 0 1px 2px rgba(27, 54, 93, 0.08), 0 4px 12px rgba(27, 54, 93, 0.1);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folder-context-boards-menu-trigger svg {
  flex-shrink: 0;
  color: #2A9D8F;
}
.ub-boards-page__folder-context-boards-menu-trigger:hover {
  border-color: rgba(27, 54, 93, 0.18);
  color: #1b2a4a;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 2px 4px rgba(27, 54, 93, 0.1), 0 8px 18px rgba(27, 54, 93, 0.16);
  transform: translateY(-1px);
}
.ub-boards-page__folder-context-boards-menu-trigger--open {
  border-color: rgba(42, 157, 143, 0.4);
  color: #1b2a4a;
}
.ub-boards-page__folder-context-boards-menu-trigger--open .ub-boards-page__folder-context-boards-menu-chevron {
  transform: rotate(180deg);
}
.ub-boards-page__folder-context-boards-menu-label {
  white-space: nowrap;
}
.ub-boards-page__folder-context-boards-menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.14);
  color: rgb(33.3889447236, 124.8110552764, 113.6814070352);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ub-boards-page__folder-context-boards-menu-chevron {
  transition: transform 0.18s ease;
}
.ub-boards-page__folder-context-boards-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.1), 0 14px 36px rgba(27, 54, 93, 0.16);
  z-index: 5;
}
.ub-boards-page {
  /* In-panel search row — pinned at the top of the dropdown so the
     user can filter long folder lists. Uses a quiet outlined input
     (not the glassy pill chrome) since it's inside an already-glassy
     panel; a heavy second glass surface would look stacked-glass. */
}
.ub-boards-page__folder-context-boards-menu-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2px 4px 6px;
  padding: 0;
}
.ub-boards-page__folder-context-boards-menu-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: rgba(27, 54, 93, 0.45);
  pointer-events: none;
}
.ub-boards-page__folder-context-boards-menu-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.03);
  color: #1B365D;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ub-boards-page__folder-context-boards-menu-search-input::placeholder {
  color: rgba(27, 54, 93, 0.45);
}
.ub-boards-page__folder-context-boards-menu-search-input:focus, .ub-boards-page__folder-context-boards-menu-search-input:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}
.ub-boards-page__folder-context-boards-menu-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(27, 54, 93, 0.55);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ub-boards-page__folder-context-boards-menu-search-clear:hover, .ub-boards-page__folder-context-boards-menu-search-clear:focus-visible {
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
  outline: none;
}
.ub-boards-page__folder-context-boards-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 8px;
  border-radius: 10px;
  transition: background 0.12s ease;
}
.ub-boards-page__folder-context-boards-menu-row:hover {
  background: rgba(42, 157, 143, 0.06);
}
.ub-boards-page {
  /* Row name button — clickable to open the board in speak mode.
     Reset native button chrome so the text reads like a plain row
     entry; hover/focus tints the text verdigris to advertise that
     it's interactive without competing with the × button next to it. */
}
.ub-boards-page__folder-context-boards-menu-row-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 6px;
  border: none;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.ub-boards-page__folder-context-boards-menu-row-open:hover, .ub-boards-page__folder-context-boards-menu-row-open:focus-visible {
  color: rgb(31.2361809045, 116.7638190955, 106.351758794);
  outline: none;
}
.ub-boards-page {
  /* Flat-glass circle — same brushed-silver gradient + hairline border
     as the rest of the modern chip family, but without the layered
     drop-shadow so the × sits IN the dropdown row instead of floating
     above it. Inline list items shouldn't compete with the bottom-
     center PREVIEW pill / top-right info chip for elevation; the
     dropdown panel itself already provides the lift. Hover firms up
     into a subtle red-tinted wash so the destructive intent reads
     without re-introducing heavy elevation. */
}
.ub-boards-page__folder-context-boards-menu-row-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 50%;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, rgba(232, 237, 243, 0.65) 55%, rgba(206, 213, 224, 0.55) 100%);
  color: rgba(27, 54, 93, 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ub-boards-page__folder-context-boards-menu-row-remove:hover, .ub-boards-page__folder-context-boards-menu-row-remove:focus-visible {
  background: linear-gradient(155deg, rgba(255, 252, 252, 0.95) 0%, rgba(192, 57, 43, 0.1) 100%);
  border-color: rgba(192, 57, 43, 0.32);
  color: #C0392B;
  outline: none;
}
.ub-boards-page__folder-context-boards-menu-row-remove svg {
  flex-shrink: 0;
}
.ub-boards-page__folder-context-boards-menu-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: 13px;
  color: rgba(27, 54, 93, 0.55);
  text-align: center;
}
.ub-boards-page {
  /* Action row — pill-styled Edit + Delete buttons. Sits to the right
     of the identity block on wide viewports; wraps below on narrow
     screens via the grid layout above. `align-self: end` pins the
     pills to the BOTTOM of the identity row so they anchor visually
     to the subtitle line rather than floating high near the title —
     prevents the "two detached corners" feel where the title sits
     top-left and the actions sit top-right with empty space between
     them and the subtitle. */
}
.ub-boards-page__folder-context-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: end;
  padding-bottom: 2px;
}
.ub-boards-page {
  /* Premium glassy pill actions — same chrome family as the New
     folder / Tag a board pills in the header above. Layered effects:
     (1) Cool linear gradient field (near-white to faint cool wash)
         for a "frosted glass" surface
     (2) Subtle navy hairline border that defines edges crisply
     (3) Inset top highlight catches light on the upper rim
     (4) Layered drop shadow — close 1px + soft 8px — for elevation
         off the destination card behind it
     (5) backdrop-filter blur so any pattern behind the pill is
         softly blurred where they overlap (degrades gracefully when
         the browser doesn't support it). */
}
.ub-boards-page__folder-context-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 253, 0.85) 100%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #46505F;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 54, 93, 0.04), 0 1px 2px rgba(27, 54, 93, 0.08), 0 4px 12px rgba(27, 54, 93, 0.1);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folder-context-action:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 252, 0.92) 100%);
  border-color: rgba(27, 54, 93, 0.18);
  color: #1b2a4a;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 2px 4px rgba(27, 54, 93, 0.1), 0 8px 18px rgba(27, 54, 93, 0.16);
  transform: translateY(-1px);
}
.ub-boards-page__folder-context-action:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.08), 0 1px 2px rgba(27, 54, 93, 0.06);
}
.ub-boards-page__folder-context-action svg {
  flex-shrink: 0;
}
.ub-boards-page {
  /* Delete variant — softens to a red-tinted glass on hover so the
     destructive affordance reads at a glance without breaking from
     the glassy family of the rest of the chrome. */
}
.ub-boards-page__folder-context-action--delete:hover {
  background: linear-gradient(180deg, rgba(255, 252, 252, 0.98) 0%, rgba(192, 57, 43, 0.1) 100%);
  border-color: rgba(192, 57, 43, 0.32);
  color: #C0392B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(192, 57, 43, 0.08), 0 2px 4px rgba(192, 57, 43, 0.1), 0 8px 18px rgba(192, 57, 43, 0.2);
}
.ub-boards-page {
  /* Legacy header — kept for backward compatibility with any inline
     consumer not yet migrated. The new layered layout above is the
     primary path. */
}
.ub-boards-page__folder-context-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ub-boards-page__folder-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(17, 26, 46, 0.1);
  background: rgba(17, 26, 46, 0.04);
  color: #46505F;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__folder-back-btn:hover {
  background: rgba(17, 26, 46, 0.08);
  border-color: rgba(17, 26, 46, 0.18);
  color: #1b2a4a;
  transform: translateX(-2px);
}
.ub-boards-page__subresult {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: #F8F9FA;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.05);
}
.ub-boards-page__subresult-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 9px;
  background: #ffffff;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__subresult-back:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.35);
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.08);
  transform: translateX(-2px);
}
.ub-boards-page__subresult-back-arrow {
  font-size: 16px;
  line-height: 1;
}
.ub-boards-page__subresult-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(17, 26, 46, 0.62);
}
.ub-boards-page__folder-context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(70, 80, 95, 0.08);
  color: rgba(70, 80, 95, 0.5);
  flex-shrink: 0;
}
.ub-boards-page__folder-context-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ub-boards-page__folder-context-subtitle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a96a8;
}
.ub-boards-page__folder-context-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1b2a4a;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.ub-boards-page__folder-context-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ub-boards-page__folder-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(17, 26, 46, 0.08);
  background: rgba(17, 26, 46, 0.03);
  color: #8a96a8;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ub-boards-page__folder-edit-btn:hover {
  background: rgba(17, 26, 46, 0.07);
  color: #46505F;
  border-color: rgba(17, 26, 46, 0.15);
}
.ub-boards-page__folder-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(17, 26, 46, 0.08);
  background: rgba(17, 26, 46, 0.03);
  color: #8a96a8;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ub-boards-page__folder-delete-btn:hover {
  background: rgba(192, 57, 43, 0.08);
  color: #C0392B;
  border-color: rgba(192, 57, 43, 0.2);
}
.ub-boards-page__folder-rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ub-boards-page__folder-rename-input {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1b2a4a;
  letter-spacing: -0.5px;
  line-height: 1.1;
  border: none;
  border-bottom: 2px solid var(--md-teal, #2A9D8F);
  background: transparent;
  padding: 0 0 4px;
  outline: none;
  min-width: 200px;
}
.ub-boards-page__folder-rename-input:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .ub-boards-page__folder-rename-input:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.ub-boards-page__folder-rename-save, .ub-boards-page__folder-rename-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(17, 26, 46, 0.1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ub-boards-page__folder-rename-save {
  background: rgba(44, 183, 176, 0.1);
  color: #316F70;
}
.ub-boards-page__folder-rename-save:hover {
  background: rgba(44, 183, 176, 0.2);
}
.ub-boards-page__folder-rename-cancel {
  background: rgba(17, 26, 46, 0.04);
  color: #8a96a8;
}
.ub-boards-page__folder-rename-cancel:hover {
  background: rgba(17, 26, 46, 0.08);
  color: #46505F;
}
.ub-boards-page__folder-context-divider {
  margin: 20px 0 0;
  border: none;
  border-top: 1px solid rgba(17, 26, 46, 0.08);
}
.ub-boards-page {
  /* Boards-in-folder wrapper — spans both columns of the folder-context
     grid so the embedded board grid sits below the breadcrumb +
     identity + actions rows. Hairline divider above visually separates
     the boards list from the folder header chrome without re-introducing
     a nested-card look (the parent folder-context already provides the
     surrounding chrome). */
}
.ub-boards-page__folder-context-boards {
  grid-column: 1/-1;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}
.ub-boards-page__folder-context-empty {
  margin: 8px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px dashed rgba(27, 54, 93, 0.18);
  color: rgba(27, 54, 93, 0.65);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}
.ub-boards-page {
  /* Legacy `--in-folder` modifier — no longer applied by the template
     after the folder-context-boards refactor moved the grid inside the
     folder card (which already provides the container chrome). Rule
     kept as a no-op so any external/legacy reference stays inert. */
}
.ub-boards-page__board-grid--in-folder {
  /* intentionally empty */
}
.ub-boards-page__folder-hint {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #5A6A85;
  max-width: 52rem;
}
.ub-boards-page__drag-hint {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #5A6A85;
  max-width: 52rem;
}
.ub-boards-page__board-item--draggable {
  cursor: grab;
}
.ub-boards-page__board-item--draggable:active {
  cursor: grabbing;
}
.ub-boards-page {
  /* Home Board tile distinction on the boards page — mirrors the
     dashboard board strip's `.md-strip__item--home` + badge and the
     My Boards picker's `.board-picker__item--home` so all three
     surfaces flag the user's home board the same way. Verdigris
     halo on the tile, floating uppercase "HOME BOARD" pill above. */
}
.ub-boards-page__board-item--home {
  position: relative;
  /* `&.simple_board_holder` (same element carries both classes) bumps
     this to (0,4,0) so the home-board verdigris highlight survives the
     `board-card-modern` mixin's (0,3,0) `border`/`box-shadow !important`
     on the board-grid card. */
}
.ub-boards-page__board-item--home.simple_board_holder .btn.simple_board_icon {
  border-color: #2A9D8F !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.12), 0 8px 24px rgba(42, 157, 143, 0.18), 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.ub-boards-page__board-item-home-badge {
  /* Small centered pill — mirrors the home-page strip's .md-strip__home-badge
     (was a larger crowning "ribbon"). */
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2A9D8F, #1A7B7A);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
}
.ub-boards-page {
  /* Defensive override: the boards-page parent grid sets
     `> .simple_board_holder > * { width: 100%; display: flex;
     align-items: stretch }` (line ~36561) which stretches the home
     badge into a wide ribbon across the top of the tile. Higher
     specificity (0,3,0) wins against that (0,2,1) rule and keeps the
     badge as a centered shrink-to-fit pill. */
}
.ub-boards-page__board-item.simple_board_holder > .ub-boards-page__board-item-home-badge {
  width: auto;
  max-width: max-content;
  display: inline-block;
  align-self: auto;
}
.ub-boards-page {
  /* Fixed card width so every board tile aligns on boards + search pages */
}
.ub-boards-page__board-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  /* Stretch holders so every card in a row is the same height (the
     tallest card defines the row height); cards stay compact via 18px
     padding + no fixed min-height floor. */
  align-items: stretch;
  gap: 0.5rem 0.75rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  overflow-anchor: none;
}
.ub-boards-page__board-grid .simple_board_holder {
  padding: 0;
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}
.ub-boards-page__board-grid .simple_board_holder > .ember-view,
.ub-boards-page__board-grid .simple_board_holder > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Stretch each in-flow child vertically so the visible card
     fills the holder's height when the grid's `align-items:
     stretch` has expanded this holder to match the tallest
     sibling on the same flex line. Absolute-positioned children
     (home badge, heart, board_action trash) ignore flex sizing,
     so this is safe for them. */
  flex: 1 1 auto;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  position: relative;
  border-radius: 28px !important;
  border: 1px solid rgba(76, 134, 216, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.82)) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 20px rgba(27, 54, 93, 0.06) !important;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon::before,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, rgba(42, 157, 143, 0.5) 28%, rgba(76, 134, 216, 0.5) 72%, rgba(76, 134, 216, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon:hover,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 134, 216, 0.16) !important;
  box-shadow: 0 24px 48px rgba(27, 54, 93, 0.14), 0 12px 24px rgba(42, 157, 143, 0.1) !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* Contained logo tile — soft rounded glass surface, faint inner glow,
     gentle elevation. width:auto + max-width centers + contains it even
     where the surface forces width:100%. */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon img,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon img {
  width: auto !important;
  max-width: 72% !important;
  height: 104px !important;
  object-fit: contain;
  object-position: center;
  margin: 2px auto 14px !important;
  padding: 11px !important;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(240, 245, 252, 0.7));
  border: 1px solid rgba(76, 134, 216, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(27, 54, 93, 0.07);
  box-sizing: border-box;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* LingoLinq default/fallback board icon: keep the tile/card (bg, border,
     radius, shadow inherited from `& img` above) but expand the image out
     to the tile's borders — zero the inner padding and fill so the logo
     uses the full tile instead of sitting inset. Vocab-icon boards keep
     the padded contained tile. */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon img[src*=lingolinq-board-icon],
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon img[src*=lingolinq-board-icon] {
  padding: 0 !important;
  object-fit: cover !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* Typography — also sets the compact spacing/layout (centered, clamped
     title; tight inline `by name`) so EVERY surface reads the same as the
     board_category page, not just the colors. Font sizes carry a 12px
     floor via max() so card text never renders below 12px (e.g. if a root
     font-size shrink scales the rem values down). The title is pinned to
     14px (1.4rem at the 10px root) per design. */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .name,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .name {
  width: 100% !important;
  font-size: max(14px, 1.4rem) !important;
  font-weight: 700 !important;
  color: #1B365D !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__credit,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__credit {
  font-size: max(12px, 0.85rem) !important;
  opacity: 0.72;
  text-align: center !important;
  margin: 0 0 2px !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .author,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Small breathing room after the `by …` line (the language pill /
     PREVIEW footer supply the rest of the rhythm). */
  margin: 0 0 6px !important;
  padding: 0 2px !important;
  max-width: 100% !important;
  font-size: max(12px, 0.9rem) !important;
  color: rgba(27, 54, 93, 0.72) !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .author__label,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.55) !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .author__username, .ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .author__username--long,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author__username,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author__username--long {
  color: rgba(27, 54, 93, 0.72) !important;
  font-weight: 600 !important;
  font-size: max(12px, 0.9rem) !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* Size chip — soft navy-gray glass (was a utility sticker). */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__info {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info-icon, .ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__info-size,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__info-icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__info-size {
  color: rgba(27, 54, 93, 0.6) !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* Language pill — soft verdigris glass. */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .board-icon__lang-marker,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__lang-marker {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(42, 157, 143, 0.12) !important;
  color: #2A9D8F !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  /* Preview pill — integrated dusty-denim glass. */
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon .info,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .info {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(228, 236, 255, 0.92)) !important;
  border: 1px solid rgba(76, 134, 216, 0.14) !important;
  box-shadow: 0 8px 18px rgba(76, 134, 216, 0.16) !important;
  color: #1B365D !important;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Equal-height cards come from the grid's `align-items: stretch`
     (every card in a row matches the tallest sibling) + `height: 100%`
     here — NOT a fixed min-height floor (a 300px floor made every card
     artificially tall and dumped the slack as a gap after the `by …`
     line). Height is driven by the tallest card's content; the PREVIEW
     pill (margin-top:auto) anchors to the bottom so any stretch slack
     lands there. */
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 18px 16px;
  color: var(--md-ink);
  font-size: 15px;
  /* Keep the mixin's overflow:hidden (do NOT flip to visible) so the
     decorative ::before top accent is clipped to the 28px rounded
     corners and reads as a top BORDER, not a line bleeding past the
     card edges. */
  overflow: hidden;
}
.ub-boards-page__board-grid .board_with_action.simple_board_holder .btn.simple_board_icon:hover,
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon:hover {
  border-color: rgba(44, 183, 176, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon img {
  width: 100%;
  max-width: 160px;
  height: 110px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .name {
  width: 100%;
  font-size: 1.69rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
  text-align: center;
  padding: 0 4px;
  word-wrap: break-word;
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author {
  font-size: 17px;
  color: var(--md-muted);
  /* Bottom margin guarantees a visible gap between the author
     line and the bottom-anchored PREVIEW pill. The pill uses
     `margin-top: auto` to ride the bottom of the tile, which
     collapses to ~0 when the title is long — without this margin
     the pill ends up sitting right under the username. */
  margin: 0 0 16px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author__username {
  color: #46505F;
  font-size: 17px;
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .author__username--long {
  font-size: 14px;
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .info {
  /* PREVIEW pill: in-flow flex child pushed to the BOTTOM of the tile
     via `margin-top: auto` — it is the SOLE bottom-anchored element,
     so all equal-height stretch slack collects below the content
     (above PREVIEW) and the pill sits at the same bottom position
     across every card. `order: 99` keeps it last. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  order: 99;
  align-self: center;
  margin-top: 8px;
  padding: 5px 13px;
  font-size: 12px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  z-index: 4;
}
.ub-boards-page__board-grid {
  /* Language pill sits tight under the `by …` line (margin-top:0
     overrides the base `margin-top: auto`, which would otherwise pull it
     to the bottom and open a gap between `by` and the language).
     PREVIEW stays the sole bottom-anchored element (margin-top:auto). */
}
.ub-boards-page__board-grid .simple_board_holder .btn.simple_board_icon .board-icon__lang-marker {
  margin-top: 0;
}
@media (min-width: 480px) {
  .ub-boards-page__board-grid {
    gap: 0.75rem 1rem;
  }
}
@media (min-width: 768px) {
  .ub-boards-page__board-grid {
    gap: 1rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  .ub-boards-page__board-grid {
    gap: 1rem 1.5rem;
  }
}
.ub-boards-page {
  /* Remove board: top-center inside card. Global .board_action uses top:-45px (tab above tile in
     legacy column grid); without position:relative on the holder it jumps to the page top. */
}
.ub-boards-page .board_with_action {
  position: relative;
}
.ub-boards-page .board_with_action .board_action {
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-bottom-width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 10px rgba(17, 26, 46, 0.08);
  font-size: 17px;
  color: rgba(75, 78, 92, 0.75);
  z-index: 6;
  transition: visibility 0s 0.15s linear, opacity 0.18s ease 0.15s, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ub-boards-page .board_with_action .board_action:hover,
.ub-boards-page .board_with_action .board_action:focus-visible {
  background: #fff;
  color: #b02a2a;
  border-color: rgba(176, 42, 42, 0.28);
  box-shadow: 0 3px 14px rgba(17, 26, 46, 0.12);
}
.ub-boards-page .board_with_action .board_action:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #1B365D, 0 0 0 4px rgba(27, 54, 93, 0.1) !important;
}
@media (forced-colors: active) {
  .ub-boards-page .board_with_action .board_action:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}
.ub-boards-page__show-more {
  width: 100%;
  padding: 16px 0 4px;
  display: flex;
  justify-content: center;
}
.ub-boards-page__show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 127, 130, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: #147F82;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(20, 127, 130, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ub-boards-page__show-more-btn:hover {
  background: rgba(20, 127, 130, 0.07);
  border-color: #147F82;
  box-shadow: 0 3px 10px rgba(20, 127, 130, 0.15);
  transform: translateY(-1px);
  text-decoration: none;
  color: #147F82;
}
.ub-boards-page__show-more-chevrons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0.75;
  /* Thin SVG chevrons (replaced the heavier glyphicon glyphs); stacked tight for the
     double-down-chevron look. */
}
.ub-boards-page__show-more-chevrons svg {
  display: block;
  margin: -4px 0;
}
.ub-boards-page__loading {
  color: #8a9ab8;
  font-size: 14px;
  padding: 12px 0;
}
.ub-boards-page__back-to-top-wrap {
  position: sticky;
  bottom: 2rem;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  padding: 0 1rem;
}
.ub-boards-page__back-to-top {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 127, 130, 0.25);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: #147F82;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(17, 26, 46, 0.1), 0 4px 20px rgba(20, 127, 130, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  animation: ub-back-to-top-fade-in 0.3s ease forwards;
}
.ub-boards-page__back-to-top .glyphicon {
  font-size: 14px;
  line-height: 1;
}
.ub-boards-page__back-to-top:hover {
  background: rgba(20, 127, 130, 0.08);
  border-color: #147F82;
  box-shadow: 0 4px 18px rgba(20, 127, 130, 0.18), 0 6px 24px rgba(17, 26, 46, 0.1);
  transform: translateY(-2px);
}
.ub-boards-page__back-to-top:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(20, 127, 130, 0.12);
}
.ub-boards-page__back-to-top-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
@keyframes ub-back-to-top-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ub-boards-page__getting-started {
  position: relative;
  overflow: hidden;
  min-height: 120px;
}
.ub-boards-page__getting-started-actions {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}
.ub-boards-page__getting-started-actions .md-card__getting-started-btn {
  transform: none;
  align-self: auto;
  margin-top: 0;
  text-decoration: none;
}
.ub-boards-page__getting-started-actions .md-card__getting-started-btn:hover {
  text-decoration: none;
}
.ub-boards-page__gs-secondary-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(17, 26, 46, 0.18);
  background: rgba(255, 255, 255, 0.45);
  color: #5A6A85;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ub-boards-page__gs-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(17, 26, 46, 0.28);
  color: #1b2a4a;
  text-decoration: none;
}

.la-delete-folder-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 26, 46, 0.4);
  backdrop-filter: blur(4px);
  animation: la-delete-folder-fade-in 0.2s ease;
}

.la-delete-folder-modal {
  width: 100%;
  max-width: 440px;
  margin: 16px;
  border-radius: var(--md-r-lg, 16px);
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 20px 60px rgba(17, 26, 46, 0.2), 0 8px 24px rgba(17, 26, 46, 0.1);
  overflow: hidden;
  animation: la-delete-folder-scale-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.la-delete-folder-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1039;
}

.la-delete-folder-modal--inline {
  /* Viewport-centered modal — both axes. The old logic anchored
     `top` via a `--delete-folder-top` custom prop set in JS based on
     the Delete button's getBoundingClientRect (rect.bottom + 8px),
     but in the new destination-card layout the Delete button sits
     far-right and the modal landed off-center. translate(-50%, -50%)
     centers cleanly regardless of where the trigger lives. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1040;
  margin: 0;
  max-width: 440px;
  animation: la-delete-folder-center-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes la-delete-folder-center-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.la-delete-folder-modal .la-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
  background: rgba(255, 255, 255, 0.6);
}

.la-delete-folder-modal .la-modal-header-label {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--md-ink, #1b2a4a);
  flex: 1 1 auto;
}

.la-delete-folder-modal .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA + AAC touch target — was 36×36 */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: var(--md-muted, #8a96a8);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}
.la-delete-folder-modal .la-modal-close:hover {
  color: var(--md-ink, #1b2a4a);
  background: #D4DAE2;
}

.la-delete-folder-modal-body {
  padding: 24px;
  text-align: center;
}

.la-delete-folder-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.08);
  color: #C0392B;
  margin: 0 auto 16px;
}

.la-delete-folder-modal-title {
  font-size: 18.4px;
  font-weight: 600;
  color: var(--md-ink, #1b2a4a);
  margin: 0 0 8px;
  line-height: 1.4;
}

.la-delete-folder-modal-desc {
  font-size: 16.1px;
  color: var(--md-muted, #8a96a8);
  margin: 0;
  line-height: 1.5;
}

.la-delete-folder-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 0 24px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.la-delete-folder-modal-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  background: #C0392B;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.la-delete-folder-modal-delete:hover {
  filter: brightness(1.1);
}

.la-delete-folder-modal-cancel {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  background: rgba(17, 26, 46, 0.06);
  color: var(--md-ink, #1b2a4a);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.la-delete-folder-modal-cancel:hover {
  background: rgba(17, 26, 46, 0.1);
}

@keyframes la-delete-folder-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes la-delete-folder-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes folder-full {
  0% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes folder-card-full {
  0% {
    transform: translateY(3px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes folder-back-full {
  0% {
    box-shadow: 0 0 0 0 rgba(44, 183, 176, 0.4), 0 4px 16px rgba(27, 42, 65, 0.2);
    filter: brightness(1.08);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(44, 183, 176, 0), 0 5px 18px rgba(27, 42, 65, 0.18);
    filter: brightness(1.02);
  }
  100% {
    box-shadow: 0 4px 16px rgba(27, 42, 65, 0.2), 0 8px 32px rgba(27, 42, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    filter: brightness(1);
  }
}
@keyframes folder-tab-full {
  0% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes folder-count-full {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 1024px) {
  .md-user-layout {
    max-width: 100%;
    padding: 12px 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .ub-boards-page {
    max-width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .ub-boards-page__content {
    padding: 0 !important;
  }
  .ub-boards-page__page-header {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 0 !important;
  }
  .ub-boards-page__getting-started-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .md-stats-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .md-stats-filter__period-stack {
    flex-direction: column !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  /* Stacked here (column), the period bar is tall — the base 999px pill radius then
     reads as an oversized pill. Use a card radius so it reads as a panel. */
  .md-stats-filter__period-bar {
    border-radius: 24px !important;
  }
  .md-hero--reports-dashboard {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 12px 12px !important;
  }
  .md-hero--reports-dashboard .md-hero__title {
    margin-top: 12px !important;
  }
  .md-hero--dashboard {
    padding-top: 0 !important;
  }
  .md-user-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .md-user-meta__chip {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  /* Joined / Last active are non-interactive info <div>s. At full width they read as
     buttons/inputs — so size them to their CONTENT instead (compact centered pills,
     the parent .md-user-meta is a centered column here) and drop the raised shadow so
     they read as static info badges, not clicked buttons. They keep the base 999px
     pill shape. The interactive Reset <button> (--reset) stays full-width + raised. */
  .md-user-meta__chip--joined,
  .md-user-meta__chip--active {
    width: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
  .md-shell--user > .md-workspace,
  .md-user-layout > .md-shell > .md-workspace {
    border-radius: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
@media (max-width: 768px) {
  .ub-boards-page {
    padding: 0 !important;
  }
  .ub-boards-page__hero {
    flex-direction: column;
    text-align: center;
    padding: 18px 12px;
  }
  .ub-boards-page__actions-row {
    justify-content: center;
    flex-wrap: wrap;
  }
  .ub-boards-page {
    /* __boards-header intentionally stays in its default row layout
       on 768px (no flex-direction:column override). The previous
       column-stack collapsed the "+ New Board" button onto a second
       row below the heading, which made the header look broken on
       tablet widths. Keep the title + button on the same row; the
       title text wraps within its own flex column when there isn't
       enough horizontal room. */
  }
  .ub-boards-page__page-header {
    padding-left: 8px;
    padding-right: 8px;
  }
  .md-user-layout {
    padding: 8px 6px;
  }
}
/* Phone-width header: now that the title (with its wrapped
   parenthetical "(Vocabularies & Page-Sets)") fills nearly the full
   row, the "+ New Board" button no longer has room to sit beside
   it. Stack vertically below 480px so the button drops to its own
   row, left-aligned under the heading. */
@media (max-width: 480px) {
  .ub-boards-page__boards-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
/* ────────────────────────────────────────────────────────
   Create Board (preview) page  (/create-board-new)
   The route sets `hide_header_force` on the application controller, which makes
   .header--hidden and zeroes --topbar-height — that collapses the global
   navbar entirely (display: none). All we add here is the full-bleed
   shell + zeroed #content padding so the page can fill the viewport.
   ──────────────────────────────────────────────────────── */
/* Let base .md-shell drive the gradient + 3rem padding-top exactly like the
   home page (modern-dashboard / authenticated-view). Only override #content
   to strip the body padding/margin since .header--hidden zeroes
   --topbar-height already. */
#within_ember:has(.md-shell--create-board-new) #content {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Suppress the .new-board--modern card chrome — .md-workspace is now the
   visual card (matching the home page pattern). We keep the
   .new-board--modern class on the wrapper for its descendant rules
   (.modal-header, .modal-body, .modal-footer styling), just neutralize
   its own background/border/shadow/radius. */
.md-workspace--create-board-new.new-board--modern {
  /* Match the Focused View "Boards" card surface: white top-sheen over the
     blue-white focus-surface tint (#ECF1FA → #D4DCEC) on an opaque white base. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(236, 241, 250, 0.6) 0%, rgba(212, 220, 236, 0.55) 100%), #ffffff !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: var(--md-shadow) !important;
  border-radius: 48px !important;
  /* Restore overflow:hidden so the inner modal-header/body/footer rounded
     corners don't bleed past the workspace edge. */
  overflow: hidden !important;
  /* Anchor for the "feels like a modal" close button in the top-right corner. */
  position: relative !important;
  /* No top gap; 64px left/right gap so the gradient breathes around the
     card. Bottom margin kept at 40px so the gradient still shows beneath. */
  margin: 0 auto 40px !important;
  max-width: calc(100% - 128px) !important;
}

/* At ≤1024px shrink the 64px side gutters to 1rem and bump max-width to
   match — must live AFTER the base rule above so source order wins the
   equal-specificity (0,2,0) !important tie. Also drop the inherited
   .md-workspace padding (40px 40px 0 40px) down to a flat 20px. */
@media (max-width: 1024px) {
  .md-workspace--create-board-new.new-board--modern {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    max-width: calc(100% - 2rem) !important;
    padding: 20px !important;
  }
}
/* Modal-style close button — sits in the top-right of the workspace card
   and routes back to the previous page via the `close` action. */
.md-workspace--create-board-new .md-workspace__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.06);
}

.md-workspace--create-board-new .md-workspace__close:hover,
.md-workspace--create-board-new .md-workspace__close:focus-visible {
  background: #fff;
  color: #374151;
  outline: none;
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.12);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────
   Board Detail page  (/user/:user_id/board-detail/:boardname)
   ──────────────────────────────────────────────────────── */
/* Board detail: collapse the main navbar to maximize screen space */
#within_ember.board-detail-view > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

/* The global navbar stays collapsed off-screen on board-detail to keep
   the modern view immersive. The previous `> header:hover` reveal pulled
   #inner_header down whenever the pointer crossed the top edge (notably
   when reaching for the fixed Beta-feedback tab, which sits in the same
   top:0 band) — an unwanted, surprising pull-down. Board-detail provides
   its own chrome (.md-board-detail-header, Back-to-Boards, go_back, the
   options menu with Exit Speak Mode), so the global navbar is not needed
   for navigation here and the hover-reveal is removed entirely. */
#within_ember.board-detail-view > header #inner_header {
  border-bottom: 1px solid rgba(27, 54, 93, 0.08) !important;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.1) !important;
}

#within_ember.board-detail-view {
  --topbar-height: 0px !important;
}

#within_ember.board-detail-view #content {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: relative;
}

/* Board-detail edit mode: #content has no bento-page-with-footer scroll setup,
   so body overflow:hidden blocks all scrolling. Make #content the scroll container. */
#within_ember.board-detail-view #content:has(.md-shell--board-detail-edit) {
  overflow-y: auto !important;
  height: 100vh;
}

#within_ember.board-detail-view #content::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.15), transparent);
  z-index: 100;
  pointer-events: none;
}

.md-shell--board-detail {
  max-width: 100%;
  padding-top: 0;
  position: relative;
}

.md-shell.md-shell--board-detail:not(.md-shell--board-detail-edit) {
  padding-top: 2px !important;
}

/* Layer 1: Background — same as authenticated-view home page.
   Halo alphas bumped ~30% over the prior version to strengthen the
   atmospheric layering (per design pass) — the rails are now
   translucent enough that they pull the canvas through, so a more
   present canvas now reads as MORE depth, not "more colorful". A
   sixth slate halo near the upper midline adds a horizon layer
   between the upper teal/blue halos and the lower charcoal one. */
.md-shell--board-detail {
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.28), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.24), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.26), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.18), transparent 45%), radial-gradient(1000px 600px at 50% 45%, rgba(90, 106, 133, 0.1), transparent 55%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.14), transparent 50%), linear-gradient(180deg, hsl(45, 15.3846153846%, 104.9019607843%) 0%, hsl(34.2857142857, 14.8936170213%, 100.7843137255%) 50%, rgb(245.9583333333, 244.7916666667, 243.0416666667) 100%);
}

.md-board-detail-layout {
  display: grid;
  grid-template-columns: 194px 1fr 194px;
  gap: 8px;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 16px 20px 20px;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-layout {
  /* No left/right padding in speak mode — the board grid runs edge to edge
     (removes the purple page-background strip on the sides). Top/bottom keep 2px. */
  padding: 2px 0;
  /* 100dvh (dynamic viewport height) tracks the actual visible area on mobile
     — Android Chrome's URL bar eats into the viewport but isn't reflected in
     100vh. dvh keeps the layout flush to the visible bottom so the button grid
     never clips and no empty gutter appears when the URL bar shows/hides. */
  height: calc(100dvh - var(--topbar-height, 68px));
  box-sizing: border-box;
}

/* Speak mode: left/right breathing room lives on the board area (.md-board-detail-main)
   — the layout's own side padding + grid gap are 0 (above), so this is the single
   source of the side inset. Adjust this value to tune the left/right spacing. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-main {
  padding-left: 12px;
  padding-right: 12px;
}

.md-shell--board-detail-edit .md-board-detail-layout {
  padding: 8px;
  /* Constrain the edit layout to the viewport (mirrors the speak-mode
     rule above) so the center board area (.md-board-detail-main, which
     is overflow-y:auto) is the ONLY scroller. Without this the layout
     grew as tall as the board grid, the whole page scrolled, and the
     sticky left/right panels scrolled off the top with it. */
  height: calc(100dvh - var(--topbar-height, 68px));
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}

/* LIGHT-mode EDIT page: the 15%-darker page surface goes on the LAYOUT (the whole
   edit canvas), while the centered board panel (.md-board-detail-main) stays at
   the lighter $surface-200 so it reads as a distinct panel above the canvas.
   (Speak mode instead darkens .md-board-detail-main — see its base rule above.)
   Scoped `:not(.md-board-detail--dark)` so dark mode keeps its own treatment. */
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-detail-layout {
  background: rgb(187.8409090909, 205.75, 223.6590909091);
}

.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-detail-main {
  background: #F0F4F8;
}

/* Edit page: the board area (.md-board-detail-main) is a fixed-height
   scroll viewport with a 24px radius on ALL corners. The rounded BOTTOM
   on the scroll viewport always shows mid-scroll, which (a) makes the
   content look like it ends there and (b) curve-clips the last visible
   button row. Square the bottom corners in edit mode so the cut-off
   bottom edge reads as "there's more — scroll". Top corners keep the
   24px card radius. 2-class selector beats the base single-class
   `.md-board-detail-main { border-radius: 24px }` (and any duplicate)
   regardless of source order. (Rounding the bottom ONLY at the true
   content end is a scroll-state behavior that needs a JS hook — see
   note to the user; not done here to avoid a fragile mechanism.) */
/* Edit page board container: round the BOTTOM corners to match the
   top (the base `.md-board-detail-main` is 24px all round). Paired
   with the extra bottom padding added to the `padding` rule below so
   the last button row clears the rounded corner instead of being
   pinched by it. */
.md-shell--board-detail-edit .md-board-detail-main {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* ── Empty-board state: shown when board has no visible buttons (not in edit mode) ───────── */
.md-board-detail-empty-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 200px;
  padding: 40px 20px;
  text-align: center;
}
.md-board-detail-empty-board p {
  font-size: 19px;
  color: rgba(27, 54, 93, 0.72);
  margin: 0;
  max-width: 480px;
}
.md-board-detail-empty-board .btn {
  font-size: 16px;
  padding: 10px 20px;
}

/* ── Error/retry state: shown when the board fails to load ───────── */
.md-board-detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 240px;
  padding: 48px 24px;
  text-align: center;
}

.md-board-detail-error__message {
  font-size: 19px;
  color: rgba(27, 54, 93, 0.85);
  margin: 0;
  max-width: 520px;
}

.md-board-detail-error__retrying {
  font-size: 16px;
  color: rgba(27, 54, 93, 0.6);
  margin: 0;
  font-style: italic;
}

.md-board-detail-error__retry {
  font-size: 17px;
  padding: 10px 24px;
}

/* Dark board surface: the navy message/retry text is invisible against the
   dark canvas — flip both to light. (The "Try Again" btn is white-on-dark
   already, so it needs no override.) */
.md-board-detail--dark .md-board-detail-error__message {
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-error__retrying {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Board background layer (VSD / scene display): scoped via :has(#board_bg)
   so boards without a background get zero new style rules. ─────────────── */
.md-board-detail-grid.board:has(#board_bg) {
  position: relative;
}

.md-board-detail-grid.board:has(#board_bg) .md-board-detail-grid__cell {
  position: relative;
  z-index: 10;
}

/* ── Integration mode: single-column, full-viewport iframe ─────────── */
.md-shell--board-detail-integration .md-board-detail-layout {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
}

.md-shell--board-detail-integration .md-board-detail-main {
  padding: 0;
  min-height: calc(100dvh - var(--topbar-height, 68px));
  display: flex;
  flex-direction: column;
}

.md-shell--board-detail-integration .md-board-detail-integration-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(27, 54, 93, 0.06);
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

.md-shell--board-detail-integration .md-board-detail-integration-header__title {
  font-weight: 600;
  font-size: 1rem;
  color: #1B365D;
}

.md-shell--board-detail-integration .md-board-detail-integration-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1B365D;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.2);
  border-radius: 4px;
  cursor: pointer;
}

.md-shell--board-detail-integration .md-board-detail-integration-exit:hover,
.md-shell--board-detail-integration .md-board-detail-integration-exit:focus-visible {
  background: rgba(27, 54, 93, 0.08);
  outline: none;
}

.md-shell--board-detail-integration .integration_container {
  flex: 1 1 auto;
  width: 100%;
  display: block;
  position: relative;
}

.md-shell--board-detail-integration #integration_frame {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  border: 0;
}

/* ── Left sidebar ─────────────────────────────────────── */
/* ── Sidebar (expanded view) ──
   Modernized: glass card surface, soft rounded edges, subtle shadow, and
   tighter section rhythm. Collapsed state still wipes width/padding/opacity
   so the transition stays smooth in both directions. */
.md-board-detail-sidebar {
  padding: calc(16px + 5rem) 12px 20px;
  position: relative;
  transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 4px 8px 4px 4px;
}

.md-board-detail-sidebar--collapsed {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  border: none;
  box-shadow: none;
}

/* Expand/collapse toggle */
.md-board-detail-collapse-btn {
  /* WCAG 2.5.5 AAA touch target — was 36×36. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(255, 255, 255, 0.85);
  color: #46505F;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
}

.md-board-detail-collapse-btn:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.12);
}

/* Centered collapse trigger pinned to the top of the mid-section header.
   Hidden alongside the rest of the header when board_collapsed is true
   (see .md-shell--board-collapsed .md-board-detail-header rule). */
.md-board-detail-collapse-btn.md-board-detail-collapse-btn--mid-top {
  position: absolute;
  top: -14px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
}

.md-board-detail-header {
  position: relative;
}

.md-board-detail--dark .md-board-detail-collapse-btn--mid-top {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}

.md-board-detail--dark .md-board-detail-collapse-btn--mid-top:hover {
  background: #fff;
}

/* Side-panel collapse triggers — float at the inner edge of each panel,
   anchored in the top third of the page. Hidden along with the panel itself
   (width:0 + overflow:hidden) when panels_collapsed is true. */
.md-board-detail-collapse-btn.md-board-detail-collapse-btn--side {
  position: absolute;
  top: 0;
  right: auto;
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
}

.md-board-detail-collapse-btn.md-board-detail-collapse-btn--side-left {
  right: 8px;
  left: auto;
}

.md-board-detail-collapse-btn.md-board-detail-collapse-btn--side-right {
  left: 8px;
  right: auto;
}

.md-board-detail--dark .md-board-detail-collapse-btn--side {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}

.md-board-detail--dark .md-board-detail-collapse-btn--side:hover {
  background: #fff;
}

.md-board-detail-collapse-btn--sentence-row {
  position: static !important;
  flex-shrink: 0;
  align-self: center !important;
  /* WCAG 2.5.5 AAA touch target — was 36×36. */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}

/* Each sidebar section is now a glassy card matching the boards-page
   `stat-card` pattern used elsewhere on board-detail speak mode (My
   Board Collection drawer, options menu surfaces). White surface,
   1px subtle border, 3px brand-teal accent stroke at the top, 12px
   radius, layered shadow. Hover brightens the teal stroke so the
   cards feel alive when scanned. This keeps the sidebar consistent
   with the other modern speak-mode surfaces. */
.md-board-detail-sidebar__section {
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-top: 3px solid rgba(20, 127, 130, 0.32);
  border-radius: 12px;
  padding: 10px 10px 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04);
  transition: box-shadow 0.18s ease, border-top-color 0.18s ease;
}

.md-board-detail-sidebar__section:hover {
  border-top-color: rgba(20, 127, 130, 0.5);
}

.md-board-detail-sidebar__section:last-child {
  margin-bottom: 0;
}

/* Section heading aligned with the My Board Collection / boards-page
   stat-label pattern: 11px uppercase brand-slate-blue, 0.12em
   tracking, hairline bottom border inside the card so the heading
   separates from the items without needing a different surface. */
.md-board-detail-sidebar__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6A85;
  margin: 0 0 6px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.07);
}

/* Item rows: tighter padding to match the modern row scale used on
   the collection drawer, while keeping a 44px min-height for WCAG
   2.5.5 AAA touch-target compliance (the icon + label naturally
   center inside that box). 14px label matches collection rows.
   Hover uses the neutral navy tint everywhere else does — no
   competing brand accent on hover. */
.md-board-detail-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.82);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  text-align: left;
  position: relative;
}

.md-board-detail-sidebar__item:hover {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
}

.md-board-detail-sidebar__item:active {
  transform: scale(0.985);
}

/* Active state now uses brand-teal — same accent as the card's top
   border, so the "you are here" indicator stays in family with the
   surrounding card chrome. The 3px left bar is the same shape as
   before. */
.md-board-detail-sidebar__item--active {
  background: linear-gradient(135deg, rgba(20, 127, 130, 0.12), rgba(20, 127, 130, 0.05));
  color: #1B365D;
  font-weight: 600;
  border: 1px solid rgba(20, 127, 130, 0.2);
  box-shadow: 0 1px 4px rgba(20, 127, 130, 0.1);
}

.md-board-detail-sidebar__item--active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: #147F82;
}

.md-board-detail-sidebar__icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.md-board-detail-sidebar__icon--symbol-board {
  background: rgba(42, 157, 143, 0.15);
}

.md-board-detail-sidebar__icon--symbol-board::before {
  content: "💬";
}

.md-board-detail-sidebar__icon--phrase-builder {
  background: rgba(76, 134, 216, 0.15);
}

.md-board-detail-sidebar__icon--phrase-builder::before {
  content: "✍";
}

.md-board-detail-sidebar__icon--favorites {
  background: rgba(212, 168, 75, 0.15);
}

.md-board-detail-sidebar__icon--favorites::before {
  content: "⭐";
}

.md-board-detail-sidebar__icon--recent {
  background: rgba(160, 120, 200, 0.15);
}

.md-board-detail-sidebar__icon--recent::before {
  content: "🕓";
}

.md-board-detail-sidebar__icon--progress-reports {
  background: rgba(76, 134, 216, 0.15);
}

.md-board-detail-sidebar__icon--progress-reports::before {
  content: "📊";
}

.md-board-detail-sidebar__icon--sessions {
  background: rgba(42, 157, 143, 0.15);
}

.md-board-detail-sidebar__icon--sessions::before {
  content: "📅";
}

.md-board-detail-sidebar__icon--profiles {
  background: rgba(160, 120, 200, 0.15);
}

.md-board-detail-sidebar__icon--profiles::before {
  content: "👤";
}

.md-board-detail-sidebar__icon--goal-tracking {
  background: rgba(240, 106, 91, 0.15);
}

.md-board-detail-sidebar__icon--goal-tracking::before {
  content: "🎯";
}

.md-board-detail-sidebar__icon--preferences {
  background: rgba(70, 80, 95, 0.12);
}

.md-board-detail-sidebar__icon--preferences::before {
  content: "⚙";
}

.md-board-detail-sidebar__icon--voice-output {
  background: rgba(91, 141, 239, 0.15);
}

.md-board-detail-sidebar__icon--voice-output::before {
  content: "🔊";
}

/* ── Main content ─────────────────────────────────────── */
/* Layer 2: Panel container */
.md-board-detail-main {
  padding: 0 7px 7px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Keep the top of the board clear of the scroll-viewport edge so a
     scrolled-to button row is never clipped flush at the top. */
  scroll-padding-top: 16px;
  /* Soft light-gray from the surface scale instead of pure white — the
     all-white canvas read as too stark behind the board. Taken 15% darker (per
     design pass) so the board grid reads with more contrast against its canvas.
     LIGHT mode only — dark mode overrides this background (see
     `.md-board-detail--dark .md-board-detail-main`). This is the SPEAK-mode page
     surface; EDIT mode keeps the centered board panel at $surface-200 and moves
     the darker surface onto .md-board-detail-layout instead (see the
     `.md-shell--board-detail-edit:not(.md-board-detail--dark)` rules below). */
  background: rgb(187.8409090909, 205.75, 223.6590909091);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Unified hairline (.06 alpha) matching the rails + toolbar — was
     a heavier .12 that read as a hard outline against the calmer
     surrounding chrome. The layered shadow stack (close + mid + broad
     ambient + inset top highlight) now carries the center-stage
     separation. */
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 24px rgba(27, 54, 93, 0.06), 0 24px 60px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* SPEAK / viewing mode (light): the board canvas reads as a flush surface that
   fills its column, not a floating rounded card — drop the rounded corners,
   hairline border, and drop shadow the base rule gives it. The left nav + right
   activity panels stay (the 194px grid columns are unchanged); only the board's
   own card framing is removed. Scoped to speak + light so EDIT mode keeps its
   rounded board panel and dark mode keeps its own treatment. The 0,4,0 selector
   beats the base .md-board-detail-main (0,1,0) regardless of source order — this
   is the same mode-scoping pattern the edit/dark variants already use, not a
   specificity patch. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-main {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Top bar: boards picker, expand/collapse, close */
.md-board-detail-main__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.md-board-detail-main__topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* My Boards button */
.md-board-detail-boards-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(70, 80, 95, 0.3);
  background: #7693B9;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow: 0 1px 4px rgba(70, 80, 95, 0.25);
}

.md-board-detail-boards-btn:hover {
  filter: brightness(0.92);
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.3);
}

.md-board-detail-boards-btn svg {
  width: 28px;
  height: 28px;
}

/* Sentence bar */
.md-board-detail-sentence-row {
  display: flex;
  align-items: stretch;
  /* 13px (odd) so the 1px ::before/::after dividers on the sentence bar can
     sit perfectly centered in the gap with whole-pixel symmetry on both sides
     (6px from the bar, 6px from the adjacent stack). */
  gap: 13px;
  flex-shrink: 0;
  margin: 1px 4px 3px 4px;
}

/* Sentence-bar mock wrapper — wraps the #speak sentence-row on
   board-detail. In edit mode (`md-shell--board-detail-edit`) the
   sentence bar is a non-functional mockup of speak-mode UX, so the
   wrapper gives it a sunken, darker recess so the user reads it as
   "preview, not active". Centered EDITING badge sits above the row
   inside the same wrapper. Outside edit mode (real speak mode on
   board-detail) this wrapper is layout-transparent — no background,
   no padding, no shadow — so the working sentence bar is unaffected. */
/* EDIT MODE — EDITING badge + speak-bar preview + board grid as one
   visually-continuous sunken section.

   PREVIOUS ATTEMPT: wrap the real #speak row in a `--mock` div + use
   CSS `order` on .md-board-detail-main's children to put header first
   and the wrap second. That did not work — .md-board-detail-main has
   many more direct children than the three I targeted (color-legend,
   toolbar, divider, etc.), all of which fell
   back to `order: 0` and rendered above the explicitly-ordered items.
   Reverted both the `--mock` wrap and the order rules; the rendered
   layout was effectively backwards. The natural DOM order already
   gives the right structure for the visual the design calls for —
   the header card sits above, then toolbar, then a divider, then the
   visible speak-bar preview, then the grid. The EDITING pill is now
   rendered inline (in the template) directly above that preview row,
   so the recessed section can be styled on those existing siblings.

   The three pieces below form one continuous recessed block visually
   (matching backgrounds, only the outer corners rounded, no border
   between them, no margin between them): EDITING wrap (top of the
   sunken section, top corners rounded) → preview sentence row (side
   borders only) → grid wrap (bottom of the sunken section, bottom
   corners rounded). Edit-mode-scoped under .md-shell--board-detail-
   edit so the speak-mode view is untouched. */
/* (The `.md-board-detail-edit-mode-badge-wrap` rules that used to live
   here were removed when the Editing pill moved into the title row.
   The preview sentence row below now owns the well's top piece —
   border-top + rounded top corners + the inset top-shadow that used
   to live on the wrap. */
.md-shell--board-detail-edit .md-board-detail-sentence-row--preview {
  /* Background matched to the outer button div (the grid-sidebar
     wrap) per request: same `rgba($la-navy, 0.03)` light tint so
     the sentence bar reads as continuous with the button surface
     below it instead of as a raised strip. The depth-cue shadows
     below are kept so the strip still casts onto the wrap; only
     the bg fill changed. */
  padding: 8px 12px 8px;
  margin: 0 4px 0 4px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.04);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 2px 6px rgba(27, 54, 93, 0.08), 0 4px 10px rgba(27, 54, 93, 0.08);
}

.md-shell--board-detail-edit .md-board-detail-grid-sidebar-wrap {
  /* Background canvas tier — sits one step DEEPER than the strip
     above. Softer bg alpha (.06 → .03) so the strip reads as
     visibly raised above it; still visible enough to envelop the
     board buttons. */
  padding: 10px 12px 10px;
  margin: 0 4px 4px 4px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.04);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* "Hide speak bar" — when the preview-row strip above the wrap
   is removed (display:none via .md-board-detail-sentence-row--hide-bar),
   the wrap is left at the top of the panel with the bottom-only
   rounding + missing top border the rule above assumed would butt
   against the strip. Round all four corners + restore the top
   border so the wrap reads as a complete self-contained panel.
   Scoped via :has() on the closest common ancestor since the
   strip and the wrap are siblings of .md-board-detail-main, not
   nested. */
.md-shell--board-detail-edit .md-board-detail-main:has(.md-board-detail-sentence-row--hide-bar) .md-board-detail-grid-sidebar-wrap {
  border-top: 1px solid rgba(27, 54, 93, 0.04);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Dark-mode top stack: was using rgba(0,0,0,.28) fill + rgba(0,0,0,.45)
   stroke, which read as a hard near-black cut-out against the lifted
   #1d293d center stage — exactly the harsh-border / panel-edge look
   the atmospheric-depth pass is moving away from. Swapped to a
   subtle dark-tint fill (still recessed vs. the stage) + a barely-
   there translucent-white hairline + a softer inset shadow. The
   well-effect now comes from the layered shadows, not a stroked
   silhouette.
   The badge-wrap selector was dropped from this rule when the
   Editing pill moved into the header; the preview row picked up
   the wrap's dark inset-shadow treatment via the dedicated rule
   below. */
/* Depth hierarchy (per design pass): the grid background (wrap) sits
   one step DEEPER than the category strip above. The strip reads as
   "slightly raised" via brighter bg + a soft outer drop shadow on
   its BOTTOM edge that casts onto the wrap below. The wrap stays
   visible (still envelops the buttons) but at a lower alpha — it
   reads as the grid's "background canvas" tier. Tiles (already
   carrying their own atmospheric chrome from a prior pass) remain
   the primary interactive elevation. */
.md-shell--board-detail-edit.md-board-detail--dark .md-board-detail-sentence-row--preview {
  /* Dark-mode bg matched to the outer button div (grid-sidebar
     wrap) per request: same `rgba(255, 255, 255, 0.08)` so the
     sentence bar shares the wrap's surface tone instead of
     reading as a lifted strip above it. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.md-shell--board-detail-edit.md-board-detail--dark .md-board-detail-grid-sidebar-wrap {
  /* Background canvas tier — softer alpha (.12 → .08) so the strip
     above reads as one step raised above it. Still clearly visible
     enough to envelop the buttons. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* "Hide speak bar" — dark-mode parallel of the light rule above.
   The wrap's hide-bar rule sets a fresh top border with the
   light-mode color; in dark mode the rest of the wrap's border
   reads as `rgba(255, 255, 255, 0.08)`, so the top border needs
   the same translucent-white tint instead of the navy. */
.md-shell--board-detail-edit.md-board-detail--dark .md-board-detail-main:has(.md-board-detail-sentence-row--hide-bar) .md-board-detail-grid-sidebar-wrap {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Header-level edit actions — the relocated Discard / Save tiles in
   the title-row-center. The tiles keep their existing
   .md-board-edit-panel__tile + --discard / --save classes (and so the
   __top scoped styling in app.scss still paints them), but the slot
   is much smaller than the original left-panel cluster, so this rule
   shrinks the grid and tightens the tiles for the header context. */
.md-board-detail-header__edit-actions {
  /* Center column holds the Editing pill (and the optional Copy
     badge). Horizontal flex with center-justify keeps the pill
     centered when it's solo, and lays the badge next to it when
     the copy-on-save flow is active. The Discard / Save tile pair
     lives in the right column (`__title-row-right`) where it
     right-aligns to the trailing edge of the title row. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.md-board-detail-header__edit-actions-grid .md-board-edit-panel__share-grid {
  display: grid;
  /* Narrower minimum so the tiles can sit at their actual content
     width when there's no headroom — previously 96px forced the
     buttons to stretch even when the label only needed ~64px. */
  grid-template-columns: repeat(2, minmax(72px, auto));
  gap: 6px;
}

.md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile {
  /* DISCARD (base tile) — de-emphasized secondary action per
     design pass. Lower fill alpha (.55 → .25), hairline border stays
     soft. The tile reads as a calm glass pill rather than a
     primary control. SAVE (--save modifier rule below) carries the
     stronger fill so the primary CTA stays distinct without the
     prior hard outlining. !important because the scoped __top
     rules declare these props with !important too. */
  padding: 9px 12px !important;
  min-height: 0 !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(27, 54, 93, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(27, 54, 93, 0.03) !important;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile:hover {
  /* Hover lift — softer than the prior .75 / .14 jump; reads as a
     gentle wake-up, not a primary affordance. */
  background: rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(27, 54, 93, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(27, 54, 93, 0.06) !important;
  transform: translateY(-1px);
}

.md-board-detail--dark .md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile {
  /* Dark Discard — pulled further back (.06 → .04 bg, .08 → .05
     border) so it reads as the recessive secondary against the
     softer Save below. */
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

.md-board-detail--dark .md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Save and Exit — softer glass pill (was carrying a hard slate-blue
   .50 border that read as "admin-UI utility"). Border alphas pulled
   back ~50% so the fill carries the primary signal and the outline
   reads as a soft glass ring, not a punched edge. */
.md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile--save {
  background: rgba(90, 106, 133, 0.3) !important;
  border-color: rgba(90, 106, 133, 0.25) !important;
  color: #fff !important;
}

.md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile--save:hover {
  background: rgba(90, 106, 133, 0.42) !important;
  border-color: rgba(90, 106, 133, 0.4) !important;
  color: #fff !important;
}

.md-board-detail--dark .md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile--save {
  /* Dark Save — same softening, border alpha .55 → .30. */
  background: rgba(90, 106, 133, 0.38) !important;
  border-color: rgba(90, 106, 133, 0.3) !important;
  color: #fff !important;
}

.md-board-detail--dark .md-board-detail-header__edit-actions-grid .md-board-edit-panel__tile--save:hover {
  background: rgba(90, 106, 133, 0.5) !important;
  border-color: rgba(90, 106, 133, 0.45) !important;
  color: #fff !important;
}

.md-board-detail-header__edit-actions-grid .md-board-edit-panel__icon {
  width: 15px !important;
  height: 15px !important;
}

.md-board-detail-sentence-row > .md-board-detail-boards-btn {
  flex-shrink: 0;
}

/* Stacked nav buttons (home + back) to the left of the sentence bar */
.md-board-detail-sentence-nav {
  /* Stacked column matching the right-side .actions-wrap--stacked pattern:
     no pill container — just two standalone buttons separated by a small gap. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
}

/* Top of the left stack — "primary" weight, mirrors .md-board-detail-actions-toggle. */
.md-board-detail-sentence-nav__btn {
  /* WCAG 2.5.5 AAA touch target. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(70, 80, 95, 0.2);
  background: #7693B9;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-board-detail-sentence-nav__btn svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.md-board-detail-sentence-nav__btn:hover {
  background: #6583a9;
}

.md-board-detail-sentence-nav__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.md-board-detail-sentence-nav__btn:disabled:hover {
  background: #7693B9;
}

/* Bottom of the left stack — "secondary" weight, mirrors .md-board-detail-sidebar-toggle--stacked.
   Also overrides the legacy `align-self: center` so the button stacks
   properly inside the column rather than centering in the parent row. */
.md-board-detail-sentence-nav .md-board-detail-collapse-btn--sentence-row {
  align-self: stretch !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(70, 80, 95, 0.2) !important;
  background: rgba(118, 147, 185, 0.15) !important;
  color: #46505F !important;
  box-shadow: none !important;
}

.md-board-detail-sentence-nav .md-board-detail-collapse-btn--sentence-row:hover {
  background: rgba(118, 147, 185, 0.3) !important;
  box-shadow: none !important;
}

/* Home button — sits to the left of the sentence bar inside .md-board-detail-sentence-row.
   Mirrors the sentence bar's glass + sunken-well styling so the two elements
   read as a single coordinated row. */
.md-board-detail-home-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  /* min-height was 72px — that floor exceeded the canonical 50/70
     px row heights at "tiny"/"small" and forced the row taller than
     the user's vocalization_height setting. Lowered to 50px (the
     smallest canonical row height) so the home button stretches to
     match the row via `align-items: stretch` on the parent, instead
     of dictating the row's height. */
  min-height: 50px;
  padding: 10px;
  /* Negative right margin shrinks the visual gap to the sentence bar
     without touching the row's intentional 13px gap (which is calibrated
     for the sentence bar's pseudo-element dividers on its other side). */
  margin-right: -8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(110, 122, 140, 0.32);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: #1b2a4a;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  /* Floating-chip elevation matching the sentence bar — was a
     four-inset sunken-well treatment; now an inset top highlight
     + soft outer drop so the button sits raised over the center
     stage and reads as the same surface tier as the bar. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(27, 54, 93, 0.1);
}

.md-board-detail-home-btn:hover {
  background: rgba(110, 122, 140, 0.42);
}

.md-board-detail-home-btn:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail-home-btn:focus-visible {
  outline: none;
  /* Focus ring on top of the floating-chip elevation. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(27, 54, 93, 0.1), 0 0 0 3px #2A9D8F;
}

.md-board-detail--dark .md-board-detail-home-btn {
  color: #fff;
}

/* Left nav stack — Home button, plus (inside a folder) a Back button
   beneath it. Mirrors the right-side
   .md-board-detail-sentence-bar__actions-wrap--stacked column so the row
   reads symmetric: stacked controls | sentence bar | stacked controls.
   Owns the home button's former -8px right margin so the gap to the
   sentence bar stays tight. */
.md-board-detail-nav-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
  margin-right: -8px;
}

/* Home fills the column on its own (no folder). When a Back button joins
   it (`--with-back`), the two split the row height evenly — ~44px each at
   the default size — so Home visually shrinks to make room for Back. */
.md-board-detail-nav-stack .md-board-detail-home-btn {
  flex: 1;
  min-height: 0;
  margin-right: 0;
}

/* When the Back button is present, Home ALSO caps at 44×44 (matching Back) so the
   stacked pair fits the user's sentence-bar height preset instead of forcing the
   row taller. Home only grows to fill the bar when it's ALONE (back absent — the
   flex:1 rule above stays in effect). Equal specificity to that rule, placed after
   so it wins when --with-back is present. */
.md-board-detail-nav-stack--with-back .md-board-detail-home-btn {
  flex: 0 0 auto;
  width: 44px;
}

.md-board-detail-nav-stack--with-back .md-board-detail-home-btn svg {
  width: 22px;
  height: 22px;
}

/* Back button under Home — only inside a folder. Styled to mirror the
   right-side sidebar dropdown button (.md-board-detail-sidebar-toggle
   --stacked): translucent blue-grey tint, charcoal icon, 12px radius —
   but carries the back chevron and matches Home's 56px width so the two
   stack as one coordinated column. */
.md-board-detail-nav-stack__back {
  /* Fixed 44×44 touch target — NOT flex:1. When Back shows, Home + Back stack in
     this column; if each GREW to fill the row (flex:1), the pair's intrinsic
     height (~2×55px with a 33px svg) would push the sentence row TALLER than the
     user's chosen sentence-bar height (small=90px = 44 + 2 gap + 44), silently
     overriding their `vocalization_height` preference. `flex: 0 0 auto` + a 22px
     svg sizes each button to exactly 44px (border-box: 22 svg + 20 padding + 2
     border), so the pair fits inside the preset and the row stays at the chosen
     height — mirroring the right-side stacked toggle pair. */
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(70, 80, 95, 0.2);
  background: rgba(118, 147, 185, 0.15);
  color: #46505F;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.md-board-detail-nav-stack__back svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.md-board-detail-nav-stack__back:hover {
  background: rgba(118, 147, 185, 0.3);
}

.md-board-detail-nav-stack__back:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail--dark .md-board-detail-nav-stack__back {
  color: #e1e5eb;
}

.md-board-detail-sentence-bar {
  flex: 1;
  /* Allow the bar to shrink below its content's intrinsic width so a long
     composed message wraps/scrolls inside the bar instead of widening the
     row and pushing the right-side menus off the page. */
  min-width: 0;
  /* `position: relative` so the ::before / ::after dividers can position
     themselves outside the bar's left and right edges. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Height stretches to match the surrounding stacked button groups via the
     parent .md-board-detail-sentence-row's `align-items: stretch`. */
  min-height: 82px;
  /* Tighter 4px left padding so chips/words start closer to the bar's edge. */
  padding: 2px 10px 2px 4px;
  border-radius: 18px;
  background: rgba(110, 122, 140, 0.32);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  color: #fff;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Floating-chip elevation (was a four-inset "sunken well" treatment
     which read as utility-recessed). Now: an inset top-edge highlight
     + a soft outer ambient drop, so the bar sits slightly raised over
     the center stage — same depth-hierarchy direction the edit-mode
     preview-strip got. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(27, 54, 93, 0.1);
}

/* Speak Bar → "Sentence Bar" size. The size class is applied to the
   .md-board-detail-sentence-row by `sentence_bar_height_class`. Each
   size sets the bar's min-height to the canonical px (matching
   voice_height_options labels: Tiny 50 / Small 70 / Medium 100 /
   Large 150 / Huge 200) AND a `--nb-sb-scale` multiplier so the
   inner content (text, chips, icons) scales with the bar instead of
   leaving dead space. Medium is the 1.0 baseline (current px). The
   scale rules below read the var with a `, 1` fallback, so contexts
   that don't set it (e.g. the create-board-new preview, which uses a
   different size class) are unchanged. Higher specificity than the
   base rules, so no !important needed. */
/* SassC/libsass can't evaluate `calc(px * var(...))` — it mangles the
   unit×var arithmetic so the multiplier silently fell back to base
   (invisible at Tiny/Small/Medium where it's ×1, but Large/Huge never
   grew — including the right-side buttons). Fix per recurring-problem
   #14: PRECOMPUTE every size as a plain px custom property; plain
   `var()` (no arithmetic) passes through libsass fine. Each size sets:
     --nb-sb-h    chip/text min content height (bar min-height − 4px)
     --nb-sb-h2   chip max height (2 × --nb-sb-h)
     --nb-sb-ph   prediction tile min height (--nb-sb-h − 8px group pad)
     --nb-sb-ph2  prediction tile max height (2 × --nb-sb-ph)
     --nb-sb-font typed-text font (20 base; ≥ base — 14px floor)
     --nb-sb-lbl  chip/prediction label (14 base; never below 14)
     --nb-sb-img  chip symbol image (50 base; grows only > medium)
     --nb-sb-pimg prediction image (48 base; grows only > medium)
     --nb-sb-minw chip min-width (44 base)
     --nb-sb-sbtn right-side button icon — mic / backspace / trash /
                  chevron (18 base; never below base, grows > medium)
   Small/Medium keep base sizes (no shrink); only Large/Huge
   enlarge. Home button (left) is intentionally left untouched.
   The `tiny` size was removed because it forced the stacked
   Options + Sidebar toggles on the right of the bar below their
   WCAG 2.5.5 AAA 44×44 touch-target floor. `small` is now 90px
   (was 70) so the stacked toggle pair fits at 44 + 2 gap + 44.
   Legacy users with `vocalization_height: 'tiny'` saved on their
   device are mapped to `'small'` by utils/display_prefs.js, so any
   tiny-tagged element here would render at small's 90px anyway —
   the CSS just no longer needs a dedicated `--tiny` rule. */
.md-board-detail-sentence-row.md-board-detail-sentence-bar--small {
  --nb-sb-h: 86px;
  --nb-sb-h2: 172px;
  --nb-sb-ph: 78px;
  --nb-sb-ph2: 156px;
  --nb-sb-font: 20px;
  --nb-sb-lbl: 14px;
  --nb-sb-img: 50px;
  --nb-sb-pimg: 48px;
  --nb-sb-minw: 44px;
  --nb-sb-sbtn: 18px;
  --nb-sb-btnh: 55px;
  --nb-sb-btnw: 44px;
  min-height: 90px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--small .md-board-detail-sentence-bar {
  min-height: 90px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--medium {
  --nb-sb-h: 96px;
  --nb-sb-h2: 192px;
  --nb-sb-ph: 88px;
  --nb-sb-ph2: 176px;
  --nb-sb-font: 20px;
  --nb-sb-lbl: 14px;
  --nb-sb-img: 50px;
  --nb-sb-pimg: 48px;
  --nb-sb-minw: 44px;
  --nb-sb-sbtn: 18px;
  --nb-sb-btnh: 55px;
  --nb-sb-btnw: 44px;
  min-height: 100px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--medium .md-board-detail-sentence-bar {
  min-height: 100px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--large {
  --nb-sb-h: 146px;
  --nb-sb-h2: 292px;
  --nb-sb-ph: 138px;
  --nb-sb-ph2: 276px;
  --nb-sb-font: 29px;
  --nb-sb-lbl: 20px;
  --nb-sb-img: 73px;
  --nb-sb-pimg: 70px;
  --nb-sb-minw: 64px;
  --nb-sb-sbtn: 26px;
  --nb-sb-btnh: 80px;
  --nb-sb-btnw: 64px;
  min-height: 150px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--large .md-board-detail-sentence-bar {
  min-height: 150px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--huge {
  --nb-sb-h: 196px;
  --nb-sb-h2: 392px;
  --nb-sb-ph: 188px;
  --nb-sb-ph2: 376px;
  --nb-sb-font: 38px;
  --nb-sb-lbl: 27px;
  --nb-sb-img: 95px;
  --nb-sb-pimg: 91px;
  --nb-sb-minw: 84px;
  --nb-sb-sbtn: 34px;
  --nb-sb-btnh: 105px;
  --nb-sb-btnw: 84px;
  min-height: 200px;
}

.md-board-detail-sentence-row.md-board-detail-sentence-bar--huge .md-board-detail-sentence-bar {
  min-height: 200px;
}

/* Short viewports (<=500px tall, e.g. landscape phones): shrink the sentence
   bar ~30% — bar height AND all inner content (heights, widths, fonts, images,
   icons) scaled to 0.7 of each size preset so the bar doesn't eat a short
   screen. libsass can't evaluate calc(px * var()), so each reduced value is
   precomputed (= round(original * 0.7)). */
@media (max-height: 500px) {
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--small {
    --nb-sb-h: 60px;
    --nb-sb-h2: 120px;
    --nb-sb-ph: 55px;
    --nb-sb-ph2: 109px;
    --nb-sb-font: 14px;
    --nb-sb-lbl: 10px;
    --nb-sb-img: 35px;
    --nb-sb-pimg: 34px;
    --nb-sb-minw: 31px;
    --nb-sb-sbtn: 13px;
    --nb-sb-btnh: 39px;
    --nb-sb-btnw: 31px;
    min-height: 63px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--small .md-board-detail-sentence-bar {
    min-height: 63px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--medium {
    --nb-sb-h: 67px;
    --nb-sb-h2: 134px;
    --nb-sb-ph: 62px;
    --nb-sb-ph2: 123px;
    --nb-sb-font: 14px;
    --nb-sb-lbl: 10px;
    --nb-sb-img: 35px;
    --nb-sb-pimg: 34px;
    --nb-sb-minw: 31px;
    --nb-sb-sbtn: 13px;
    --nb-sb-btnh: 39px;
    --nb-sb-btnw: 31px;
    min-height: 70px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--medium .md-board-detail-sentence-bar {
    min-height: 70px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--large {
    --nb-sb-h: 102px;
    --nb-sb-h2: 204px;
    --nb-sb-ph: 97px;
    --nb-sb-ph2: 193px;
    --nb-sb-font: 20px;
    --nb-sb-lbl: 14px;
    --nb-sb-img: 51px;
    --nb-sb-pimg: 49px;
    --nb-sb-minw: 45px;
    --nb-sb-sbtn: 18px;
    --nb-sb-btnh: 56px;
    --nb-sb-btnw: 45px;
    min-height: 105px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--large .md-board-detail-sentence-bar {
    min-height: 105px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--huge {
    --nb-sb-h: 137px;
    --nb-sb-h2: 274px;
    --nb-sb-ph: 132px;
    --nb-sb-ph2: 263px;
    --nb-sb-font: 27px;
    --nb-sb-lbl: 19px;
    --nb-sb-img: 67px;
    --nb-sb-pimg: 64px;
    --nb-sb-minw: 59px;
    --nb-sb-sbtn: 24px;
    --nb-sb-btnh: 74px;
    --nb-sb-btnw: 59px;
    min-height: 140px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--huge .md-board-detail-sentence-bar {
    min-height: 140px;
  }
  /* Shrink the row-height-forcing controls so the bar actually collapses to
     the reduced height (otherwise the chips shrink but the stacked options +
     sidebar toggles — 44px min-height each — hold the row ~90px tall). Also
     shrinks the options/sidebar icons. !important is needed to beat the
     mode-scoped toggle rules (and the base sidebar-toggle--stacked !important).
     The home button stretches to the row, so this just lowers its floor and
     narrows it + its icon. */
  /* Options (⋮) + sidebar/expand toggle render the SAME size here. Scoped under
     the stacked wrap (2 classes + !important) so it beats BOTH toggles' base
     rules — including sidebar-toggle--stacked's own !important sizing, which
     otherwise wins by source order and leaves the two buttons mismatched. They
     keep flex:1 (from the shared rule), so they split the reduced bar height
     equally; identical width/min-height + matching icons make them uniform. */
  .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-actions-toggle,
  .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-sidebar-toggle--stacked {
    width: 32px !important;
    min-width: 32px !important;
    min-height: 26px !important;
    border-radius: 9px !important;
  }
  .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-actions-toggle svg,
  .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-sidebar-toggle--stacked svg {
    width: 13px !important;
    height: 13px !important;
  }
  .md-board-detail-home-btn {
    width: 40px;
    min-height: 35px;
    padding: 6px;
  }
  .md-board-detail-home-btn svg {
    width: 22px;
    height: 22px;
  }
  /* Keep the Back button's box matched to the Home button at this height. */
  .md-board-detail-nav-stack__back {
    width: 40px;
    min-height: 35px;
    padding: 6px;
  }
  .md-board-detail-nav-stack__back svg {
    width: 22px;
    height: 22px;
  }
}
/* Even shorter viewports (<=400px tall): take the <=500h presets and drop the
   bar 10px shorter per class, scaling the inner content (chip/prediction/button
   heights, images, fonts, icons) by each class's own height ratio so the row
   adjusts to the shorter bar instead of clipping. After the <=500h block so it
   overrides at equal specificity (both media queries match at <=400px). The
   <=500h toggle/home/svg shrink still applies here and stretches to the row. */
@media (max-height: 400px) {
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--small {
    --nb-sb-h: 50px;
    --nb-sb-h2: 100px;
    --nb-sb-ph: 46px;
    --nb-sb-ph2: 91px;
    --nb-sb-font: 12px;
    --nb-sb-lbl: 8px;
    --nb-sb-img: 29px;
    --nb-sb-pimg: 28px;
    --nb-sb-minw: 26px;
    --nb-sb-sbtn: 11px;
    --nb-sb-btnh: 33px;
    --nb-sb-btnw: 26px;
    min-height: 53px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--small .md-board-detail-sentence-bar {
    min-height: 53px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--medium {
    --nb-sb-h: 57px;
    --nb-sb-h2: 114px;
    --nb-sb-ph: 53px;
    --nb-sb-ph2: 105px;
    --nb-sb-font: 12px;
    --nb-sb-lbl: 9px;
    --nb-sb-img: 30px;
    --nb-sb-pimg: 29px;
    --nb-sb-minw: 26px;
    --nb-sb-sbtn: 11px;
    --nb-sb-btnh: 33px;
    --nb-sb-btnw: 26px;
    min-height: 60px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--medium .md-board-detail-sentence-bar {
    min-height: 60px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--large {
    --nb-sb-h: 92px;
    --nb-sb-h2: 184px;
    --nb-sb-ph: 87px;
    --nb-sb-ph2: 174px;
    --nb-sb-font: 18px;
    --nb-sb-lbl: 13px;
    --nb-sb-img: 46px;
    --nb-sb-pimg: 44px;
    --nb-sb-minw: 41px;
    --nb-sb-sbtn: 16px;
    --nb-sb-btnh: 50px;
    --nb-sb-btnw: 41px;
    min-height: 95px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--large .md-board-detail-sentence-bar {
    min-height: 95px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--huge {
    --nb-sb-h: 127px;
    --nb-sb-h2: 254px;
    --nb-sb-ph: 122px;
    --nb-sb-ph2: 244px;
    --nb-sb-font: 25px;
    --nb-sb-lbl: 18px;
    --nb-sb-img: 62px;
    --nb-sb-pimg: 59px;
    --nb-sb-minw: 55px;
    --nb-sb-sbtn: 22px;
    --nb-sb-btnh: 69px;
    --nb-sb-btnw: 55px;
    min-height: 130px;
  }
  .md-board-detail-sentence-row.md-board-detail-sentence-bar--huge .md-board-detail-sentence-bar {
    min-height: 130px;
  }
}
/* Inner content — all plain `var()` (no calc arithmetic). Fallbacks
   keep var-less contexts (e.g. create-board-new preview) original. */
.md-board-detail-sentence-row .md-board-detail-sentence-bar__text {
  font-size: var(--nb-sb-font, 21px);
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__chip {
  /* Stretch to the bar's real content height so the chip always
     fills the bar (2px top/bottom from the bar's own padding) at any
     size. min-height = size floor (never smaller); max-height =
     double it (grow to fit content, no further). */
  align-self: stretch;
  min-height: var(--nb-sb-h, 86px);
  max-height: var(--nb-sb-h2, 172px);
  height: auto;
  min-width: var(--nb-sb-minw, 44px);
}

/* "Hide speak bar" preference — toggle in the right panel's Speak
   Bar section.

   The two surfaces behave differently when the toggle is ON:

   1. EDIT MODE preview row (`.md-board-detail-sentence-row--preview`):
      removed entirely (display:none). It's a non-interactive mock of
      the speak bar — nothing useful to keep visible.

   2. SPEAK MODE live row (`#speak`): the bulky middle sentence-bar
      (chips / text / back / modeling badge / sentence-bar tools) is
      hidden, the row's full-width chrome strip is stripped, and the
      row is repositioned as a compact floating cluster anchored to
      the top-right of the speak-mode main area. The cluster keeps
      the home button + options-menu trigger + sidebar toggle
      side-by-side so the user retains navigation, speak menu, and
      sidebar access without the vertical space cost of a full bar.
      The wrap below picks up rounded top corners + restored top
      border via the rule near app.scss:58541. */
/* Edit-mode preview row: hidden entirely (chained class selector
   beats single-class --hide-bar by specificity). */
.md-board-detail-sentence-row--preview.md-board-detail-sentence-row--hide-bar {
  display: none !important;
}

/* Speak-mode live row: floating top-right cluster. Scoped to non-edit
   shell so the edit-mode hide above isn't accidentally re-shown by
   this rule's specificity. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar {
  position: absolute;
  top: 8px;
  /* Span the full width so Home sits LEFT-aligned and the options/sidebar
     cluster stays RIGHT (split via justify-content:space-between), rather than
     all three bunched at the top-right. */
  left: 8px;
  right: 8px;
  width: auto;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  /* Home (nav stack) on the left edge, options + sidebar cluster on the right. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 50;
}

/* Hide the middle sentence-bar block (chips / text / back-btn /
   modeling badge / sentence-bar tools). The home button and the
   __actions-wrap (options toggle + sidebar toggle) remain visible
   because they're SIBLINGS of the sentence-bar inside #speak. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar .md-board-detail-sentence-bar {
  display: none !important;
}

/* The actions-wrap is `--stacked` (vertical) by default for the
   side-of-the-bar layout. In the floating cluster we want options +
   sidebar laid out side-by-side alongside home, so override to
   horizontal and let each button keep its intrinsic size. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar .md-board-detail-sentence-bar__actions-wrap--stacked {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-actions-toggle,
.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar .md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-sidebar-toggle {
  flex: none;
  align-self: center;
}

/* Resize the home button to match the other two cluster buttons
   (options-toggle + sidebar-toggle are 44×44 with 12px radius;
   the bar-mode home was 56×50 with 18px radius and 10px padding
   to sit comfortably alongside the sentence-bar's larger chrome).
   In the floating cluster the three buttons should read as one
   set of equal-weight icon controls, so match the 44×44 / 12px
   vocabulary. padding:0 because the home SVG (33×33) fits inside
   44×44 with built-in slack. Drop the compensating right-margin
   (was -8px to close a gap to the sentence-bar's pseudo-divider) —
   in the cluster the gap is owned by the parent's `gap: 6px`. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) #speak.md-board-detail-sentence-row--hide-bar .md-board-detail-home-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  margin-right: 0;
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__chip-img {
  width: var(--nb-sb-img, 50px);
  height: var(--nb-sb-img, 50px);
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__chip-label {
  font-size: var(--nb-sb-lbl, 15px);
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__text--with-symbols {
  /* Wrap chips into rows and scroll VERTICALLY, capping the scroll
     viewport at the bar's per-size content height (--nb-sb-h). A long
     message keeps its most-recent chips in view — older rows scroll up
     out of sight (driven to the bottom by _scroll_sentence_to_newest in
     controllers/user/board-detail.js) — instead of stretching into one
     non-wrapping row that expands the bar horizontally and pushes the
     right-side menus off the page. `min-width: 0` lets this flex child
     shrink below its content width so wrapping/scrolling actually
     engages rather than forcing the bar (and the row) wider. */
  align-self: stretch;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: var(--nb-sb-h, 86px);
  max-height: var(--nb-sb-h, 86px);
}

/* Prediction tiles live in __prediction-group (4px top + 4px bottom
   padding); --nb-sb-ph already accounts for the 8px. */
.md-board-detail-sentence-row .md-board-detail-sentence-bar__prediction {
  align-self: stretch;
  min-height: var(--nb-sb-ph, 78px);
  max-height: var(--nb-sb-ph2, 156px);
  height: auto;
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__prediction-img {
  width: var(--nb-sb-pimg, 48px);
  height: var(--nb-sb-pimg, 48px);
}

/* Predicted-word font is NOT coupled to the sentence-bar size class
   (--nb-sb-lbl) — it matches the board buttons instead (see the base
   .md-board-detail-sentence-bar__prediction-label rule). */
/* Right-side action buttons — mic (speak), backspace, trash, chevron.
   Scale only the icon (svg), floored at base (18px ≤ medium, no
   shrink) and growing on Large/Huge, like the chips. The home button
   on the LEFT is deliberately not included. */
.md-board-detail-sentence-row .md-board-detail-sentence-bar__btn svg,
.md-board-detail-sentence-row .md-board-detail-sentence-bar__tool-btn svg {
  width: var(--nb-sb-sbtn, 18px);
  height: var(--nb-sb-sbtn, 18px);
}

/* …and the button BOX grows too (height for the mic pill; width +
   height for the square tool buttons). Floored at base ≤ medium,
   larger on Large/Huge. */
.md-board-detail-sentence-row .md-board-detail-sentence-bar__btn {
  min-height: var(--nb-sb-btnh, 55px);
}

.md-board-detail-sentence-row .md-board-detail-sentence-bar__tool-btn {
  width: var(--nb-sb-btnw, 44px);
  min-width: var(--nb-sb-btnw, 44px);
  height: var(--nb-sb-btnh, 55px);
  min-height: var(--nb-sb-btnh, 55px);
}

/* Vertical dividers on the left and right of the sentence bar, rendered as
   pseudo-elements of the bar itself. Using ::before/::after of a single
   element guarantees byte-identical rendering on both sides — there is no
   way for one to inherit different styles than the other. The dividers sit
   in the parent .md-board-detail-sentence-row's `gap: 12px`, positioned
   half-way through the gap so they're visually centered between the bar
   and the adjacent stacked nav. */
.md-board-detail-sentence-bar::before,
.md-board-detail-sentence-bar::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(27, 54, 93, 0.18);
  pointer-events: none;
}

.md-board-detail-sentence-bar::before {
  display: none;
}

.md-board-detail-sentence-bar::after {
  right: -7px;
}

/* (The folder Back button no longer sits inside the sentence bar — it
   now stacks beneath the Home button in .md-board-detail-nav-stack on
   the left of the row. See .md-board-detail-nav-stack__back above.) */
/* Modeling mode badge — appears inside the sentence bar when modeling
   is active so the supporter always knows their taps are being logged
   as modeling actions, not communicator actions. Click to pause/resume. */
.md-board-detail-sentence-bar__modeling-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.18);
  color: #1A7B7A;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.md-board-detail-sentence-bar__modeling-badge:hover {
  background: rgba(42, 157, 143, 0.28);
}

.md-board-detail-sentence-bar__modeling-badge:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail-sentence-bar__modeling-badge:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: 2px;
}

.md-board-detail--dark .md-board-detail-sentence-bar__modeling-badge {
  background: rgba(42, 157, 143, 0.25);
  color: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-sentence-bar__modeling-badge:hover {
  background: rgba(42, 157, 143, 0.38);
}

/* Paused variant — applied when modeling logging is paused. Two render
   contexts:
   - <button> (manual pause via badge click): stays interactive so the
     clinician can resume the session with one tap.
   - <span> (auto pause on the supervisee's edit page): static info chip;
     resumes automatically on exit. */
.md-board-detail-sentence-bar__modeling-badge--paused {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px 6px;
  background: rgba(42, 157, 143, 0.1);
  opacity: 0.75;
}

.md-board-detail-sentence-bar__modeling-badge__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-left: -8px;
}

.md-board-detail-sentence-bar__modeling-badge__caption {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  line-height: 1.1;
  width: 100%;
  text-align: center;
}

.md-board-detail-sentence-bar__modeling-badge--paused:hover {
  background: rgba(42, 157, 143, 0.18);
}

span.md-board-detail-sentence-bar__modeling-badge--paused {
  cursor: default;
}

span.md-board-detail-sentence-bar__modeling-badge--paused:hover {
  background: rgba(42, 157, 143, 0.1);
}

.md-board-detail--dark .md-board-detail-sentence-bar__modeling-badge--paused {
  background: rgba(42, 157, 143, 0.22);
  color: rgb(98.1577889447, 213.0422110553, 199.056281407);
  opacity: 1;
}

.md-board-detail--dark .md-board-detail-sentence-bar__modeling-badge--paused:hover {
  background: rgba(42, 157, 143, 0.32);
}

.md-board-detail--dark span.md-board-detail-sentence-bar__modeling-badge--paused:hover {
  background: rgba(42, 157, 143, 0.22);
}

.md-board-detail--dark .md-board-detail-sentence-bar__modeling-badge--paused .md-board-detail-sentence-bar__modeling-badge__caption {
  opacity: 1;
}

.md-board-detail-sentence-bar__text {
  flex: 1;
  font-size: 21px;
  font-weight: 550;
  letter-spacing: -0.01em;
  min-height: 28px;
  display: flex;
  align-items: center;
  color: #1b2a4a;
}

/* The live sentence bar also carries the speak action — tapping the composed
   message speaks it (a pointer bonus alongside the inline mic button). Scoped
   to the live row only; the read-only edit-mode `--preview` mirror has no
   action and keeps the default cursor. */
.md-board-detail-sentence-row:not(.md-board-detail-sentence-row--preview) .md-board-detail-sentence-bar__text {
  cursor: pointer;
}

.md-board-detail-sentence-bar__text--with-symbols {
  flex-wrap: wrap;
  gap: 1px;
  /* Pull this element to the top of the bar regardless of the bar's
     own `align-items: center`. Combined with `align-items: flex-start`
     below, the chips sit at the top edge with only the bar's 2px top
     padding above them, matching the visual rhythm of the page chrome. */
  align-self: flex-start;
  /* Top-align chips inside the row so a single chip sits at the top
     of the bar rather than vertically centered. */
  align-items: flex-start;
  /* `align-content: flex-start` stacks wrap rows from the top of the
     container into a normal scrollable area. Top of content sits at
     `scrollTop = 0` so the scrollbar covers the full content range
     and every row is reachable. (`center` and `flex-end` both push
     part of the stack to a negative offset that scrollTop can't
     reach, which broke scrolling.) Single-row chips remain vertically
     centered via `align-items: center` above — `align-content` is a
     no-op for single-line flex per spec. Cap matches chip height so a
     single chip fits without overflow. Exceeds the bar's min-height
     (82px) — the chip visually protrudes past the bar by ~4px total
     and that's intentional; the bar's min-height stays at 82px on
     request. */
  max-height: 86px;
  overflow-y: auto;
  align-content: flex-start;
  /* Firefox: keep a visible, persistent track so the user always knows
     more chips are available above (macOS-style auto-hide hides the
     affordance entirely when not hovering). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.1);
}

/* WebKit: opt out of overlay auto-hide by giving the scrollbar a
   reserved width and explicit thumb/track colors so it stays visible
   whenever there's overflow, not just on hover/scroll. */
.md-board-detail-sentence-bar__text--with-symbols::-webkit-scrollbar {
  width: 6px;
}

.md-board-detail-sentence-bar__text--with-symbols::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.md-board-detail-sentence-bar__text--with-symbols::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 3px;
}

.md-board-detail-sentence-bar__text--with-symbols::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.65);
}

.md-board-detail-sentence-bar__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tight gap between the symbol and its label (was 12px). */
  gap: 4px;
  /* 2px top (was 4px) so the chip hugs the top of the bar a little tighter. */
  padding: 2px 8px 4px;
  /* Glass badge — same frosted glassmorphism as the prediction tiles:
     backdrop-blur pane, translucent highlight->shade gradient, bright inset
     top sheen, soft solid edge, soft ambient drop. */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(27, 54, 93, 0.18);
  min-width: 44px;
  /* Chip box height exceeds the bar's min-height (82px). The chip
     extends past the bar's content area by ~4px total — intentional
     per design ask; bar's min-height stays at 82px. */
  height: 86px;
  align-self: flex-start;
  box-sizing: border-box;
  /* Anchor for the absolute edit-controls overlay + smooth state transitions
     (active-edit feature). Harmless when the feature is off. */
  position: relative;
  transition: box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.md-board-detail-sentence-bar__chip-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 1;
  min-height: 0;
}

/* ----- Speak-bar chip ACTIVE EDIT (feature: sentence_bar_editing) ----- */
.md-board-detail-sentence-bar__chip--editable {
  cursor: pointer;
  /* The chip is a press-and-hold control: block the long-press text selection /
     iOS callout and double-tap zoom so holding reliably arms the menu instead of
     selecting the label or firing the OS menu. `manipulation` still lets the bar
     scroll when there are many chips. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* No native tap flash on press — a short click must leave the chip visually
     unchanged; only a deliberate hold shows the progress fill below. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.md-board-detail-sentence-bar__chip--editable:focus-visible {
  outline: 3px solid #1A7B7A;
  outline-offset: 2px;
}

/* Press-and-hold in progress. Applied only AFTER PRESS_FEEDBACK_DELAY (300ms) so
   a normal click/tap never shows it. No scale/press styling (that read as
   "actively clicked") — just a bottom-up fill running for the remaining hold
   window (HOLD_DURATION - delay = 1.7s) so it reaches the top as the menu opens:
   a pure "keep holding" progress cue. Releasing early removes the class. */
.md-board-detail-sentence-bar__chip--pressing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-radius: inherit;
  background: rgba(26, 123, 122, 0.22);
  animation: bd-chip-hold-fill 1.7s linear forwards;
  pointer-events: none;
  z-index: 4;
}

@keyframes bd-chip-hold-fill {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
.md-board-detail-sentence-bar__chip--selected {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px #1A7B7A, 0 6px 18px rgba(27, 54, 93, 0.28);
  /* Highlight ring only — the edit controls now render as a labeled menu BELOW
     the chip (see __chip-menu), not as corner overlays on top of it. */
  min-width: 58px;
}

.md-board-detail-sentence-bar__chip--swapping {
  animation: bd-chip-swap-pulse 1.15s ease-in-out infinite;
}

@keyframes bd-chip-swap-pulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px rgba(240, 168, 48, 0.95), 0 6px 18px rgba(27, 54, 93, 0.28);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 6px rgba(240, 168, 48, 0.3), 0 6px 18px rgba(27, 54, 93, 0.28);
  }
}
.md-board-detail-sentence-bar__chip--swap-target {
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(240, 168, 48, 0.55);
}

.md-board-detail-sentence-bar__chip--swap-target:hover,
.md-board-detail-sentence-bar__chip--swap-target:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px #f0a830;
}

.md-board-detail-sentence-bar__chip--dragging {
  opacity: 0.4;
}

.md-board-detail-sentence-bar__chip--drag-over {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), -4px 0 0 -1px #1A7B7A, 0 4px 14px rgba(27, 54, 93, 0.18);
}

/* ----- Below-chip labeled edit menu (feature: sentence_bar_editing) -----
   Replaces the old on-top corner-icon overlay. The tapped chip highlights
   (--selected ring) and this labeled card drops BELOW it after a 2s dwell.
   Rendered as a child of the bar (position:relative anchor) so it escapes the
   chip scroller's overflow clip; JS sets `left` (card) + caret `left` inline. */
.md-board-detail-sentence-bar__chip-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; /* set inline by _position_chip_menu */
  z-index: 30;
  display: inline-flex;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 14px 34px rgba(27, 54, 93, 0.24), 0 3px 8px rgba(27, 54, 93, 0.12);
  animation: bd-chip-menu-in 0.15s ease-out;
}

/* Caret pointing up at the highlighted chip; horizontal position set inline. */
.md-board-detail-sentence-bar__chip-menu-caret {
  position: absolute;
  top: -7px;
  left: 20px; /* set inline by _position_chip_menu */
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid rgba(27, 54, 93, 0.1);
  border-top: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.md-board-detail-sentence-bar__chip-menu-actions {
  display: flex;
  gap: 4px;
}

/* Each action = icon over a text label (labels are the whole point of the ask). */
.md-board-detail-sentence-bar__chip-menu-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 70px;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.04);
  color: #1b2a4a;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease;
}

.md-board-detail-sentence-bar__chip-menu-btn:hover {
  background: rgba(26, 123, 122, 0.16);
}

.md-board-detail-sentence-bar__chip-menu-btn:focus-visible {
  outline: 3px solid #1A7B7A;
  outline-offset: 2px;
}

.md-board-detail-sentence-bar__chip-menu-btn:active {
  transform: scale(0.95);
}

.md-board-detail-sentence-bar__chip-menu-btn svg {
  width: 20px;
  height: 20px;
}

/* AAC accessibility: labels ~30% larger than a typical web control label. */
.md-board-detail-sentence-bar__chip-menu-btn-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.md-board-detail-sentence-bar__chip-menu-btn--remove:hover {
  background: rgba(225, 82, 65, 0.16);
  color: #c0392b;
}

.md-board-detail-sentence-bar__chip-menu-btn--switch.is-active,
.md-board-detail-sentence-bar__chip-menu-btn--switch.is-active:hover {
  background: #f0a830;
  color: #1b2330;
}

/* Lift the whole sentence row (and thus the menu) above the board grid while a
   menu is open, so the dropped card is never painted under the grid below. */
.md-board-detail-sentence-row:has(.md-board-detail-sentence-bar__chip-menu) {
  position: relative;
  z-index: 20;
}

@keyframes bd-chip-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-board-detail-sentence-bar__chip--swapping {
    animation: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px #f0a830, 0 6px 18px rgba(27, 54, 93, 0.28);
  }
  .md-board-detail-sentence-bar__chip-menu {
    animation: none;
  }
  /* No growing-fill animation — show a static "holding" tint instead so the
     press still has feedback without motion. */
  .md-board-detail-sentence-bar__chip--pressing::after {
    animation: none;
    height: 100%;
    opacity: 0.5;
  }
}
/* Dark-mode icon visibility lift — sentence-bar chip thumbs are mostly
   ARASAAC / OpenSymbols PNGs with dark line art on transparent. The
   existing dark sentence bar sits on a near-black surface; without a
   pad behind the icon the dark lines blend into the bar. Soft rounded
   pad keeps the lift from reading as a hard tile. AAC-safe (no hue
   shift). Same pattern applied to the prediction thumbs below. */
.md-board-detail--dark .md-board-detail-sentence-bar__chip-img {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 6px;
}

.md-board-detail-sentence-bar__chip-label {
  font-size: 15px;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.2;
  text-align: center;
}

.md-board-detail-sentence-bar__placeholder {
  opacity: 0.5;
  font-weight: 400;
  color: #46505F;
  /* In-flow inside the flex `__text` container (which is itself
     vertically centered in the bar) so the hint sits vertically
     centered in its div instead of being pinned to the viewport top
     by the old `position: fixed`. `flex: 1` + centered alignment keeps
     it horizontally centered across the available width. */
  flex: 1;
  align-self: center;
  text-align: center;
  pointer-events: none;
}

/* On screens 1024px and smaller, left-align the sentence-bar text
   (placeholder hint + any message content) instead of centering it, so
   it reads against the bar's left edge on narrower viewports. Covers
   both the flex container and the placeholder's own text-align. */
@media (max-width: 1024px) {
  .md-board-detail-sentence-bar__text {
    justify-content: flex-start;
    text-align: left;
  }
  .md-board-detail-sentence-bar__placeholder {
    text-align: left;
  }
}
/* On screens larger than 1024px, keep the hint LEFT-aligned (reading from
   the bar's left edge, after the back-button) rather than page-centered.
   It stays VERTICALLY centered in the bar via the in-flow flex `__text`
   container (`align-items: center`) plus the base `align-self: center`, so
   no absolute positioning is needed — the hint is centered vertically but
   not horizontally. Stays pointer-events:none (from the base rule). */
@media (min-width: 1025px) {
  .md-board-detail-sentence-bar__placeholder {
    text-align: left;
  }
}
/* ── Inline word predictions (inside sentence bar) ───── */
.md-board-detail-sentence-bar__prediction-group {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  margin-left: 6px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.55);
}

/* Word-prediction rail (<=768px). The in-bar predictions overflow on small
   screens, so they relocate into this vertical column between the board grid
   and the inline sidebar (a flex item inside .md-board-detail-grid-sidebar-wrap,
   which is a flex row). Hidden on larger screens — the inline in-bar group is
   used there instead. */
/* Vertical prediction rail. `display:none` by default; the VISIBILITY rules
   further down show it (display:flex) depending on the user's
   word_suggestion_position preference + viewport. The LAYOUT here applies
   unconditionally — it's inert while the rail is display:none, so the rail is
   fully styled whether it's shown responsively (auto, <=1024px) OR pinned via
   the side_rail preference at ANY width. */
.md-board-detail-prediction-rail {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  align-items: stretch;
  /* Width, inter-tile gap, left margin, and top inset all track the live board
     grid (measured by _sync_prediction_tile_size in controllers/user/
     board-detail.js) so the rail reads as another board column: the width
     matches one board cell, the gap matches the board's ROW gap, and the left
     margin matches its COLUMN gap (the user's grid-gap preference), so the tiles
     line up with the board rows. Fixed fallbacks keep a sensible column if
     measurement hasn't run yet. */
  width: var(--prediction-tile-w, 84px);
  gap: var(--prediction-tile-gap, 8px);
  /* No left/right padding — tiles fill the rail edge-to-edge so a tile matches
     the board cell width exactly. Keep the measured top inset (aligns the first
     tile with the first board row) and the 4px bottom. */
  padding: var(--prediction-rail-pad-top, 4px) 0 4px;
  margin-left: var(--prediction-rail-gap-left, 8px);
  max-height: 100%;
  overflow-y: auto;
}

/* Tiles match the board button box (measured vars, fixed fallbacks). */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction {
  width: 100%;
  /* No top/bottom padding — the symbol + word fill the tile's full height; only
     4px left/right keeps them off the rail edges. The image↔label spacing comes
     from `gap` below, not padding. Overrides the base tile's 4px/10px. */
  padding: 0 4px;
  /* Override the base tile's `min-width: 44px`. The rail width tracks one board
     cell (--prediction-tile-w), so on many-column boards the cell — and thus
     the rail — is narrower than 44px. With the 44px floor the tile stays wider
     than the rail's content box and the rail's overflow-y:auto (which makes
     overflow-x compute to auto) clips the tile's RIGHT edge — visible even for
     short words like "you"/"they". Letting the tile shrink to the rail width
     removes the overflow, so nothing is clipped. The image scales with the tile
     (see the rail __prediction-img rule below), so a sub-44px tile stays legible. */
  min-width: 0;
  height: var(--prediction-tile-h, 78px);
  /* Pin the tile to EXACTLY the measured board-button height. Flex items default
     to `min-height: auto`, which lets the image + label grow the tile PAST
     `height` (so on dense boards, where the measured card height is small, the
     rail tiles ended up taller than the board buttons). `min-height: 0` makes the
     tile honor the measured height, so prediction tiles always match the board
     buttons. The image (height:52%) + clamped label scale with the tile, so they
     still fit. */
  min-height: 0;
  /* Give the label breathing room from the image (the base gap:1px read as
     cramped). */
  gap: 4px;
  /* Establish a cqw container so the label below tracks the tile width.
     The tile is sized to the board cell (--prediction-tile-w), so cqw here
     == cqw on the board's symbol-card → words match the board labels. */
  container-type: inline-size;
}

/* Let the symbol EXPAND to fill the tile's vertical space (mirrors the board
   card image's `flex: 1 1 auto`), so there's no empty top/bottom space in the
   tile and the label sits tight against the image — the tile fills like a board
   button. object-fit:contain (base) keeps the symbol scaled; max-width caps it. */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction-img {
  width: auto;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-width: 80%;
}

/* Predicted-word font must EXACTLY match the board button label.
   --prediction-label-font is the board label's RENDERED font-size, copied in
   JS (_sync_prediction_tile_size) so the match is exact regardless of any
   container-box differences. The fallback clamp only applies before the first
   measurement lands. */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction-label {
  font-size: var(--prediction-label-font, clamp(10px, 14cqw, var(--bd-button-text-size, 15px)));
  /* The rail sits on a LIGHT surface in light mode (unlike the dark speak bar the
     base white label is tuned for), so the white base label is invisible here —
     use dark text for legibility. Dark mode keeps white via the later
     `.md-board-detail--dark ...prediction-label` rule (equal specificity, wins on
     source order). */
  color: #1B365D;
}

/* Match the board buttons' text POSITION (the rail carries the board's text-pos
   class). DOM order is image-then-label, so flip flex-direction: top → label
   above (column-reverse), bottom → label below (column); none hides the label,
   text_only hides the image. */
.md-board-detail-prediction-rail.md-board-detail-grid--text-pos-top .md-board-detail-sentence-bar__prediction {
  flex-direction: column-reverse;
}

.md-board-detail-prediction-rail.md-board-detail-grid--text-pos-bottom .md-board-detail-sentence-bar__prediction {
  flex-direction: column;
}

.md-board-detail-prediction-rail.md-board-detail-grid--text-pos-none .md-board-detail-sentence-bar__prediction-label {
  /* Predictions must always show the word — unlike board buttons, a
     symbol-only board layout must not render blank prediction tiles. */
  display: block;
}

.md-board-detail-prediction-rail.md-board-detail-grid--text-pos-text_only .md-board-detail-sentence-bar__prediction-img {
  display: none;
}

/* ── Word-prediction placement (user pref: word_suggestion_position) ──────────
   'auto' (default, no shell class): responsive — in-bar on wide screens, rail
   on <=1024px. 'speak_bar' / 'side_rail' pin it at all widths. Toggling visibility
   only; the rail's layout (above) and the in-bar group's layout are unchanged. */
@media (max-width: 1024px) {
  /* Auto OR pinned side_rail (i.e. anything except a pinned speak_bar): hide
     the in-bar predictions (they crowd the bar) and show the rail. */
  .md-shell--board-detail:not(.md-shell--wordpred-speak-bar) .md-board-detail-sentence-bar__prediction-group {
    display: none;
  }
  .md-shell--board-detail:not(.md-shell--wordpred-speak-bar) .md-board-detail-prediction-rail {
    display: flex;
  }
  /* Let the grid yield width so the rail + sidebar + gaps fit inside main
     (overflow-x:hidden). Unconditional at <=1024 — the sidebar needs it even
     when predictions are pinned to the speak bar (no rail). */
  .md-board-detail-grid-fade {
    min-width: 0;
  }
}
/* Pinned SIDE RAIL — show the rail and hide the in-bar group at ALL widths. */
.md-shell--wordpred-side-rail .md-board-detail-prediction-rail {
  display: flex;
}

.md-shell--wordpred-side-rail .md-board-detail-sentence-bar__prediction-group {
  display: none;
}

.md-shell--wordpred-side-rail .md-board-detail-grid-fade {
  min-width: 0;
}

/* Pinned SPEAK BAR needs no rule of its own — it's the default in-bar layout
   kept at every width: the <=1024 rail rules above are excluded for it via
   :not(.md-shell--wordpred-speak-bar), so the in-bar group simply stays shown. */
.md-board-detail-sentence-bar__prediction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* 4px vertical / 10px horizontal — combined with a 48px image and
     ~17px label and 2px dashed border on each side, the tile lands
     at 78px tall. Tiles live inside `__prediction-group` which has
     4px top/bottom padding, so the group's outer dimension is
     78 + 4*2 = 86px — matching the chip / `__text--with-symbols`
     panel height exactly so the two coexist at the same baseline. */
  padding: 4px 10px;
  min-width: 44px;
  height: 78px;
  box-sizing: border-box;
  border-radius: 14px;
  /* Modern glassmorphism — matches the app's glass vocabulary
     (.md-board-edit-panel, the sentence bar): a real frosted backdrop-blur
     pane with a translucent highlight->shade gradient, a bright inset top
     sheen, a soft solid glass edge, and a soft ambient drop. */
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(27, 54, 93, 0.18);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  position: relative;
}

.md-board-detail-sentence-bar__prediction:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(27, 54, 93, 0.2);
  transform: translateY(-1px);
}

.md-board-detail-sentence-bar__prediction:active {
  transform: scale(0.96);
}

.md-board-detail-sentence-bar__prediction-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 1;
  min-height: 0;
  opacity: 0.85;
  /* Soft, sleek dashed frame around the prediction symbol — the "suggestion"
     affordance now lives on the image (the tile itself is solid glass). A thin
     rounded dash with a little breathing room from the symbol reads modern.
     box-sizing keeps the 48px footprint. */
  box-sizing: border-box;
  padding: 3px;
  border: 1.5px dashed rgba(70, 80, 95, 0.38);
  border-radius: 10px;
}

/* Dark-mode prediction-thumb lift — a softer, more translucent frosted
   backing (was a near-opaque 0.75 white square that read as a flat gray chip
   and fought the tile's glassmorphism). Lower alpha + larger radius lets the
   frosted tile show through while still lifting dark line-art symbols. */
.md-board-detail--dark .md-board-detail-sentence-bar__prediction-img {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  /* Soft white dash on the dark bar (inherits the base dash width/style). */
  border-color: rgba(255, 255, 255, 0.5);
}

.md-board-detail-sentence-bar__prediction-label {
  /* Match the board button label font exactly: same base formula as
     .md-board-detail-symbol-card__label, driven by the shared
     --bd-button-text-size (inherited from .md-board-detail-main). Predicted
     words track the user's BUTTON text-size preference on every screen size
     and in both prediction surfaces (in-bar tiles + the vertical rail),
     instead of the sentence-bar size class. */
  font-size: clamp(9px, 1.5vw, var(--bd-button-text-size, 15px));
  font-weight: 500;
  /* Brighter prediction text (was 0.7) so word predictions read
     clearly against the dark speak bar. */
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  text-align: center;
}

.md-board-detail-sentence-bar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.md-board-detail-sentence-bar__btn {
  /* WCAG 2.5.5 AAA touch target — was 10px 20px (~40 tall). */
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease;
}

.md-board-detail-sentence-bar__btn:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail-sentence-bar__btn--clear {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.md-board-detail-sentence-bar__btn--clear:hover {
  background: rgba(255, 255, 255, 0.25);
}

.md-board-detail-sentence-bar__icon-btn {
  /* WCAG 2.5.5 AAA touch target — was 38×38. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}

.md-board-detail-sentence-bar__icon-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.md-board-detail-sentence-bar__icon-btn:active {
  transform: scale(var(--md-tap, 0.97));
}

/* Tools group — separate from sentence bar */
.md-board-detail-sentence-bar__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  /* Anchor for the immersive quick-actions popover (≤640px), which is
     absolutely positioned above the down-arrow chevron. No visual effect
     in the normal (non-immersive) layout — no positioned children there. */
  position: relative;
}

.md-board-detail-sentence-bar__tool-btn {
  /* WCAG 2.5.5 AAA touch target — was 32×32. */
  width: 44px;
  height: 55px;
  min-width: 44px;
  min-height: 55px;
  padding: 0;
  border-radius: 12px;
  /* Floating-chip elevation matching the sentence bar + home
     button. Border softened .12 → .06 hairline; layered top-edge
     highlight + outer drop give the floating-chip look without
     needing a backdrop-filter blur layer.
     `backdrop-filter` was dropped after intermittent halo /
     edge-fringe artifacts appeared at the boundary between this
     button (blurred compositor layer) and adjacent non-blurred
     elements like the mic button on its left. Chrome / Safari
     re-paint the compositor edge in ways that can leave a faint
     halo, especially when nearby elements transition or paint.
     The 8% white fill + 12% inset top highlight + 8% navy outer
     drop carry the chip elevation by themselves; no blur needed. */
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(27, 54, 93, 0.08);
  color: rgba(27, 42, 74, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.md-board-detail-sentence-bar__tool-btn svg {
  width: 18px;
  height: 18px;
}

.md-board-detail-sentence-bar__tool-btn:hover {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
}

.md-board-detail-sentence-bar__tool-btn:active {
  transform: scale(var(--md-tap, 0.97));
}

/* Suppress the verdigris focus halo when focus arrives via mouse
   click (not keyboard). The grouped :focus-visible rule at
   ~app.scss:65672 applies a 3px verdigris ring + 5px feathered halo
   for keyboard-visible focus; Chrome/Safari's :focus-visible
   heuristic occasionally matches mouse clicks too (after recent
   keyboard input, programmatic focus shifts, or backspace's rapid
   re-click pattern), leaving the ring lingering until focus moves
   elsewhere. Mirrors the actions-toggle pattern at ~app.scss:62292
   but RESTORES the floating-chip base shadow instead of clearing
   shadows entirely so the focused-but-not-visible state still reads
   as the chip it normally is. */
.md-board-detail-sentence-bar__tool-btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(27, 54, 93, 0.08);
}

/* ── Immersive quick-actions popover (≤640px) ──────────────────────
   At narrow widths the mic/backspace/clear buttons collapse into the
   down-arrow chevron (see board-detail.hbs `immersive_tools`). The
   chevron gains an active/open state; tapping it reveals this popover
   anchored above it with the consolidated actions. Styling mirrors the
   existing tool-btn chip language so it reads as part of the same bar. */
.md-board-detail-sentence-bar__tool-btn--chevron.md-board-detail-sentence-bar__tool-btn--active {
  background: rgba(42, 157, 143, 0.18);
  color: #2A9D8F;
  border-color: rgba(42, 157, 143, 0.35);
}

.md-board-detail-sentence-bar__quick-actions {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 12px 32px rgba(27, 54, 93, 0.22), 0 2px 8px rgba(27, 54, 93, 0.1);
  animation: md-quick-actions-pop 0.14s ease-out;
}

@keyframes md-quick-actions-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.md-board-detail-sentence-bar__quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-board-detail-sentence-bar__quick-action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.62);
}

.md-board-detail-sentence-bar__quick-action:hover,
.md-board-detail-sentence-bar__quick-action:active {
  background: rgba(42, 157, 143, 0.12);
  color: #2A9D8F;
}

.md-board-detail-sentence-bar__quick-action:hover svg,
.md-board-detail-sentence-bar__quick-action:active svg {
  color: #2A9D8F;
}

/* "More" → legacy speak-menu modal; divider above it sets it apart from
   the three sentence actions. */
.md-board-detail-sentence-bar__quick-action--more {
  margin-top: 4px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 0 0 10px 10px;
  padding-top: 12px;
}

/* Dark mode: match the bar's translucent dark chrome. */
.md-board-detail--dark .md-board-detail-sentence-bar__quick-actions {
  background: linear-gradient(180deg, rgba(48, 62, 82, 0.98), rgba(42, 54, 73, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-sentence-bar__quick-action {
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-sentence-bar__quick-action svg {
  color: rgba(255, 255, 255, 0.62);
}

.md-board-detail--dark .md-board-detail-sentence-bar__quick-action--more {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ── Landscape-orientation overlay (≤640px, >8 columns) ────────────
   Feature: portrait_orientation_overlay. The board stays visible behind
   — dimmed, blurred via the veil's backdrop-filter, and frozen because
   the fixed veil sits over everything and captures all pointer events.
   The card is a dark-glass panel (Apple-setup-meets-AAC-clinical): a
   verdigris accent line, a gently rocking phone-rotation illustration,
   restrained typography, a primary Rotate CTA and a deliberately quiet
   "Continue Anyway" escape hatch. Sits above $aac-z-topbar (400) as an
   intentional full-viewport gate. */
.md-shell--portrait-locked {
  /* Lock background scroll while the gate is up. */
  overflow: hidden;
}

.md-board-detail-portrait-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Soft navy spotlight — brighter behind the card, deepening to the
     edges — over a gentle blur of the board underneath. */
  background: radial-gradient(120% 90% at 50% 38%, rgba(27, 54, 93, 0.52), rgba(27, 54, 93, 0.8));
  backdrop-filter: blur(7px) saturate(0.92);
  -webkit-backdrop-filter: blur(7px) saturate(0.92);
  animation: md-portrait-overlay-fade 0.18s ease-out;
}

@keyframes md-portrait-overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.md-board-detail-portrait-overlay__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 34px 28px 28px;
  text-align: center;
  border-radius: 22px;
  /* Dark frosted glass. */
  background: linear-gradient(180deg, rgba(33, 43, 64, 0.86), rgba(24, 33, 53, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #fff;
  animation: md-portrait-card-rise 0.22s ease-out;
}

@keyframes md-portrait-card-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Verdigris accent line across the top of the card. */
.md-board-detail-portrait-overlay__accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: #2A9D8F;
  box-shadow: 0 0 16px rgba(42, 157, 143, 0.55);
}

/* Phone-rotation illustration: the phone gently rocks portrait →
   landscape and back; the verdigris arc shows the rotation direction. */
.md-board-detail-portrait-overlay__phone {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 6px auto 20px;
}

.md-board-detail-portrait-overlay__phone-svg,
.md-board-detail-portrait-overlay__phone-arc {
  position: absolute;
  inset: 0;
}

.md-board-detail-portrait-overlay__phone-svg {
  color: rgba(255, 255, 255, 0.92);
  transform-origin: 50% 50%;
  animation: md-portrait-phone-rotate 3.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

.md-board-detail-portrait-overlay__phone-arc {
  color: #2A9D8F;
}

/* Dimensional rotation guide: a faint static track, a bright gradient
   "comet" that sweeps the arc as the phone turns, and an arrowhead that
   pops in at the tip when the sweep arrives. Timed against the 3.4s
   phone cycle so the guide leads the rotation, then clears during the
   invisible portrait reset. */
.md-board-detail-portrait-overlay__arc-comet {
  stroke-dasharray: 30 100;
  animation: md-rot-comet 3.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

@keyframes md-rot-comet {
  0% {
    stroke-dashoffset: 34;
    opacity: 0;
  }
  8% {
    stroke-dashoffset: 30;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: -100;
    opacity: 1;
  }
  58% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}
.md-board-detail-portrait-overlay__arc-head {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: md-rot-head 3.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

@keyframes md-rot-head {
  0%, 36% {
    opacity: 0;
    transform: scale(0.55);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
  58%, 80% {
    opacity: 1;
    transform: scale(1);
  }
  90%, 100% {
    opacity: 0;
    transform: scale(0.55);
  }
}
/* Portrait → landscape ONLY. The phone holds portrait, rotates smoothly
   clockwise to landscape, holds there, then fades out, snaps back to
   portrait while invisible, and fades in — so the reverse rotation is
   never seen and the motion always reads a single direction. */
@keyframes md-portrait-phone-rotate {
  0%, 18% {
    transform: rotate(0deg);
    opacity: 1;
  }
  58%, 80% {
    transform: rotate(90deg);
    opacity: 1;
  }
  90% {
    transform: rotate(90deg);
    opacity: 0;
  }
  91% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.md-board-detail-portrait-overlay__title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.md-board-detail-portrait-overlay__desc {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

.md-board-detail-portrait-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-board-detail-portrait-overlay__btn {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.md-board-detail-portrait-overlay__btn--primary {
  min-height: 50px;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  background: #2A9D8F;
  color: #fff;
  box-shadow: 0 8px 22px rgba(42, 157, 143, 0.4);
}

.md-board-detail-portrait-overlay__btn--primary:hover {
  background: rgb(36.6180904523, 136.8819095477, 124.675879397);
}

.md-board-detail-portrait-overlay__btn--primary:active {
  transform: scale(0.98);
}

/* Deliberately quiet secondary — a text button, never competing with
   the primary CTA, but always reachable for non-rotatable setups. */
.md-board-detail-portrait-overlay__btn--secondary {
  padding: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.md-board-detail-portrait-overlay__btn--secondary:hover {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
}

/* Respect reduced-motion: hold the phone at the landscape hint, drop
   the looping rock and the entrance animations. */
@media (prefers-reduced-motion: reduce) {
  .md-board-detail-portrait-overlay,
  .md-board-detail-portrait-overlay__card {
    animation: none;
  }
  .md-board-detail-portrait-overlay__phone-svg {
    animation: none;
    transform: rotate(90deg);
  }
  /* Hold the guide as a complete static arrow — no sweep, no pop. */
  .md-board-detail-portrait-overlay__arc-comet {
    animation: none;
    stroke-dasharray: none;
    opacity: 1;
  }
  .md-board-detail-portrait-overlay__arc-head {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.md-board-detail-sentence-bar__btn--speak {
  background: rgba(255, 255, 255, 0.85);
  color: #1B365D;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
  width: 55px;
  height: 55px;
  min-width: 55px;
  padding: 0;
  justify-content: center;
}

.md-board-detail-sentence-bar__btn--speak:hover {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

/* Board header */
.md-board-detail-header {
  /* Right padding dropped to 0 so the Details & Actions button (right-
     aligned in `.md-board-detail-board-actions-wrap`) can extend to
     the page edge — matching the Save button's right offset in the
     edit toolbar below, which has no horizontal padding either. The
     left padding stays at 20px to keep the title group off the page
     edge. Top padding unchanged. */
  padding: 16px 0 0 20px;
  margin-bottom: 0;
  border-bottom: none;
}

.md-board-detail-header__board-icon {
  /* Embedded surface: the icon no longer reads as a hard card
     pasted beside the title — it now feels integrated into the
     identity cluster via atmospheric outer shadow + lit-from-above
     inset highlight + hairline border. Background gradient stays
     so dark / silhouette pictograms have an interior canvas; only
     the chrome around the tile was softened. */
  width: 81px;
  height: 81px;
  border-radius: 20px;
  object-fit: cover;
  flex-shrink: 0;
  padding: 6px;
  background: linear-gradient(180deg, rgba(27, 42, 74, 0.08), rgba(27, 42, 74, 0.04));
  border: 1px solid rgba(27, 42, 74, 0.04);
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.md-board-detail-header__board-icon:hover {
  /* Hover lift kept proportional to the softer resting chrome —
     a touch broader outer shadow without re-introducing a hard
     border edge. */
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(27, 54, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border-color: rgba(27, 42, 74, 0.06);
}

/* Dark mode: the board's own header icon is shown on a near-white tile so
   dark/silhouette pictograms (e.g. black apple core) stay visible against
   the dark page surface. The faint indigo gradient used in light mode is
   invisible on a dark background. */
.md-board-detail--dark .md-board-detail-header__board-icon {
  /* Dark-mode chrome aligned with the user's embedded-surface
     formula: hairline border (.18 → .08), atmospheric outer shadow
     (`0 8px 24px @ .18` per spec, replaces the heavier `0 6px 14px
     @ .35` drop). White interior is kept so dark / silhouette
     pictograms stay visible against the dark page. */
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.md-board-detail--dark .md-board-detail-header__board-icon:hover {
  /* Hover lift in dark mode — proportional to the softened resting
     chrome. Border eases from .08 → .12 (still hairline), outer
     shadow broadens slightly while staying within the atmospheric
     band (no return to the prior .45-alpha hard drop). */
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.md-board-detail-header__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-board-detail-header__title {
  /* Element is <span> (not <h2>) so that the title doesn't carry a
     heading level in the document outline — the title's now block-
     displayed via this rule so it owns its row entirely inside the
     Identity Block. Margins removed because the Identity Block's
     `gap: 10px` handles vertical rhythm between the title row and
     the metadata row underneath; baking in vertical margins would
     double-up that spacing. */
  display: block;
  /* Calmer fluid clamp than the prior 15→32px range: ceiling pulled
     down to 26px so the title no longer overpowers the metadata
     grouping at wide viewports. Slightly gentler curve via
     `calc(0.85vw + 9px)`. Approximate landmarks:
       ≤480px   → 15px floor
       ≈1024px  → 18px
       ≈1500px  → 22px
       ≥2000px  → 26px ceiling */
  font-size: clamp(16px, 0.85vw + 10px, 27px);
  /* Weight 750 → 650 — still distinctly heavy enough to anchor the
     identity, but not "dashboard-dominant". Calmer editorial feel. */
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #1b2a4a;
  margin: 0;
}

/* ── Title info-toggle: chevron that expands the board description/icons panel ───────── */
/* "Board Description" expander — pill styled to mirror the edit
   toolbar's "More Settings" affordance: chevron + label in a glass
   pill, chevron rotates 180° when the description info panel is
   open. Same gradient, border, shadow, and hover lift as the
   toolbar pill, minus its absolute positioning. */
.md-board-detail-header__info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  /* Lower secondary-action contrast: border .18 → .10 hairline,
     drop shadows .12 → .08 / .06 → .04 so the pill blends into
     the calm header rhythm instead of competing with the title. */
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08), 0 1px 2px rgba(27, 54, 93, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: box-shadow 0.15s ease, transform 0.2s ease, background 0.15s ease;
}

/* Button stays neutral (white bg, dark navy icon) in every state — no
   hover tint, no click/focus shift. The chevron rotation on the --open
   modifier is the only visual indication that the panel is expanded. */
.md-board-detail-header__info-toggle:hover,
.md-board-detail-header__info-toggle:focus,
.md-board-detail-header__info-toggle:focus-visible,
.md-board-detail-header__info-toggle:active {
  background: #fff;
  color: rgba(27, 54, 93, 0.72);
  border-color: rgba(27, 54, 93, 0.15);
}

/* Keep a minimal keyboard focus ring for accessibility — no fill
   change, just an outline so keyboard users can still see focus. */
.md-board-detail-header__info-toggle:focus-visible {
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
  transform: translateY(-1px);
}

.md-board-detail-header__info-toggle svg {
  color: #2A9D8F;
  transition: transform 0.2s ease;
}

.md-board-detail-header__info-toggle--open svg {
  transform: rotate(180deg);
}

.md-board-detail-header__info-toggle-label {
  letter-spacing: 0.01em;
}

.md-board-detail--dark .md-board-detail-header__info-toggle {
  /* Lower secondary-action contrast: border .22 → .10 hairline,
     drop shadows .40 → .26 / .20 → .14 so the pill no longer
     punches above its weight in the header. */
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.9) 0%, rgba(21, 26, 36, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-header__info-toggle svg {
  color: #8fe4df;
}

.md-board-detail--dark .md-board-detail-header__info-toggle:hover,
.md-board-detail--dark .md-board-detail-header__info-toggle:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Expansion panel: description text + privacy/license icons ─────────────────── */
.md-board-detail-header__info-panel {
  /* Roomier info panel: padding 12/14 → 14/18, radius 10 → 14,
     vertical margins 10/12 → 14/16 to give the card breathing room
     above and below. Border alpha already soft at .08. */
  margin: 14px 0 16px;
  padding: 14px 18px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Edit-mode unified header card — same glass/tint chrome as the
   info-panel above so the title, Editing badge, action checklist,
   and description editor all read as one container. The info-panel
   toggle is gone in edit mode (the card is always shown). Stretches
   to the full width of the title-group so the card spans the
   header row instead of sizing to its content. */
.md-board-detail-header__edit-card {
  width: 100%;
  box-sizing: border-box;
  /* Top margin removed per request — the card now sits flush
     against the element above it (was 10px). Roomier padding (14/16 →
     16/20), larger radius (10 → 14) to match the info-panel and the
     shared boards-page card vocabulary. */
  margin: 0;
  padding: 16px 20px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The unclassed wrapper <div> between .md-board-detail-header__title-group
   and the edit card is a flex item of the title-group; without an
   explicit flex sizing it shrinks to its content, capping the card's
   width. Force it to grow to fill the row when it contains the edit
   card. min-width: 0 lets long titles wrap instead of forcing the
   parent wider. */
.md-board-detail-header__title-group > div:has(> .md-board-detail-header__edit-card) {
  flex: 1 1 auto;
  min-width: 0;
}

.md-board-detail--dark .md-board-detail-header__edit-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Edit-mode title row uses a 3-column grid so the Editing pill +
   Discard/Save cluster anchors to the page midline regardless of
   left content width. Restored 1fr | auto | 1fr — left and right
   slacks are equal, so the center column sits centered on the page.
   (Was `1fr auto auto` + `justify-self: end` from an earlier design
   where the centre slot held only the badge and we wanted it pushed
   right; now the centre holds the pill + Discard/Save cluster and
   the user wants it page-centered.) */
.md-board-detail-header__title-row--edit {
  display: grid;
  /* Left column uses `fit-content(560px)` so it sizes to the
     intrinsic max-content of its contents (board icon + title
     identity) up to a 560px ceiling — the title's own
     `max-width: 500px` plus ~60px for the icon + gap. The 1fr
     left column previously capped the title at its 1fr fraction
     of the row, which truncated long titles to "Vocal…" because
     the column couldn't grow past its allotted share AND the
     title's `overflow: hidden` zeros out the column's intrinsic
     min-width (CSS Grid spec: `overflow: hidden|auto|scroll` sets
     min-width: auto → 0 instead of min-content). Center column
     stays `auto` for the Editing pill; right column takes
     remaining 1fr space.
     `position: relative` anchors the absolutely-positioned
     Editing-pill column (rule below) so it centers within this
     row (= within the page's content area between the side
     rails), independently of the asymmetric grid track widths. */
  grid-template-columns: fit-content(560px) auto 1fr;
  /* Align grid items to the BOTTOM (was `center`) so when the
     identity column grows tall, the Editing pill in the center
     column sits at the bottom of the row alongside the bottom
     edge of the title block, instead of floating in the middle
     of a stretched row. */
  align-items: end;
  gap: 12px;
  position: relative;
}

/* Editing pill floats centered in its own row ABOVE the edit card — the
   markup is a sibling rendered before .md-board-detail-header__edit-card
   (not inside the title row), so it reads as a top-center page badge on
   EVERY screen size and never overlaps the title. */
.md-board-detail-header__editing-float {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* ── Unified editing SESSION BAR (board-detail edit mode) ─────────────────────
   Replaces the floating "Editing" pill + the detached Discard/Save tiles. A calm
   glass bar spanning the top of the editing region — clear "you are editing" state
   on the left, completion actions on the right — so finishing editing is obvious.
   Distinct from the tool panels; "Done Editing" is the filled primary, "Discard"
   the quiet outlined secondary. Preserves AAC sizing (44px targets, ≥15px labels). */
.md-board-edit-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  /* Positioning anchor for the floated "Take a tour" trigger
     (.md-board-edit-session__tour), which sits below-right of this bar.
     z-index: this bar's `backdrop-filter` makes it a STACKING CONTEXT, which traps
     the floated trigger's z-index inside it. Without a positive z-index here, the
     bar sits at z:auto and the board-details title row (.md-board-detail-header__
     title-row--edit, position:relative, later in the DOM) paints OVER the trigger
     and swallows its clicks. A positive z-index lifts the whole bar (trigger
     included) above that row so the button is actually clickable. */
  position: relative;
  z-index: 5;
  /* More separation from the board content card below (Layer 1 vs Layer 2) + a
     slightly brighter surface so the session bar reads as the upper editing layer.
     Vertical padding trimmed (10 → 7) so the bar isn't taller than it needs — the
     44px buttons (touch targets) are untouched. margin-bottom bumped 22→30 so the
     "Editing Board" bar and the board-metadata card below read as distinct layers
     (their dark gradients are similar; the extra gap restores scan segmentation). */
  margin-bottom: 30px;
  padding: 7px 12px 7px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  /* Teal-tinted border + soft glow (matching the panel-header accent) so the session
     bar reads as a distinct, active editing region — gentle per the calm design. */
  border: 1px solid rgba(42, 157, 143, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(27, 54, 93, 0.05), 0 0 26px rgba(42, 157, 143, 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
}

.md-board-detail--dark .md-board-edit-session {
  background: rgba(143, 228, 223, 0.11);
  border-color: rgba(143, 228, 223, 0.34);
  /* Glow reads more on the dark surface — slightly stronger spread. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 34px rgba(143, 228, 223, 0.22);
}

/* Float the "Take a tour" trigger below-RIGHT of the editing session bar — about
   10rem below the Done Editing button. The WRAPPER carries the positioning:
   `position: absolute` takes it OUT of the bar's space-between flex flow (so it
   doesn't claim a slot and shove the Discard/Done Editing actions to the centre),
   anchored to the session bar (position:relative); z-index lifts it above the
   board-details card directly below. */
.md-board-edit-session__tour {
  position: absolute;
  top: 10rem;
  right: 12px;
  z-index: 15;
}

/* The trigger pill is `position: fixed` by default (its dashboard placement). Reset
   it to `static` so it simply flows inside the absolutely-positioned wrapper above —
   the WHOLE pill is then a normal in-flow button, fully clickable (icon + text +
   edges alike); an absolutely-positioned trigger left dead spots over its contents.
   The 0,2,0 selector beats the trigger's base/per-breakpoint position rules. */
.md-board-edit-session__tour .md-tour__trigger {
  position: static;
}

/* Speak-mode guided-tour host carries NO on-screen button — its only purpose is
   the runner (auto-open after "Pick this Board" + the manual trigger from the
   options-menu "Take a tour" item). Hide the default trigger entirely; the
   component still mounts and runs (Shepherd portals the tour overlay to <body>),
   so hiding the host has no effect on the tour itself. */
.md-board-detail-speak-tour {
  display: none;
}

.md-board-edit-session__state {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.md-board-edit-session__state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  /* Teal accent matching the Action/Settings panel headers — ties the session bar
     into the editing-chrome colour language. */
  color: #1A7B7A;
  background: rgba(42, 157, 143, 0.14);
}

.md-board-detail--dark .md-board-edit-session__state-icon {
  color: #8fe4df;
  background: rgba(143, 228, 223, 0.16);
}

.md-board-edit-session__state-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Same colour as the "Settings Panel" / "Action Panel" headers. */
  color: #1A7B7A;
}

.md-board-detail--dark .md-board-edit-session__state-label {
  color: #8fe4df;
}

.md-board-edit-session__badge--copying {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: #8a5a16;
  background: rgba(214, 158, 46, 0.16);
  border: 1px solid rgba(214, 158, 46, 0.28);
}

.md-board-detail--dark .md-board-edit-session__badge--copying {
  color: #f1c87a;
  background: rgba(214, 158, 46, 0.18);
  border-color: rgba(214, 158, 46, 0.3);
}

.md-board-edit-session__actions {
  display: flex;
  align-items: center;
  /* Tight pair: Discard + Done read as one connected action cluster (easier
     to scan than two widely-spaced buttons). */
  gap: 6px;
  flex-shrink: 0;
}

.md-board-edit-session__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  /* Narrow + pill-shaped: tight left padding (the badge sits there), fully rounded. */
  padding: 6px 17px 6px 7px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}

.md-board-edit-session__btn:active {
  transform: translateY(1px);
}

.md-board-edit-session__btn[disabled] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.md-board-edit-session__btn-icon {
  flex: 0 0 auto;
}

/* Discard — SECONDARY, deliberately quieter than Done: a flat, slightly recessed
   surface with NO lift, so the primary completion action clearly dominates. Still
   fully readable (text/icon contrast preserved). */
.md-board-edit-session__btn--discard {
  background: rgba(27, 54, 93, 0.06);
  border: 1px solid rgba(27, 54, 93, 0.18);
  color: rgba(27, 54, 93, 0.74);
  box-shadow: none;
}

.md-board-edit-session__btn--discard:hover {
  background: rgba(27, 54, 93, 0.1);
  border-color: rgba(27, 54, 93, 0.26);
  color: rgba(27, 54, 93, 0.88);
}

.md-board-detail--dark .md-board-edit-session__btn--discard {
  /* A subtle LIGHT-tint surface + clearer outline so it stands off the dark panel
     (a dark-on-dark fill blended in). Still flat + quieter than the filled Done. */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.84);
  box-shadow: none;
}

.md-board-detail--dark .md-board-edit-session__btn--discard:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Done Editing — PRIMARY: a refined slate pill with clear LIFT (elevated neutral
   shadow). Depth in the surface, not a glow. */
.md-board-edit-session__btn--save {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  /* LIGHT mode: a lighter slate so the primary doesn't read as a heavy dark blob in
     the light theme — still dark enough that the white label clears AA. Dark mode
     restores the deeper slate below. */
  background: linear-gradient(180deg, #77869f 0%, #586882 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(14, 20, 40, 0.22), 0 6px 16px rgba(14, 20, 40, 0.22);
}

.md-board-edit-session__btn--save:hover {
  background: linear-gradient(180deg, #8493ac 0%, #627390 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 9px rgba(14, 20, 40, 0.24), 0 10px 22px rgba(14, 20, 40, 0.26);
  transform: translateY(-1px);
}

.md-board-edit-session__btn--save:active {
  transform: translateY(0);
}

.md-board-detail--dark .md-board-edit-session__btn--save {
  border-color: rgba(255, 255, 255, 0.12);
  /* Dark mode keeps the deeper slate (read right on the dark surface). */
  background: linear-gradient(180deg, #6a7a96 0%, #525f78 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 5px rgba(0, 0, 0, 0.34), 0 8px 20px rgba(0, 0, 0, 0.32);
}

.md-board-detail--dark .md-board-edit-session__btn--save:hover {
  background: linear-gradient(180deg, #75859f 0%, #5a6882 100%);
}

.md-board-edit-session__btn--save.is-saving {
  opacity: 0.7;
}

/* Icon badge — coloured ring KEPT, but the centre is a GLASSY glossy translucent disc
   (NOT a white face): a gloss catch at the top fading to see-through, frosted by a
   backdrop blur, a bright rim, and a soft lift. The button shows through; the icons
   read in our light teal/slate tones on the dark surface. */
.md-board-edit-session__btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* border-box so the OUTER diameter is exactly 25px no matter the ring/outline
     width — keeps the Discard outline and the Done ring the same size. */
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #2A9D8F;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.04) 78%);
  -webkit-backdrop-filter: blur(5px) saturate(1.3);
  backdrop-filter: blur(5px) saturate(1.3);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(10, 20, 40, 0.34);
}

.md-board-edit-session__btn-badge .md-board-edit-session__btn-icon {
  width: 18px;
  height: 18px;
}

/* Discard: a thin neutral circle OUTLINE matching the panel expand/collapse buttons
   (.md-board-edit-panel__collapse-btn) — drop the maroon, the glassy fill and the
   lift. Same 25px outer diameter as the Done badge (border-box, above). */
.md-board-edit-session__btn--discard .md-board-edit-session__btn-badge {
  /* Outline matched in strength to the button's outer outline so the circle reads
     clearly (was too faint). */
  border: 1px solid rgba(27, 54, 93, 0.24);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.md-board-detail--dark .md-board-edit-session__btn--discard .md-board-edit-session__btn-badge {
  border-color: rgba(255, 255, 255, 0.32);
}

/* The trash-can LID (the icon's two <rect>s) is baked light teal (#b9e8e0) for
   contrast on a dark surface, so it vanishes on the LIGHT discard button in light
   mode. Darken it to the can-body slate in light mode so the lid reads clearly;
   dark mode restores the teal. (CSS `fill` overrides the SVG's presentation-attr
   fill.) The ribs sit on the slate body, so they stay legible and are left alone. */
.md-board-edit-session__btn--discard .md-board-edit-session__btn-icon rect {
  fill: #6b7888;
}

.md-board-detail--dark .md-board-edit-session__btn--discard .md-board-edit-session__btn-icon rect {
  fill: #b9e8e0;
}

/* Left-panel finish footer — the Done/Discard buttons mirrored at the BOTTOM of the
   Action Panel: stacked full-width and more compact (smaller top/bottom padding) than
   the top session bar. Pushed to the panel bottom via margin-top:auto. */
.md-board-edit-panel__finish {
  margin-top: auto;
  /* Stacked + centered in the panel. The single `auto` column sizes to the WIDER
     button ("Done Editing"); both grid items stretch to it, so the shorter "Discard"
     expands to match — equal width, fit-to-content, not full-panel-width. */
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  gap: 6px;
  /* Docked "exit zone": a hairline divider + extra top padding turn the
     bottom action pair into a deliberate footer region instead of buttons
     floating in empty space. margin-top:auto keeps it pinned to the rail
     bottom; the border-top claims the space above as the footer edge. */
  padding-top: 18px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.md-board-detail--dark .md-board-edit-panel__finish {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.md-board-edit-session__btn.md-board-edit-panel__finish-btn {
  /* Left-align the content so both buttons' badges and labels line up vertically
     (the pair is the same width, centered in the panel by the grid above). */
  justify-content: flex-start;
  min-height: 34px;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Hierarchy: the TOP "Done Editing" is the primary workflow action; this
   BOTTOM one is the persistent navigation fallback, so it reads with lower
   visual DOMINANCE (not lower contrast) — a slightly deeper, flatter slate
   with no lift glow and smaller icon badges. The white label still clears
   AA on the darker fill. */
.md-board-edit-panel__finish .md-board-edit-session__btn--save {
  background: linear-gradient(180deg, #6b7a93 0%, #4d5c75 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(14, 20, 40, 0.18);
}

.md-board-edit-panel__finish .md-board-edit-session__btn--save:hover {
  background: linear-gradient(180deg, #76859e 0%, #57667f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 5px rgba(14, 20, 40, 0.2);
  /* No lift on the fallback button — keeps it quieter than the top primary. */
  transform: none;
}

.md-board-detail--dark .md-board-edit-panel__finish .md-board-edit-session__btn--save {
  background: linear-gradient(180deg, #5d6d89 0%, #46536b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.26);
}

/* Smaller icon emphasis for both footer badges — reinforces the fallback role. */
.md-board-edit-panel__finish .md-board-edit-session__btn-badge {
  width: 22px;
  height: 22px;
}

.md-board-edit-panel__finish .md-board-edit-session__btn-badge .md-board-edit-session__btn-icon {
  width: 15px;
  height: 15px;
}

/* Edit-mode title: allow extension up to 500px before wrapping.
   The grid's 1fr left column otherwise capped the title to its
   share of available width, so the natural-language title
   wrapped onto a second line as soon as it exceeded the 1fr
   allotment. Setting an explicit `max-width: 500px` on the title
   span (combined with `white-space: nowrap; overflow: hidden;
   text-overflow: ellipsis`) lets the identity column expand up
   to 500px to keep the title on one line, then ellipsis-truncates
   anything longer than 500px so the row never grows unboundedly
   tall. Paired with the `align-items: end` rule above so the
   Editing pill bottom-aligns alongside the taller title block. */
.md-board-detail-header__title-row--edit .md-board-detail-header__title {
  max-width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-detail-header__title-row-left {
  /* Identity Block: 2-column layout — board icon + a vertical
     identity stack (title row + metadata row). The single grid was
     replaced because the old 3-column "title | license-in-row-1 |
     pill-in-row-2" layout orphaned the license icon next to the
     title and made the layout collapse unevenly on long titles,
     localized text, or additional badges. The new structure groups
     all metadata in a dedicated row and lets the title own its
     row entirely. */
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
  width: 100%;
}

.md-board-detail-header__identity {
  display: flex;
  flex-direction: column;
  /* Vertical rhythm between title row and metadata row, per the
     design pass. */
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-board-detail-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* Hide the meta row when its Ember-conditional contents render to
   nothing (e.g. a public board with no license). Using :has(*) so
   handlebars whitespace inside the wrapper doesn't keep the row
   alive when it has no element children. */
.md-board-detail-header__meta:not(:has(*)) {
  display: none;
}

/* Compact metadata pill — smaller than the default 28px / 0 10px so
   it reads as a sub-attribute of the title rather than a primary
   control. Scoped to the metadata row so the pill style elsewhere
   on the page is unaffected. */
.md-board-detail-header__meta .md-board-detail-header__info-icon--private,
.md-board-detail-header__meta .md-board-detail-header__info-icon--lock {
  height: 22px;
  padding: 0 8px;
  font-size: 14px;
}

.md-board-detail-header__meta .md-board-detail-header__info-icon--private svg,
.md-board-detail-header__meta .md-board-detail-header__info-icon--lock svg {
  width: 13px;
  height: 13px;
}

.md-board-detail-header__title-row-center {
  justify-self: center;
}

.md-board-detail-header__title-row-right {
  /* Explicit grid placement in column 3. Without this the row was
     placing `__title-row-right` in column 2 (the auto Editing-pill
     column) — because the absolutely-positioned `__title-row-center`
     above doesn't consume a grid cell, CSS Grid auto-placement
     falls THIS sibling into col 2 instead of col 3. The result was
     the Discard/Save tiles rendering squished next to the title
     block (visually to the LEFT of the centered Editing pill)
     instead of at the row's far-right edge. Pinning to col 3
     restores the intended layout.
     `justify-self: end` then pins the container to the right edge
     of col 3 (= the trailing edge of the title row, to the right
     of the absolutely-centered Editing pill); `justify-content:
     flex-end` right-aligns the children inside the container so
     the Discard/Save tile pair hugs the right edge of the div
     itself (matters when the optional `__editing-badge` is also
     present — without flex-end the badge would push the tiles
     leftward inside the container). */
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* The edit-page Speak Bar PREVIEW is a static, non-interactive mockup
   (not the live bar). The mic + tool cluster (backspace, clear,
   speak-options chevron) is meaningless on a mockup, so hide that whole
   actions group at ALL screen sizes. Scoped to --preview so the real
   speak bar (and every other context) is untouched. */
.md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__actions {
  display: none;
}

/* Editing-as-supervisee badge — top-right of the edit-mode header.
   Visual style mirrors `.md-board-detail-sentence-bar__modeling-badge--paused`
   (verdigris pill, two-row column layout) so the two informational chips
   read as a coordinated set when both are present. */
.md-board-detail-header__editing-badge {
  /* Centered on the page: absolutely centered within the position:relative
     edit title-row (.md-board-detail-header__title-row--edit) so it sits in
     the middle of the content area instead of hugging the right edge of its
     __title-row-right container. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px 6px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.md-board-detail-header__editing-badge__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-left: -8px;
}

.md-board-detail-header__editing-badge__caption {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  width: 100%;
  text-align: center;
  /* Inherit the badge's own color (dark verdigris in light mode, lightened
     verdigris in dark mode) instead of a hardcoded #fff — white was invisible
     on the light (0.10-alpha) pill background in light mode. */
  color: inherit;
  opacity: 1;
}

.md-board-detail--dark .md-board-detail-header__editing-badge {
  background: rgba(42, 157, 143, 0.22);
  color: rgb(98.1577889447, 213.0422110553, 199.056281407);
}

.md-board-detail--dark .md-board-detail-header__editing-badge__caption {
  opacity: 1;
}

/* Privacy/protected indicator row — sits directly beneath the title
   row, flush left with no top spacing. */
.md-board-detail-header__privacy-row {
  display: flex;
  align-items: center;
}

/* Save button when placed in the title-row-right cluster — sits
   alongside the privacy pill. Inherits the toolbar btn--save
   gradient/border via the shared classes; this rule just tunes the
   inline spacing/height so it harmonizes with the pill next to it
   instead of inheriting the toolbar's full-row min-height. */
.md-board-detail-header__save-btn {
  height: 36px;
  padding: 0 14px;
}

/* Board icon when rendered inside the edit-card title row — smaller
   than the standalone 81px tile so it sits inline with the title
   without dominating the row. Sized ~30% larger than the previous
   inline 44px tile per Traci's spec. */
.md-board-detail-header__board-icon--in-card {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  padding: 5px;
}

/* License icon sits directly inline to the right of the title (no
   margin-left: auto) so the title and its license read as one unit.
   The privacy pill still parks at the far right via its own --at-end
   rule above, leaving the license clustered with the title. */
.md-board-detail-header__license-icon--at-end {
  align-self: center;
}

.md-board-detail-header__info-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.md-board-detail-header__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Pill shape — width grows to fit the icon + label inside. Padding gives
     the pill room to breathe; the clickable variant bumps padding even
     more for a comfortable touch target. */
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(27, 54, 93, 0.72);
}

.md-board-detail-header__info-icon svg {
  flex: 0 0 auto;
}

.md-board-detail-header__info-icon--lock {
  /* Matches the softened --private pill: lighter bg + hairline
     border so the lock indicator reads as a sub-attribute pill,
     not a primary control. */
  background: rgba(76, 134, 216, 0.06);
  border: 1px solid rgba(76, 134, 216, 0.05);
  color: #1B365D;
}

.md-board-detail-header__info-icon--private {
  /* Lighter pill — bg .08 → .05, hairline border at .04. The
     metadata pill should read as a sub-attribute of the title
     (Boards-page-style soft chip), not a control-style pill. */
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.04);
  /* Light teal label color per request — matches the brand
     verdigris and reads as a soft tint rather than the prior
     muted navy. SVG strokes below are explicitly two-toned so
     the pill carries the same two-tone vocabulary as the
     right-panel section icons. */
  color: #2A9D8F;
}

/* Two-tone eye icon: eye shape + pupil in verdigris (primary),
   crossed-out strike line in currentColor (secondary — adapts to
   light/dark mode like the left-panel rail icons). */
.md-board-detail-header__info-icon--private svg path[d^="M1 12s4"],
.md-board-detail-header__info-icon--private svg circle {
  stroke: #2A9D8F;
}

.md-board-detail-header__info-icon--private svg line {
  stroke: currentColor;
}

/* Dark-mode pinning: the broader `--private { color: white }` rule
   below would otherwise override the verdigris text + strokes set
   above. Re-asserts the verdigris on text + eye shape, with a
   white strike-line so it reads against the dark backdrop. */
.md-board-detail--dark .md-board-detail-header__info-icon--private {
  color: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-header__info-icon--private svg path[d^="M1 12s4"],
.md-board-detail--dark .md-board-detail-header__info-icon--private svg circle {
  stroke: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-header__info-icon--private svg line {
  stroke: rgba(255, 255, 255, 0.92);
}

/* Privacy text label inside the pill — sits to the right of the icon. */
.md-board-detail-header__info-icon-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Dark-mode contrast — base color/bg are dark navy on dark navy panel
   and disappear. Force a light tint + light icon stroke + light label,
   and explicitly set the SVG stroke so currentColor inheritance can't
   be overridden by any descendant rule. */
.md-board-detail--dark .md-board-detail-header__info-icon--lock,
.md-board-detail--dark .md-board-detail-header__info-icon--private {
  /* Per user spec — softer metadata pill in dark mode:
     bg .10 → .08, hairline white border at .05. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-header__info-icon--lock svg,
.md-board-detail--dark .md-board-detail-header__info-icon--private svg {
  stroke: rgba(255, 255, 255, 0.92);
}

/* Clickable variant — when the user has edit permission, the private
   indicator becomes a pill-shaped button that opens the board-privacy
   modal. Resets the default <button> chrome and bumps padding so the
   whole pill reads as a comfortable touch target (44px wide minimum
   once the icon + label fit inside). */
.md-board-detail-header__info-icon--clickable {
  height: 32px;
  padding: 0 14px;
  border: none;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.md-board-detail-header__info-icon--clickable:hover {
  background: rgba(42, 157, 143, 0.18);
  color: #1B365D;
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.45);
}

.md-board-detail-header__info-icon--clickable:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.55);
  outline-offset: 2px;
}

.md-board-detail--dark .md-board-detail-header__info-icon--clickable:hover {
  background: rgba(42, 157, 143, 0.28);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.6);
}

.md-board-detail-header__license-icon {
  /* Compact raster: just the CC/PD raster itself, no glassy chip
     wrapper. The earlier wrapper added an outer gray circle that
     read as a separate badge around the icon — distracting. Now
     the icon stands alone at 22px, matching the original sizing,
     with no background, border, or filter so the raster's white
     outer ring + black inner disc + "cc" letters are all that
     show. */
  display: inline-block;
  height: 22px;
  width: auto;
  vertical-align: middle;
  /* If the raster ever fails to load, the browser shows the alt
     text in its default color. Force that fallback text to inherit
     the surrounding card color so dark-mode users see a readable
     light-on-dark label instead of the default dark-blue link
     color rendering invisibly on the navy panel. */
  color: inherit;
  font-size: 13px;
}

/* The cc.png / pd.png rasters are black "CC" / "PD" glyphs on
   transparent backgrounds. On the dark-mode edit card the dark
   glyph reads as black-on-black — visually a broken-image badge.
   Invert the raster in dark mode so the glyphs render as white-
   on-transparent and stay legible against the navy panel. The
   explicit color: rule sets the alt-text fallback color too, so
   if the image ever 404s the descriptive text stays light against
   the dark panel instead of rendering as the browser's default
   dark blue link color. */
/* PD icon stays a raster (pd.png) — the invert filter switches its
   black glyph to white on the dark panel. Scoped to `img` so it
   does NOT apply to the CC icon, which was converted to an inline
   SVG that already uses `stroke="currentColor"` (inheriting the
   `color` set in the second rule below — no filter needed). */
.md-board-detail--dark img.md-board-detail-header__license-icon {
  filter: invert(1) brightness(1.15);
}

.md-board-detail--dark .md-board-detail-header__license-icon {
  color: rgba(255, 255, 255, 0.88);
}

.md-board-detail-header__info-description {
  /* See the --editable variant below for why an explicit system-font
     stack is needed for font-weight: 300 to actually take effect
     (the inherited Helvetica stack has no Light cut). */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.85);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.md-board-detail-header__info-description--empty {
  font-style: italic;
  color: rgba(27, 54, 93, 0.55);
}

/* Editable variant — shown in edit_mode. Inherits the typography of
   the read-only paragraph but reads as a real input: 1px ring,
   padding, focus highlight. Auto-sizes to content (field-sizing) so
   short descriptions render as a compact single line and longer ones
   grow up to 60px before scrolling. Width: 100% with max-width:
   100% so the textarea always fits inside the card — without the
   explicit max-width, field-sizing: content can grow the textarea
   wider than its container when a long single-line word is typed,
   spilling past the card's right edge on narrow viewports. Top
   margin separates it from the action checklist above. Horizontal
   padding bumped 10→14 per spec. */
.md-board-detail-header__info-description--editable {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Atmospheric inset description (was utility-textarea-feeling).
     Border softened .08 → .04 hairline; radius 12 → 14 to match the
     boards-page card vocabulary; layered shadow gives an embedded
     glass feel — inset top-edge highlight + outer ambient drop —
     instead of the prior bare textarea look. */
  padding: 10px 16px;
  border: 1px solid rgba(27, 54, 93, 0.04);
  border-radius: 14px;
  /* Slightly translucent (was opaque #fff) — the center stage's
     subtle tint bleeds through, giving the panel a softer
     embedded-glass feel per the design pass. */
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px rgba(27, 54, 93, 0.08);
  /* Remove the browser's default bottom-right resize handle on
     <textarea> — we manage height via field-sizing + JS auto-resize,
     and a draggable handle would imply a manual resize affordance
     that doesn't exist. */
  resize: none;
  /* field-sizing: content makes the textarea auto-fit its content
     (Chromium 123+, Safari 18.1+). Combined with max-height +
     overflow-y, the textarea shrinks to fit when the description
     is short and caps at THREE rows when long, then scrolls. Math:
     font-size 15px × line-height 2.0 = 30px per line; padding-top
     10 + padding-bottom 10 = 20px; 3 lines × 30 + 20 = 110px.
     Browsers without field-sizing fall back to the rows="3"
     attribute on the Textarea component for a matching 3-row
     default height. line-height bumped 1.75 → 2.0 for fully
     breathable editorial rhythm. Text color alpha lowered .9 → .7
     so the description reads as supporting copy rather than
     competing with the title above. */
  field-sizing: content;
  max-height: 110px;
  overflow-y: auto;
  /* Explicit system-font stack — the inherited "Helvetica Neue",
     Helvetica, Arial stack has no 300-weight cut on most systems,
     so font-weight: 300 was silently falling back to 400. System
     fonts (SF Pro / Segoe UI / Roboto) all ship a Light variant. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 2;
  color: rgba(27, 54, 93, 0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-detail-header__info-description--editable:focus {
  outline: none;
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
  /* On focus, drop the 150px cap so the textarea auto-expands to fit
     its full content (via field-sizing: content). The internal
     scrollbar is no longer needed while the user is editing. When the
     user blurs, the cap returns and overflow scrolls again. */
  max-height: none;
  overflow-y: visible;
}

.md-board-detail-header__info-description--editable::placeholder {
  /* Raised from .45 → .62 so the placeholder clears WCAG AA contrast (the .45
     hint failed against the input surface) while staying clearly secondary. */
  color: rgba(27, 54, 93, 0.62);
  font-style: italic;
}

.md-board-detail--dark .md-board-detail-header__info-description--editable {
  /* Atmospheric inset — translucent base, hairline border, layered
     shadow stack. Bg alpha eased .04 → .03 per design pass so the
     surface feels lighter / more breathable. Text color alpha
     lowered .92 → .72 so the description reads as supporting copy
     instead of competing with the title. */
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 18px rgba(0, 0, 0, 0.16);
}

.md-board-detail--dark .md-board-detail-header__info-description--editable:focus {
  border-color: rgba(42, 157, 143, 0.7);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.22);
}

.md-board-detail--dark .md-board-detail-header__info-description--editable::placeholder {
  /* .45 white on the dark input read ~4:1 (under AA). .62 lands ~6:1 — readable
     but still a clear placeholder. */
  color: rgba(255, 255, 255, 0.62);
}

/* When the board has no description, hide the privacy/license icons row
   above it so the panel doesn't show a stray indicator (e.g. the
   private-board eye/slash icon) above the "No description provided"
   placeholder. */
.md-board-detail-header__info-panel:has(.md-board-detail-header__info-description--empty) .md-board-detail-header__info-icons {
  display: none;
}

.md-board-detail--dark .md-board-detail-header__info-description {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-header__info-description--empty {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 AAA touch target — was 30×30. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  /* WCAG 1.4.11 — was $brand-blue-grey (3.5:1, borderline). */
  color: #46505F;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  margin-top: -1rem;
}

.md-board-detail-info-btn:hover {
  color: #1A7B7A;
}

.md-board-detail-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.md-board-detail-header__title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 320px;
  min-width: 0;
}

@media (max-width: 600px) {
  .md-board-detail-header__title-group {
    width: 100%;
    /* In the column-stack mode (set by the matching media query
       below on `.md-board-detail-header__row`), the base
       `flex: 1 1 320px` makes the title-group grow *vertically* to
       320px+ as a flex item along the column main-axis — and the
       title-group's own `align-items: center` then centers the
       actual title content within that tall slot, leaving large
       empty bands above and below. Resetting to `0 0 auto` so the
       title-group sizes to its content. */
    flex: 0 0 auto;
  }
  .md-board-detail-header__title {
    margin: 4px 0 0;
  }
  .md-board-detail-header__sub {
    margin-top: -0.5rem;
  }
}
/* Back / Home nav buttons */
.md-board-detail-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.md-board-detail-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 AAA touch target — was 36×36. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(70, 80, 95, 0.2);
  background: #7693B9;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.md-board-detail-nav-btn:hover {
  background: #6583a9;
  color: #fff;
  transform: translateX(-1px);
}

.md-board-detail-nav-btn--home:hover {
  transform: none;
}

/* Board actions panel (edit mode, right of title). Sized to 25% of the row
   to match the header's 75/25 split; the content (Details & Actions)
   right-aligns + vertically centers within the header row. */
.md-board-detail-board-actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  /* Let the wrapper size to its content (the Details & Actions pill)
     instead of forcing it to 25% of the row. Combined with the parent
     row's `justify-content: space-between`, the wrapper still sits at
     the right end of the row — but now it doesn't extend past the
     button on the right, so there's no empty space between the pill
     and the page edge. */
  flex: 0 0 auto;
  overflow: visible;
}

.md-board-detail-board-actions-wrap > .md-board-detail-board-actions {
  background: linear-gradient(135deg, #374151, #4b5563);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(55, 65, 81, 0.25);
}

/* Quick-access action row (Share / Copy / Print / Download) — sits
   BELOW the Details & Actions pill in edit mode. Each icon is a 36px
   circle button with the same neutral chrome as other header pills.
   The row right-aligns inside the actions wrapper (which is
   flex-column, align-items: flex-end) and uses flex `order: 2` so it
   visually follows the Details pill (default order: 0) without
   reshuffling the DOM. */
.md-board-detail-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  order: 2;
  margin-top: 8px;
  padding: 4px 6px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 999px;
}

.md-board-detail-quick-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(27, 54, 93, 0.78);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.md-board-detail-quick-actions__btn:hover {
  background: rgba(42, 157, 143, 0.12);
  color: #1B365D;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

.md-board-detail-quick-actions__btn:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.55);
  outline-offset: 1px;
}

/* Dark-mode contrast for the quick-actions cluster — matches the
   actions-cluster dark gradient used by Cancel/Save above. */
.md-board-detail--dark .md-board-detail-quick-actions {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.md-board-detail--dark .md-board-detail-quick-actions__btn {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-quick-actions__btn:hover {
  background: rgba(42, 157, 143, 0.22);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* At ≤600px the actions wrap spans the full row and centers both
   children. `align-items: center` (vs the desktop `flex-end`) sizes
   each child to its content along the cross-axis instead of
   stretching, so the Details & Actions pill shrinks to wrap its
   "Details & Actions" label rather than spanning the row. The
   quick-actions row was already content-sized; this just shifts its
   anchor from right to center along with the pill. */
@media (max-width: 600px) {
  .md-board-detail-board-actions-wrap {
    width: 100%;
    align-items: center;
  }
}
.md-board-detail-board-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 100%;
  overflow: visible;
  box-shadow: none;
  padding: 2px 0;
}

.md-board-detail-board-actions__btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  /* WCAG 2.5.5 AAA touch target — was 9px 16px (~32-37 tall). */
  padding: 12px 16px;
  min-height: 44px;
  border: none;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  /* Text wraps within the button when the available width can't fit
     icon + label + chevron on one line. The flex container also wraps
     so the chevron drops to a new line cleanly instead of forcing
     overflow. Each child stays as a single token. */
  white-space: normal;
  word-break: break-word;
  border-right: 1.5px solid rgba(255, 255, 255, 0.15);
}

.md-board-detail-board-actions__btn span {
  /* Allow the label span to wrap within the button at narrow widths
     while keeping the icon + chevron on the same axis. */
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

.md-board-detail-board-actions__btn:last-child {
  border-right: none;
}

.md-board-detail-board-actions__btn span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.md-board-detail-board-actions__btn svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease;
  width: 16px;
  height: 16px;
}

.md-board-detail-board-actions__btn:hover,
.md-board-detail-board-actions__btn--active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.md-board-detail-board-actions__btn:hover svg,
.md-board-detail-board-actions__btn--active svg {
  color: rgba(255, 255, 255, 0.9);
}

.md-board-detail-board-actions__divider {
  display: none;
}

.md-board-detail-board-actions__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.18);
  padding: 2px 0;
}

.md-board-detail-board-actions__group {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.md-board-detail-board-actions__group-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  border-right: 1.5px solid rgba(255, 255, 255, 0.15);
}

.md-board-detail-board-actions__group-pill:last-child {
  border-right: none;
}

.md-board-detail-board-actions__group-pill svg {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.md-board-detail-board-actions__group-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.md-board-detail-board-actions__group-pill:hover svg {
  color: rgba(255, 255, 255, 0.9);
}

.md-board-detail-board-actions__group-pill--standalone {
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.md-board-detail-board-actions__group-pill--active {
  background: rgba(255, 255, 255, 0.15);
}

/* Share dropdown */
.md-board-detail-share-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(27, 42, 65, 0.18);
  padding: 4px;
  min-width: 160px;
  margin-top: 4px;
}

.md-board-detail-share-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target — was 8×12 (~21×18). */
  padding: 12px 14px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 15px;
  font-weight: 500;
  color: #46505F;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  border-radius: 6px;
}

.md-board-detail-share-dropdown__item:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-board-detail-share-dropdown__item svg {
  color: rgba(70, 80, 95, 0.5);
  flex-shrink: 0;
}

.md-board-detail-share-dropdown__divider {
  height: 1px;
  background: rgba(27, 54, 93, 0.08);
  margin: 4px 8px;
}

.md-board-detail-header__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

/* Edit mode: __actions still holds the Done-Editing button so it sizes
   naturally; the Details & Actions dropdown lives in __board-actions-wrap
   alongside it. The legacy `width: 0` collapse is no longer needed since
   __actions is a row-flex group rather than a fixed-width column. */
/* Edit Board button */
.md-board-detail-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #7693B9;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
  border: 1px solid rgba(70, 80, 95, 0.3);
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-board-detail-edit-btn:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(70, 80, 95, 0.3);
  color: #fff;
  text-decoration: none;
}

.md-board-detail-edit-btn:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail-edit-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.md-board-detail-edit-btn__label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.md-board-detail-header__sub {
  font-size: 16px;
  color: rgba(75, 78, 92, 0.55);
  /* Sits lower under the title with a subtle hairline separator above so
     the description reads as a separate row from the title. Flex row so
     the "EDITING" glass pill sits to the left of the description with the
     description vertically centered. */
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 2px solid rgba(27, 54, 93, 0.12);
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: normal;
  line-height: 1.5;
}

.md-board-detail--dark .md-board-detail-header__sub {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Checklist variant of the subheader — three editing-mode actions rendered
   as a horizontal row of checkmark + label pairs. Wraps to new rows when
   the viewport is too narrow to fit all three side-by-side. */
.md-board-detail-header__sub--checklist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 0.75rem 0 0;
  margin: 0.75rem 0 0;
  list-style: none;
}

.md-board-detail-header__sub-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.md-board-detail-header__sub-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  margin-top: 2px;
}

.md-board-detail--dark .md-board-detail-header__sub-check {
  background: rgba(143, 228, 223, 0.18);
  color: #8fe4df;
}

/* Vertical stack for the board icon + "EDITING" pill so the pill sits
   centered directly under the board image. */
.md-board-detail-header__board-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* "Edit Mode" glass pill — single-line frosted-glass pill that sits to the
   left of the description. Backdrop-filter for the blur + a soft inner
   highlight, with a darker translucent variant for dark mode. */
.md-board-detail-header__sub-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1B365D;
  /* Light teal gradient that fades to clear, layered over the glass
     blur so the pill keeps its translucent "clear" feel. */
  background: linear-gradient(135deg, rgba(143, 228, 223, 0.55) 0%, rgba(143, 228, 223, 0.22) 55%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(42, 157, 143, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(27, 54, 93, 0.1);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  white-space: nowrap;
}

.md-board-detail-header__sub-text {
  flex: 1;
  min-width: 0;
}

.md-board-detail--dark .md-board-detail-header__sub-badge {
  color: #d6f6f3;
  background: linear-gradient(135deg, rgba(143, 228, 223, 0.24) 0%, rgba(143, 228, 223, 0.1) 55%, rgba(255, 255, 255, 0) 100%);
  border-color: rgba(143, 228, 223, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Copy-on-save variant: badge shifts to the warm-amber warning palette
   used for the duplicate-label chip on create-board-new — signals to
   the user that their edits will create a NEW board (not modify the
   public one they navigated to). */
.md-board-detail-header__sub-badge--copying {
  color: #7a4a08;
  border-color: rgba(217, 138, 36, 0.65);
  background: linear-gradient(135deg, rgba(255, 245, 224, 0.95) 0%, rgba(252, 209, 138, 0.55) 55%, rgba(252, 209, 138, 0.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(13, 36, 56, 0.06), 0 6px 16px -6px rgba(217, 138, 36, 0.45);
}

.md-board-detail--dark .md-board-detail-header__sub-badge--copying {
  color: #ffd6a0;
  background: linear-gradient(135deg, rgba(217, 138, 36, 0.3) 0%, rgba(217, 138, 36, 0.18) 100%);
  border-color: rgba(252, 209, 138, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -6px rgba(217, 138, 36, 0.5);
}

.md-board-detail-header__sub--collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description expander styled to match the edit toolbar's
   "More Settings" pill — same gradient, border, shadow, and
   chevron-rotation behavior, minus the absolute positioning since
   this lives inline in the header. */
.md-board-detail-header__expand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-top: 6px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.12), 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: box-shadow 0.15s ease, transform 0.2s ease, background 0.15s ease;
}

.md-board-detail-header__expand-link:hover,
.md-board-detail-header__expand-link:focus-visible {
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
  transform: translateY(-1px);
  text-decoration: none;
}

.md-board-detail-header__expand-link svg {
  color: #2A9D8F;
  transition: transform 0.2s ease;
}

.md-board-detail-header__expand-link--open svg {
  transform: rotate(180deg);
}

.md-board-detail--dark .md-board-detail-header__expand-link {
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.9) 0%, rgba(21, 26, 36, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-header__expand-link svg {
  color: #8fe4df;
}

.md-board-detail--dark .md-board-detail-header__expand-link:hover,
.md-board-detail--dark .md-board-detail-header__expand-link:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Color legend toggle */
.md-board-detail-color-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* WCAG 2.5.5 AAA touch target — was 6×14 (~12 tall). */
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
  flex-shrink: 0;
  margin-top: 4px;
}

.md-board-detail-color-legend-toggle:hover {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

.md-board-detail-color-legend-toggle--active {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.12), rgba(76, 134, 216, 0.1));
  border-color: rgba(42, 157, 143, 0.2);
}

.md-board-detail-color-legend-toggle__icon {
  font-size: 17px;
}

/* Color legend panel */
.md-board-detail-color-legend {
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 2px 12px rgba(27, 54, 93, 0.06);
  animation: md-board-detail-legend-in 0.2s ease;
}

@keyframes md-board-detail-legend-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.md-board-detail-color-legend__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
}

.md-board-detail-color-legend__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-board-detail-color-legend__swatch {
  /* WCAG 2.5.5 AAA touch target — was 32×32. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: visible;
}

.md-board-detail-color-legend__folder-wrap {
  position: relative;
  /* Match swatch size — was 32×32. */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.md-board-detail-color-legend__folder-wrap .md-folder-back {
  position: absolute;
  top: 3px;
  left: -1px;
  right: -1px;
  bottom: -2px;
  border-radius: 6px 6px 10px 10px;
}

.md-board-detail-color-legend__folder-wrap .md-folder-tab {
  top: -4px;
  left: 4px;
  width: 37.5%;
  height: 5px;
  border-radius: 3px 3px 0 0;
}

.md-board-detail-color-legend__folder-wrap .md-board-detail-color-legend__swatch {
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  height: 82%;
  width: auto;
  z-index: 1;
  border-radius: 4px 4px 8px 8px;
}

.md-board-detail-color-legend__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.md-board-detail-color-legend__type {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.2;
}

.md-board-detail-color-legend__parts {
  font-size: 15px;
  color: rgba(75, 78, 92, 0.6);
  line-height: 1.3;
}

/* Quick phrases toggle + dropdown */
.md-board-detail-quick-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.md-board-detail-quick-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target — was 8×16 (~16 tall). */
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
}

.md-board-detail-quick-toggle--categories {
  position: relative;
  top: 2px;
}

/* In the header actions row, the Quick Phrases / Categories pills sit
   alongside Color Key and Edit Board — drop the 2px nudge so they baseline
   with the other action buttons. */
.md-board-detail-header__actions .md-board-detail-quick-toggle--categories {
  top: 0;
}

.md-board-detail-quick-toggle:hover {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

.md-board-detail-quick-toggle--active {
  border-color: rgba(42, 157, 143, 0.2);
}

.md-board-detail-quick-toggle svg {
  color: #46505F;
}

.md-board-detail-quick-toggle__chevron {
  transition: transform 0.2s ease;
}

.md-board-detail-quick-toggle--active .md-board-detail-quick-toggle__chevron {
  transform: rotate(180deg);
}

/* Quick phrases inline reveal */
.md-board-detail-quick-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 14px;
  flex-basis: 100%;
  border-radius: 16px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  animation: md-board-detail-quick-reveal-in 0.15s ease;
}

@keyframes md-board-detail-quick-reveal-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.md-board-detail-quick-reveal__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* WCAG 2.5.5 AAA touch target — was 6×12 (~12 tall). */
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.04);
}

.md-board-detail-quick-reveal__btn:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.08);
}

.md-board-detail-quick-reveal__btn:active {
  transform: scale(0.97);
}

.md-board-detail-quick-reveal__btn-icon {
  font-size: 17px;
  opacity: 0.7;
}

/* Dark mode: lift the chips to near-opaque white so they read clearly
   against the navy speak-mode background. Text/icon stay dark. */
.md-board-detail--dark .md-board-detail-quick-reveal__btn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
  color: #1B365D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-board-detail-quick-reveal__btn:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-board-detail-quick-reveal__btn-icon {
  opacity: 0.9;
}

/* Active filter chip */
.md-board-detail-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  animation: md-board-detail-quick-reveal-in 0.15s ease;
}

.md-board-detail-filter-chip__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border-width: 1.5px;
  border-style: solid;
  flex-shrink: 0;
}

.md-board-detail-filter-chip__label {
  white-space: nowrap;
}

.md-board-detail-filter-chip__clear {
  /* WCAG 2.5.8 AA touch target — was 20×20 (FAIL).
     Bumped to 32×32 — passes WCAG AA's 24px minimum.
     44×44 would dominate the filter chip layout. */
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background 0.12s ease;
}

.md-board-detail-filter-chip__clear:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Category split panel */
.md-board-detail-cat-panel {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-basis: 100%;
  margin-left: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  animation: md-board-detail-quick-reveal-in 0.15s ease;
}

.md-board-detail-cat-panel__left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 12px;
  justify-content: center;
}

.md-board-detail-cat-panel__left .md-board-detail-quick-reveal__btn {
  justify-content: center;
  text-align: center;
}

.md-board-detail-cat-panel__divider {
  width: 1px;
  background: rgba(27, 54, 93, 0.12);
  flex-shrink: 0;
}

.md-board-detail-cat-panel__right {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 12px;
  flex: 1;
  align-content: center;
}

.md-board-detail-quick-reveal__btn--active {
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border-color: rgba(70, 80, 95, 0.3);
}
.md-board-detail-quick-reveal__btn--active .md-board-detail-quick-reveal__btn-label {
  color: #fff;
}

.md-board-detail-quick-reveal__btn--active:hover {
  background: linear-gradient(135deg, #7693B9, #46505F);
}

.md-board-detail-quick-reveal__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border-width: 1.5px;
  border-style: solid;
  flex-shrink: 0;
}

/* Category filter pills */
/* Toolbar row */
.md-board-detail-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.md-board-detail-tease-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 2px 4px;
}

.md-board-detail-tease-row #sidebar_tease {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #888;
  opacity: 0.7;
}

.md-board-detail-tease-row .md-board-detail-collapse-btn {
  position: static;
  transform: none;
}

.md-board-detail-sidebar-toggle {
  width: 56px;
  height: 40px;
  background: #eee;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #888;
  color: #888;
  opacity: 0.7;
  cursor: pointer;
  padding: 8px 0;
}

.md-board-detail-sidebar-toggle--stacked {
  /* WCAG 2.5.5 AAA touch target — was 40px. */
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: unset !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(70, 80, 95, 0.2) !important;
  background: rgba(118, 147, 185, 0.15) !important;
  color: #46505F !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.12s ease !important;
}

.md-board-detail-sidebar-toggle--stacked:hover {
  background: rgba(118, 147, 185, 0.3) !important;
}

#content:has(.md-shell--board-detail) ~ #sidebar {
  display: none !important;
}

#content:has(.md-shell--board-detail) ~ #sidebar_tease {
  display: none !important;
}

.md-board-detail-grid-sidebar-wrap {
  display: flex;
  /* Top-align the row's children so the BOARD grid keeps its JS-computed height
     (computeHeight) and is never stretched to fill the grown wrap. Only the inline
     sidebar opts into stretching, via its own `align-self: stretch`, so capping the
     sidebar to the board's height never changes the board's sizing/scroll. */
  align-items: flex-start;
  gap: 0;
  /* `flex: 1 0 auto` instead of `flex: 1` (= 1 1 0%):
     - flex-grow:1     → still expands to fill main's leftover vertical
                          space when there's room (tall viewports).
     - flex-shrink:0   → STAYS at content height when main is
                          over-constrained (small viewports / dev tools
                          docked / header content tall). Without this,
                          the wrap collapses to its padding (~30px)
                          while the grid inside renders at its explicit
                          calc(100dvh - 180px) height and overflows
                          past the wrap's bottom edge.
     - flex-basis:auto → starts at content height (grid + padding) so
                          the wrap is correctly sized for its content
                          before any flex distribution. */
  flex: 1 0 auto;
  /* Clear gap above the grid so the top button row reads separated
     from the header/speak-preview above it and isn't clipped against
     the scroll-viewport edge when the board is scrolled. */
  padding-top: 16px;
  padding-bottom: 4px;
  scroll-padding-top: 16px;
}

/* board-detail speak (communicator, non-edit) mode: drop the 16px top
   gap above the grid so the board sits flush under the speak bar.
   Scoped to the non-edit shell (`.md-shell--board-detail` without
   `--board-detail-edit`) — the verified communicator signal; edit mode
   keeps the 16px separation. */
.md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-grid-sidebar-wrap {
  padding-top: 0;
  scroll-padding-top: 0;
}

/* "Hide speak bar" in speak mode — the live #speak row is repositioned
   as a floating top-right cluster (home + options + sidebar) anchored
   to .md-board-detail-main (see the hide-bar rule near app.scss:58931).
   That cluster floats above the grid wrap at top:8px right:8px and
   would overlap the top-right buttons without compensation. Push the
   grid content down by the cluster's footprint: 8px top offset +
   44px home-btn height (all three cluster buttons share the same
   44×44 footprint) + 8px breathing room = 60px. Scoped to speak
   (non-edit) shell since edit mode hides the preview row entirely
   (no overlap to compensate for). */
.md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-main:has(.md-board-detail-sentence-row--hide-bar) .md-board-detail-grid-sidebar-wrap {
  padding-top: 60px;
  scroll-padding-top: 60px;
}

.md-board-detail-grid-sidebar-wrap > .md-board-detail-grid,
.md-board-detail-grid-sidebar-wrap > div:has(.md-board-detail-grid) {
  flex: 1;
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Speak-mode surface layering (board-detail, non-edit, LIGHT theme).

   Goal: mirror the EDIT+light page exactly so the speak page is the
   same room — bright halo gradient canvas + soft $surface-200 rounded
   center card + the same translucent-white frosted-glass formula on
   the compose row as the edit-page side rails (.md-board-edit-panel,
   ~app.scss:82479). Speak mode has no left/right rails — the compose
   row plays the same "menu" role here that those rails play in edit.

   Page bg, center card, tile shadow, and right-panel chrome all
   inherit their base rules now — those bases already deliver the
   edit+light look (.md-shell--board-detail base @ ~58778,
   .md-board-detail-main base @ ~59209), and edit+light itself adds
   no overrides on them. Removing the prior pass's dark-navy
   overrides on those selectors lets speak+light land on the same
   surface tier as edit+light with zero duplication.

   The selectors that still need overrides — sentence-bar / home /
   tool-btn / actions-toggle / sidebar-toggle--stacked — are the
   ones whose base rules (~59650 / 59598 / 60341 / 63226 / 62234)
   assume a darker canvas (frosted-gray-blue fill, white text, solid
   $brand-blue-grey block). Below they're re-skinned with the same
   translucent-white linear-gradient + backdrop-blur + layered
   shadow + inset top highlight formula the edit-page rail uses, so
   the row reads as the speak-mode mirror of those rails.

   Speak+DARK has its own separate treatment further down and is not
   touched here. */
/* 1. Compose bar surface — translucent white glass mirroring
   .md-board-edit-panel @ app.scss:82528. Wider inner padding + gap
   keep the chip-and-tool breathing room from the prior pass. The
   vertical padding stays at 2px so the bar's height contract with
   the user's `vocalization_height` setting is preserved. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sentence-bar {
  padding: 2px 18px;
  gap: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 244, 248, 0.78) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(27, 54, 93, 0.06);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 24px rgba(27, 54, 93, 0.07), 0 24px 60px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #1B365D;
}

/* 2. Home button — same translucent-white treatment so the home
   button + bar read as one coordinated rail on the bright canvas. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-home-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 244, 248, 0.78) 100%);
  border: 1px solid rgba(27, 54, 93, 0.06);
  color: #1B365D;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 4px 14px rgba(27, 54, 93, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-home-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 244, 248, 0.92) 100%);
  color: #1B365D;
}

/* 3. Tool buttons (backspace / clear / options chevron) — smaller
   translucent-white chips sitting inside the bar's glass surface. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sentence-bar__tool-btn {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(27, 54, 93, 0.08);
  color: rgba(27, 54, 93, 0.78);
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sentence-bar__tool-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #1B365D;
}

/* 4. Stacked right utility rail (options + sidebar toggles) — same
   translucent-white chip treatment. The base .md-board-detail-sidebar-
   toggle--stacked rule uses !important everywhere (~app.scss:62234);
   these overrides match with !important to win. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-actions-toggle {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.78) !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-actions-toggle:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1B365D !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sidebar-toggle--stacked {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(27, 54, 93, 0.08) !important;
  color: rgba(27, 54, 93, 0.78) !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sidebar-toggle--stacked:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1B365D !important;
}

/* ──────────────────────────────────────────────────────────────────
   Phrase Builder view (replaces symbol grid in center content)
   ────────────────────────────────────────────────────────────────── */
.md-board-detail-phrase-builder {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(16px, 2.5vw, 32px) 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), rgba(27, 54, 93, 0.02);
  border-radius: 18px;
  margin: 4px;
  min-height: 0;
  overflow: hidden;
}

.md-board-detail-phrase-builder__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.md-board-detail-phrase-builder__title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-board-detail-phrase-builder__title {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.01em;
}

.md-board-detail-phrase-builder__hint {
  margin: 0;
  font-size: 15px;
  color: #46505F;
}

.md-board-detail-phrase-builder__search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  padding: 0 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-detail-phrase-builder__search:focus-within {
  border-color: #316F70;
  box-shadow: 0 0 0 4px rgba(49, 111, 112, 0.12);
}

.md-board-detail-phrase-builder__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6B7280;
  margin-right: 10px;
}

.md-board-detail-phrase-builder__search:focus-within .md-board-detail-phrase-builder__search-icon {
  color: #316F70;
}

.md-board-detail-phrase-builder__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 19px;
  font-weight: 500;
  color: #1B365D;
  padding: 14px 0;
  font-family: inherit;
  min-width: 0;
}

.md-board-detail-phrase-builder__input::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

.md-board-detail-phrase-builder__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 AAA touch target — was 28×28. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-board-detail-phrase-builder__clear:hover {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
}

.md-board-detail-phrase-builder__count {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #316F70;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.md-board-detail-phrase-builder__results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 12px;
  margin: 0 -4px;
}

.md-board-detail-phrase-builder__results::-webkit-scrollbar {
  width: 10px;
}

.md-board-detail-phrase-builder__results::-webkit-scrollbar-track {
  background: transparent;
}

.md-board-detail-phrase-builder__results::-webkit-scrollbar-thumb {
  background: rgba(27, 54, 93, 0.15);
  border-radius: 999px;
}

.md-board-detail-phrase-builder__results::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 54, 93, 0.25);
}

.md-board-detail-phrase-builder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-content: start;
}

/* Compact text-only chip list (default view + search results) */
.md-board-detail-phrase-builder__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
  padding: 4px 0;
}

.md-board-detail-phrase-builder__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #1B365D;
  background: #fff;
  border: 1.5px solid rgba(27, 54, 93, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  max-width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.md-board-detail-phrase-builder__chip:hover {
  background: rgba(49, 111, 112, 0.08);
  border-color: rgba(49, 111, 112, 0.45);
  color: #316F70;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(27, 54, 93, 0.08);
}

.md-board-detail-phrase-builder__chip:active {
  transform: translateY(0);
  background: rgba(49, 111, 112, 0.14);
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

.md-board-detail-phrase-builder__chip:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #1B365D, 0 0 0 4px rgba(27, 54, 93, 0.1) !important;
}
@media (forced-colors: active) {
  .md-board-detail-phrase-builder__chip:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}

.md-board-detail-phrase-builder__chip-label {
  font-weight: 700;
}

.md-board-detail-phrase-builder__chip-path {
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  padding-left: 8px;
  border-left: 1px solid rgba(27, 54, 93, 0.15);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-detail-phrase-builder__chip:hover .md-board-detail-phrase-builder__chip-path {
  color: rgba(49, 111, 112, 0.75);
  border-left-color: rgba(49, 111, 112, 0.25);
}

/* ── Sentence mode: one chip per typed word, in order ─────────── */
.md-board-detail-phrase-builder__sentence {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 4px;
}

.md-board-detail-phrase-builder__sentence-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
}

.md-board-detail-phrase-builder__sentence-sep {
  color: #9CA3AF;
  font-size: 23px;
  font-weight: 400;
  user-select: none;
}

.md-board-detail-phrase-builder__sentence-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px 10px;
  min-width: 88px;
  max-width: 140px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(27, 54, 93, 0.1);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease;
}

.md-board-detail-phrase-builder__sentence-chip--match {
  border-color: rgba(49, 111, 112, 0.35);
  background: linear-gradient(180deg, #fff, rgba(49, 111, 112, 0.04));
}

.md-board-detail-phrase-builder__sentence-chip--match:hover {
  transform: translateY(-2px);
  border-color: #316F70;
  box-shadow: 0 6px 16px rgba(27, 54, 93, 0.12);
}

.md-board-detail-phrase-builder__sentence-chip--match:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.1);
}

.md-board-detail-phrase-builder__sentence-chip--match:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #1B365D, 0 0 0 4px rgba(27, 54, 93, 0.1) !important;
}
@media (forced-colors: active) {
  .md-board-detail-phrase-builder__sentence-chip--match:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}

.md-board-detail-phrase-builder__sentence-chip--missing {
  border-color: rgba(27, 54, 93, 0.12);
  border-style: dashed;
  background: rgba(27, 54, 93, 0.02);
  cursor: not-allowed;
  opacity: 0.75;
}

.md-board-detail-phrase-builder__sentence-chip-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}

.md-board-detail-phrase-builder__sentence-chip-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Dark-mode lift for phrase-builder chip thumbnails (edit mode). The
   image inside is sized to fit the 52px chip; pad the IMG itself so
   the chip body stays glassy while the icon gets a readable backdrop. */
.md-board-detail--dark .md-board-detail-phrase-builder__sentence-chip-img img {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
}

.md-board-detail-phrase-builder__sentence-chip-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

.md-board-detail-phrase-builder__sentence-chip--missing .md-board-detail-phrase-builder__sentence-chip-label {
  color: #6B7280;
  text-decoration: line-through;
  text-decoration-color: rgba(27, 54, 93, 0.25);
}

.md-board-detail-phrase-builder__sentence-chip-missing {
  display: block;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9CA3AF;
  margin-top: 2px;
}

.md-board-detail-phrase-builder__sentence-commit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #316F70;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(49, 111, 112, 0.3);
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.md-board-detail-phrase-builder__sentence-commit:hover {
  background: rgb(41.2391304348, 93.4192546584, 94.2608695652);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(49, 111, 112, 0.4);
}

.md-board-detail-phrase-builder__sentence-commit:active {
  transform: translateY(0);
}

.md-board-detail-phrase-builder__sentence-commit:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-board-detail-phrase-builder__sentence-commit:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-board-detail-phrase-builder__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px 12px;
  min-height: 130px;
  border: 1.5px solid rgba(27, 54, 93, 0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  position: relative;
  outline-offset: -1.5px;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.md-board-detail-phrase-builder__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(49, 111, 112, 0.35);
  box-shadow: 0 6px 16px rgba(27, 54, 93, 0.1);
}

.md-board-detail-phrase-builder__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.12);
}

.md-board-detail-phrase-builder__btn:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .md-board-detail-phrase-builder__btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-board-detail-phrase-builder__btn--folder::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(27, 54, 93, 0.08);
  background-image: linear-gradient(135deg, transparent 50%, rgba(27, 54, 93, 0.2) 50%);
}

.md-board-detail-phrase-builder__btn-path {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 15px;
  font-weight: 500;
  color: #316F70;
  background: rgba(49, 111, 112, 0.08);
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.md-board-detail-phrase-builder__btn-path svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.md-board-detail-phrase-builder__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 14px;
}

.md-board-detail-phrase-builder__loading p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #46505F;
}

.md-board-detail-phrase-builder__btn-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.md-board-detail-phrase-builder__btn-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.md-board-detail-phrase-builder__btn-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.25;
  word-break: break-word;
  max-width: 100%;
}

.md-board-detail-phrase-builder__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: #6B7280;
  gap: 8px;
}

.md-board-detail-phrase-builder__empty svg {
  color: #9CA3AF;
  margin-bottom: 6px;
}

.md-board-detail-phrase-builder__empty p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #46505F;
}

.md-board-detail-phrase-builder__empty-hint {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
}

@media (max-width: 768px) {
  .md-board-detail-phrase-builder {
    padding: 16px;
    gap: 14px;
  }
  .md-board-detail-phrase-builder__title {
    font-size: 20px;
  }
  .md-board-detail-phrase-builder__input {
    font-size: 17px;
    padding: 13px 0;
  }
  .md-board-detail-phrase-builder__grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .md-board-detail-phrase-builder__btn {
    min-height: 110px;
    padding: 12px 8px 10px;
  }
  .md-board-detail-phrase-builder__btn-img {
    width: 52px;
    height: 52px;
  }
  .md-board-detail-phrase-builder__btn-label {
    font-size: 1rem;
  } /* 17px — phrase builder small button label */
}
.md-board-detail-inline-sidebar {
  width: 100px;
  flex-shrink: 0;
  /* Glassmorphism container matching the board-detail surfaces (sentence bar,
     prediction tiles, edit panels): a frosted backdrop-blur pane with a soft
     solid edge, an inset top sheen, and a soft ambient drop. Subtly rounded.
     Outer = a positioned shell stretched to the board's height; the inner
     __scroll layer holds the (top-aligned) thumbnails + Edit pill and scrolls. */
  position: relative;
  /* Stretch to the wrap's cross height — which is set by the board grid — so the
     sidebar never extends past the bottom of the center board; overflow scrolls
     inside instead (the inner __scroll layer can't grow this shell). */
  align-self: stretch;
  min-height: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 244, 248, 0.78) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* GPU layer — prevents backdrop-filter recompute flash on scroll (see .la-pricing-card ~27720) */
  will-change: transform;
  transform: translateZ(0);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(27, 54, 93, 0.12);
  overflow: hidden;
  margin-left: 6px;
}

/* Absolute scroll layer filling the shell — keeps the content from growing the
   flex row (which would push the sidebar below the grid). */
.md-board-detail-inline-sidebar__scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 10px;
}

/* Dark-mode: a dark frosted-glass pane (the thumbnails already expect a "dark
   glass sidebar surface" — see __img below) with light item text. */
.md-board-detail--dark .md-board-detail-inline-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 18px rgba(0, 0, 0, 0.34);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__item {
  color: #e1e5eb;
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__item:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.22);
}

.md-board-detail-inline-sidebar__close {
  display: block;
  width: 90%;
  margin: 5px auto;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  text-align: center;
  color: #888;
}
.md-board-detail-inline-sidebar__close:hover {
  background: #eee;
  color: #555;
}

/* Pin / unpin control at the top of the inline sidebar. Mirrors the
   app-level sidebar's pushpin; pressed (active) state when quick_sidebar
   is on. Sizing/brand tokens match .md-board-detail-sidebar-toggle--stacked
   so the two controls read as a family. */
.md-board-detail-inline-sidebar__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin: 5px auto;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(70, 80, 95, 0.2);
  background: rgba(118, 147, 185, 0.15);
  color: #46505F;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.18s ease;
}
.md-board-detail-inline-sidebar__pin:hover {
  background: rgba(118, 147, 185, 0.3);
}

.md-board-detail-inline-sidebar__pin--active {
  background: rgba(42, 157, 143, 0.18);
  border-color: rgba(42, 157, 143, 0.45);
  color: #2A9D8F;
  /* Soft, spread-out verdigris glow halo around the pinned pin (large blur +
     a little spread so it diffuses beyond the button rather than hugging it). */
  box-shadow: 0 0 22px 4px rgba(42, 157, 143, 0.3);
}

/* Industry-standard pin/unpin convention (MS Office, Atlassian, Material):
   UNPINNED = tilted (loose); PINNED = straight upright ("pushed firmly in").
   So the glyph leans ~42deg by default and straightens when --active.
   Smoothly animated between the two. */
.md-board-detail-inline-sidebar__pin svg {
  transform: rotate(42deg);
  transition: transform 0.18s ease;
}

.md-board-detail-inline-sidebar__pin--active svg {
  transform: rotate(0deg);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__pin {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}
.md-board-detail--dark .md-board-detail-inline-sidebar__pin:hover {
  background: rgba(255, 255, 255, 0.2);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__pin--active {
  background: rgba(42, 157, 143, 0.28);
  border-color: rgba(42, 157, 143, 0.6);
  color: #fff;
  /* Stronger spread-out glow on the dark bar so the pinned halo still reads. */
  box-shadow: 0 0 24px 5px rgba(42, 157, 143, 0.45);
}

.md-board-detail-inline-sidebar__item {
  /* Now a <button> element (was <a href="#">) per WCAG 2.1.1.
     Reset button defaults so the visual is identical to the prior link.
     Bumped padding from 6×8 to 10×8 for AA touch target. */
  display: block;
  width: 100%;
  padding: 10px 8px;
  min-height: 44px;
  /* Keep natural height inside the scrolling flex column — without this the
     items shrink to fit (squishing image + label together) instead of letting
     the sidebar overflow and scroll. */
  flex-shrink: 0;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  line-height: 1.2;
  /* Each item is its own glassy tile — translucent gradient, light rim, inset top
     sheen + soft drop — so it reads as a raised glass button on the sidebar pane
     (was a flat row with a hairline separator). */
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(241, 244, 248, 0.66) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 6px rgba(27, 54, 93, 0.1);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.md-board-detail-inline-sidebar__item:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 244, 248, 0.8) 100%);
  border-color: rgba(27, 54, 93, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 10px rgba(27, 54, 93, 0.14);
  text-decoration: none;
}
.md-board-detail-inline-sidebar__item:active {
  transform: translateY(1px);
}

.md-board-detail-inline-sidebar__img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin: 0 auto 4px;
}

/* Dark-mode lift for sidebar board thumbnails — these are 60px
   isolated board-tile icons that sit on the dark glass sidebar
   surface. Same pad pattern as the other small-thumb surfaces.
   Border-radius matches the icon's visual silhouette (modest
   rounding for a board-tile look). */
.md-board-detail--dark .md-board-detail-inline-sidebar__img {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
}

.md-board-detail-inline-sidebar__name {
  display: block;
  text-align: center;
  word-break: break-word;
  font-size: 15px;
}

/* Wider viewports (>1024px): a 125px sidebar. At <=1024px it stays at the
   base 100px width (and 70px at <=768px). */
@media (min-width: 1025px) {
  .md-board-detail-inline-sidebar {
    width: 125px;
  }
}
/* Narrow viewports (<=1024px): shrink the inline sidebar's board
   thumbnails/labels so they don't crowd the grid. The sidebar width is the base
   100px here. The pin control is left alone so it keeps its 44px touch target. */
@media (max-width: 1024px) {
  .md-board-detail-inline-sidebar__item {
    padding: 7px 4px;
    font-size: 12px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 42px;
    height: 42px;
  }
  .md-board-detail-inline-sidebar__name {
    font-size: 12px;
  }
}
/* <=768px: narrow the sidebar to 70px and shrink its buttons ~33% from the
   <=1024px sizes (img 42->28, label/item font 12->8, item padding 7/4->5/3) so the
   board + prediction rail get more room. Side padding dropped too. Pin still
   centers via its own auto margins. */
@media (max-width: 768px) {
  .md-board-detail-inline-sidebar {
    width: 70px;
  }
  .md-board-detail-inline-sidebar__scroll {
    padding-left: 0;
    padding-right: 0;
  }
  .md-board-detail-inline-sidebar__item {
    padding: 5px 3px;
    font-size: 8px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 28px;
    height: 28px;
  }
  .md-board-detail-inline-sidebar__name {
    font-size: 8px;
  }
}
/* At <=500px viewport height (short / landscape), shrink the sidebar's board
   content (thumbnails + labels + item padding) ~25% from the <=1024px sizes so
   it stays proportional on the shrunk short-screen layout. The sidebar width is
   fixed (base rule) — only the content shrinks. Pin control left alone (own
   sizing). */
@media (max-height: 500px) {
  .md-board-detail-inline-sidebar__scroll {
    /* Top/bottom padding halved (8/10 -> 4/5); 4px back on the sides. */
    padding: 4px 4px 5px;
  }
  /* Pin control + its glyph 20% smaller (44 -> 35, svg 34 -> 27). */
  .md-board-detail-inline-sidebar__pin {
    width: 35px;
    min-height: 35px;
    margin: 4px auto;
    border-radius: 10px;
  }
  .md-board-detail-inline-sidebar__pin svg {
    width: 27px;
    height: 27px;
  }
  .md-board-detail-inline-sidebar__item {
    padding: 5px 3px;
    font-size: 9px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 32px;
    height: 32px;
  }
  .md-board-detail-inline-sidebar__name {
    font-size: 9px;
  }
}
/* <=400px height: shrink the sidebar content another 20% from the <=500h sizes
   (img/name/item) so it stays proportional on the even-shorter row. The sidebar
   width is fixed (base rule) and the pin is left alone. After the <=500h block so
   it overrides (both match at <=400px). */
@media (max-height: 400px) {
  .md-board-detail-inline-sidebar__item {
    padding: 4px 2px;
    font-size: 7px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 26px;
    height: 26px;
  }
  .md-board-detail-inline-sidebar__name {
    font-size: 7px;
  }
}
/* Add Button (+) toggle and dropdown */
.md-board-detail-add-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.md-board-detail-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.25);
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.1), rgba(76, 134, 216, 0.08));
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.06);
}

.md-board-detail-add-btn svg {
  color: #2A9D8F;
}

.md-board-detail-add-btn:hover {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.18), rgba(76, 134, 216, 0.14));
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.15);
  transform: translateY(-1px);
}

.md-board-detail-add-btn--active {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.2), rgba(76, 134, 216, 0.16));
  border-color: rgba(42, 157, 143, 0.35);
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.18);
}

.md-board-detail-add-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-board-detail-add-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Match .md-board-detail-share-dropdown__item — full hit area. */
  width: 100%;
  padding: 10px 14px;
  /* WCAG 2.5.5 AAA touch target — was ~32×20. */
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
  white-space: nowrap;
}

.md-board-detail-add-dropdown__item svg {
  color: #46505F;
  flex-shrink: 0;
}

.md-board-detail-add-dropdown__item:hover {
  background: rgba(42, 157, 143, 0.08);
  color: #1B365D;
}

.md-board-detail-add-dropdown__item:hover svg {
  color: #2A9D8F;
}

/* Placement mode */
.md-board-detail-placement-cursor {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #2A9D8F;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(42, 157, 143, 0.25);
  color: #2A9D8F;
  animation: md-placement-pulse 1.2s ease-in-out infinite;
}

@keyframes md-placement-pulse {
  0%, 100% {
    box-shadow: 0 3px 12px rgba(42, 157, 143, 0.25);
  }
  50% {
    box-shadow: 0 3px 18px rgba(42, 157, 143, 0.4);
  }
}
.md-board-detail-grid--placing {
  cursor: crosshair;
}

.md-board-detail-grid--placing .md-board-detail-grid__cell {
  transition: outline 0.12s ease, background 0.12s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.md-board-detail-grid--placing .md-board-detail-grid__cell:hover {
  outline-color: #2A9D8F;
  background: rgba(42, 157, 143, 0.06);
  border-radius: 10px;
}

.md-board-detail-grid--placing .md-board-detail-symbol-card--empty:hover {
  background: rgba(42, 157, 143, 0.12);
}

.md-board-detail-placement-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin-top: 10px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.1), rgba(76, 134, 216, 0.08));
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
}

.md-board-detail-placement-banner__icon {
  display: flex;
  align-items: center;
  color: #2A9D8F;
}

.md-board-detail-placement-banner__cancel {
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-board-detail-placement-banner__cancel:hover {
  background: #f3f4f6;
}

.md-board-detail-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-board-detail-category-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 600;
  color: rgba(75, 78, 92, 0.8);
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-board-detail-category-btn:hover:not(.md-board-detail-category-btn--active) {
  background: rgba(255, 255, 255, 0.9);
  color: #1B365D;
}

.md-board-detail-category-btn--active {
  background: linear-gradient(135deg, #7693B9, #46505F);
  color: #fff;
  border-color: rgba(70, 80, 95, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Actions dropdown (right of sentence bar).
   z-index 100 keeps the options button and menu above the frosted
   backdrop (z-index 99) so both remain sharp and clickable. */
.md-board-detail-sentence-bar__actions-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  z-index: 100;
}

.md-board-detail-sentence-bar__actions-wrap--stacked {
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}

.md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-actions-toggle,
.md-board-detail-sentence-bar__actions-wrap--stacked .md-board-detail-sidebar-toggle {
  flex: 1;
  align-self: auto;
}

.md-board-detail-actions-toggle {
  /* WCAG 2.5.5 AAA touch target — was 40px. */
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid rgba(70, 80, 95, 0.2);
  background: #7693B9;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease;
  /* Stay above the frosted backdrop so the button isn't blurred */
  position: relative;
  z-index: 101;
}

.md-board-detail-actions-toggle:hover {
  background: #6583a9;
}

/* Suppress the browser's default :focus-visible outline on mouse click — the
   rectangular shadow that occasionally appears is the UA stylesheet's
   focus ring lingering after the menu closes. :focus-visible (keyboard
   focus) still shows the verdigris ring from the shared focus rule. */
.md-board-detail-actions-toggle:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.md-board-detail-actions-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: transparent;
  -webkit-backdrop-filter: blur(4px);
}

.md-board-detail-actions-menu {
  position: absolute;
  top: 46px;
  right: 0;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 12px 40px rgba(27, 54, 93, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 6px;
  min-width: 200px;
  z-index: 100;
}

.md-board-detail-actions-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s ease;
  text-align: left;
  /* Items that render as <a> (LinkTo, e.g. "Public Boards") inherit
     Bootstrap's a:hover { text-decoration: underline } default. Kill
     it on the rest state to keep the menu reading consistent across
     <button> and <a> items. The :focus-visible override below
     restores a focus indicator for keyboard users. */
  text-decoration: none;
}

.md-board-detail-actions-menu__item:hover {
  /* Neutral glass overlay — no teal tint. Reads as a soft hover
     against either the light surface or the dark glass without
     introducing a brand-color accent. The text-decoration: none
     here overrides the default anchor underline on hover. */
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
  text-decoration: none;
}

/* Keyboard focus — keep an outline so non-mouse users can see
   which menu item is targeted. Lives on this scoped class so the
   page-wide focus-visible behavior (e.g. board buttons) is
   untouched. */
.md-board-detail-actions-menu__item:focus-visible {
  outline: 2px solid #1B365D;
  outline-offset: -2px;
  text-decoration: none;
}

.md-board-detail-actions-menu__item svg {
  flex-shrink: 0;
  color: #6B7280;
}

.md-board-detail-actions-menu__item:hover svg {
  /* Keep the icon in the slate-gray family on hover — slightly
     darker for the "wake up" affordance, but no teal. */
  color: #1B365D;
}

.md-board-detail-actions-menu__divider {
  height: 1px;
  background: rgba(27, 54, 93, 0.1);
  margin: 4px 10px;
}

.md-board-detail-actions-menu__section {
  padding: 6px 0;
  border-bottom: 2px solid rgba(27, 54, 93, 0.1);
}

.md-board-detail-actions-menu__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.md-board-detail-actions-menu__section:first-child {
  padding-top: 0;
}

.md-board-detail-actions-menu__section-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.45);
  padding: 4px 14px 2px;
}

/* Section-header button — used when a section becomes its own
   expandable (Board / Buttons / Display / Share & Print). Matches
   the Session toggle's typography (proper case, regular weight) so
   all expandable section headers read consistently. The parent
   `__item` styling supplies hover/keyboard affordances and the
   `__chevron` shows expand state. */
.md-board-detail-actions-menu__section-toggle {
  /* Inherit base `__item` typography (no uppercase / no tracking).
     Keep this rule in place as a marker class so future tweaks
     (e.g. weight shift on hover) have a single hook. */
}

.md-board-detail-actions-menu__submenu-wrap {
  position: relative;
}

.md-board-detail-actions-menu__item--has-sub {
  justify-content: flex-start;
}

.md-board-detail-actions-menu__chevron {
  margin-left: auto;
  opacity: 0.5;
  flex-shrink: 0;
}

.md-board-detail-actions-menu__submenu {
  padding: 4px 0 4px 0;
  /* Modern hairline rail — thinner, neutral, no brand accent. The
     teal previously drew the eye away from the menu item labels. */
  border-left: 1px solid rgba(27, 54, 93, 0.12);
  margin-left: 18px;
}

.md-board-detail-actions-menu__submenu .md-board-detail-actions-menu__item {
  font-size: 15px;
  padding: 8px 12px;
  min-height: 38px;
}

.md-board-detail--dark .md-board-detail-actions-menu__submenu {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-detail-actions-menu__section {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-actions-menu__section-label {
  color: rgba(255, 255, 255, 0.65);
}

.md-board-detail-actions-menu__hint {
  display: block;
  font-size: 15px;
  color: #9CA3AF;
  font-weight: 400;
  margin-top: -2px;
}

.md-board-detail-actions-menu__item--edit {
  background: #7693B9;
  color: #fff !important;
  border-radius: 10px;
}

.md-board-detail-actions-menu__item--edit svg {
  stroke: #fff;
}

.md-board-detail-actions-menu__item--edit:hover {
  background: rgb(101.1231884058, 133.6956521739, 176.3768115942);
  color: #fff !important;
}

.md-board-detail-actions-menu__item--edit:hover svg {
  /* Keep the icon white on hover to match the slate-blue-grey button —
     no teal accent (consistent with the rest of the menu's de-tealed
     hover treatment). */
  stroke: #fff;
}

.md-board-detail-actions-menu__item--exit {
  background: #46505F;
  color: #fff;
  border-radius: 10px;
  margin-top: 2px;
  justify-content: center;
}

.md-board-detail-actions-menu__item--exit:hover {
  background: #3a4350;
  color: #fff;
}

.md-board-detail-actions-menu__item--exit svg {
  color: #fff;
}

.md-board-detail-actions-menu__item--exit:hover svg {
  color: #fff;
}

/* ── Light/Dark Mode row inside the Display section ──────────────
   Reuses the `new-board-mockup-toggle` pill markup from the
   collapsed edit-mode left panel (board-detail.hbs:438-455). The
   whole row is the switch (role="switch" + aria-checked), so the
   pill carries `aria-hidden` and just visually tracks the state. */
.md-board-detail-actions-menu__item--theme {
  /* Reserve breathing room on the right edge so the pill doesn't
     hug the rounded corner of the menu surface. */
  padding-right: 12px;
}

.md-board-detail-actions-menu__theme-label {
  /* Fill the row, pushing the pill to the right edge via flex
     spacing (the parent row already has `display: flex; gap: 10px`). */
  flex: 1 1 auto;
}

.md-board-detail-actions-menu__theme-pill {
  /* The pill's own `display: inline-flex` already centers content,
     so we just need to keep it from stretching and let the hover
     state of the parent row tint through to the pill border. */
  flex-shrink: 0;
  margin-left: auto;
  /* Block the parent row's hover-color tint from washing the pill —
     the pill has its own background; we want it visually distinct. */
  background-clip: padding-box;
}

/* Subtle visual lift on hover: the pill border picks up the same
   navy accent the row uses. The pill's own hover rule (~line 46733)
   targets only direct hovers on the pill — when the user hovers the
   row, we forward that intent to the pill border for parity. */
.md-board-detail-actions-menu__item--theme:hover .md-board-detail-actions-menu__theme-pill:not(.new-board-mockup-toggle--dark) {
  border-color: rgba(27, 54, 93, 0.28);
}

.md-board-detail-actions-menu__item--theme:hover .md-board-detail-actions-menu__theme-pill.new-board-mockup-toggle--dark {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Dark-mode parity: the row's parent menu has its own dark-mode
   surface; the pill's `--dark` modifier already paints the pill
   correctly, so nothing extra needed here. The leading SVG inherits
   the row's `color`, which the existing menu-item dark rules handle. */
/* Short viewports (<=500px tall): condense the options dropdown so it fits the
   shorter screen and set all of its text to 12px. Reduces the per-item and
   section padding, gap, submenu inset, and submenu min-height; every text
   element (items incl. Edit + theme rows, section labels, submenu items, hints)
   drops to 12px. The --collection drawer below is a separate full-height side
   panel and is intentionally left at its own sizing. */
@media (max-height: 500px) {
  .md-board-detail-actions-menu {
    padding: 4px;
    min-width: 180px;
  }
  .md-board-detail-actions-menu__item {
    padding: 6px 10px;
    gap: 8px;
    font-size: 12px;
  }
  .md-board-detail-actions-menu__section {
    padding: 3px 0;
  }
  .md-board-detail-actions-menu__section-label {
    font-size: 12px;
    padding: 2px 10px 1px;
  }
  .md-board-detail-actions-menu__divider {
    margin: 2px 10px;
  }
  .md-board-detail-actions-menu__submenu {
    padding: 2px 0;
    margin-left: 14px;
  }
  .md-board-detail-actions-menu__submenu .md-board-detail-actions-menu__item {
    font-size: 12px;
    padding: 5px 10px;
    min-height: 0;
  }
  .md-board-detail-actions-menu__hint {
    font-size: 12px;
  }
}
/* ── My Board Collection (inline panel inside the options menu) ───
   When `board_collection_open` is true, the options menu adopts the
   `--collection` modifier: detaches from the trigger's anchor point
   and becomes a full-height side drawer pinned to the right edge of
   the viewport. Sharp right edge (flush with the viewport), rounded
   left edge for the floating-drawer feel that matches the rest of
   the modern design language. The shared `.md-board-detail-actions-backdrop`
   (z-index 99, full-viewport position: fixed) already sits beneath. */
.md-board-detail-actions-menu--collection {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-height: 100vh;
  width: 380px;
  max-width: calc(100vw - 24px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
}

.md-board-detail-actions-menu--collection .md-board-collection__header {
  /* Sticky header now sits flush against the viewport top — kill the
     top-right radius (we have a sharp right edge in drawer mode)
     while keeping the top-left radius to match the parent. */
  border-radius: 14px 0 0 0;
}

/* ── Pinned My Board Collection drawer (speak mode) ───────────────────
   Reuses the fixed right-side drawer (--collection, 380px) but PINS it open
   from the speak-mode options menu with NO modal backdrop, so the board grid
   stays interactive. Push the layout left by the drawer width so the whole
   grid remains visible (no overlay) while the user browses board-to-board. */
.md-shell--board-collection.md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-layout {
  padding-right: 388px; /* drawer width (380) + 8px gap */
}

.md-board-collection {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow inner body to actually scroll inside the flex parent */
  width: 100%;
  position: relative; /* anchor for the in-place loading overlay */
}

/* In-place loading overlay (set by select_board). Fills the panel, dims +
   blurs the list beneath, and centres the reused premium-progress card so the
   wait matches the boards-page loading chrome. */
.md-board-collection__loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  animation: ll-premium-progress-fade-in 200ms ease-out;
}

.md-board-collection__loading-card {
  /* Tighter than the full-screen variant so it sits comfortably inside the
     narrower options-menu panel. */
  width: 100%;
  max-width: 320px;
  padding: 26px 28px 24px;
  border-radius: 22px;
}

.md-board-collection__header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 8px;
  background: #fff;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px 14px 0 0;
  z-index: 1;
}

.md-board-collection__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 10px 6px 6px;
  border: none;
  background: rgba(27, 54, 93, 0.04);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-board-collection__back:hover {
  background: rgba(27, 54, 93, 0.1);
}

.md-board-collection__back:focus-visible {
  outline: 2px solid #1B365D;
  outline-offset: 2px;
}

.md-board-collection__back svg {
  flex-shrink: 0;
  color: #6B7280;
}

.md-board-collection__title {
  font-size: 17px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.01em;
  padding: 2px 4px 0;
}

/* In-panel search filter — sits inside the sticky header. Soft
   pill (border-radius: 999px) with subtle border, magnifier on the
   left, optional clear (×) on the right when the user has typed.
   Brand-teal focus ring ties it to the rest of the panel's accent
   language (collection card top stroke, Show more pill). The
   active modifier (added when the input has a value) sustains the
   teal ring so users see "search is on" at a glance. */
.md-board-collection__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 0;
  padding: 6px 10px;
  border: 1px solid rgba(17, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.md-board-collection__search:hover {
  border-color: rgba(17, 26, 46, 0.18);
}

.md-board-collection__search:focus-within,
.md-board-collection__search--active {
  border-color: rgba(20, 127, 130, 0.5);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.1);
}

.md-board-collection__search-icon {
  flex-shrink: 0;
  color: rgba(17, 26, 46, 0.55);
  transition: color 0.15s ease;
}

.md-board-collection__search:focus-within .md-board-collection__search-icon,
.md-board-collection__search--active .md-board-collection__search-icon {
  color: #147F82;
}

.md-board-collection__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  outline: none;
}

.md-board-collection__search-input::placeholder {
  color: rgba(17, 26, 46, 0.42);
  font-weight: 400;
}

.md-board-collection__search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(17, 26, 46, 0.06);
  border-radius: 999px;
  color: rgba(17, 26, 46, 0.65);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-board-collection__search-clear:hover {
  background: rgba(17, 26, 46, 0.12);
  color: #111A2E;
}

.md-board-collection__search-clear:focus-visible {
  outline: 2px solid #147F82;
  outline-offset: 2px;
}

/* Dark-mode parity: glassier surface, teal accents remain. */
.md-board-detail--dark .md-board-collection__search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.md-board-detail--dark .md-board-collection__search:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.md-board-detail--dark .md-board-collection__search:focus-within,
.md-board-detail--dark .md-board-collection__search--active {
  border-color: rgba(80, 217, 209, 0.55);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(80, 217, 209, 0.14);
}

.md-board-detail--dark .md-board-collection__search-icon {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-board-collection__search:focus-within .md-board-collection__search-icon,
.md-board-detail--dark .md-board-collection__search--active .md-board-collection__search-icon {
  color: rgb(115, 232, 224);
}

.md-board-detail--dark .md-board-collection__search-input {
  color: #fff;
}

.md-board-detail--dark .md-board-collection__search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.md-board-detail--dark .md-board-collection__search-clear {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.md-board-detail--dark .md-board-collection__search-clear:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.md-board-collection__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px 14px;
  /* Subtle navy wash behind the floating cards so each glassy section
     reads as elevated above the panel surface. Two-stop gradient is
     just enough contrast for the box-shadows to register without
     tinting the drawer to a noticeably different color. */
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.018), rgba(27, 54, 93, 0.03));
}

/* Each section is now a glassy card — same elevation language as the
   boards-page stat cards (white surface, teal accent stroke at the
   top, layered shadow, 12px radius). The gradient divider that
   previously separated sections is gone: floating cards with shadows
   carry the separation themselves. */
.md-board-collection__section {
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-top: 3px solid rgba(20, 127, 130, 0.32);
  border-radius: 12px;
  padding: 12px 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04);
  transition: box-shadow 0.18s ease, border-top-color 0.18s ease;
}

.md-board-collection__section:hover {
  /* Brighter teal stroke on hover — mirrors the boards-page stat-card
     hover language so the cards feel alive when scanned. */
  border-top-color: rgba(20, 127, 130, 0.5);
}

.md-board-collection__section:last-child {
  margin-bottom: 0;
}

/* ── "Edit Sidebar" button + panel ──────────────────────────────────────────
   The button is a compact version of the boards-page "Create New Board" pill
   (home-board-pill mixin), pinned to the top-right of the inline sidebar. The
   panel reuses the shared pinned-drawer chrome (md-board-detail-actions-menu--
   collection-pinned) and styles its rows like the My Board Collection list. */
.md-board-detail-inline-sidebar__edit-row {
  display: flex;
  justify-content: center;
  padding: 8px 2px 4px;
  /* Don't compress in the scrolling flex column — stays full height and scrolls. */
  flex-shrink: 0;
  /* Push to the bottom of the sidebar via flex auto-margin (not absolute
     positioning): absorbs free space when items are few; harmless when they
     overflow (no free space → sits at the end and scrolls). */
  margin-top: auto;
}

.md-board-detail-inline-sidebar__edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.12), rgba(91, 141, 239, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(27, 54, 93, 0.12), 0 6px 14px rgba(27, 54, 93, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-board-detail-inline-sidebar__edit-btn:hover, .md-board-detail-inline-sidebar__edit-btn:focus-visible {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.18), rgba(91, 141, 239, 0.15));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 4px rgba(27, 54, 93, 0.14), 0 10px 22px rgba(27, 54, 93, 0.28);
}
.md-board-detail-inline-sidebar__edit-btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  max-width: 100%;
}

.md-board-detail-inline-sidebar__edit-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #1A7B7A;
}

/* Dark mode: the pill's default navy label is unreadable on the dark sidebar,
   so lift the Edit text to a light tone (the teal icon keeps its own accent). */
.md-board-detail--dark .md-board-detail-inline-sidebar__edit-btn,
.md-board-detail--dark .md-board-detail-inline-sidebar__edit-label {
  color: rgba(255, 255, 255, 0.92);
}

/* On narrow screens (<=1024px) the sidebar is tight — collapse the Edit button to
   ICON ONLY: hide the "Edit" label and let the pill shrink to the icon. The
   button keeps its aria-label="Edit Sidebar", so its accessible name is intact. */
@media (max-width: 1024px) {
  .md-board-detail-inline-sidebar__edit-label {
    display: none;
  }
}
/* The editor reuses the My Board Collection chrome (header/search/section-cards/
   list/icon/name/grid-pill) via the md-board-collection__* classes; only the row
   LAYOUT and the per-row remove/add controls are bespoke. The row is a flex
   container (display block on the left, action button on the right) rather than the
   single clickable button board-collection uses. */
.md-sidebar-editor__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 8px;
}

.md-sidebar-editor__row:hover {
  background: rgba(27, 54, 93, 0.05);
}

/* Edit Sidebar panel only: trim the "On your sidebar" section's left/right padding
   by 4px so the wider glass row cards get a touch more room (My Board Collection's
   sections are unaffected — this modifier is editor-scoped). */
.md-sidebar-editor__section--current {
  padding-left: 10px;
  padding-right: 10px;
}

/* Each "On your sidebar" item is wrapped in its own glass container (translucent
   gradient, light rim, inset sheen + soft drop) so the reorderable items read as
   distinct cards. Scoped to this section (not Your Boards / brand lists). */
.md-sidebar-editor__row--current {
  /* Taller cards so each sidebar item reads as a substantial, tappable row. */
  padding: 10px 14px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 14px;
  /* Glossier glass: a bright top sheen layer over a brighter translucent body,
     a brighter top rim + deeper drop shadow, and a subtle blur of whatever sits
     behind the panel — so the sidebar items clearly read as distinct glass cards. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(233, 239, 248, 0.76) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 16px rgba(27, 54, 93, 0.03), 0 5px 14px rgba(27, 54, 93, 0.14);
  /* 4px gap between the glass cards (rows are plain <li> blocks — this bottom
     margin is the only spacing). */
  margin-bottom: 4px;
}

.md-sidebar-editor__row--current:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, rgb(255, 255, 255) 0%, rgba(233, 239, 248, 0.86) 100%);
  border-color: rgba(27, 54, 93, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 7px 18px rgba(27, 54, 93, 0.18);
}

.md-board-detail--dark .md-sidebar-editor__row--current {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 14px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-sidebar-editor__row--current:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.11) 100%);
  border-color: rgba(255, 255, 255, 0.26);
}

/* Reorder instruction below the search box. */
.md-sidebar-editor__hint {
  margin: 8px 4px 0;
  font-size: 12px;
  line-height: 1.35;
  color: #5A6A85;
}

.md-board-detail--dark .md-sidebar-editor__hint {
  color: rgba(240, 244, 250, 0.72);
}

/* Dark mode: the add-list board names in the Edit Sidebar panel inherit a dark
   tone — the My Boards overlay lights them via .md-board-collection__item, but
   these rows wrap the name in .md-sidebar-editor__display instead, so it never
   picks that up. Lift the names (and any plain display text) to light here. */
.md-board-detail--dark .md-sidebar-editor__display,
.md-board-detail--dark .md-sidebar-editor__row .md-board-collection__item-name {
  color: rgba(255, 255, 255, 0.92);
}

/* Drag handle (grip) — the draggable affordance for reordering. */
.md-sidebar-editor__grip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  cursor: grab;
  padding: 2px;
  touch-action: none;
}

.md-sidebar-editor__grip:active {
  cursor: grabbing;
}

.md-board-detail--dark .md-sidebar-editor__grip {
  color: rgba(240, 244, 250, 0.5);
}

/* Drag states — the lifted row fades to a ghost; the hovered drop target gets a
   dashed teal insertion outline. */
.md-sidebar-editor__row--dragging {
  opacity: 0.45;
}

.md-sidebar-editor__row--drop-target {
  background: rgba(42, 157, 143, 0.12);
  outline: 2px dashed rgba(42, 157, 143, 0.55);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Up/down reorder buttons — compact stacked control (keyboard + touch path). */
.md-sidebar-editor__reorder {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.md-sidebar-editor__reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 6px;
  background: #fff;
  color: #5A6A85;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-sidebar-editor__reorder-btn:hover:not([disabled]) {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.35);
  color: #1A7B7A;
}

.md-sidebar-editor__reorder-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.md-board-detail--dark .md-sidebar-editor__reorder-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #dbe4f0;
  border-color: rgba(255, 255, 255, 0.16);
}

/* The drag handle is mouse-only — hide it on touch / coarse-pointer devices, where
   the up/down buttons are the reorder path. */
@media (hover: none) and (pointer: coarse) {
  .md-sidebar-editor__grip {
    display: none;
  }
}
/* Fill the fixed-height drawer (the host is a 100vh flex column) so the body —
   and therefore the loading wash below — spans the WHOLE panel instead of
   collapsing to the short loading message's height (which left white space
   beneath the darkened band). */
.md-board-detail-actions-menu--sidebar-editor .md-sidebar-editor {
  flex: 1 1 auto;
  min-height: 0;
}

/* While the sections load: slightly darken the body and pulse the centered
   message, so the wait reads as "working" until the content reveals. */
.md-sidebar-editor__body--loading {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.06) 0%, rgba(27, 54, 93, 0.1) 100%);
}

.md-board-detail--dark .md-sidebar-editor__body--loading {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.26) 100%);
}

.md-sidebar-editor__loading-all {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 12px;
  text-align: center;
  font-size: 14px;
  animation: ll-loading-pulse 1.4s ease-in-out infinite;
}

/* Shared loading pulse — used by both the sidebar editor and the My Board
   Collection panel's "Loading boards…" messages. */
@keyframes ll-loading-pulse {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-sidebar-editor__loading-all,
  .md-board-collection__loading {
    animation: none;
    opacity: 1;
  }
}
.md-sidebar-editor__display {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.md-sidebar-editor__action {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: #fff;
  color: #5A6A85;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.12);
  /* Frosted backdrop shared by both controls so each reads like polished glass
     (mirrors the .beta-welcome-steps__num discs). The --remove / --add rules layer
     the specular sheen + tinted gradient + glassy rim on top. */
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-sidebar-editor__action:active {
  transform: translateY(1px);
}

/* Remove (×): round, neutral glass disc — a specular sheen over a faint slate tint
   with a crisp light rim (distinct in shape + hue from the + button). */
.md-sidebar-editor__action--remove {
  border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(27, 54, 93, 0.2) 0%, rgba(27, 54, 93, 0.12) 100%);
  color: #1B365D;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(27, 54, 93, 0.12);
}

.md-sidebar-editor__action--remove:hover {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(220, 53, 69, 0.28) 0%, rgba(220, 53, 69, 0.18) 100%);
  color: #c0392b;
}

/* Add (+): glossy glass disc using the SAME denim→verdigris gradient + specular
   sheen + layered shadows as the .beta-welcome-steps__num numbering badges. */
.md-sidebar-editor__action--add {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  color: #1A7B7A;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(76, 134, 216, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 8px rgba(42, 157, 143, 0.16);
}

.md-sidebar-editor__action--add:hover {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.44) 0%, rgba(42, 157, 143, 0.4) 100%);
  box-shadow: 0 8px 20px rgba(76, 134, 216, 0.26), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -4px 8px rgba(42, 157, 143, 0.2);
}

/* Visibility toggle (eye) for Alert — round neutral glass like the remove control,
   but NOT destructive (no red hover) since it only hides/shows. */
.md-sidebar-editor__action--toggle {
  border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(27, 54, 93, 0.2) 0%, rgba(27, 54, 93, 0.12) 100%);
  color: #1B365D;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(27, 54, 93, 0.12);
}

.md-sidebar-editor__action--toggle:hover {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(27, 54, 93, 0.28) 0%, rgba(27, 54, 93, 0.18) 100%);
}

/* Hidden state — muted glyph; the row's image/name also dims (below). */
.md-sidebar-editor__action--off {
  color: #5A6A85;
}

.md-sidebar-editor__row--hidden .md-sidebar-editor__display {
  opacity: 0.5;
}

.md-board-detail--dark .md-sidebar-editor__action--toggle {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: #f0f4fa;
  border-color: rgba(255, 255, 255, 0.45);
}

/* "Always on" status pill for Crisis Vocabulary — it can't be removed, so it shows
   this (non-interactive) lock pill instead of a control. */
.md-sidebar-editor__locked-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.07);
  border: 1px solid rgba(27, 54, 93, 0.14);
  color: #5A6A85;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.md-sidebar-editor__locked-pill svg {
  opacity: 0.8;
}

.md-board-detail--dark .md-sidebar-editor__locked-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(240, 244, 250, 0.78);
}

.md-sidebar-editor__action[disabled] {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.md-sidebar-editor__confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.md-sidebar-editor__confirm-q {
  font-size: 12px;
  color: #5A6A85;
}

.md-sidebar-editor__confirm-btn {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.md-sidebar-editor__confirm-btn--danger {
  color: #c0392b;
  border-color: rgba(220, 53, 69, 0.4);
}

.md-sidebar-editor__confirm-btn--primary {
  color: #1A7B7A;
  border-color: rgba(44, 183, 176, 0.4);
}

/* Dark speak shell overrides for the editor's OWN controls (the reused
   md-board-collection__* chrome already carries its own dark overrides). */
.md-board-detail--dark .md-sidebar-editor__confirm-q {
  color: rgba(240, 244, 250, 0.72);
}

.md-board-detail--dark .md-sidebar-editor__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.md-board-detail--dark .md-sidebar-editor__action,
.md-board-detail--dark .md-sidebar-editor__confirm-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #dbe4f0;
  border-color: rgba(255, 255, 255, 0.16);
}

/* Keep the glassy treatment on the dark shell — a brighter specular sheen + a
   white-leaning rim so the discs still read as polished glass over dark. */
.md-board-detail--dark .md-sidebar-editor__action--remove {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: #f0f4fa;
  border-color: rgba(255, 255, 255, 0.45);
}

.md-board-detail--dark .md-sidebar-editor__action--add {
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.52) 0%, rgba(42, 157, 143, 0.46) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.md-board-collection__section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6A85;
  border-bottom: 1px solid rgba(17, 26, 46, 0.07);
}

/* "GRID SIZE" column header — sits on the right of each section header,
   over the per-row grid-size pills. Inherits the section label's small-caps
   styling/color (incl. the dark-mode override); reduced opacity + lighter
   weight mark it as a subordinate column header, not a second title. */
.md-board-collection__grid-size-label {
  flex-shrink: 0;
  font-weight: 600;
  opacity: 0.7;
}

.md-board-collection__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Zero browser <li> defaults for collection rows — but NOT the glass "On your
   sidebar" cards (.md-sidebar-editor__row--current), which set their own
   padding/margin and must not be clobbered by this later, equal-specificity
   reset (it was zeroing the card padding/height and the row gap). */
.md-board-collection__row:not(.md-sidebar-editor__row--current) {
  margin: 0;
  padding: 0;
}

.md-board-collection__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-board-collection__item:hover {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
}

.md-board-collection__item:focus-visible {
  outline: 2px solid #1B365D;
  outline-offset: -2px;
}

.md-board-collection__item-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(27, 54, 93, 0.06);
}

.md-board-collection__item-name {
  flex: 1 1 auto;
  min-width: 0; /* allow ellipsis to actually clip inside the flex row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-board-collection__item-lang {
  flex-shrink: 0;
  margin-left: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.65);
}

/* Home-board indicator. Mirrors the Glyphicon-home pattern from
   `app/components/board-icon.hbs` so the user's home board
   reads consistently across surfaces. Sits between the name and the
   total-buttons pill, with a brand-teal tint so the eye lands on it
   first when scanning the My Boards list (home is always first row,
   so the indicator + position together announce "this is home"). */
.md-board-collection__item-home {
  flex-shrink: 0;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(44, 183, 176, 0.14); /* matches the teal accent on the boards-page grid icon */
  color: rgb(44, 183, 176);
  font-size: 11px;
}

.md-board-collection__item-home .glyphicon {
  top: 0; /* glyphicon ships with `top: 1px` from Bootstrap — neutralize inside the chip so it centers cleanly */
}

.md-board-collection__item--home .md-board-collection__item-name {
  /* Slight emphasis on the home-board row's name so the row reads
     as anchored / primary even before the eye reaches the indicator
     chip. Keeps the same font size — only the weight bumps. */
  font-weight: 700;
}

.md-board-detail--dark .md-board-collection__item-home {
  background: rgba(80, 217, 209, 0.18);
  color: rgb(115, 232, 224);
}

/* Language label is navy at 65% on light surfaces (above) — invisible on the
   dark options-menu panel. Lighten it to a muted slate so it reads as a
   secondary detail without competing with the board name. */
.md-board-detail--dark .md-board-collection__item-lang {
  color: rgba(226, 232, 240, 0.7);
}

/* Side-information pill — total button count for the board. Sits
   flush right inside the row, tabular numerals so values like "9" /
   "112" line up neatly down the list, and a soft navy tint that
   keeps the row reading as one unit (no competing brand color). */
.md-board-collection__item-count {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.72);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.md-board-collection__item:hover .md-board-collection__item-count {
  /* On hover the row tints navy; bump the pill background so it
     stays legible against the hover state. */
  background: rgba(27, 54, 93, 0.14);
  color: #1B365D;
}

/* "Show N more boards" / "Show fewer" expansion control at the foot
   of the My Boards card. Pill-shaped, brand-teal accent so it reads
   as an intentional next step rather than a drab gray strip — same
   teal that anchors the section card's top border, so the affordance
   stays in family with the card it sits inside. Subtle border + tint
   at rest, brightens on hover. The chevron flips when the section is
   expanded so the affordance reads both directions. */
.md-board-collection__more {
  /* fit-content + margin: auto centers the pill inside the section
     card without needing a wrapper element. The button collapses to
     content width so the pill stays compact regardless of label
     length ("Show 3 more boards" vs. "Show fewer"). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 4px auto 0;
  padding: 6px 14px 6px 16px;
  border: 1px solid rgba(20, 127, 130, 0.22);
  background: rgba(20, 127, 130, 0.06);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #147F82;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.md-board-collection__more:hover {
  background: rgba(20, 127, 130, 0.14);
  border-color: rgba(20, 127, 130, 0.44);
  transform: translateY(-1px);
}

.md-board-collection__more:active {
  transform: translateY(0);
}

.md-board-collection__more:focus-visible {
  outline: 2px solid #147F82;
  outline-offset: 2px;
}

.md-board-collection__more-label {
  /* Keep the label tight against the chevron so the pill reads as
     a single affordance rather than two stacked elements. */
  white-space: nowrap;
}

.md-board-collection__more-chevron {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.18s ease;
}

.md-board-collection__more-chevron--open {
  transform: rotate(180deg);
}

/* Dark-mode parity — brighter teal token so the pill stays legible
   against the dark glass section card. */
.md-board-detail--dark .md-board-collection__more {
  background: rgba(80, 217, 209, 0.1);
  border-color: rgba(80, 217, 209, 0.28);
  color: rgb(115, 232, 224);
}

.md-board-detail--dark .md-board-collection__more:hover {
  background: rgba(80, 217, 209, 0.18);
  border-color: rgba(80, 217, 209, 0.55);
  color: rgb(160, 240, 234);
}

.md-board-collection__loading,
.md-board-collection__empty,
.md-board-collection__error {
  margin: 4px 10px;
  font-size: 13px;
  color: #9CA3AF;
  font-style: italic;
}

/* Pulse the in-flight "Loading boards…" message (matches the sidebar editor). */
.md-board-collection__loading {
  animation: ll-loading-pulse 1.4s ease-in-out infinite;
}

.md-board-collection__error {
  color: #b94a48;
  font-style: normal;
}

/* Dark-mode parity — surfaces use the same dark glass as the rest of
   the options menu in dark mode. Section dividers and section labels
   shift to lighter alphas; row hover stays neutral (no teal accent)
   to match the other items. */
.md-board-detail--dark .md-board-detail-actions-menu--collection {
  /* Inherit the dark surface from `.md-board-detail--dark .md-board-detail-actions-menu`
     elsewhere in this file — only header background + dividers need
     overrides because they live on `.md-board-collection__*`. */
}

.md-board-detail--dark .md-board-collection__header {
  background: rgba(20, 28, 40, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-collection__back {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.md-board-detail--dark .md-board-collection__back:hover {
  background: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-collection__back svg {
  color: rgba(255, 255, 255, 0.75);
}

.md-board-detail--dark .md-board-collection__title {
  color: #fff;
}

/* Dark-mode glassy card: translucent white surface (so the panel
   gradient subtly shows through), brighter teal top stroke for
   legibility, deeper shadow to keep the card lifted off the dark
   glass underneath. Mirrors the boards-page card language. */
.md-board-detail--dark .md-board-collection__body {
  /* Slightly stronger wash than light mode so the floating cards
     register against the dark panel surface. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04));
}

.md-board-detail--dark .md-board-collection__section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(20, 127, 130, 0.62);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.md-board-detail--dark .md-board-collection__section:hover {
  border-top-color: rgba(80, 217, 209, 0.82);
}

.md-board-detail--dark .md-board-collection__section-label {
  color: rgba(255, 255, 255, 0.68);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-collection__item {
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-collection__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.md-board-detail--dark .md-board-collection__item-icon {
  /* Strong white pad behind small drawer-row icons in dark mode.
     ARASAAC / OpenSymbols PNGs are typically dark line art on
     transparent — a subtle tint (we used 0.06 earlier) is not
     enough to lift them; this matches the header-icon pattern
     (`rgba(255,255,255,0.92)` at app.scss:60335) which solves the
     same problem for the larger board header tile. */
  background: rgba(255, 255, 255, 0.88);
}

.md-board-detail--dark .md-board-collection__item-count {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
}

.md-board-detail--dark .md-board-collection__item:hover .md-board-collection__item-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.md-board-detail--dark .md-board-collection__loading,
.md-board-detail--dark .md-board-collection__empty {
  color: rgba(255, 255, 255, 0.55);
}

/* Exit button (above options dropdown, right of sentence bar) */
.md-board-detail-exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(27, 54, 93, 0.05);
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-board-detail-exit-btn:hover {
  background: rgba(27, 54, 93, 0.1);
  color: #374151;
}

/* Options dropdown (right of sentence bar) */
.md-board-detail-options-dropdown {
  position: relative;
  flex-shrink: 0;
}

.md-board-detail-options-btn {
  width: 32px;
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: rgba(255, 255, 255, 0.85);
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-detail-options-btn:hover {
  background: #fff;
  color: #374151;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.12);
}

.md-board-detail-options-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.15);
  padding: 4px;
  z-index: 100;
  min-width: 180px;
}

.md-board-detail-options-menu__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.md-board-detail-options-menu__item:hover {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

/* Word suggestions bar */
.md-board-detail-suggestions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  overflow-x: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.md-board-detail-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #1B365D;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.md-board-detail-suggestion:hover {
  background: rgba(42, 157, 143, 0.06);
  border-color: rgba(42, 157, 143, 0.2);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08);
  transform: translateY(-1px);
}

.md-board-detail-suggestion:active {
  transform: scale(0.97);
}

.md-board-detail-suggestion__img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

.md-board-detail-suggestion__text {
  white-space: nowrap;
}

.md-board-detail-suggestion__loading {
  font-size: 15px;
  color: #6B7280;
  font-style: italic;
}

/* Loading indicator */
.md-board-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 14px;
  min-height: 200px;
}

/* Full-area saving state: used when board_saving is true on the edit page,
   so the header + toolbar stay put but the grid area is replaced by a
   centered spinner + "Saving Changes..." until the route transitions. */
.md-board-detail-loading--saving {
  min-height: 320px;
  padding: 64px 24px;
  font-size: 19px;
}

.md-board-detail-loading--saving .md-board-detail-loading__spinner {
  width: 52px;
  height: 52px;
  border-width: 4px;
}

.md-board-detail-loading--saving .md-board-detail-loading__text {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.md-board-detail-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(27, 54, 93, 0.1);
  border-top-color: #2A9D8F;
  border-radius: 50%;
  animation: md-board-detail-spin 0.7s linear infinite;
}

@keyframes md-board-detail-spin {
  to {
    transform: rotate(360deg);
  }
}
.md-board-detail-loading__text {
  font-size: 16px;
  font-weight: 500;
  color: #6B7280;
}

.md-board-detail-loading--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  min-height: 0;
  padding-bottom: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-board-detail-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(27, 54, 93, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

.md-board-detail-loading__card .md-board-detail-loading__text {
  max-width: 280px;
  text-align: center;
  line-height: 1.4;
}

.md-board-detail-loading__cancel {
  margin-top: 4px;
  /* WCAG 2.5.5 AAA touch target — was 8×24 (~16 tall, FAIL). */
  padding: 12px 24px;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  /* WCAG AA fix — gradient previously used $brand-blue-grey (lightest stop
     3.16:1 with white text); same fix as .md-download-card__btn. */
  background: linear-gradient(135deg, #1B365D, #374151);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.25);
}

.md-board-detail-loading__cancel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(70, 80, 95, 0.35);
}

.md-board-detail-grid--hidden {
  display: none !important;
}

/* Full-grid "Saving Changes..." overlay shown while the board-detail save
   request is in flight. The grid itself is hidden via --hidden above; this
   takes its place with a centered spinner + label until the save promise
   resolves and the route transitions back to the non-edit view. */
.md-board-detail-saving-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 0;
  min-height: 240px;
  width: 100%;
  padding: 48px 24px;
  border-radius: 16px;
  background: rgba(27, 54, 93, 0.04);
  color: #374151;
  font-size: 19px;
  font-weight: 600;
}

.md-board-detail--dark .md-board-detail-saving-overlay {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail-saving-overlay__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(42, 157, 143, 0.25);
  border-top-color: #2A9D8F;
  animation: md-board-detail-saving-spin 0.9s linear infinite;
}

.md-board-detail-saving-overlay__label {
  letter-spacing: 0.01em;
}

.md-board-detail-edit-toolbar__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.9;
  animation: md-board-detail-saving-spin 0.9s linear infinite;
}

.md-board-detail-edit-toolbar__btn--saving {
  opacity: 0.85;
  cursor: progress;
}

@keyframes md-board-detail-saving-spin {
  to {
    transform: rotate(360deg);
  }
}
.md-board-detail-divider {
  border-top: 1px solid rgba(27, 54, 93, 0.1);
  margin: 0 0 12px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.md-board-detail-collapse-btn {
  position: absolute;
  right: 0;
  top: -12px;
  width: 28px;
  height: 24px;
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-top: none;
  background: rgba(255, 255, 255, 0.8);
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.md-board-detail-collapse-btn:hover {
  color: #2A9D8F;
  background: #fff;
}

/* Board collapsed state — hide header, toolbar, quick phrases, categories */
.md-shell--board-collapsed .md-board-detail-header {
  display: none;
}

.md-shell--board-collapsed .md-board-detail-toolbar {
  display: none;
}

.md-shell--board-detail-edit .md-board-detail-divider {
  display: none;
}

.md-shell--board-collapsed .md-board-detail-divider {
  display: none;
}

.md-shell--board-collapsed .md-board-detail-edit-toolbar {
  display: none;
}

/* Don't show collapse in edit mode */
.md-shell--board-detail-edit .md-board-detail-collapse-btn {
  display: none;
}

/* button-listener wrapper — must fill available space for grid to stretch */
.md-board-detail-main > .ember-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

/* Symbol grid — dimensions driven by --board-columns / --board-rows custom properties.
   Gap driven by --bd-button-gap (set on the grid from the user's button_spacing preference);
   !important because multiple @media overrides further down hard-code a fixed gap and would
   otherwise clobber the live preview at narrower viewports. */
.md-board-detail-grid {
  --board-columns: 4; /* default fallback */
  --board-rows: 3; /* default fallback */
  display: grid;
  grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr));
  gap: var(--bd-button-gap, 8px) !important;
  /* Smooth the grid-gap transition when the user adjusts the Grid
     Gap stepper in the create-board-new / board-detail Edit Tools
     rail. Without this, each +/- click snaps the layout abruptly,
     reading as "jumpy" preview behavior; a 180ms ease eases the
     value change so the buttons glide to their new spacing. Scoped
     to `gap` only so other property changes (row/column resize,
     etc.) aren't accidentally animated. */
  transition: gap 0.18s ease;
  margin-bottom: 0;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  /* Small top inset so the first button row isn't flush against the
     grid's top edge. (Global border-box: this reduces the row area
     rather than growing the grid, so it doesn't add overflow.) */
  padding-top: 4px;
  /* See .md-board-detail-layout — 100dvh prevents bottom-row clipping on
     Android Chrome/Edge where 100vh extends past the actual visible viewport. */
  height: calc(100dvh - 120px);
}

/* Narrow screens (<=768px): override the user's grid-gap preference
   (--bd-button-gap) with a tight, fixed gap so the board fits more comfortably —
   8px for most folder styles, but a tighter 2px when the folder style is
   "colored corner" (the corner indicator reads better with the buttons close).
   The prediction rail measures the board's computed gap
   (_sync_prediction_tile_size), so it tightens to match and stays lined up.
   `!important` is required to beat the base `gap: var(--bd-button-gap) !important`
   above. */
@media (max-width: 768px) {
  .md-board-detail-grid:not(.md-board-detail-grid--folder-colored-corner) {
    gap: 8px !important;
  }
  .md-board-detail-grid.md-board-detail-grid--folder-colored-corner {
    gap: 2px !important;
  }
}
/* Edit page: the grid's fixed `calc(100dvh - 120px)` makes the
   content taller than <main>'s padded box, so the last button row
   overflows into the (rounded + 28px-padded) bottom. Shrink the grid
   in edit by ~60px more so it ends above that region. High specificity
   + !important so it cannot be lost to the stylesheet's duplicated
   base `.md-board-detail-grid` rules. Edit mode only — speak/other
   views keep calc(100dvh - 120px). */
.md-shell--board-detail-edit .md-board-detail-grid-sidebar-wrap .md-board-detail-grid {
  height: calc(100dvh - 180px) !important;
}

/* Short-VIEWPORT-HEIGHT handling for the board grid lives in the square-collapse
   block below (the `@media (max-width: 1024px), (max-height: …)` rule): it makes
   the buttons square, collapses the grid to the squares' natural height (so there
   are NO inter-row gaps), and lets <main> scroll. We deliberately do NOT floor the
   grid height here — an earlier attempt did and it forced the 1fr rows taller than
   the square cards, opening exactly the inter-row gaps we want to avoid. */
/* Inflections / raw_events: grid uses legacy `.board` + `.button` hooks; cancel global `.board` rules */
#within_ember.board-detail-view .md-board-detail-grid.board {
  margin: 0;
  width: 100%;
  margin-left: 0;
}

#within_ember.board-detail-view .md-board-detail-grid.board .button.md-board-detail-symbol-card {
  margin: 0;
}

/* Focus words (board-detail): non-focus cells get `dim_button` from board-detail controller */
#within_ember.board-detail-view .md-board-detail-grid.board .button.md-board-detail-symbol-card.dim_button {
  opacity: 0.38;
  filter: saturate(38%) brightness(0.9);
}

#within_ember.board-detail-view.mid_dim .md-board-detail-grid.board .button.md-board-detail-symbol-card.dim_button {
  opacity: 0.3;
  filter: saturate(32%) brightness(0.85);
}

#within_ember.board-detail-view.extra_dim .md-board-detail-grid.board .button.md-board-detail-symbol-card.dim_button {
  opacity: 0.2;
  filter: saturate(26%) brightness(0.78);
}

/* Focus words: matched cells — outline + glow (paired with dim_button on non-matches).
   Cards set inline outline-color from border_color; use !important so the focus ring stays visible. */
#within_ember.board-detail-view .md-board-detail-grid.board .button.md-board-detail-symbol-card.focus_word_button {
  opacity: 1 !important;
  filter: saturate(100%) brightness(1) !important;
  outline: 3px solid var(--md-teal, #2A9D8F) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(44, 183, 176, 0.28), 0 4px 16px rgba(27, 54, 93, 0.14) !important;
  z-index: 2;
}

/* Layer 3: Controls — elevated cards matching header icon style */
/* Button shape preview — drives the symbol card's aspect ratio so the Square /
   Tall / Wide stretch picker in the settings toolbar changes the rendered
   button shape live on the grid. Uses explicit width/height percentages of
   the grid cell so the card can never overflow its row/column track:
   - square: fills the cell
   - tall:   full cell height, narrower column (2/3 width) — portrait card
   - wide:   full cell width, shorter row (2/3 height) — landscape card */
/* Cell-centering applies only to the tall/wide shapes — those need
   the fractional-size card centered within the cell. The square
   shape is "fit cell": no centering, let the card stretch. */
.md-board-detail-grid.md-board-detail-grid--shape-tall .md-board-detail-grid__cell,
.md-board-detail-grid.md-board-detail-grid--shape-wide .md-board-detail-grid__cell {
  justify-content: center;
  align-items: center;
}

.md-board-detail-grid.md-board-detail-grid--shape-tall .md-board-detail-symbol-card,
.md-board-detail-grid.md-board-detail-grid--shape-wide .md-board-detail-symbol-card {
  flex: 0 0 auto;
}

/* Shape-square = "Fit cell": the card should fill the entire grid
   cell, both width and height. Earlier this used `height: 100%`,
   but that's a percentage on a flex item whose parent (the cell)
   doesn't always resolve to a definite height in this flex-grid
   layout — the percentage then collapses and the card renders short
   like the wide variant. Using `flex: 1 1 0; align-self: stretch`
   makes the card grow to fill the cell along both axes, which is
   what "fit cell" means semantically. Overrides the `flex: 0 0 auto`
   above for the square case only; tall and wide still need the
   fixed flex: 0 0 auto so their fractional widths/heights sit
   centered without growing. */
/* Shape-square = "Fit cell" → SQUARE cells. The card is sized to the column
   width (aspect-ratio 1 + width:100%); the grid rule below is height:auto +
   flex:0 0 auto so its rows resolve to those square cards. Net: every cell is a
   square the card fills edge-to-edge, so the ONLY spacing is the symmetric grid
   gap — equal horizontally AND vertically. (Previously this filled the 1fr rows
   of a FIXED-height grid; on a wider-than-tall cell the square card then left
   horizontal centering slack that read as a bigger horizontal gap than the
   vertical one.) Tradeoff: with few rows the grid no longer stretches to fill
   the viewport height — empty space sits below, and <main> scrolls when the
   squares exceed the viewport. */
@media (max-width: 1024px), (max-height: 700px) {
  .md-board-detail-grid.md-board-detail-grid--shape-square .md-board-detail-symbol-card {
    flex: 0 0 auto !important;
    aspect-ratio: 1/1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}
.md-board-detail-grid.md-board-detail-grid--shape-tall .md-board-detail-symbol-card {
  width: 66.6667%;
  height: 100%;
  margin: 0 auto;
}

.md-board-detail-grid.md-board-detail-grid--shape-wide .md-board-detail-symbol-card {
  width: 100%;
  height: 66.6667%;
  margin: auto 0;
}

/* The shape-square grid sizes to the square cards (above) instead of stretching
   to the viewport — this is what keeps the cells square so the gap stays equal
   on both axes:
   - height:auto lets the `minmax(0,1fr)` rows resolve to each card's definite
     aspect-height (column width) rather than splitting a fixed grid height.
   - flex:0 0 auto stops the grid (a flex item) from GROWING to fill its flex
     parent on tall screens — without it the grid would re-stretch the 1fr rows
     taller than the squares and re-open the vertical/horizontal slack mismatch.
   - align-content:start packs the rows at the top; <main> (overflow-y:auto)
     scrolls when the squares exceed the viewport.
   Shape comes from the user's `stretch_buttons` preference (none → shape-square);
   tall/wide prefs keep their own fractional aspect + fill and are NOT affected.
   Shell-prefixed (0,3,0) + !important so it beats the speak base height and
   edit's own !important calc (later in source than both). SCOPED to small/short
   viewports (`max-width:1024` / `max-height:700`): on larger screens the board
   keeps its viewport-filling base height and does NOT scroll. Square sizing (which
   sizes to content and can exceed the viewport, forcing a scroll) only kicks in on
   the small/short screens where the board would otherwise be cramped. */
@media (max-width: 1024px), (max-height: 700px) {
  .md-shell--board-detail .md-board-detail-grid.md-board-detail-grid--shape-square {
    height: auto !important;
    flex: 0 0 auto !important;
    align-content: start;
  }
}
.md-board-detail-symbol-card {
  container-type: size;
  container-name: symbol-card;
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  /* Responsive corner radius so cards stay rectangular on small
     viewports instead of collapsing into pill shapes. A fixed 16px
     reads as ~40% of card height at typical phone widths where the
     grid compresses cards to ~40px tall, which turns every button
     into a fully-rounded oval and lets folder cards (same class)
     drift visually away from non-folder buttons because the corner
     overlay on folders preserves their squared top-right while
     buttons go pill. Scaling with viewport keeps both shapes
     proportional across breakpoints — same rule applies to folder
     cards via this shared class, so the two stay consistent
     ("same shape; same responsiveness"). */
  border-radius: clamp(6px, 1.2vw, 16px);
  min-width: 0;
  min-height: 0;
  border: none !important;
  /* Outline width/offset driven by --bd-button-border set on the grid from the
     user's button_border preference. Falls back to 3px for non-edit views. */
  outline: var(--bd-button-border, 3px) solid transparent;
  outline-offset: calc(-1 * var(--bd-button-border, 3px));
  /* Smooth the outline-width / outline-offset change when the user
     adjusts the Border stepper in the create-board-new / board-detail
     Edit Tools rail. Without these, each +/- click snaps the border
     thickness abruptly, reading as "jumpy" preview behavior. Both
     outline-width and outline-offset have to animate together since
     the offset is calc(-1 * width) — animating only one of them
     causes the border to briefly drift inward / outward during the
     change. */
  transition: outline-width 0.18s ease, outline-offset 0.18s ease;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(27, 54, 93, 0.1), 0 8px 24px rgba(27, 42, 65, 0.08), 0 20px 50px rgba(27, 54, 93, 0.06);
}

/* Click: thicken the outline to match board-alt's .touched border effect */
.md-board-detail-symbol-card:active {
  outline-width: 5px;
  outline-offset: -5px;
}

/* "Soft borders" opt-in style — applied via .md-board-detail-grid--soft-borders
   on the grid root. PRESERVES the user's outline-width preference
   (--bd-button-border) entirely — only the card surface changes.
   Goal: a clearly dramatic "blended / modern" look. Prior attempts
   used box-shadow alone (white inset = invisible on white card
   fills, dark inset = too subtle to perceive). The new approach
   overlays a radial-gradient background-image on top of the card's
   inline background-color, so the colored fill now reads as a soft
   pearl with a bright center fading into the colored edge. The
   colored outline still sits at the rim but it now meets a
   GRADUATED fill instead of a flat slab — the eye reads this as
   "blended". Pairs with a strong inset edge darkening for additional
   depth, and a much lighter outer drop so the card feels modern /
   flat rather than anchored. Outlines paint above box-shadow but
   background-image paints BELOW the outline — so this approach
   visibly changes the area right next to the outline, which is
   exactly the transition that reads as "hard" in the default mode. */
/* Soft borders is for cards that have content — empty cells need
   their own subtle "available space" treatment and the white-halo
   gradient otherwise reads as a distracting spotlight on them
   (the empty rule's `background:` shorthand loses to our
   `background-image: ... !important`, which fills empty cells with
   bright pearl centers against the dark board canvas). Excluding
   `--empty` via :not() keeps empty cells in their dedicated rule. */
.md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty) {
  /* Layered gradients for a dramatic glass-card look:
     1. Top linear sheen — strong bright glow from top fading down,
        gives the card an obvious "lit from above" highlight that's
        the hallmark of modern glass-card UI.
     2. Radial halo — boosted to 0.90 center alpha for a clearly
        bright pearl center that contrasts strongly with the colored
        rim, so the categorical color reads as a tonal frame rather
        than a hard slab.
     `background-image` layers ON TOP of the inline / class-based
     `background-color`, so the categorical color still shows
     through at the rim.
     `!important` is required to survive the folder-card rule at
     ~line 62100 which uses `background: #fff !important` (shorthand
     resets background-image to none); without !important, soft
     borders wouldn't apply to folder buttons. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 35%, transparent 70%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.15) 75%, transparent 100%) !important;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.18), 0 10px 28px rgba(27, 54, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 24px rgba(27, 54, 93, 0.18), inset 0 2px 6px rgba(255, 255, 255, 0.75);
}

.md-board-detail--dark .md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty) {
  /* Dark mode: same layered glass effect with reduced center alpha
     so already-light Fitzgerald card fills don't read as harsh
     white blobs against the dark canvas. Edge darkening is stronger
     to keep the rim-fade perceptible against the lighter card
     interiors that dark-canvas contrast produces. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 35%, transparent 70%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.1) 75%, transparent 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42), 0 10px 28px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 0 24px rgba(0, 0, 0, 0.28), inset 0 2px 6px rgba(255, 255, 255, 0.22);
}

.md-board-detail-symbol-card__image {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  /* Match the responsive corner radius applied to the outer card
     (`.md-board-detail-symbol-card` further up). The outer card
     clips its content via `overflow: hidden`, so this radius isn't
     strictly required for clipping — but giving the image holder
     its own matching radius keeps any background-image or gradient
     painted directly on this element (the symbol_background_clear
     `var(--btn-bg)` fill + the soft-borders pearl gradient layered
     on top) trimmed to the same rounded silhouette the card uses,
     so the inner fill and outer card stay in lockstep across
     breakpoints. */
  border-radius: clamp(6px, 1.2vw, 16px);
}

/* White symbol background — fills the ENTIRE card white (matching the
   symmetric treatment that `symbol_background_black` already applies
   with #000). The previous behavior only painted the area behind the
   image white and left the Fitzgerald POS color on the card; that
   read as "image floats on a coloured card" rather than the expected
   "this is a white-background board." The card-level rule below uses
   !important to beat inline `background-color: <pos color>` styles
   set on individual cells (e.g. create-board-new's per-cell
   POS-coloured `cell.bg_style`). The label/img rules following keep
   the label transparent so the label text reads against the new
   white card surface, and keep the explicit white behind the symbol
   image so transparent-PNG symbols still render correctly. */
.symbol_background_white .md-board-detail-symbol-card {
  background-color: #fff !important;
}

.symbol_background_white .md-board-detail-symbol-card__image img.symbol {
  background: #fff;
}

.symbol_background_white .md-board-detail-symbol-card__label,
.symbol_background_white .md-board-detail-symbol-card__label-input {
  background: transparent;
}

.symbol_background_black .md-board-detail-symbol-card {
  background-color: #000 !important;
}

.symbol_background_black .md-board-detail-symbol-card__label,
.symbol_background_black .md-board-detail-symbol-card__label-input {
  background: transparent;
  color: rgba(255, 255, 255, 0.9) !important;
}

.symbol_background_black .md-board-detail-symbol-card__alt-text {
  color: rgba(255, 255, 255, 0.5) !important;
}

.high_contrast .md-board-detail-symbol-card__label,
.high_contrast .md-board-detail-symbol-card__label-input {
  background: transparent;
  color: #f8fc03 !important;
  /* 1px black outline (four corner shadows) keeps the high-contrast
     yellow text WCAG-readable against any card background, including
     white folder cards and light Fitzgerald fills (yellow/pink/rose).
     The soft drop shadow adds depth without blurring the outline. */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 3px rgba(0, 0, 0, 0.6);
}

.high_contrast .md-board-detail-symbol-card__alt-text {
  color: rgba(248, 252, 3, 0.7) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.md-board-detail-symbol-card__image img {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: opacity 180ms ease, filter 180ms ease;
}

/* Colored mode: white backing INSIDE the symbol's own outline. The
   ll-symbol-white-backing SVG filter (index.html) floods white, clips it to
   the symbol's own alpha, then draws the symbol on top — so transparent /
   anti-aliased regions don't bleed the Fitzgerald card color, while white
   never extends past the symbol's outline (no halo, no square). Because the
   filter runs per-pixel on this exact element it stays perfectly registered
   with the rendered image (a separately-masked layer drifted into a halo).
   The old knockout filter is replaced by this. Limitation (accepted):
   fully-enclosed transparent interiors get no white — there's no alpha there.
   square.svg empty placeholder excluded so blank cells keep their card
   surface. Cross-origin S3 symbols are fine — these filter primitives
   (feFlood/feComposite/feMerge on SourceAlpha) don't taint. */
.symbol_background_clear .md-board-detail-symbol-card__image img.symbol:not([src$="square.svg"]) {
  filter: url(#ll-symbol-white-backing);
}

/* Sentence bar parity: the composed-message chips and word-prediction tiles show
   the SAME transparent symbols as the grid, but live in the sentence row (a
   sibling of the grid, outside .symbol_background_clear) and use their own
   `__chip-img` / `__prediction-img` classes (not img.symbol), so the grid rule
   above never reached them. The pref class is now also placed on the sentence row
   (board-detail.hbs #speak), so Colored mode applies the same cream backing here
   for a consistent look. square.svg fallback excluded. */
.symbol_background_clear .md-board-detail-sentence-bar__chip-img:not([src$="square.svg"]),
.symbol_background_clear .md-board-detail-sentence-bar__prediction-img:not([src$="square.svg"]) {
  filter: url(#ll-symbol-white-backing);
}

/* Dark-mode icon halo for the button grid — adds a soft white
   drop-shadow around the visible pixels of every symbol icon. This
   is the AAC-safe alternative to inverting hues (which would change
   semantic meaning): the halo lifts dark line art off any dark card
   surface without recoloring the icon itself. Excludes the
   `square.svg` placeholder (empty cells get no halo). NOTE: the
   Colored-mode clear-PNG matte-knockout filter was removed — Colored mode
   now backs symbols via the ll-symbol-white-backing filter (above), which
   in dark+Colored overrides this halo (higher specificity), so a white-
   backed symbol shows no halo. Non-Colored dark modes keep the halo. */
.md-board-detail--dark .md-board-detail-symbol-card__image img.symbol {
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.65));
}

.md-board-detail--dark .md-board-detail-symbol-card__image img.symbol[src$="square.svg"] {
  filter: none;
}

/* Colored mode ("Colored" / "Colored Soft", the latter also carries
   .fitzgerald-soft): the image band is painted the Fitzgerald button fill so
   the area AROUND the symbol's white backing (the ll-symbol-white-backing
   filter above) reads as the button color, not black from the dark board
   shell. White, Black, and High Contrast modes use separate selectors and
   are unaffected. */
.symbol_background_clear .md-board-detail-symbol-card__image,
.symbol_background_clear .md-board-detail-symbol-card__image--placeholder {
  background: var(--btn-bg, transparent) !important;
}

/* Soft-borders + colored mode: paint the image container with the
   SAME glassy gradient stack the card uses for soft-borders, scoped
   to the image-container's own bounds. The earlier approach made
   the image container transparent so the card's gradient bled
   through — but the card's gradient is anchored to the whole card,
   so the image area only saw a portion of it (the bottom half,
   where alphas have already faded) and read as flat / dim compared
   to the folder face (which IS the whole card, so it sees the full
   bright-top → halo-center → fade-bottom gradient).
   By repainting the same gradient ON the image container, the
   image area becomes its own "mini folder face": linear sheen
   bright at its top, radial halo at its center, fading toward its
   bottom. Result is a glassy peach-on-peach finish that visually
   matches what a folder face looks like, while preserving the
   categorical fill (`var(--btn-bg)`) underneath as the matte-fill
   backstop for PNG symbol transparency.
   Folder cards excluded — they already get the gradient at the
   card level. Empty cells excluded — they have their own subtle
   "available space" treatment. */
.symbol_background_clear .md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty):not(.md-board-detail-symbol-card--folder) .md-board-detail-symbol-card__image,
.symbol_background_clear .md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty):not(.md-board-detail-symbol-card--folder) .md-board-detail-symbol-card__image--placeholder {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 35%, transparent 70%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.15) 75%, transparent 100%) !important;
}

/* Dark-mode variant — alphas reduced to match the dark-mode soft-
   borders card rule (~line 58109) so the image area's mini glass
   effect tracks the card's overall attenuation on dark canvases. */
.md-board-detail--dark .symbol_background_clear .md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty):not(.md-board-detail-symbol-card--folder) .md-board-detail-symbol-card__image,
.md-board-detail--dark .symbol_background_clear .md-board-detail-grid--soft-borders .md-board-detail-symbol-card:not(.md-board-detail-symbol-card--empty):not(.md-board-detail-symbol-card--folder) .md-board-detail-symbol-card__image--placeholder {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 35%, transparent 70%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.1) 75%, transparent 100%) !important;
}

/* (Removed: previously paired with the placeholder rule above, this
   forced the folder face to `var(--btn-bg)` whenever Colored
   (`symbol_background_clear`) mode was on — which is the default
   symbol_background for almost everyone. That made the "Colored
   Folder Front" toggle effectively a no-op (folders ALWAYS read as
   colored regardless of the toggle state). The dedicated
   `.md-board-detail-grid--folder-colored-face` rule at line ~62140
   is the canonical way to paint the folder face and is gated on
   the user's toggle. Deleted this duplicate so the toggle works
   as documented.) */
/* Editor preview parity with runtime: when high_contrast is on, push
   symbol images through the same contrast/saturate filter the live
   board uses (line ~6982 — `.board.high_contrast .button img.symbol`).
   :not(.hc) skips images already authored as high-contrast assets. */
.high_contrast .md-board-detail-symbol-card__image img.symbol:not(.hc) {
  filter: contrast(4) saturate(500);
}

.low_for_high_contrast .high_contrast .md-board-detail-symbol-card__image img.symbol:not(.hc) {
  filter: contrast(4) saturate(100);
}

.md-board-detail-symbol-card__image--placeholder {
  background: rgba(42, 157, 143, 0.08);
  border-radius: 16px;
}

.md-board-detail-symbol-card__placeholder-icon {
  font-size: 29px;
  opacity: 0.4;
}

.md-board-detail-symbol-card__alt-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.45);
  padding: 4px 8px;
  word-break: break-word;
  line-height: 1.3;
}

.md-board-detail-symbol-card__label {
  font-size: var(--bd-button-text-size, 15px);
  /* Smooth the font-size change when the user adjusts the Text Size
     stepper in the Edit Tools rail. Without this, each +/- click
     snaps the label size abruptly; with shrink-labels ON the
     label_fit.js inline override layered on top makes the change
     read as "pops back and forth between the new and old setting"
     because the inline-style restore inside fitWrapped briefly puts
     the OLD size back before the caller sets the NEW. label_fit
     also disables the transition while measuring (see fitWrapped)
     so the measurement loop doesn't visibly flicker through every
     intermediate size — only the final base→chosen transition is
     animated. */
  transition: font-size 0.18s ease;
  font-weight: 600;
  color: #1B365D;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 3.45em;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
  flex-shrink: 0;
  padding: 3px 2px 5px;
}

/* Tight viewports: drop the bottom padding on button labels. At
   <=768px the grid compresses cards enough that the 5px bottom
   padding eats a noticeable slice of the card height — pushing the
   label visually into the image and leaving a dead-zone between
   text and card bottom. Top + horizontal padding kept so the
   label still sits clear of the card rim. 768px chosen to align
   with the codebase's most-used responsive breakpoint
   (tablet-portrait threshold). */
@media (max-width: 768px) {
  .md-board-detail-symbol-card__label {
    padding-bottom: 0;
  }
}
/* Short viewports in speak mode: reclaim vertical padding on the
   label, keyed on height. Below 400px tall the grid cells get short
   enough that the label's 3px top + 5px bottom padding eats a
   noticeable slice of the card and crowds the label against the
   image/card edges. Drop the top padding entirely and trim the bottom
   to a 1px hairline; horizontal padding kept so the label stays clear
   of the card rim. Scoped to speak mode (not the edit page, whose
   toolbar already eats vertical space) to match the image-scale
   blocks below. */
@media (max-height: 400px) {
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-symbol-card__label {
    padding-top: 0;
    padding-bottom: 1px;
  }
}
/* Short viewports, speak mode: the board button images previously scaled UP
   (transform: scale(1.25 → 2.1) at <=500/420/350/280px height) to keep symbols
   "roughly constant" as cells shrank. But the image is already
   object-fit:contain — it fills its short dimension — so any scale > 1
   overflowed the `overflow:hidden` image holder and CROPPED the symbol (heavy
   on landscape phones: scale(1.5) at ~390px tall cut ~1/3 off). A cropped AAC
   symbol is unrecognizable, which is worse than a smaller intact one, so the
   scale steps were removed — the image now fits fully (object-fit:contain) at
   every height. To make symbols read larger on short screens, give the image
   more vertical room (trim label / cell padding), never scale past the
   container. */
.md-board-detail-symbol-card__label-input {
  font-size: var(--bd-button-text-size, 19px);
  font-weight: 600;
  color: #1B365D;
  text-align: center;
  /* Match the speak-mode `__label` box metrics so the editable
     label occupies the SAME vertical footprint — the image area then
     gets the same proportion as speak and the edit grid is an
     accurate preview. line-height/vertical-padding mirror __label;
     flex-shrink:0 + max-height:3.45em stop the field from
     compressing or over-growing the image differently than speak.
     box-sizing:border-box keeps the 1px field border from adding
     height beyond the label's footprint. */
  line-height: 1.15;
  width: 90%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px 6px 5px;
  flex-shrink: 0;
  max-height: 3.45em;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  outline: none;
  /* font-size transition matches the speak-mode `__label` rule so the
     editable input animates the Text Size stepper the same way. */
  transition: border-color 0.15s ease, box-shadow 0.15s ease, font-size 0.18s ease;
}

.md-board-detail-symbol-card__label-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.15);
  background: #fff;
}

.md-board-detail-symbol-card__label-input::placeholder {
  color: #9CA3AF;
  font-weight: 400;
  font-style: italic;
}

/* Click-to-edit affordance on the preview-grid label. The button is a
   transparent shim around the existing `__label` span — preserves the
   centered, clamped typography from .md-board-detail-symbol-card__label
   above while making the whole label area a click target that triggers
   `startCellEdit`. No visible border/background so the card's chrome
   stays unchanged; a subtle hover lift signals interactivity. */
.md-board-detail-symbol-card__label-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: text;
  color: inherit;
  font: inherit;
  text-align: center;
}

.md-board-detail-symbol-card__label-btn:hover .md-board-detail-symbol-card__label {
  text-decoration: underline;
  text-decoration-color: rgba(27, 54, 93, 0.35);
  text-underline-offset: 2px;
}

.md-board-detail-symbol-card__label-btn:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* While a cell is in edit mode, neutralise the grab cursor and the hover
   lift on the wrapper so the input field reads as the only interactive
   element inside the card. */
.md-board-detail-grid--preview .md-board-detail-grid__cell--editing {
  cursor: text;
}

.md-board-detail-grid--preview .md-board-detail-grid__cell--editing:hover {
  transform: none;
}

/* ── Button text user preferences ── */
/* Font family + text transform from user preferences (set as CSS vars on grid) */
.md-board-detail-grid {
  --bd-button-font: inherit;
  --bd-button-text-transform: none;
}

.md-board-detail-symbol-card__label,
.md-board-detail-symbol-card__label-input {
  font-family: var(--bd-button-font);
  text-transform: var(--bd-button-text-transform);
}

/* Text size preferences */
/* Button text size driven by user preference via CSS variable */
.md-board-detail-symbol-card__label,
.md-board-detail-symbol-card__label-input {
  font-size: clamp(9px, 1.5vw, var(--bd-button-text-size, 15px));
}

/* Preview mockup override: the global rule above (and the cqw-clamped rule
   higher in this file) cap the font well below the user's selected size
   in the smaller mockup cells, so picking small/medium/large/huge looks
   identical. In preview context, use the user's pref as the preferred
   value and only clamp against cell width (50% — generous, since labels
   have overflow:hidden + word-break:break-word so huge text on tiny cells
   clips/wraps rather than breaks the layout). Selector specificity
   (0,2,0) beats both global rules (0,1,0). !important defends against
   any later cascading rule winning despite specificity, which the user
   was hitting in the live build. */
.md-board-detail-grid--preview .md-board-detail-symbol-card__label,
.md-board-detail-grid--preview .md-board-detail-symbol-card__label-input {
  font-size: clamp(8px, var(--bd-button-text-size, 15px), 50cqw) !important;
}

/* Text position preferences */
.md-board-detail-grid--text-pos-top .md-board-detail-symbol-card {
  flex-direction: column-reverse;
}

.md-board-detail-grid--text-pos-top .md-board-detail-symbol-card__image {
  /* Match the outer card's responsive radius (clamp(6px, 1.2vw, 16px))
     so the inner image's rounded edge tracks the outer card at every
     viewport. Hardcoded 12px previously read smaller than the outer
     card on wide viewports (16px outer vs 12px inner = visible card-bg
     gap at the corner) and larger than the outer card on narrow
     viewports (~8px outer vs 12px inner = the inner curve got clipped
     by the smaller outer curve). Same clamp keeps them in lockstep. */
  border-radius: 0 0 clamp(6px, 1.2vw, 16px) clamp(6px, 1.2vw, 16px);
}

.md-board-detail-grid--text-pos-bottom .md-board-detail-symbol-card {
  flex-direction: column;
}

.md-board-detail-grid--text-pos-bottom .md-board-detail-symbol-card__image {
  border-radius: clamp(6px, 1.2vw, 16px) clamp(6px, 1.2vw, 16px) 0 0;
}

.md-board-detail-grid--text-pos-none .md-board-detail-symbol-card__label,
.md-board-detail-grid--text-pos-none .md-board-detail-symbol-card__label-input {
  display: none !important;
}

.md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card {
  justify-content: center;
}

.md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__image {
  display: none !important;
}

.md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__label,
.md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__label-input {
  font-size: calc(var(--bd-button-text-size, 19px) * 1.2);
}

/* When paint mode is active, make label inputs click-through so paint works */
.md-shell--board-detail-edit.md-shell--board-paint .md-board-detail-symbol-card__label-input {
  pointer-events: none;
}

/* At largest text size, drop horizontal padding so the label uses the full card width */
.md-board-detail-grid--text-huge .md-board-detail-symbol-card__label {
  padding-left: 0;
  padding-right: 0;
}

.md-board-detail-grid--text-huge .md-board-detail-symbol-card__label-input {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* ── Part-of-speech color classes ─────────────────────
   Final palette:
     Pronouns      Dusty Denim     #4C86D8
     Verbs         Verdigris       #2A9D8F
     Descriptors   Honey Bronze    #F2B95A
     Nouns         Warm Orange     #E08A3A
     Social        Purple Blend    #7B6BAD
     Grammar       Soft Fawn       #C9AD7A
     Negatives     Deep Charcoal   #374151
     Questions     Stormy Teal     #316F70
     Prepositions  Soft Fawn       #C9AD7A  (same as Grammar)
   ──────────────────────────────────────────────────── */
.md-board-detail-symbol-card--pronoun {
  background-color: var(--fitzgerald-pronoun-yellow);
}
.md-board-detail-symbol-card--pronoun .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-pronoun-yellow-text);
}

.md-board-detail-symbol-card--verb {
  background-color: var(--fitzgerald-verb-green);
}
.md-board-detail-symbol-card--verb .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-verb-green-text);
}

.md-board-detail-symbol-card--adjective {
  background-color: var(--fitzgerald-adjective-blue);
}
.md-board-detail-symbol-card--adjective .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-adjective-blue-text);
}

.md-board-detail-symbol-card--noun,
.md-board-detail-symbol-card--nominative {
  background-color: var(--fitzgerald-noun-orange);
}
.md-board-detail-symbol-card--noun .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--nominative .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-noun-orange-text);
}

.md-board-detail-symbol-card--social,
.md-board-detail-symbol-card--social_phrase {
  background-color: var(--fitzgerald-social-pink);
}
.md-board-detail-symbol-card--social .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--social_phrase .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-social-pink-text);
}

.md-board-detail-symbol-card--negation,
.md-board-detail-symbol-card--expletive,
.md-board-detail-symbol-card--interjection {
  background-color: var(--fitzgerald-negation-red);
}
.md-board-detail-symbol-card--negation .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--expletive .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--interjection .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-negation-red-text);
}

.md-board-detail-symbol-card--question {
  background-color: var(--fitzgerald-question-purple);
}
.md-board-detail-symbol-card--question .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-question-purple-text);
}

.md-board-detail-symbol-card--preposition {
  background-color: var(--fitzgerald-preposition-pink);
}
.md-board-detail-symbol-card--preposition .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-preposition-pink-text);
}

.md-board-detail-symbol-card--adverb {
  background-color: var(--fitzgerald-adverb-brown);
}
.md-board-detail-symbol-card--adverb .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-adverb-brown-text);
}

.md-board-detail-symbol-card--article,
.md-board-detail-symbol-card--determiner {
  background-color: var(--fitzgerald-determiner-gray);
}
.md-board-detail-symbol-card--article .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--determiner .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-determiner-gray-text);
}

.md-board-detail-symbol-card--conjunction,
.md-board-detail-symbol-card--number {
  background-color: var(--fitzgerald-conjunction-white);
}
.md-board-detail-symbol-card--conjunction .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--number .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-conjunction-white-text);
}

.md-board-detail-symbol-card--other {
  background-color: var(--fitzgerald-other-blue);
}
.md-board-detail-symbol-card--other .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-other-blue-text);
}

.md-board-detail-symbol-card--contrast {
  background-color: var(--fitzgerald-contrast-black);
}
.md-board-detail-symbol-card--contrast .md-board-detail-symbol-card__label {
  color: var(--fitzgerald-contrast-black-text);
}

.md-board-detail-symbol-card--default {
  background-color: #FFFFFF;
  border-color: #E0DCD6;
}
.md-board-detail-symbol-card--default .md-board-detail-symbol-card__label {
  color: #1B365D;
}

.md-board-detail-grid__cell {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.md-board-detail-grid__cell--filtered-out {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.md-board-detail-grid__cell--drag-source {
  border-radius: clamp(8px, 1vw, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(235, 237, 240, 0.95) 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -1px 3px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 2px dashed rgba(27, 54, 93, 0.15);
}

.md-board-detail-grid__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 24px;
  color: rgba(75, 78, 92, 0.55);
  font-size: 17px;
}

/* ── Color picker trigger & popover ───────────────────── */
.md-board-detail-color-trigger {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.3);
  z-index: 2;
  padding: 0;
}

.md-board-detail-symbol-card:hover .md-board-detail-color-trigger {
  opacity: 1;
}

.md-shell--board-detail-edit .md-board-detail-color-trigger {
  opacity: 0.6;
}

.md-shell--board-detail-edit .md-board-detail-symbol-card:hover .md-board-detail-color-trigger {
  opacity: 1;
}

.md-board-detail-color-trigger:hover {
  box-shadow: 0 3px 10px rgba(42, 157, 143, 0.4);
  transform: scale(1.1);
}

.md-board-detail-color-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 499px; /* 30% wider than the prior 384px */
  padding: 16px;
  border-radius: 16px;
  /* Modern modal styling: a frosted-glass pane (backdrop-blur + soft inset sheen
     + ambient drop) matching the board-detail glass surfaces and the md-modal-*
     family, instead of the prior flat white card. */
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.05), rgba(76, 134, 216, 0.05), rgba(123, 107, 173, 0.04)), rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 40px rgba(27, 54, 93, 0.18);
  animation: md-board-detail-picker-in 0.15s ease;
}

@keyframes md-board-detail-picker-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.md-board-detail-color-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sectioned header like the md-modal-* family — a hairline divider under the
     title row. */
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
}

.md-board-detail-color-picker__title {
  /* Match md-modal-title (18px / 700 / navy). */
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
}

.md-board-detail-color-picker__close {
  /* Modern circular close (frosted ring) holding an SVG ×, mirroring la-modal-close.
     Keep the WCAG 2.5.5 AAA 44px touch target, but render the visible disc at 32px
     via ::before so it stays compact in the picker header. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: rgba(75, 78, 92, 0.65);
  cursor: pointer;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease;
}

.md-board-detail-color-picker__close::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.12);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.md-board-detail-color-picker__close svg {
  position: relative;
}

.md-board-detail-color-picker__close:hover {
  color: #1B365D;
}

.md-board-detail-color-picker__close:hover::before {
  background: rgba(27, 54, 93, 0.08);
  border-color: rgba(27, 54, 93, 0.18);
}

.md-board-detail-color-picker__swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.md-board-detail-color-picker__swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  /* WCAG AA + AAC fix — was 6px 8px (~21×19, below 24×24 floor). */
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.06);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-board-detail-color-picker__swatch:hover {
  background: rgba(27, 54, 93, 0.04);
}

.md-board-detail-color-picker__swatch:active {
  transform: scale(0.97);
}

.md-board-detail-color-picker__swatch-color {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid transparent;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.md-board-detail-color-picker__swatch-label {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  line-height: 1.2;
  text-align: left;
}

.md-board-detail-color-picker__custom {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding-top: 12px;
}

.md-board-detail-color-picker__custom-header {
  margin-bottom: 8px;
}

.md-board-detail-color-picker__custom-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(75, 78, 92, 0.6);
  margin: 0;
}

.md-board-detail-color-picker__custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-board-detail-color-picker__preview {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: conic-gradient(from 0deg, #E08A3A 0deg, #F2B95A 60deg, #2A9D8F 120deg, #4C86D8 180deg, #7B6BAD 240deg, #C0392B 300deg, #E08A3A 360deg);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.md-board-detail-color-picker__preview:hover {
  border-color: #2A9D8F;
  transform: scale(1.08);
}

.md-board-detail-color-picker__input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  font-size: 15px;
  color: #1B365D;
  min-width: 0;
}

.md-board-detail-color-picker__input:focus-visible {
  outline: none;
  border-color: #2A9D8F;
}

.md-board-detail-color-picker__apply {
  /* WCAG 2.5.5 AAA touch target — was 8×14 (~16 tall, FAIL). */
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 10px;
  border: none;
  background: #46505F;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.md-board-detail-color-picker__apply:hover {
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.3);
}

.md-board-detail-color-picker__apply:active {
  transform: scale(0.96);
}

/* ── Edit Mode Toolbar ────────────────────────────────── */
/* ── Board detail search filter (in edit toolbar) ── */
.md-board-detail-edit-toolbar__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  min-height: 44px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: #fff;
  /* `flex: 0 1 140px` — preferred basis 140px, can shrink when the
     toolbar tightens, never grows past 140px when the row has extra
     room. `min-width: 0` lets the shrink reach below the input's
     intrinsic placeholder width. */
  flex: 0 1 140px;
  min-width: 0;
}

.md-board-detail-edit-toolbar__search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  /* Same shrink-only flex semantics as the parent pill: starts at
     140px, shrinks under pressure, doesn't grow. `min-width: 0` is
     critical — `<input>` defaults refuse to go below the intrinsic
     placeholder width, which is what was forcing the dock to wrap
     prematurely. */
  flex: 0 1 140px;
  min-width: 0;
  width: auto;
  padding: 2px 0;
}

.md-board-detail-edit-toolbar__search-input::placeholder {
  color: #9CA3AF;
}

.md-board-detail-edit-toolbar__search-input:focus-visible {
  outline: none;
}

.md-board-detail-edit-toolbar__search:focus-within {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.12);
}

.md-board-detail-edit-toolbar__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: rgba(27, 54, 93, 0.08);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-board-detail-edit-toolbar__search-clear:hover {
  background: rgba(27, 54, 93, 0.16);
}

/* ── Board detail search filter (standalone, legacy) ── */
.md-board-detail-search {
  margin-bottom: 0;
}

.md-board-detail-search:has(.md-board-detail-search__input:placeholder-shown) {
  margin-bottom: 0;
}

.md-board-detail-search__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.md-board-detail-search__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46505F;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}

.md-board-detail-search__input {
  width: 100%;
  max-width: 400px;
  padding: 10px 16px;
  border: 1.5px solid rgba(17, 26, 46, 0.1);
  border-radius: 10px;
  font-size: 1.44rem;
  background: rgba(248, 250, 252, 0.9);
}

.md-board-detail-search__input:focus-visible {
  outline: none;
  border-color: #147F82;
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.12);
}

.md-board-detail-search__clear {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #5A6A85;
  background: rgba(246, 247, 250, 0.9);
  border: 1.5px solid rgba(17, 26, 46, 0.12);
  cursor: pointer;
  white-space: nowrap;
}

.md-board-detail-search__clear:hover {
  color: #147F82;
  border-color: rgba(20, 127, 130, 0.35);
  background: rgba(20, 127, 130, 0.06);
}

.md-shell--board-detail-edit .md-board-detail-header {
  /* Edit-mode header used to zero ALL padding so the toolbar can hug
     the column edges, but that left the title cramped against the top
     of the panel. Restore vertical breathing room (12px top, 8px
     bottom) — horizontal stays 0 so the edit-toolbar still spans
     edge-to-edge with the center stage. */
  margin-bottom: 0;
  padding-top: 4px;
  padding-right: 0;
  padding-bottom: 8px;
  padding-left: 0;
  position: relative;
}

/* ── Edit mode pill badge ── */
.md-board-detail-edit-pill {
  position: absolute;
  top: calc(50% - 2rem);
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

/* Edit-mode pill positioning (formerly gated to <=1024px): hide the title-row
   inline variant and show the "mobile" variant (positioned statically, right-
   aligned next to board actions) at all screen widths so the pill lands in a
   consistent spot regardless of viewport size. */
.md-board-detail-header__title-row .md-board-detail-edit-pill {
  display: none;
}

.md-board-detail-edit-pill--mobile {
  display: inline-flex;
  position: static;
  transform: none;
  margin: 0 0 8px 0;
  align-self: flex-end;
}

/* ── Modern tooltips for edit toolbar ── */
.md-board-detail-edit-toolbar,
.md-board-detail-edit-toolbar__section,
.md-board-detail-edit-toolbar__section-buttons {
  overflow: visible;
}

.md-board-detail-edit-toolbar [data-tooltip] {
  position: relative;
}

.md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: #1b2a4a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 8px;
  max-width: 240px;
  width: max-content;
  white-space: normal;
  word-wrap: break-word;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1b2a4a;
  z-index: 50;
  pointer-events: none;
}

/* Suppress tooltip on a dropdown trigger while the dropdown is open. */
.md-board-detail-edit-toolbar .md-settings-select--open[data-tooltip]:hover::after,
.md-board-detail-edit-toolbar .md-settings-select--open[data-tooltip]:hover::before {
  content: none;
}

/* Suppress tooltip after a mouse click. Buttons get :focus on mouse-down
   in Chrome/Firefox; :focus-visible is only true for keyboard focus, so
   ":focus:not(:focus-visible)" matches "focused via click" specifically.
   Once the user clicks elsewhere the focus moves and the tooltip returns
   on subsequent hover. Keyboard tab focus still shows the tooltip. */
.md-board-detail-edit-toolbar [data-tooltip]:focus:not(:focus-visible):hover::after,
.md-board-detail-edit-toolbar [data-tooltip]:focus:not(:focus-visible):hover::before {
  content: none;
}

/* ── Edit toolbar ──
   Whole-toolbar bg matches the Settings/Save/Cancel actions-cluster styling
   so the toolbar reads as one elevated panel that groups the sections inside. */
.md-board-detail-edit-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  /* Center the sections so any wrapped bottom row is horizontally centered
     instead of left-pinned. justify-content: center keeps contents
     centered horizontally regardless of the toolbar's outer width, so we
     can drop the horizontal padding and let the section pills stretch
     to the toolbar's edges without affecting centering. */
  justify-content: center;
  /* row-gap comes first: more vertical breathing room when sections wrap
     onto a new line; column-gap keeps the tighter 14px horizontal spacing. */
  gap: 18px 14px;
  padding: 10px 0 8px;
  /* Atmospheric depth: hairline border (.08 → .06) aligned with the
     unified light-mode chrome alpha; layered shadow stack — close
     4px definition, broad 16px+40px diffuse haze, mid 2px contact,
     and a strong inset top-edge highlight at .95 alpha that reads as
     bright glass. Same premium-SaaS surface technique used by the
     boards-page card chrome. */
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.1), 0 16px 40px rgba(27, 54, 93, 0.08), 0 2px 4px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.md-board-detail--dark .md-board-detail-edit-toolbar {
  /* Panel-surface tier (#172131) — see paired rule below for full
     rationale. Kept in sync because two byte-identical declarations
     of this selector exist in this file and the later one wins the
     cascade; updating only one would leave the rail/toolbar pairing
     half-applied. */
  /* Atmospheric depth on top of the panel-surface tier: a translucent
     white glass-veil (rgba(255,255,255, .04 → .015)) layered above the
     #172131 base gives the surface a subtle lit-from-above quality.
     Hard .22-alpha border drops to .06; layered shadows (mid 18px, broad
     60px ambient haze, close 2px contact) carry the separation; inset
     top-edge highlight + 1px outline keep the toolbar distinct against
     the raised center stage. Mirrors the rail dark formula. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), linear-gradient(180deg, #131A27 0%, #161F2E 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Emphasize the settings-toggle button's active state with a subtle ring
   so it reads as the currently-active control when the toolbar is showing
   the Display Settings content. The template-level `btn--active` rule
   already gives it a blue-grey gradient fill; this adds the outer halo. */
.md-board-detail-edit-toolbar__section--settings-toggle .md-board-detail-edit-toolbar__btn--active {
  box-shadow: 0 0 0 3px rgba(70, 80, 95, 0.35);
}

.md-board-detail-edit-toolbar__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Each section is its own pill-wrap. Original subtle tone — the bolder
     gradient/shadow belongs on the toolbar as a whole, not per section. */
  padding: 6px 10px;
  background: #F8F9FA;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Phone-narrow viewports (≤460px): a fallback wrap for any section whose
   controls genuinely don't fit a single row even after the 36px-row
   collapse from the @media (max-width: 640px) block above. The Text
   section is structurally split into Text + Text Position at all widths
   so it fits already; this rule covers any future section that grows
   beyond what the row can hold. */
@media (max-width: 460px) {
  .md-board-detail-edit-toolbar__section .md-board-detail-edit-toolbar__section-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
}
.md-board-detail--dark .md-board-detail-edit-toolbar__section {
  background: #1e2530;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.md-board-detail-edit-toolbar__section--actions {
  margin-left: auto;
}

/* On narrow viewports, the initial (always-visible) toolbar sections wrap to
   multiple lines; give each pill a bottom margin so wrapped rows don't feel
   cramped against the next row. */
/* Previously added 14px margin-bottom on every section at ≤820px to
   give wrapped pills more breathing room. Removed because it created
   an awkward gap below the History (undo/redo) and Categories+Search
   pills even when those rows weren't wrapping yet. The toolbar's own
   row-gap (`gap: 18px 14px`) handles wrap-row spacing already. */
.md-board-detail-edit-toolbar__section-label {
  /* Toolbar section labels — lightened 700 → 500 weight + color
     pulled back a notch (#8a96a8 → #9aa4b3) so the labels feel
     editorial rather than utility-heavy. Sectional hierarchy
     comes through spacing + grouping, not bold weight. */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9aa4b3;
  padding-left: 2px;
  line-height: 1;
}

.md-board-detail-edit-toolbar__section-buttons {
  display: flex;
  /* Bottom-align so unlabeled controls (steppers, toggles) sit flush with the
     control portion of labeled sibling wraps instead of centering themselves
     between the sublabel and its control. */
  align-items: flex-end;
  /* Matches the 8px gap used by the Settings/Save/Cancel actions cluster so
     adjacent buttons within any section breathe the same way. */
  gap: 8px;
}

/* Combined Layout section: the outer section is a row container that holds
   two full mini-sections (Rows + Columns) side-by-side. Each mini-section
   uses the standard section-label styling — no more sublabel variant. */
.md-board-detail-edit-toolbar__section--layout {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}

.md-board-detail-edit-toolbar__layout-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Display-prefs wrapper: forced full-width flex-item inside the edit toolbar
   so it drops to a new row below the always-visible edit-controls and flows
   its sections side-by-side with the same horizontal wrap as the main row. */
.md-board-detail-edit-toolbar__display-prefs {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 18px 14px;
}

/* On wide screens (>= 1280px), force every preference pill onto one row.
   Tighten the gap and section padding so all 9 sections fit; allow them
   to shrink (min-width: 0) so dropdown triggers can compress instead of
   overflowing. Bumped from 1024px because at narrower widths the row
   was clipping ("Border" → "B…", "Skin-Tones" overflowing) — below
   1280px we let the row wrap to two rows naturally. */
@media (min-width: 1280px) {
  .md-board-detail-edit-toolbar__display-prefs {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__section {
    min-width: 0;
    padding: 6px 8px;
    flex: 0 1 auto;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__section-buttons {
    gap: 6px;
    flex-wrap: nowrap;
  }
  /* Compress dropdown trigger widths inside the row so long font names like
     "Architect's Daughter" yield to neighbors instead of forcing a wrap. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-select--trigger {
    max-width: 160px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}
/* Medium widths (tablet to small-laptop): tighten the gap between pills
   so the row uses fewer wrap rows. Labels stay visible — a row of unlabeled
   −/+ pills is unreadable at a glance even though each carries an
   aria-label/tooltip. */
@media (max-width: 1279px) {
  .md-board-detail-edit-toolbar__display-prefs {
    gap: 10px 10px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__section {
    padding: 6px 10px;
  }
}
/* Default: .md-settings-group wrappers are layout-invisible. The flex layout
   in section-buttons sees the inner sublabel-wraps as direct children, so
   the existing desktop layout is unchanged. The wrappers only become real
   layout boxes (with pill chrome) inside the mobile @media block below. */
.md-settings-group {
  display: contents;
}

/* Mobile / cell-phone widths: native-settings-list pattern (iOS Settings,
   Material/Notion/Linear mobile). One unified rounded card holds the
   whole prefs panel; each preference is a single row with label on the
   left and control on the right, separated by hairline dividers. This
   is the standard mobile-settings UX users already know — scannable,
   clearly labeled, ~50% of the previous vertical footprint. */
@media (max-width: 640px) {
  /* The display-prefs container becomes the card. */
  .md-board-detail-edit-toolbar__display-prefs {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #F8F9FA;
    border: 1px solid rgba(27, 54, 93, 0.12);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    /* overflow: visible (default) so the skin-tones popover (and any
       row-anchored absolute dropdowns near the panel edges) aren't
       clipped at the panel boundary. The visually-final row already has
       its border-bottom stripped (`:last-of-type` rule below), so the
       rounded corners read clean without needing overflow: hidden. */
    overflow: visible;
  }
  /* Dark mode at this breakpoint: switch the card to a dark surface
     so it sits naturally on the dark toolbar instead of looking
     punched-out, and keep the pale labels visible against it (the
     base dark-mode sublabel rule sets `rgba(255, 255, 255, 0.6)` —
     readable on dark, near-invisible on the light card). Same for
     the hairline dividers between rows. */
  .md-board-detail--dark .md-board-detail-edit-toolbar__display-prefs {
    background: #1e2530;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .md-board-detail--dark .md-board-detail-edit-toolbar__display-prefs .md-settings-sublabel-wrap {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  /* Sections, section-buttons, and groups all become layout-invisible
     wrappers so each .md-settings-sublabel-wrap (one per preference)
     is a direct row inside the card. */
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__section,
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__section-buttons,
  .md-board-detail-edit-toolbar__display-prefs .md-settings-group {
    display: contents;
  }
  /* Each preference renders as one row. The base .md-settings-sublabel-wrap
     rule sets flex-direction: column and min-width: max-content; both must
     be explicitly overridden here, not just `display: flex`. Vertical
     padding is 0 — the row is a strict 36px box and align-items: center
     vertically centers the (≤32px) content with 2px clearance above/below. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-sublabel-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(27, 54, 93, 0.08);
    height: 40px;
    min-height: 40px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
  }
  /* Mirror the base sibling-combinator rules at higher specificity so
     they don't add 12px of left margin to sub-wraps that follow another
     (Font Type after Text Size, Border after Gap, etc.). The base rule
     fires because display:contents on the .md-settings-group wrappers
     exposes the inner wraps as DOM siblings. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-sublabel-wrap + .md-settings-sublabel-wrap,
  .md-board-detail-edit-toolbar__display-prefs * + .md-settings-sublabel-wrap {
    margin-left: 0;
  }
  /* Only the truly final row should lose its divider — `.last-child` alone
     matches every wrap that's the last in its DOM parent (each .md-settings-group
     and each section's .section-buttons has a "last child"), which was
     stripping 7 of 9 dividers. Scoping to "last wrap inside the last
     section" keeps a divider between every pair of adjacent settings. */
  .md-board-detail-edit-toolbar__display-prefs > .md-board-detail-edit-toolbar__section:last-child .md-settings-sublabel-wrap:last-child {
    border-bottom: none;
  }
  /* Label on the left — visible, modest weight. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-sublabel {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #1B365D;
    line-height: 1.2;
    flex: 0 0 auto;
    padding: 0;
  }
  /* Control on the right — let it size naturally and push to the end. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-sublabel-wrap > :not(.md-settings-sublabel) {
    flex: 0 0 auto;
    margin-left: auto;
  }
  /* Compact stepper buttons. Height trimmed by ~25% (32 → 24) to drop the
     vertical padding around the −/+ glyphs; 24px is the WCAG AA touch
     target floor. Width stays 32px so the buttons remain easy to tap. */
  .md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__stepper-btn {
    width: 32px;
    height: 24px;
    min-width: 32px;
    min-height: 24px;
  }
  /* Dropdown trigger — strict 28px height so it sits in the 36px row with
     4px clearance. Right padding (32px) reserves chevron space drawn by
     the base .md-settings-select rule. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-select--trigger {
    height: 28px;
    min-height: 28px;
    max-width: 180px;
    padding: 0 32px 0 12px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* Icon-button groups (Text Position, Shape, Hidden) — 28px so they sit in
     the 36px row with 4px clearance. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-icon-btn {
    width: 28px;
    height: 28px;
  }
  /* Hidden row's eye-icon toggle-btns ship at 44×44 by default. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-toggle-btn {
    width: 28px;
    height: 28px;
  }
  /* Skin-Tones row's swatch wrapper has an explicit `height: 44px`. Cap at
     28px (matching the icongroup height) so the row holds 36px. The swatches
     themselves shrink below to fit. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-group {
    height: 28px;
    padding: 0 4px;
  }
  /* Skin swatch dots — 22px so they fit cleanly in the 28px wrapper with
     a 3px ring for the active state. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin {
    width: 22px;
    height: 22px;
  }
  /* Icon-group pill (Shape, Text Position, Hidden). Override the base
     `height: 44px` with a strict 28px and tight padding so the gray
     rounded wrap matches the surrounding controls. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-icongroup {
    height: 28px;
    padding: 0 2px;
  }
  /* Hidden row carries three controls (icongroup + 2 toggle-btns) on
     the right. At ≤640px the wrapper pushes the whole cluster to the
     right edge of the row via margin-left: auto. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-hidden-controls {
    margin-left: auto;
    flex: 0 0 auto;
  }
  /* Shape stretch icons — heights reduced ~15% so the icon-buttons feel
     more compact on phone. Note the --square swatch is visually a tall
     rounded rectangle and the --tall swatch is visually a rounded
     square (icon visuals were swapped; underlying button actions are
     unchanged). Widths still come from the base rule. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-stretch-icon--square {
    height: 15px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-stretch-icon--tall {
    height: 12px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-stretch-icon--wide {
    height: 9px;
  }
  /* Skin-tones dropdown swatch already inline-flexes — just keep the
     trigger sized like the others. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-select--with-swatch {
    max-width: 180px;
  }
  /* Sub-options checkbox row (mix-only / mix-prefer) sits below the
     skin row — needs to take its own line, full width, no border. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-suboptions {
    flex-basis: 100%;
    margin-left: 0;
    padding: 0 14px 10px;
    justify-content: flex-start;
  }
  /* Dropdown menu on mobile: anchor to the trigger's right edge so it
     expands leftward into the available row space (the trigger sits on
     the right side of each row). Let the menu grow to fit its content
     instead of clipping at the base 240px max — so "OpenSymbols",
     "Noun Project", etc. read fully. Cap at viewport width minus a
     small gutter to keep it from running off-screen. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-dropdown-menu {
    left: auto;
    right: 0;
    min-width: 200px;
    width: max-content;
    max-width: calc(100vw - 32px);
  }
  /* ── Top edit toolbar: collapse always-visible sections into the same
     native-settings-list pattern used by the display-prefs panel above.
     Each section (Paint, Folders, Rows, Columns, Boards, Speak Bar, Text,
     Levels) becomes a single row inside the toolbar's outer card —
     section label on the left, controls on the right, hairline dividers
     between rows. Outer card chrome (gradient, ring, layered shadow) is
     intentionally retained from the desktop rule — it's the glassy pill
     the rest of the edit page uses. When More Settings is open the inner
     display-prefs panel sheds its own card chrome (rule below) and its
     rows just continue on the toolbar's glassy surface. ── */
  .md-board-detail-edit-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  /* When the More Settings panel is open, the toolbar wraps both halves
     and the display-prefs panel inside should shed its own card chrome —
     no nested borders / rounded corners / drop shadow. The toolbar's
     outer glassy card now provides the chrome for everything; the seam
     between the last top section (Text/Levels) and the first display-prefs
     row (Symbols) is just another hairline divider. The .--expanded
     modifier is added by the template at line 876 when display_prefs_open
     is true. */
  .md-board-detail-edit-toolbar--expanded .md-board-detail-edit-toolbar__display-prefs {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .md-board-detail--dark .md-board-detail-edit-toolbar--expanded .md-board-detail-edit-toolbar__display-prefs {
    background: none;
    border: none;
    box-shadow: none;
  }
  /* Each top-level section becomes one row. Strip per-section pill chrome
     (the outer toolbar already provides the card chrome) and add the same
     hairline divider the bottom panel uses between its rows. Strict 36px
     height with align-items: center vertically centers the (≤28px) inner
     controls with 4px clearance above/below. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    margin-left: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(27, 54, 93, 0.08);
    height: 40px;
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
  }
  /* The Layout section is special: it holds two child layout-items (Rows +
     Columns) instead of label+buttons. Make the wrapper layout-invisible
     so each child becomes its own row at the toolbar level. The wrapper's
     baseline `flex-direction: row` and pill chrome don't matter once the
     box is gone. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout {
    display: contents;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout > .md-board-detail-edit-toolbar__layout-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(27, 54, 93, 0.08);
    height: 40px;
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Section labels — adopt the .md-settings-sublabel tone (navy, 500
     weight, no uppercase tracking) so the rows visually match the bottom
     panel. Override the desktop section-label rule (#8a96a8 muted gray,
     bold, letter-spacing). The explicit `display: block` overrides the
     `@media (max-width: 820px)` rule below that hides every section-label
     for the wrap-layout (icon-only) treatment — at ≤640px we want labels
     back since the row layout puts them on a dedicated left column. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section > .md-board-detail-edit-toolbar__section-label,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout > .md-board-detail-edit-toolbar__layout-item > .md-board-detail-edit-toolbar__section-label {
    display: block;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #1B365D;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }
  /* Buttons cluster pushed to the right. Override the base
     `align-items: flex-end` (which makes buttons hug the row bottom and
     read as misaligned against the centered label) and allow wrapping so
     sections with multiple controls (Text: stepper + dropdown + 3-toggle;
     Paint: 3 controls) drop excess controls onto a wrapped second line
     instead of clipping. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section > .md-board-detail-edit-toolbar__section-buttons,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout > .md-board-detail-edit-toolbar__layout-item > .md-board-detail-edit-toolbar__section-buttons {
    margin-left: auto;
    flex: 0 1 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  /* Reset the display-prefs panel's outer flex sizing for the new column
     layout. The base rule sets `flex: 0 0 100%` so the panel takes a full
     row in the desktop wrap-flex toolbar; in column flex that resolves to
     "100% of main-axis height," which makes the panel try to fill the
     whole toolbar and overlap the sections (the bug that hid the More
     Settings rows in the previous attempt). Reset to natural sizing so
     the panel just stacks below the section rows when expanded. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__display-prefs {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Strip the bottom border on the visually-final row so the card edge
     stays clean. Covers the Levels section (when present) being last, the
     Text section being last (Levels not rendered), or the Columns
     layout-item being last (no Levels, no other section after Layout). */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section:last-of-type,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout:last-of-type > .md-board-detail-edit-toolbar__layout-item:last-child {
    border-bottom: none;
  }
  /* Dark-mode divider tint — match the existing display-prefs dark
     divider so both halves look like one component family. */
  .md-board-detail--dark .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section,
  .md-board-detail--dark .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout > .md-board-detail-edit-toolbar__layout-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  /* Swap Text Position above Text in the column-flex collapse. Defaults
     stay at order 0 for all other sections; explicit orders 1→4 keep the
     trio (Text Position → Text → Levels) plus the display-prefs panel
     anchored to the bottom of the toolbar in that exact sequence,
     regardless of their DOM order. Without ordering Levels and
     display-prefs explicitly here, they would float up among the order-0
     group and end up *above* Text Position. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--text-position {
    order: 1;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--text {
    order: 2;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--levels {
    order: 3;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__display-prefs {
    order: 4;
  }
  /* Dark-mode label tone: the navy color set above is invisible against the
     toolbar's dark gradient. Use the same pale-white the display-prefs
     panel uses for its sublabels so both halves of the toolbar read the
     same way in dark mode. */
  .md-board-detail--dark .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section > .md-board-detail-edit-toolbar__section-label,
  .md-board-detail--dark .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout > .md-board-detail-edit-toolbar__layout-item > .md-board-detail-edit-toolbar__section-label {
    color: rgba(255, 255, 255, 0.7);
  }
  /* Shrink every interior control to ≤28px so the row holds a strict 36px
     with 4px clearance. Mirrors the display-prefs panel's compact sizing
     above so both halves of the toolbar feel like one component family. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-board-detail-edit-toolbar__btn,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-board-detail-edit-toolbar__btn {
    height: 28px;
    min-height: 28px;
    padding: 2px 8px;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-board-detail-edit-toolbar__stepper,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-board-detail-edit-toolbar__stepper {
    height: 28px;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-board-detail-edit-toolbar__stepper-btn,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-board-detail-edit-toolbar__stepper-btn {
    width: 32px;
    height: 26px;
    min-width: 32px;
    min-height: 26px;
  }
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-settings-icon-btn,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-settings-icon-btn {
    width: 28px;
    height: 28px;
  }
  /* Override the base icongroup's explicit `height: 44px` with strict 28px
     so the gray pill hugs the row tightly. */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-settings-icongroup,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-settings-icongroup {
    height: 28px;
    padding: 0 2px;
  }
  /* Strict 28px on the dropdown trigger (Default font, etc.). */
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section .md-settings-select--trigger,
  .md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__section--layout .md-settings-select--trigger {
    height: 28px;
    min-height: 28px;
    padding: 0 32px 0 12px;
  }
  /* ── Skin-tones dropdown collapse ── At ≤640px (the same threshold the
     rest of the toolbar collapses at), hide the inline 9-swatch row and
     show a single-swatch trigger button instead. The popover anchors to
     the sublabel-wrap (`position: relative` set on the base
     `.md-settings-sublabel-wrap--skin` rule) and pops the swatches as a
     wrapped 3-per-row grid card so all 9 are visible at once.
     Selectors are scoped to `.md-board-detail-edit-toolbar__display-prefs`
     so this @media rule has higher specificity (0,3,0) than the base
     `.md-settings-skin-trigger.md-settings-select--trigger` rule (0,2,0)
     defined later in the file — without that boost the base would win
     the cascade due to source order and hide the trigger at mobile too. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-trigger.md-settings-select--trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Right padding reserves space for the chevron SVG that base
       .md-settings-select draws at `background-position: right 12px center`.
       Without the 32px right pad, the swatch sits over the chevron and
       hides it. */
    padding: 0 32px 0 10px;
    gap: 6px;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover {
    display: none;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 101;
    background: #fff;
    border: 1px solid rgba(27, 54, 93, 0.18);
    border-radius: 12px;
    /* Extra bottom padding (~20px) reserves space for the active-swatch
       label that absolute-positions below the swatch button. Without it,
       picking a swatch on the last row pushes the label past the popover
       border. Top/sides stay at 10px. */
    padding: 10px 10px 20px;
    box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18);
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }
  /* Inside the popover the swatch group must wrap to a 3-per-row grid
     instead of the desktop single-row pill, so all 9 swatches are visible
     without horizontal scrolling. Override the strict 28px height the
     general display-prefs rule above gives the inline group. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-group {
    display: inline-flex;
    flex-wrap: wrap;
    height: auto;
    padding: 6px;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
  /* Bump the swatch dots back up to 28px inside the popover — the 22px
     mobile inline-row size is for the cramped row, but the popover has
     space. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin {
    width: 28px;
    height: 28px;
  }
  /* Cells in the popover stay layout-invisible (display: contents
     inherited from the base rule) so the original wrap-flex swatch
     layout in `.md-settings-skin-group` is preserved exactly. The
     active cell's label is absolutely positioned so it overlays the
     layout below the swatch instead of pushing the next row down —
     when no swatch is selected the row gap is unchanged, and selecting
     a swatch never reflows the grid. The cell needs `position:
     relative` ONLY when its swatch is active; otherwise display:
     contents wins and the cell has no positioning context. We use
     `:has()` so position:relative also gates on the active state,
     keeping the rule scoped. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-cell:has(.md-settings-skin--active) {
    display: inline-block;
    position: relative;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-cell .md-settings-skin-cell__label {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 500;
    color: rgba(27, 54, 93, 0.85);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
  }
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-cell:has(.md-settings-skin--active) .md-settings-skin-cell__label {
    display: block;
  }
  /* The rightmost swatch (mix-prefer) sits flush against the popover's
     right edge — center-aligning a wide label like "Prefer these"
     pushes half of it past the rounded border. Anchor the label to the
     cell's right edge instead so it extends leftward into the popover. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-cell:has(.md-settings-skin--mix-prefer) .md-settings-skin-cell__label {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
  }
  .md-board-detail--dark .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-cell .md-settings-skin-cell__label {
    color: rgba(255, 255, 255, 0.7);
  }
  /* Suboptions visible inside the popover (they're hidden via display:none
     on the wrap when the popover is closed). Reset the display-prefs
     override that gives them flex-basis: 100% — inside the column-flex
     popover, normal block layout is what we want. */
  .md-board-detail-edit-toolbar__display-prefs .md-settings-skin-popover--open .md-settings-skin-suboptions {
    flex-basis: auto;
    padding: 0;
    width: 100%;
    justify-content: flex-start;
  }
  /* Dark-mode popover — match the bottom panel's dark surface. */
  .md-board-detail--dark .md-settings-skin-popover--open {
    background: #2a3344;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  }
}
/* (Removed: previously a media query at min-width 1201px added 140px of
   horizontal padding to force the display-prefs row to wrap sooner. The
   toolbar's centering uses justify-content:center so contents stay
   centered without any horizontal padding; section pills can extend to
   the toolbar edges. If display-prefs wrapping needs to be tuned again,
   prefer a max-width on the inner row over re-introducing padding.) */
/* Hide the vertical dividers inside the expanded display-prefs row — the
   per-section pills are already visually distinct and the dividers muddy
   the wrapped layout. */
.md-board-detail-edit-toolbar__display-prefs .md-board-detail-edit-toolbar__divider {
  display: none !important;
}

/* Expand/collapse toggle pinned to the bottom-right of the edit toolbar.
   Modern glass-pill chrome that matches the actions-cluster / toolbar
   aesthetic used across the edit page: soft gradient, subtle ring, layered
   shadow, backdrop blur. Chevron rotates 180° when open so it reads as a
   "collapse back" affordance. */
.md-board-detail-edit-toolbar {
  position: relative;
}

.md-board-detail-edit-toolbar__expand-btn {
  /* Pinned just under the toolbar's bottom edge, centered
     horizontally. `top: 100%` + 2px margin nudges the button slightly
     past the border so the toolbar's drop shadow has room to breathe.
     Translates -50% on X to center against `left: 50%`. The hover
     rule preserves both the X-centering and adds a 1px Y lift. */
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 4px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.12), 0 1px 2px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
}

.md-board-detail-edit-toolbar__expand-btn__label {
  letter-spacing: 0.01em;
}

.md-board-detail-edit-toolbar__expand-btn:hover,
.md-board-detail-edit-toolbar__expand-btn:focus-visible {
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.18), 0 1px 2px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
  /* Preserve the X-centering from the base rule (translateX(-50%))
     and add the 1px hover lift on top — without this, the button
     would jump to the toolbar's left edge on hover. */
  transform: translateX(-50%) translateY(-1px);
}

.md-board-detail-edit-toolbar__expand-btn svg {
  transition: transform 0.2s ease;
  color: #2A9D8F;
}

.md-board-detail-edit-toolbar__expand-btn--open svg {
  transform: rotate(180deg);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__expand-btn {
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.9) 0%, rgba(21, 26, 36, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__expand-btn svg {
  color: #8fe4df;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__expand-btn:hover,
.md-board-detail--dark .md-board-detail-edit-toolbar__expand-btn:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.md-board-detail-edit-toolbar__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(27, 54, 93, 0.1);
  margin: 0 10px;
}

/* Pure CSS can't detect which divider ends up at a wrapped row's edge, so
   dividers look awkward when any section wraps. Collapse them to zero-width
   and zero-margin in the main edit toolbar — the flex gap + section labels
   already provide visual separation. Keep the element in the DOM so the
   structure stays the same; just make it render nothing. */
.md-board-detail-edit-toolbar > .md-board-detail-edit-toolbar__divider {
  display: none;
}

.md-board-detail-edit-toolbar__spacer {
  flex: 1;
}

/* Dock row — Filter cluster pinned left, Settings/Save/Cancel pinned right.
   Negative top margin pulls the dock up to overlap the board header so it
   visually sits between the title and the toolbar below. */
.md-board-detail-edit-toolbar__actions-dock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -1rem 0 8px 0;
}

/* History + Filter sub-group inside the dock. Keeps those two clusters
   glued together as a single dock-level flex item — when the dock wraps
   on narrow viewports, they wrap together (and wrap *internally*
   together too if the combined width exceeds the row). */
.md-board-detail-edit-toolbar__actions-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Flush-left at desktop widths; centered at ≤640px (override below in
     the @media block) so the History + Categories/Search cluster sits
     in the middle of the wrapped mobile dock. */
  justify-content: flex-start;
  gap: 12px;
  /* Allow the group to shrink + grow within the dock so the search
     pill keeps room to breathe. */
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .md-board-detail-edit-toolbar__actions-group {
    justify-content: center;
  }
}
/* When no filter cluster is rendered (display-prefs mode), keep the actions
   cluster anchored right instead of centered. */
.md-board-detail-edit-toolbar__actions-dock > .md-board-detail-edit-toolbar__actions-cluster:only-child {
  margin-left: auto;
}

.md-board-detail-edit-toolbar__actions-cluster--filter {
  /* `flex: 0 1 auto` + `min-width: 0` lets the cluster shrink when the
     row tightens (so the search field doesn't force the Cancel/Save
     cluster to wrap to a new row), but `0` grow keeps it from
     stretching past its natural content width when there's plenty of
     room. The chain below (`__section`, `__section-buttons`,
     `__search`, `__search-input`) all get `min-width: 0` so the
     shrink propagates all the way to the `<input>`. */
  flex: 0 1 auto;
  min-width: 0;
}

/* `margin-right: auto` is only meaningful when the filter is a direct
   child of the dock (legacy layout) — it pushed the filter against the
   left while the actions cluster anchored right. Inside the new
   `__actions-group` (current layout), this auto-margin would override
   the group's `justify-content: center` and shove the filter left. */
.md-board-detail-edit-toolbar__actions-dock > .md-board-detail-edit-toolbar__actions-cluster--filter {
  margin-right: auto;
}

.md-board-detail-edit-toolbar__actions-cluster--filter .md-board-detail-edit-toolbar__section,
.md-board-detail-edit-toolbar__actions-cluster--filter .md-board-detail-edit-toolbar__section-buttons {
  min-width: 0;
  flex: 0 1 auto;
}

/* Narrow viewports: let the dock wrap and center the Save / Cancel cluster
   on its own line instead of pinning to the right edge. */
@media (max-width: 820px) {
  .md-board-detail-edit-toolbar__actions-dock {
    flex-wrap: wrap;
    justify-content: center;
  }
  .md-board-detail-edit-toolbar__actions-dock > .md-board-detail-edit-toolbar__actions-cluster:only-child,
  .md-board-detail-edit-toolbar__actions-dock > .md-board-detail-edit-toolbar__actions-cluster--filter {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Over-arching action cluster: visually groups the Settings gear + Save +
   Cancel into a single pill that sits above the toolbar as the global
   page-level actions. Uses a deeper contrast tone (lighter in light mode, darker
   in dark mode) plus a stronger ring so it reads as distinct from the per-section
   toolbar pills below. */
.md-board-detail-edit-toolbar__actions-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  /* Atmospheric depth: hairline border (.08 → .06) aligned with the
     unified light-mode chrome alpha; layered shadow stack — close
     4px definition, broad 16px+40px diffuse haze, mid 2px contact,
     and a strong inset top-edge highlight at .95 alpha that reads as
     bright glass. Same premium-SaaS surface technique used by the
     boards-page card chrome. */
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.1), 0 16px 40px rgba(27, 54, 93, 0.08), 0 2px 4px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.md-board-detail-edit-toolbar__actions-cluster .md-board-detail-edit-toolbar__section {
  /* Sections inside the cluster inherit the cluster's own pill — strip the
     per-section pill so we don't double-wrap. */
  margin-left: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__actions-cluster {
  /* Panel-surface tier (#172131) — kept in lockstep with the edit
     toolbar's main background so the cluster + toolbar continue to
     read as one elevated grouping (per the original pairing intent),
     just at the calmer surface tier the rest of the chrome now sits on. */
  /* Atmospheric depth on top of the panel-surface tier: a translucent
     white glass-veil (rgba(255,255,255, .04 → .015)) layered above the
     #172131 base gives the surface a subtle lit-from-above quality.
     Hard .22-alpha border drops to .06; layered shadows (mid 18px, broad
     60px ambient haze, close 2px contact) carry the separation; inset
     top-edge highlight + 1px outline keep the toolbar distinct against
     the raised center stage. Mirrors the rail dark formula. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), linear-gradient(180deg, #131A27 0%, #161F2E 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.md-board-detail-edit-toolbar__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  /* WCAG 2.5.5 AAA touch target — was 6×10 → 10×14/40 in pass 2 → 44 now. */
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}

.md-board-detail-edit-toolbar__btn:hover {
  background: #F0F4F8;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

.md-board-detail-edit-toolbar__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.md-board-detail-edit-toolbar__btn:disabled:hover {
  background: #fff;
  box-shadow: none;
}

.md-board-detail-edit-toolbar__btn--active {
  background: #7693B9;
  color: #fff;
  border-color: rgba(70, 80, 95, 0.3);
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-board-detail-edit-toolbar__btn--active:hover {
  background: #7693B9;
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
}

.md-board-detail-edit-toolbar__btn--save {
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  border-color: transparent;
}

.md-board-detail-edit-toolbar__btn--save:hover {
  background: linear-gradient(135deg, #238b7f, #3e74c0);
  box-shadow: 0 2px 10px rgba(42, 157, 143, 0.3);
}

.md-board-detail-edit-toolbar__btn--cancel {
  color: #6B7280;
  background: rgba(107, 114, 128, 0.08);
  border: 1px solid rgba(107, 114, 128, 0.18);
}

.md-board-detail-edit-toolbar__btn--cancel:hover {
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.2);
  box-shadow: 0 1px 4px rgba(192, 57, 43, 0.1);
}

.md-board-detail-edit-toolbar__btn--palette {
  gap: 4px;
  padding: 5px 8px;
}

.md-board-detail-edit-toolbar__palette-preview {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid rgba(27, 54, 93, 0.15);
  flex-shrink: 0;
}

.md-board-detail-edit-toolbar__label {
  font-size: 15px;
}

/* Two-line stacked label (e.g. "Display" / "Settings" on the settings-toggle
   button). Stacks its child spans vertically with a tight line-height so the
   whole label matches the single-line Save/Cancel button height. */
.md-board-detail-edit-toolbar__label--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.05;
  font-size: 15px;
  font-weight: 600;
}

/* Stepper control for rows/cols */
.md-board-detail-edit-toolbar__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: #fff;
}

.md-board-detail-edit-toolbar__stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 AAA touch target — was 30×30. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

/* Vertical divider between - and + stepper buttons. Applies to any
   stepper-btn that directly follows another stepper-btn OR follows a label
   span, so the minus / plus halves always feel distinct. */
.md-board-detail-edit-toolbar__stepper-btn + .md-board-detail-edit-toolbar__stepper-btn,
.md-board-detail-edit-toolbar__stepper-label + .md-board-detail-edit-toolbar__stepper-btn {
  border-left: 1px solid rgba(27, 54, 93, 0.18);
}

.md-board-detail-edit-toolbar__stepper-btn:has(+ .md-board-detail-edit-toolbar__stepper-label) {
  border-right: 1px solid rgba(27, 54, 93, 0.18);
}

.md-board-detail-edit-toolbar__stepper-btn:focus-visible {
  box-shadow: inset 0 0 0 3px #1B365D !important;
  border-radius: 8px;
}

.md-board-detail-edit-toolbar__stepper-btn:hover {
  background: #F0F4F8;
  color: #2A9D8F;
}

.md-board-detail-edit-toolbar__stepper-btn:active {
  background: #e2e8f0;
}

.md-board-detail-edit-toolbar__stepper-btn[disabled],
.md-board-detail-edit-toolbar__stepper-btn:disabled {
  cursor: not-allowed;
  background: transparent;
  color: rgba(27, 54, 93, 0.28);
  opacity: 0.6;
}

.md-board-detail-edit-toolbar__stepper-btn[disabled]:hover,
.md-board-detail-edit-toolbar__stepper-btn:disabled:hover {
  background: transparent;
  color: rgba(27, 54, 93, 0.28);
}

.md-board-detail-edit-toolbar__stepper-btn[disabled] svg,
.md-board-detail-edit-toolbar__stepper-btn:disabled svg {
  visibility: visible;
  opacity: 0.55;
}

.md-board-detail-edit-toolbar__stepper-label {
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #6B7280;
  border-left: 1px solid rgba(27, 54, 93, 0.1);
  border-right: 1px solid rgba(27, 54, 93, 0.1);
  line-height: 30px;
  user-select: none;
}

.md-board-detail-edit-toolbar__paint-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid;
}

/* Color wheel dot for custom color picker */
.md-board-detail-edit-toolbar__paint-dot--custom {
  background: conic-gradient(hsl(0, 80%, 60%), hsl(60, 80%, 55%), hsl(120, 70%, 45%), hsl(180, 75%, 45%), hsl(240, 70%, 60%), hsl(300, 70%, 55%), hsl(0, 80%, 60%)) !important;
  border: none !important;
}

/* Wrapper for custom paint button + popover */
.md-board-detail-paint-custom-wrap {
  position: relative;
  display: inline-flex;
}

/* Paint color dropdown */
.md-board-detail-edit-toolbar__paint-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(27, 54, 93, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(27, 54, 93, 0.1);
  padding: 8px;
  min-width: 220px;
}

.md-board-detail-edit-toolbar__paint-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.md-board-detail-edit-toolbar__paint-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target — was 7×10 (~19×18). */
  padding: 12px 14px;
  min-height: 44px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #46505F;
  cursor: pointer;
  white-space: nowrap;
}

.md-board-detail-edit-toolbar__paint-dropdown-item:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-board-detail-edit-toolbar__paint-dropdown-item--custom {
  grid-column: 1/-1;
}

.md-board-detail-edit-toolbar__paint-dropdown-footer {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  margin-top: 4px;
  padding-top: 4px;
}

/* Custom paint color picker popover (inside dropdown) */
.md-board-detail-paint-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 8px 28px rgba(27, 54, 93, 0.15);
  padding: 14px 16px;
  z-index: 100;
  min-width: 260px;
}

.md-board-detail-paint-picker--in-dropdown {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 8px 2px 4px;
  min-width: 0;
}

.md-board-detail-paint-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.md-board-detail-paint-picker__title {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.md-board-detail-paint-picker__close {
  /* WCAG 2.5.5 AAA touch target — was 28×28. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(27, 54, 93, 0.04);
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease;
}

.md-board-detail-paint-picker__close:hover {
  background: rgba(27, 54, 93, 0.1);
  color: #374151;
}

.md-board-detail-paint-picker__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-board-detail-paint-picker__preview {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  flex-shrink: 0;
}

.md-board-detail-paint-picker__input {
  width: 36px;
  height: 36px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}

.md-board-detail-paint-picker__hex {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  font-size: 15px;
  min-width: 0;
}

.md-board-detail-paint-picker__apply {
  /* WCAG 2.5.5 AAA touch target — was 8×16 (~16 tall). */
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 10px;
  border: none;
  /* WCAG AA fix — gradient was $brand-blue-grey → $brand-charcoal-blue
     (lighter stop fails 4.5:1 with white text). */
  background: linear-gradient(135deg, #1B365D, #374151);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.12s ease;
}

.md-board-detail-paint-picker__apply:hover {
  box-shadow: 0 2px 8px rgba(70, 80, 95, 0.3);
}

@media (max-width: 820px) {
  .md-board-detail-edit-toolbar {
    gap: 4px;
    padding: 8px;
  }
  /* Save / Cancel keep their word labels at every width — the rest of the
     toolbar buttons collapse to icon-only on narrow viewports. */
  .md-board-detail-edit-toolbar__btn:not(.md-board-detail-edit-toolbar__btn--save):not(.md-board-detail-edit-toolbar__btn--cancel) .md-board-detail-edit-toolbar__label {
    display: none;
  }
  .md-board-detail-edit-toolbar__section-label {
    display: none;
  }
  .md-board-detail-edit-toolbar__btn {
    padding: 6px 8px;
  }
}
/* ── Focus-visible styles for board-detail interactive elements ── */
.md-board-detail-collapse-btn:focus-visible,
.md-board-detail-sentence-bar__btn:focus-visible,
.md-board-detail-sentence-bar__icon-btn:focus-visible,
.md-board-detail-sentence-bar__tool-btn:focus-visible,
.md-board-detail-board-actions__btn:focus-visible,
.md-board-detail-edit-toolbar__btn:focus-visible,
.md-board-detail-edit-toolbar__paint-swatch:focus-visible,
.md-board-detail-sidebar__item:focus-visible,
.md-board-detail-quick-reveal__btn:focus-visible,
.md-board-detail-symbol-card:focus-visible,
.md-board-detail-paint-picker__apply:focus-visible,
.md-board-detail-paint-picker__close:focus-visible,
.md-board-detail-color-picker__swatch:focus-visible,
.md-modal-btn:focus-visible,
.la-btn:focus-visible,
.la-modal-close:focus-visible,
.la-find-button-result:focus-visible,
.la-find-button-cancel:focus-visible,
.md-pillnav__pill:focus-visible,
.md-pillnav-dropdown__trigger:focus-visible,
.md-pillnav-dropdown__option:focus-visible,
.md-caseload__action:focus-visible,
.md-caseload__action--corner-extras:focus-visible,
.md-btn:focus-visible,
.md-board-detail-actions-menu__item:focus-visible,
.md-board-layout-close:focus-visible,
.md-board-detail-info-btn:focus-visible,
.md-board-detail-nav-btn:focus-visible,
.md-board-detail-header__expand-link:focus-visible,
.md-board-detail-color-legend-toggle:focus-visible,
.md-board-detail-quick-toggle:focus-visible,
.md-board-detail-filter-chip__clear:focus-visible,
.md-board-detail-sidebar-toggle--stacked:focus-visible,
.md-board-detail-nav-stack__back:focus-visible,
.md-board-detail-phrase-builder__clear:focus-visible,
.md-board-detail-actions-toggle:focus-visible,
.md-board-detail-sentence-nav__btn:focus-visible,
.md-board-detail-color-legend__swatch:focus-visible,
.md-board-detail-symbol-card[role=button]:focus-visible,
.md-board-detail-inline-sidebar__item:focus-visible,
.md-board-detail-inline-sidebar__pin:focus-visible,
.md-board-detail-edit-toolbar__stepper-btn:focus-visible,
.md-board-detail-edit-toolbar__paint-dropdown-item:focus-visible,
.md-board-detail-share-dropdown__item:focus-visible,
.md-board-detail-add-dropdown__item:focus-visible,
.md-board-detail-color-picker__apply:focus-visible,
.md-board-detail-paint-picker__apply:focus-visible,
.md-board-detail-folder-dropdown__item:focus-visible,
.md-board-detail-panels-close-btn:focus-visible,
.md-board-detail-edit-btn:focus-visible,
.md-board-detail-suggestion:focus-visible {
  outline: none;
  /* Use the AA-compliant darker verdigris so the focus ring stays
     legible against the light dropdown / card backgrounds used by the
     per-button menus (Edit/Color/Stash/...). The lighter $brand-verdigris
     was failing 'light-on-light' against white menu surfaces. */
  box-shadow: 0 0 0 3px #1A7B7A, 0 0 0 5px rgba(26, 123, 122, 0.18);
}

/* Stepper variant with tighter label for settings */
.md-settings-stepper .md-board-detail-edit-toolbar__stepper-label {
  min-width: 44px;
  font-size: 14px;
}

/* Shared icon-group (pill row with icon buttons) */
.md-settings-icongroup {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.05);
}

/* Hidden row's controls cluster: groups the 3-button hidden-state
   icongroup with the two paint-mode toggle-btns into a single inline
   row so the desktop layout stays compact (label on top, all three
   controls in one row below) AND the mobile settings-list layout
   pushes the whole cluster to the right of the row (see the matching
   `margin-left: auto` rule inside the @media (max-width: 640px) block). */
.md-settings-hidden-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.md-settings-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #46505F;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.md-settings-icon-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1B365D;
}

.md-settings-icon-btn--active {
  /* Active / highlighted settings use the Save button's lighter blue-grey
     so selected settings read as primary-action chrome. Dark text on the
     mid-luminance blue-grey bg passes WCAG AA (#111A2E on #7693B9 ≈ 5.48:1). */
  background: #7693B9;
  border-color: rgba(70, 80, 95, 0.3);
  color: #111A2E;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-settings-icon-btn--active:hover {
  background: #7693B9;
  color: #111A2E;
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
}

.md-settings-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2A9D8F;
}

/* Mini button mockup for text-position indicator (fills the outer icon-btn) */
.md-settings-btnmock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 32px;
  height: 32px;
  padding: 3px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  box-sizing: border-box;
}

.md-settings-btnmock__img {
  width: 14px;
  height: 11px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 2px;
  flex-shrink: 0;
}

.md-settings-btnmock__text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.md-settings-btnmock__text--top {
  margin-bottom: auto;
}

.md-settings-btnmock__text--bottom {
  margin-top: auto;
}

.md-settings-btnmock__text--only {
  margin: auto;
  font-size: 14px;
}

/* Stretch-aspect icons */
.md-settings-stretch-icon {
  display: inline-block;
  background: currentColor;
  opacity: 0.85;
  border-radius: 2px;
}

/* Icon visuals only — the underlying button actions are unchanged.
   Left swatch (Square option): rendered as a tall version of the wide
                                swatch (same shape, rotated 90°).
   Middle swatch (Tall option): rendered as a rounded square.
   Right swatch (Wide option):  unchanged wide rectangle. */
.md-settings-stretch-icon--square {
  width: 18px;
  height: 15px;
}

.md-settings-stretch-icon--tall {
  width: 12px;
  height: 14px;
  border-radius: 3px;
}

.md-settings-stretch-icon--wide {
  width: 18px;
  height: 10px;
}

/* Labeled sub-group wrapper (for nested groups like skin-tones).
   Label sits absolutely above so it doesn't increase the group's
   flex-line height. */
/* Each sublabel-wrap stacks its sublabel above its control (dropdown,
   icon-group, swatches, etc). Flex-column + auto-wide so the wrap always
   fits both the label text AND the control — previously the label was
   absolutely-positioned and could overflow into neighbouring sections when
   the label text was wider than the control (e.g. "IMAGE BACKGROUND"
   crashing into "SKIN-TONES"). */
.md-settings-sublabel-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: max-content;
}

.md-settings-sublabel {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(27, 54, 93, 0.6);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Extra horizontal space between adjacent sublabel-wrap controls AND between
   a sublabel-wrap and an unlabeled preceding control (e.g. the Symbol library
   dropdown sits next to the Image Background sublabel-wrap). The 3px
   section-buttons gap is too tight once each control has its own label. */
.md-settings-sublabel-wrap + .md-settings-sublabel-wrap,
* + .md-settings-sublabel-wrap {
  margin-left: 12px;
}

.md-board-detail--dark .md-settings-sublabel {
  color: rgba(255, 255, 255, 0.6);
}

/* Mobile skin-tones dropdown — at ≤460px the inline swatch row doesn't fit
   in the 36px collapse layout, so a single-swatch trigger is rendered
   instead and the swatches pop as an absolute overlay. At desktop both
   trigger and popover-wrap are layout-invisible (display: none on the
   trigger, display: contents on the wrap), so the original inline layout
   is preserved with no visual change. Skin row's sublabel-wrap gets
   position: relative so the popover anchors to it. See the mobile
   positioning rules inside the @media (max-width: 460px) block. */
.md-settings-sublabel-wrap--skin {
  position: relative;
}

.md-settings-skin-popover {
  display: contents;
}

/* Chained selector — base .md-settings-select--trigger sets
   `display: inline-flex` with the same specificity as a single class, so
   chaining beats it without !important. Same approach in the @media
   override below. */
.md-settings-skin-trigger.md-settings-select--trigger {
  display: none;
}

.md-settings-skin--trigger-swatch {
  width: 18px;
  height: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(27, 54, 93, 0.18);
}

/* Skin tone swatches */
.md-settings-skin-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.05);
}

/* Per-swatch cell wrapper — layout-invisible at desktop so each button
   sits directly inside the inline-flex skin-group like before. The
   cell's hidden label is exposed only inside the ≤640px popover, where
   the cell becomes a flex column showing the label below the active
   swatch (`:has(.md-settings-skin--active)` rule in the @media block). */
.md-settings-skin-cell {
  display: contents;
}

.md-settings-skin-cell__label {
  display: none;
}

.md-settings-skin {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(27, 54, 93, 0.15);
}

.md-settings-skin:focus {
  outline: none;
}

.md-settings-skin:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .md-settings-skin:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* --active ring. !important + high specificity so nothing in the cascade
   (including the mix-prefer inset rings or any dark-mode override) can
   possibly knock it off when the active class is present. */
#within_ember .md-settings-skin-group .md-settings-skin.md-settings-skin--active {
  box-shadow: 0 0 0 4px #7693B9 !important;
}

/* Same ring inside the board-detail right panel — the skin grid
   there uses inline `display: grid` (not `.md-settings-skin-group`,
   because that class brings its own inline-flex pill layout with a
   44px height + padding that doesn't fit the 3-column grid). Without
   this rule the `--active` class was being applied to the button by
   the template but no visible ring painted. */
#within_ember .md-board-edit-right-panel__section-body .md-settings-skin.md-settings-skin--active {
  box-shadow: 0 0 0 4px #7693B9 !important;
  position: relative;
}

/* Checkmark overlay on the active swatch — pairs with the ring above
   so the selection reads at a glance even without the ring's color
   cue. Skipped for `--mix-only` and `--mix-prefer` because those
   buttons already render their own inline glyph (the existing
   checkmark / bar-chart icons in the template). The check itself is
   white with a soft shadow so it stays legible across every skin
   tone — including yellow Original and the white interior of Mix. */
#within_ember .md-board-edit-right-panel__section-body .md-settings-skin.md-settings-skin--active:not(.md-settings-skin--mix-only):not(.md-settings-skin--mix-prefer)::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* "Original" / default — Fitzgerald-neutral yellow of base emoji */
.md-settings-skin--default,
.md-settings-skin--original {
  background: #fcd34d;
}

.md-settings-skin--light,
.md-settings-skin-suboption__swatch.md-settings-skin--light {
  background: #fadcbc;
}

.md-settings-skin--medium-light,
.md-settings-skin--medium_light,
.md-settings-skin-suboption__swatch.md-settings-skin--medium_light {
  background: #e0bb95;
}

.md-settings-skin--medium,
.md-settings-skin-suboption__swatch.md-settings-skin--medium {
  background: #c68b5e;
}

.md-settings-skin--medium-dark,
.md-settings-skin--medium_dark,
.md-settings-skin-suboption__swatch.md-settings-skin--medium_dark {
  background: #a06a3b;
}

.md-settings-skin--dark,
.md-settings-skin-suboption__swatch.md-settings-skin--dark {
  background: #5c3a1e;
}

/* "Mix" — weighted random across all six tones */
.md-settings-skin--mix {
  background: repeating-linear-gradient(135deg, #fadcbc 0, #fadcbc 6px, #e0bb95 6px, #e0bb95 12px, #c68b5e 12px, #c68b5e 18px, #a06a3b 18px, #a06a3b 24px, #5c3a1e 24px, #5c3a1e 30px);
}

/* "Limit tones" + "Show preference" — glyph-bearing swatches */
.md-settings-skin--mix-only,
.md-settings-skin--mix-prefer {
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #374151;
}

.md-settings-skin--mix-only {
  border: 2px dashed rgba(27, 54, 93, 0.55);
}

.md-settings-skin--mix-prefer {
  box-shadow: 0 0 0 1px rgba(27, 54, 93, 0.25), inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(27, 54, 93, 0.55);
}

.md-settings-skin__glyph {
  line-height: 1;
  pointer-events: none;
}

.md-settings-skin__glyph-svg {
  display: block;
  pointer-events: none;
  color: #374151;
}

/* 6-tone sub-options row shown under the swatch row when mix_only / mix_prefer is active */
.md-settings-skin-suboptions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 2px;
  flex-wrap: wrap;
}

/* Mode label preceding the suboption swatches — clarifies whether the
   suboptions are restricting the mix ("Only:") or biasing it ("Prefer:"),
   since the mode is otherwise only readable from which row-above swatch
   is highlighted. Empty when no mix-* mode is active (the wrap is also
   not rendered then), so this is purely a layout slot. */
.md-settings-skin-suboptions__label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: #1B365D;
  line-height: 1.2;
  margin-right: 2px;
}

.md-board-detail--dark .md-settings-skin-suboptions__label {
  color: rgba(255, 255, 255, 0.7);
}

.md-settings-skin-suboption {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  margin: 0;
  box-shadow: 0 0 0 1px rgba(27, 54, 93, 0.15);
  transition: box-shadow 0.12s ease, opacity 0.12s ease;
}

.md-settings-skin-suboption:hover {
  box-shadow: 0 0 0 2px rgba(27, 54, 93, 0.35);
}

.md-settings-skin-suboption__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.md-settings-skin-suboption__swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Unchecked: slight dim overlay on the inner swatch span so the full tone
   stays visible against the dark toolbar bg. The overlay lives on the
   swatch span (not the label), which avoids clashing with the tooltip
   [data-tooltip]:hover::after pseudo that the label owns. */
.md-settings-skin-suboption__swatch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.12s ease;
}

.md-settings-skin-suboption__swatch {
  position: relative;
}

.md-settings-skin-suboption--checked .md-settings-skin-suboption__swatch::after {
  opacity: 0;
}

.md-settings-skin-suboption--checked {
  box-shadow: 0 0 0 2px #2A9D8F, 0 0 0 4px rgba(42, 157, 143, 0.25);
}

.md-settings-skin-suboption--checked .md-settings-skin-suboption__swatch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -70%) rotate(-45deg);
  pointer-events: none;
}

/* Compact select for symbol library / font style */
.md-settings-select {
  height: 44px;
  box-sizing: border-box;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background-color: #fff;
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234B5E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  max-width: 180px;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: all 0.15s ease;
}

.md-settings-select:hover {
  border-color: rgba(27, 54, 93, 0.22);
  background-color: rgba(27, 54, 93, 0.02);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08);
}

.md-settings-select:focus {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2), 0 2px 6px rgba(27, 54, 93, 0.08);
}

.md-settings-select:focus-visible {
  outline: 2px solid #2A9D8F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15) !important;
}
@media (forced-colors: active) {
  .md-settings-select:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.md-settings-select option {
  padding: 8px;
  font-weight: 500;
}

/* Custom scrollable dropdown (for font-style with many options) */
.md-settings-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.md-settings-select--trigger {
  display: inline-flex;
  align-items: center;
  text-align: left;
}

.md-settings-select__value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 128px;
}

/* Image Background trigger: pin width to the longest option ("High Contrast")
   so the control stays a constant size regardless of the current selection. */
.md-settings-select--img-bg .md-settings-select__value {
  min-width: 100px;
}

.md-settings-select--open {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2);
}

.md-settings-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}

.md-settings-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 101;
  min-width: 100%;
  max-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
  animation: md-settings-dropdown-in 0.15s ease-out;
}

@keyframes md-settings-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.md-settings-dropdown-menu li {
  list-style: none;
}

.md-settings-dropdown-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(27, 54, 93, 0.12);
  pointer-events: none;
}

.md-board-detail--dark .md-settings-dropdown-divider {
  background: rgba(255, 255, 255, 0.16);
}

.md-settings-dropdown-search-row {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

.md-settings-dropdown-search__input {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #374151;
  background: #F8F9FA;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-settings-dropdown-search__input:focus {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(44, 183, 176, 0.22);
}

.md-settings-dropdown-search__input::placeholder {
  color: rgba(27, 54, 93, 0.45);
}

.md-board-detail--dark .md-settings-dropdown-search-row {
  background: rgba(20, 28, 44, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.md-board-detail--dark .md-settings-dropdown-search__input {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.md-board-detail--dark .md-settings-dropdown-search__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.md-settings-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}

.md-settings-dropdown-item:hover {
  background: rgba(27, 54, 93, 0.06);
}

/* Active dropdown item — solid blue-grey matching the Save button so
   selected settings read as primary-action chrome. */
.md-settings-dropdown-item--active {
  background: #7693B9;
  color: #fff;
  font-weight: 600;
}

.md-settings-dropdown-item--active:hover {
  background: #7693B9;
  color: #fff;
}

.md-settings-dropdown-item--active svg {
  stroke: #fff !important;
}

.md-settings-dropdown-item__spacer {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.md-settings-dropdown-item__swatch.md-settings-skin,
.md-settings-select__swatch.md-settings-skin {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  pointer-events: none;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.md-settings-select__swatch.md-settings-skin {
  margin-right: 8px;
}

.md-settings-select--with-swatch {
  display: inline-flex;
  align-items: center;
}

.md-settings-dropdown-item--with-swatch {
  gap: 8px;
}

.md-settings-dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.md-settings-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(27, 54, 93, 0.2);
  border-radius: 4px;
}

.md-settings-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 54, 93, 0.35);
}

.md-settings-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

/* Single toggle buttons (aria-pressed) */
.md-settings-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #46505F;
  cursor: pointer;
  transition: all 0.12s ease;
}

.md-settings-toggle-btn:hover {
  border-color: rgba(42, 157, 143, 0.4);
  color: #1B365D;
}

.md-settings-toggle-btn--active {
  background: #7693B9;
  border-color: rgba(70, 80, 95, 0.3);
  color: #fff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-settings-toggle-btn--active:hover {
  background: #7693B9;
  color: #fff;
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
}

.md-settings-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2A9D8F;
}

/* Pill-shaped on/off switch — used by the Muted Colors toggle inside the
   board-detail edit toolbar and the create-board-new Preferences panel.
   Distinct from .md-settings-toggle-btn (which is a small icon button).
   Visual: 36x20 track + 14x14 thumb that translates from left to right
   when the switch is on. Track color shifts to brand verdigris when on. */
.md-settings-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.12);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}

.md-settings-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.md-settings-toggle--on {
  background: #2A9D8F;
  border-color: #2A9D8F;
}

.md-settings-toggle--on .md-settings-toggle__thumb {
  transform: translateX(16px);
}

.md-settings-toggle:hover {
  border-color: rgba(27, 54, 93, 0.32);
}

.md-settings-toggle--on:hover {
  border-color: #2A9D8F;
  background: rgb(37.6944723618, 140.9055276382, 128.3407035176);
}

.md-settings-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.35);
}

/* Save / cancel group at far right */
.md-board-detail-edit-toolbar__spacer {
  flex: 1;
  min-width: 8px;
}

.md-board-detail-edit-toolbar__btn--save {
  background: #2A9D8F;
  color: #fff;
  border-color: #2A9D8F;
}

.md-board-detail-edit-toolbar__btn--save:hover:not(:disabled) {
  background: rgb(36.6180904523, 136.8819095477, 124.675879397);
  border-color: rgb(36.6180904523, 136.8819095477, 124.675879397);
  color: #fff;
}

/* Dark-mode variant */
.md-board-detail--dark .md-settings-icongroup,
.md-board-detail--dark .md-settings-skin-group {
  background: rgba(255, 255, 255, 0.05);
}

.md-board-detail--dark .md-settings-icon-btn {
  color: rgba(255, 255, 255, 0.8);
}

.md-board-detail--dark .md-settings-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.md-board-detail--dark .md-settings-icon-btn--active,
.md-board-detail--dark .md-settings-icon-btn--active:hover {
  color: #111A2E;
  background: #7693B9;
  border-color: rgba(70, 80, 95, 0.3);
}

.md-board-detail--dark .md-settings-select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e1e5eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c6cdd8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.md-board-detail--dark .md-settings-select:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-settings-select:focus {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-settings-select option {
  background: #2d3a4d;
  color: #e1e5eb;
}

.md-board-detail--dark .md-settings-dropdown-menu {
  background: #2d3a4d;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-settings-dropdown-item {
  color: #e1e5eb;
}

.md-board-detail--dark .md-settings-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-settings-dropdown-item--active {
  background: #7693B9;
  color: #fff;
}

.md-board-detail--dark .md-settings-dropdown-item--active:hover {
  background: #7693B9;
  color: #fff;
}

.md-board-detail--dark .md-settings-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.md-board-detail--dark .md-settings-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.md-board-detail--dark .md-settings-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.md-board-detail--dark .md-settings-toggle-btn:hover {
  border-color: rgba(42, 157, 143, 0.6);
  color: #fff;
}

.md-board-detail--dark .md-settings-toggle-btn--active,
.md-board-detail--dark .md-settings-toggle-btn--active:hover {
  background: #7693B9;
  border-color: rgba(70, 80, 95, 0.3);
  color: #fff;
}

/* ── Edit-mode layout overrides ──────────────────────── */
/* Hide left sidebar, right panel, sentence bar, expand toggle, and Done Editing button */
/* Hide the original board page sidebar on board-detail */
.md-board-detail-layout ~ #sidebar,
.md-board-detail-layout #sidebar,
#within_ember:has(.md-board-detail-layout) #sidebar {
  display: none !important;
}

.md-shell--board-detail-edit {
  padding-top: 0 !important;
}

.md-shell--board-detail-edit .md-board-detail-main {
  /* Extra bottom padding (28px > the 24px corner radius) so the last
     button row clears the now-rounded bottom corners instead of being
     pinched against them. Top padding removed per request; sides 16px. */
  padding: 0 16px 28px !important;
  /* CRITICAL for the 15/70/15 grid: a grid item defaults to
     min-width:auto (= min-content). The board grid is wide, so without
     this the centre refuses to shrink to its 70% track, inflates, and
     pushes the 15% RIGHT panel off-screen (the "spilling outside the
     viewport" bug). min-width:0 lets the centre honour its track; the
     inner board grid then reflows/resizes to fit. */
  min-width: 0;
  overflow-x: hidden;
}

/* Tighter side padding (16 → 8) on smaller viewports so the grid
   keeps its full horizontal extent inside the narrower main column. */
@media (max-width: 1024px) {
  .md-shell--board-detail-edit .md-board-detail-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.md-shell--board-detail-edit .md-board-detail-sidebar {
  display: none !important;
}

.md-shell--board-detail-edit .md-board-detail-right-panel {
  display: none !important;
}

.md-shell--board-detail-edit .md-board-detail-sentence-row {
  display: none;
}

/* …except the edit-mode Speak Bar PREVIEW, which is the whole point
   of being visible while editing. Same specificity as the hide rule
   above, so this must stay AFTER it in source order to win. */
.md-shell--board-detail-edit .md-board-detail-sentence-row--preview {
  display: flex;
}

/* Drop the right-side divider (::after) on the preview bar — it's a
   static mockup, not the live speak bar (same treatment as the
   create-board-new preview). ::before (left) is already off globally. */
.md-board-detail-sentence-row--preview .md-board-detail-sentence-bar::after {
  display: none;
}

/* It's a static, aria-hidden mockup — nothing in it is clickable.
   pointer-events:none makes the buttons non-interactive AND stops
   :hover from ever triggering (no hover target), so the inherited
   hover/cursor styling on the speak/backspace/trash/chevron + home
   "buttons" no longer makes them look actionable. */
.md-board-detail-sentence-row--preview {
  pointer-events: none;
}

.md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__btn,
.md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__tool-btn,
.md-board-detail-sentence-row--preview .md-board-detail-home-btn {
  cursor: default;
}

/* At ≤1024px on the board-detail edit page, each expanded side
   panel claims horizontal real estate from the preview sentence
   bar — drop one rightmost chip per expanded panel so the bar's
   visible contents don't collide with the panel chrome. Scoped to
   `.md-shell--board-detail-edit` so this only affects the edit
   page's preview row (the live speak bar on the play/use page is
   untouched). `:has()` reads the panel-collapsed state off each
   side rail; the two single-panel rules each hide chip 1, and the
   combined-`:has()` rule hides chips 1–2 when BOTH panels are
   expanded so the total reads as "one chip hidden per expansion". */
@media (max-width: 1024px) {
  .md-shell--board-detail-edit:has(.md-board-edit-panel:not(.md-board-edit-panel--collapsed)) .md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__chip:last-of-type,
  .md-shell--board-detail-edit:has(.md-board-edit-right-panel:not(.md-board-edit-right-panel--collapsed)) .md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__chip:last-of-type {
    display: none;
  }
  .md-shell--board-detail-edit:has(.md-board-edit-panel:not(.md-board-edit-panel--collapsed)):has(.md-board-edit-right-panel:not(.md-board-edit-right-panel--collapsed)) .md-board-detail-sentence-row--preview .md-board-detail-sentence-bar__chip:nth-last-of-type(-n+2) {
    display: none;
  }
}
.md-shell--board-detail-edit .md-board-detail-collapse-btn {
  display: none;
}

/* Removed: `.md-shell--board-detail-edit .md-board-detail-edit-btn--active`
   was hiding the "Done Editing" LinkTo in edit mode. The LinkTo (and its
   surrounding `__actions` wrapper) is now omitted from the template via
   `{{#unless this.edit_mode}}`, so there's no element to hide and no
   empty wrapper consuming a flex slot in `header__row`. */
/* Collapse to single-column layout with no sidebar gaps */
.md-shell--board-detail-edit .md-board-detail-layout,
.md-shell--board-detail-edit .md-board-detail-layout:not(.md-board-detail-layout--collapsed) {
  grid-template-columns: 1fr !important;
}

.md-shell--board-detail-edit .md-board-detail-overlay-backdrop {
  display: none;
}

/* Save Changes button — matches the left edit panel's Back to Boards
   gradient (line ~66459) so the page's two primary CTAs read with the
   same visual weight. Slate-blue → charcoal-blue diagonal. */
.md-board-detail-edit-toolbar__btn--save {
  background: linear-gradient(135deg, #5A6A85, #46505F) !important;
  border: 1px solid rgba(70, 80, 95, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-board-detail-edit-toolbar__btn--save:hover:not(:disabled) {
  background: linear-gradient(135deg, #5A6A85, #46505F) !important;
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
}

/* ── Right panel ──────────────────────────────────────── */
.md-board-detail-right-panel {
  padding: calc(8px + 7rem) 4px 24px 20px;
  border-left: 1px solid rgba(27, 54, 93, 0.08);
  position: relative;
  transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}

.md-board-detail-right-panel--collapsed {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-left: none;
}

/* Overlay backdrop — only visible on small screens when panels are expanded */
.md-board-detail-overlay-backdrop {
  display: none;
}

/* Floating close button for expanded panels on small screens */
.md-board-detail-panels-close-btn {
  display: none;
}

/* Grid layout adjustment for collapsed panels */
.md-board-detail-layout--collapsed {
  grid-template-columns: 0px 1fr 0px;
  /* No gap — the side panels are 0px when collapsed, so a column gap only adds
     an empty inset on each side of the board (the purple page-bg strip). */
  gap: 0;
}

.md-board-detail-right-panel__section {
  margin-bottom: 32px;
}

.md-board-detail-right-panel__section:last-child {
  margin-bottom: 0;
}

.md-board-detail-right-panel__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #316F70;
  margin: 0 0 14px;
}

.md-board-detail-right-panel__empty {
  font-size: 16px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.72);
  margin: 0;
}

/* Recent phrases */
.md-board-detail-phrase-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-board-detail-phrase-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 20px;
  color: #1B365D;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background 0.12s ease;
}

.md-board-detail-phrase-list__item:hover {
  background: rgba(42, 157, 143, 0.08);
}

.md-board-detail-phrase-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-board-detail-phrase-list__item:nth-child(5n+1) .md-board-detail-phrase-list__dot {
  background: #2A9D8F;
}

.md-board-detail-phrase-list__item:nth-child(5n+2) .md-board-detail-phrase-list__dot {
  background: #f06a5b;
}

.md-board-detail-phrase-list__item:nth-child(5n+3) .md-board-detail-phrase-list__dot {
  background: #d4a84b;
}

.md-board-detail-phrase-list__item:nth-child(5n+4) .md-board-detail-phrase-list__dot {
  background: #7693B9;
}

.md-board-detail-phrase-list__item:nth-child(5n+5) .md-board-detail-phrase-list__dot {
  background: #8bc34a;
}

/* Weekly goals */
.md-board-detail-goals-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-board-detail-goals-list__item {
  margin-bottom: 16px;
}

.md-board-detail-goals-list__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.md-board-detail-goals-list__label {
  font-size: 19px;
  font-weight: 600;
  color: #1B365D;
}

.md-board-detail-goals-list__count {
  font-size: 17px;
  font-weight: 600;
  color: rgba(75, 78, 92, 0.6);
}

.md-board-detail-goals-list__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  overflow: hidden;
}

.md-board-detail-goals-list__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.md-board-detail-goals-list__fill--green {
  background: linear-gradient(90deg, #2A9D8F, #3db8a9);
}

.md-board-detail-goals-list__fill--red {
  background: linear-gradient(90deg, #f06a5b, #f0856e);
}

.md-board-detail-goals-list__fill--blue {
  background: linear-gradient(90deg, #4C86D8, #6ba0f0);
}

.md-board-detail-goals-list__fill--gold {
  background: linear-gradient(90deg, #d4a84b, #e0c06a);
}

/* Today's schedule */
.md-board-detail-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-board-detail-schedule-list__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.06);
}

.md-board-detail-schedule-list__item:last-child {
  border-bottom: none;
}

.md-board-detail-schedule-list__time {
  font-size: 19px;
  font-weight: 700;
  color: rgba(75, 78, 92, 0.6);
  min-width: 42px;
  flex-shrink: 0;
}

.md-board-detail-schedule-list__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-board-detail-schedule-list__name {
  font-size: 20px;
  font-weight: 600;
  color: #1B365D;
}

.md-board-detail-schedule-list__type {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.md-board-detail-schedule-list__type--clinical {
  background: rgba(42, 157, 143, 0.12);
  color: #2A9D8F;
}

.md-board-detail-schedule-list__type--practice {
  background: rgba(76, 134, 216, 0.12);
  color: #2860C9; /* WCAG AA fix. */
}

.md-board-detail-schedule-list__type--social {
  background: rgba(212, 168, 75, 0.12);
  color: #c49a3a;
}

/* ── Board-Detail: Empty, Hidden, Swapping button states ─ */
/* Empty cards: should communicate "available space" not "missing
   content". Subtle translucent wash (lets the board canvas tint
   through) + faint dot-grid texture for an empty-slot feel. No
   elevation, no hard outline — empty cells must not compete with
   real buttons for visual weight. Replaces the older medium-gray
   gradient + dashed outline + drop shadow, which read as a missing
   tile instead of a quiet placeholder. */
.md-board-detail-symbol-card--empty {
  opacity: 1;
  /* Two-layer background:
     1. Radial-gradient dot pattern repeated every 10px — gives a
        soft "empty container" texture cue.
     2. Translucent neutral tint below — barely there, just enough
        to read as a cell rather than a hole in the board.
     Both go in one `background:` shorthand so the !important wins
     against any earlier base rule reliably.
     Navy (dark) wash: correct when the cell sits on a LIGHT surface — i.e. EDIT
     mode (its board panel stays $surface-200) and the default. SPEAK mode
     darkens the canvas, so it OVERRIDES this with a white wash (rule below) so
     empty cells don't read as holes; dark mode does likewise. */
  background: radial-gradient(circle at 50% 50%, rgba(27, 54, 93, 0.1) 0.8px, transparent 1.2px) 0 0/10px 10px, rgba(27, 54, 93, 0.04) !important;
  box-shadow: none !important;
  outline: none !important;
}

.md-board-detail--dark .md-board-detail-symbol-card--empty {
  /* Dark mode: tone the dots and wash to white so empty cells read
     against the dark canvas as "available space" rather than
     "missing tile". Wash bumped 0.025 → 0.08 (was reading as nearly
     black against the dark board canvas, looking like a hole);
     0.08 lifts the cell visibly above the canvas without competing
     with real buttons. Dot alpha also bumped slightly so the
     texture stays perceptible against the lifted wash. */
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0.8px, transparent 1.2px) 0 0/10px 10px, rgba(255, 255, 255, 0.08) !important;
}

/* SPEAK mode (light): the board canvas (.md-board-detail-main) is the 15%-darker
   surface, so the default navy wash would make empty cells read as holes. Lift
   them with a white wash instead (mirrors dark mode). Scoped to speak +
   light so EDIT (light board panel) keeps the navy wash and dark mode keeps its
   own. !important + higher specificity beat the base rule's !important. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-symbol-card--empty {
  background: radial-gradient(circle at 50% 50%, rgba(27, 54, 93, 0.1) 0.8px, transparent 1.2px) 0 0/10px 10px, rgba(255, 255, 255, 0.5) !important;
}

.md-board-detail-symbol-card--no-color {
  outline-color: transparent !important;
}

.md-board-detail-symbol-card--empty .md-board-detail-symbol-card__placeholder-icon {
  opacity: 0.55;
}

.md-board-detail-symbol-card--empty .md-board-detail-symbol-card__alt-text {
  opacity: 0.55;
}

/* Hidden buttons — EDIT mode: frosted-glass treatment so the card stays
   visibly distinct from empty/blank cards while still reading as "muted".
   - Lays a translucent white diagonal gradient directly onto the card's own
     background stack (no overlay pseudo) so the inline btn.background_color
     color shows through as if behind etched glass.
   - Light desaturation keeps the hue but dulls it.
   - Dashed inner ring marks the "this button is hidden" state unambiguously
     even on neutral backgrounds. */
/* Specificity boosted via doubled class + !important on box-shadow so the
   4-sided inset bevel wins against the later dark-mode card rule
   (.md-board-detail--dark .md-board-detail-symbol-card) which would
   otherwise reset to just a 1-px top-edge highlight. */
.md-shell--board-detail-edit .md-board-detail-symbol-card.md-board-detail-symbol-card--hidden {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0.45) 100%);
  filter: saturate(0.6);
  outline: 2px dashed rgba(15, 23, 42, 0.35) !important;
  outline-offset: -4px;
  /* Inset bevel on all four edges — asymmetric dark/light for pressed-in look
     plus a 1-px white ring. `!important` forces the stack through any
     subsequent same-specificity card overrides (dark mode etc). */
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.12), 0 8px 24px rgba(27, 42, 65, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 3px 3px 6px rgba(15, 23, 42, 0.22), inset -2px -2px 4px rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
}

/* Eye-off badge rendered in the template for hidden buttons while in edit mode. */
.md-board-detail-symbol-card__hidden-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 4;
  /* Filter on the parent (saturate(0.25)) desaturates children — counter-rotate
     this badge back to full saturation so the black glyph + white halo stay crisp. */
  filter: saturate(4);
}

/* Hidden buttons — NON-EDIT (speak) mode: follow the user's hidden_buttons
   preference via the grid-level class. */
/* grid: keep slot, empty placeholder look */
.md-board-detail-grid--hidden-grid:not(.speak-edit) .md-board-detail-symbol-card--hidden {
  visibility: visible;
  background: rgba(255, 255, 255, 0.55) !important;
  outline: 1px dashed rgba(27, 54, 93, 0.25);
  outline-offset: -2px;
}

.md-board-detail-grid--hidden-grid:not(.speak-edit) .md-board-detail-symbol-card--hidden > * {
  visibility: hidden;
}

/* hint: visible but dimmed — useful to preview what's hidden */
.md-board-detail-grid--hidden-hint:not(.speak-edit) .md-board-detail-symbol-card--hidden {
  opacity: 0.5;
  visibility: visible;
}

/* hide: fully removed */
.md-board-detail-grid--hidden-hide:not(.speak-edit) .md-board-detail-symbol-card--hidden {
  visibility: hidden;
}

/* SPEAK MODE: in non-edit (speak) the `--hidden` class is applied ONLY
   to buttons the current Button Level filters out (btn.display_as_hidden
   from _make_btn — never the author `hidden` flag, which is edit-only).
   That vocabulary restriction must NOT be dimmed (hint) or shown as a
   placeholder (grid) to the communicator — it must be gone entirely,
   regardless of the user's hidden_buttons preference. Force it hidden in
   speak; edit / preview-levels keep the buttons visible via the
   `.md-shell--board-detail-edit` / `.speak-edit` rules below. */
.md-board-detail-grid.speak:not(.speak-edit) .md-board-detail-symbol-card--hidden {
  visibility: hidden !important;
}

.md-board-detail-grid.speak:not(.speak-edit) .md-board-detail-symbol-card--hidden > * {
  visibility: hidden !important;
}

/* Edit mode ALWAYS wins — a hidden button stays visible + editable while in
   edit mode regardless of the display preference, so the user can un-hide it. */
.md-shell--board-detail-edit .md-board-detail-symbol-card--hidden {
  visibility: visible !important;
  opacity: 1 !important;
  outline: none;
}

.md-shell--board-detail-edit .md-board-detail-symbol-card--hidden > * {
  visibility: visible !important;
}

/* "Hide completely" preview: paint hidden buttons almost-black so the user
   can see which positions will disappear on the live board, while the cell
   stays visible + editable for un-hiding. */
.md-shell--board-detail-edit .md-board-detail-grid--hidden-hide .md-board-detail-symbol-card--hidden {
  background: #0b1220 !important;
  --btn-bg: #0b1220 !important;
}

/* Preview Levels — hidden buttons look fully disabled.
   When `md-board-detail-grid--preview-levels` is on the grid, every
   button currently flagged hidden by the active preview level gets a
   uniform gray background, desaturated/dimmed image, dimmed label,
   and a not-allowed cursor. Higher specificity (`.md-shell--board-detail-edit
   .md-board-detail-grid--preview-levels …`) so it wins against the
   edit-mode override above. */
.md-shell--board-detail-edit .md-board-detail-grid--preview-levels .md-board-detail-symbol-card--hidden {
  background: rgba(140, 148, 160, 0.18) !important;
  --btn-bg: rgba(140, 148, 160, 0.18) !important;
  outline-color: rgba(140, 148, 160, 0.35) !important;
  cursor: not-allowed;
  opacity: 0.55 !important;
  filter: grayscale(0.75);
}

/* When a paint action is armed, every cell is a paint target — even
   cells the current preview level grays out. Restore pointer cursor so
   the affordance matches reality (clicks DO paint these cells). Higher
   specificity than the preview-levels rule above. */
.md-shell--board-detail-edit .md-board-detail-grid--paint-mode .md-board-detail-symbol-card--hidden,
.md-shell--board-detail-edit .md-board-detail-grid--paint-mode .md-board-detail-symbol-card {
  cursor: pointer;
}

.md-shell--board-detail-edit .md-board-detail-grid--preview-levels .md-board-detail-symbol-card--hidden img.symbol {
  filter: grayscale(1);
  opacity: 0.6;
}

.md-shell--board-detail-edit .md-board-detail-grid--preview-levels .md-board-detail-symbol-card--hidden .button-label {
  color: rgba(140, 148, 160, 0.85) !important;
}

.md-board-detail-symbol-card--swapping {
  outline: 3px dashed #2A9D8F;
  outline-offset: -3px;
  animation: md-board-detail-swap-pulse 0.6s ease infinite alternate;
}

@keyframes md-board-detail-swap-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.3);
  }
  to {
    box-shadow: 0 0 12px 4px rgba(42, 157, 143, 0.15);
  }
}
/* ── Board-Detail: Folder card — modern lifted folder ─ */
.md-board-detail-grid__cell--folder {
  padding-top: 10px;
  overflow: visible;
}

/* Folder back panel — elevated, solid with depth */
.md-folder-back {
  position: absolute;
  top: 6px;
  left: -2px;
  right: -2px;
  bottom: -3px;
  background: rgb(144.4545454545, 156.0909090909, 173.5454545455);
  border-radius: 14px 14px 20px 20px;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(27, 42, 65, 0.2), 0 8px 32px rgba(27, 42, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Shape-aware folder back: when the card on top is shrunk by a non-square
   Shape preference, inset the folder back so it sits behind the card
   instead of peeking out around it. Card sizing rules above use
   width: 66.6667% (tall) or height: 66.6667% (wide), centered along the
   shrunk axis — so the folder back needs to inset by 16.6667% on the
   matching axis (= half the empty space on each side) and keep the
   original ±2/3px chrome overhang. */
.md-board-detail-grid--shape-tall .md-folder-back {
  left: calc(16.6667% - 2px);
  right: calc(16.6667% - 2px);
}

/* Folder tab is position:absolute inside .md-folder-back (its containing
   block is the folder back, not the cell). So the base `left: 10px` is
   already 10px from the folder back's left edge — which we've inset for
   shape-tall above. No tab override needed. */
/* Selectors below mirror the chunkier-folder rule near line 56269 so
   they reach the same specificity (0,5,0 vs the chunkier rule's 0,4,0)
   — without this, the default-folder-mode rule that sets top:8px and
   bottom:-3px overrides our shape-wide computed values.
   Card top from cell border-top = padding-top (12) + (cell-content-box × 16.67%)
                                  = 12 + (100% - 12px) × 0.16667
   Folder back top should be 6px ABOVE card top (creates the tab gap):
                                  = (100% - 12px) × 0.16667 + 6px
   Folder back bottom should be 3px BELOW card bottom (overhang):
                                  = (100% - 12px) × 0.16667 - 3px
   The folder tab is position:absolute INSIDE folder back — its base
   `top: -6px` is already relative to folder back, so it auto-tracks
   the folder back's top edge. No tab override needed for shape-wide. */
.md-board-detail-grid.md-board-detail-grid--shape-wide:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-back,
.md-board-detail-grid--shape-wide.md-board-detail-grid--folder-tab-labels .md-folder-back,
.md-board-detail-grid--shape-wide.md-board-detail-grid--folder-colored-corner .md-folder-back {
  top: calc((100% - 12px) * 0.16667 + 6px);
  bottom: calc((100% - 12px) * 0.16667 - 3px);
}

/* Folder tab — same fill as the folder back so the two read as one
   continuous shape rather than two stacked pieces. The shared color
   plus matching rounded corners on the top edges (5px tab + 14px
   back) creates a single seamless folder silhouette. */
.md-folder-tab {
  position: absolute;
  top: -4px;
  left: 10px;
  width: 40%;
  height: 6.6px;
  background: rgb(144.4545454545, 156.0909090909, 173.5454545455);
  border-radius: 5px 5px 0 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
  overflow: hidden;
}

/* Grid ROW gap (the purple gap in devtools) in Show-Labels-on-Tab: fixed 4px.
   Column gap is untouched (keeps the user's button spacing). Two-class selector
   so it beats the ≤768px `.md-board-detail-grid:not(--folder-colored-corner)
   { gap: 8px }` shorthand (also 2-class), which would otherwise reset row-gap
   to 8px on small screens. */
.md-board-detail-grid.md-board-detail-grid--folder-tab-labels {
  row-gap: 4px !important;
}

.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  pointer-events: auto;
}

/* Tab label — hidden by default */
.md-folder-tab__label {
  display: none;
  color: #fff;
  font-size: clamp(8px, 1.2vw, 14px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  /* Full tab width + centered (mirrors __label-input) so the shrink-to-fit
     JS measures against the available tab width, not the text's own width —
     otherwise a label that already fits gets over-shrunk. */
  width: 100%;
  text-align: center;
  font-family: var(--bd-button-font);
  text-transform: var(--bd-button-text-transform);
}

/* Folder tab label text size preferences */
/* Folder tab label size driven by preference variable */
.md-folder-tab__label {
  font-size: var(--bd-button-text-size, 18px);
}

/* Toggle: folder labels on tab — chrome only (width / padding /
   flex centering / radius). Geometry (top + height) is supplied
   by the folder-tab-geometry mixin further down, called with 16px.
   Removing the prior hardcoded height: 26.4px !important and
   top: -22px so the mixin's values take effect. Tab interior
   padding tightened to 2px 8px so a 14px label still fits inside
   the now-shorter (visible 16px) tab. */
.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  width: 90%;
  /* 5% each side keeps the 90%-wide tab centered on the folder back
     (overrides the base .md-folder-tab left: 10px). */
  left: 5%;
  padding: 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 10px 0 0;
}

.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  cursor: pointer;
}

.md-board-detail-grid--folder-tab-labels .md-folder-tab__label,
.md-board-detail-grid--folder-tab-labels .md-folder-tab__label-input {
  display: block;
}

.md-folder-tab__label-input {
  display: none;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: clamp(8px, 1.2vw, 14px);
  font-weight: 600;
  font-family: var(--bd-button-font);
  text-transform: var(--bd-button-text-transform);
  text-align: center;
  width: 100%;
  padding: 0;
  cursor: text;
}

.md-folder-tab__label-input:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.md-folder-tab__label-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Folder tab label input text size preferences */
.md-folder-tab__label-input {
  font-size: var(--bd-button-text-size, 18px);
}

/* In tab-labels folder mode + symbol_background_black: the folder
   front is forced white (line 55493 above), so the tab needs a light
   background and dark label to read well — mirroring how the symbol
   card label shows in dark navy on the default "Colored" bg setting.
   Both modifier classes live on the SAME .md-board-detail-grid
   element, so the selectors are concatenated (no descendant space). */
.md-board-detail-grid--folder-tab-labels.symbol_background_black .md-folder-tab {
  background: #fff !important;
}

.md-board-detail-grid--folder-tab-labels.symbol_background_black .md-folder-tab__label,
.md-board-detail-grid--folder-tab-labels.symbol_background_black .md-folder-tab__label-input {
  color: #1B365D !important;
}

.md-board-detail-grid--folder-tab-labels.symbol_background_black .md-folder-tab__label-input::placeholder {
  color: rgba(27, 54, 93, 0.5) !important;
}

/* Folder faces follow the symbol_background_black mode — the folder
   front normally forces white (line ~58719) so it stands out from the
   colored folder back, but in black-bg mode users expect the face to
   match every other button (black fill + white/yellow label). Drop the
   forced white so the base .symbol_background_black .md-board-detail-symbol-card
   rule (line ~54993) wins and paints the face black. Labels and
   alt-text then inherit the standard symbol_background_black /
   .high_contrast treatment — no folder-specific overrides needed. */
.symbol_background_black .md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
  background-color: #000 !important;
}

/* High-contrast folder icons: the folder badge (small corner chip)
   and the placeholder folder SVG (shown on the face when the folder
   has no image) both default to a Fitzgerald-tinted color that
   disappears on a black/high-contrast face. Override to the same
   high-contrast yellow used by labels (line ~55007) so the icon
   chrome reads with the rest of the high-contrast palette. The
   placeholder background tile drops its colored Fitzgerald wash
   for a translucent white wash that pops on the black face. */
.high_contrast .md-board-detail-grid__cell--folder .md-board-detail-symbol-card__folder-placeholder {
  color: #f8fc03 !important;
}

.high_contrast .md-board-detail-grid__cell--folder .md-board-detail-symbol-card__folder-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f8fc03 !important;
}

.high_contrast .md-board-detail-symbol-card--folder .md-board-detail-symbol-card__image--placeholder {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* High-contrast + tab-labels mode: the folder tab label can render
   over light Fitzgerald-colored backgrounds (yellow/pink/rose), where
   the high-contrast yellow text loses contrast. A 1px black outline
   (four corner shadows) plus a soft drop shadow gives the text a
   dark "halo" that keeps WCAG contrast on any background — light or
   dark — without changing the text color itself. */
.md-board-detail-grid--folder-tab-labels.high_contrast .md-folder-tab__label,
.md-board-detail-grid--folder-tab-labels.high_contrast .md-folder-tab__label-input {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 3px rgba(0, 0, 0, 0.6);
}

.md-board-detail-grid--folder-tab-labels.high_contrast .md-folder-tab__label-input::placeholder {
  text-shadow: none;
}

.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder {
  justify-content: flex-end;
}

.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
  flex: 0 0 auto !important;
  height: calc(100% - 18px);
  /* Pull the folder face up 8px when Show Labels on Tab is active so
     the card top edge tucks closer under the label tab instead of
     leaving a visible gap. Math: prior translateY(0.7rem) = ~11.2px
     down → 0.7rem − 8px = ~3.2px down. Lift becomes proportional to
     the new 16px tab geometry. */
  transform: translateY(calc(0.7rem - 8px));
}

/* Non-folder buttons in tab-labels mode match the folder front dimensions so
   the grid rows line up with the folder cards. Folder cells have padding-top
   12px (reserved for the tab), so non-folder cells need the same reserve
   before the calc(100% - 18px) height math produces the same value. */
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
  padding-top: 10px;
  justify-content: flex-end;
}

.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) > .md-board-detail-symbol-card {
  flex: 0 0 auto !important;
  height: calc(100% - 18px);
  transform: translateY(-0.15rem);
}

.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder .md-board-detail-symbol-card__label,
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder .md-board-detail-symbol-card__label-input {
  display: none;
}

/* Colored corner tab variant — small colored triangle in top-right corner */
.md-board-detail-grid--folder-colored-corner .md-folder-back {
  display: none;
}

.md-board-detail-grid--folder-colored-corner .md-board-detail-grid__cell--folder {
  padding-top: 0;
}

.md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card--folder {
  position: relative;
  overflow: hidden;
  /* Raised-glass-button appearance for folders in colored-corner
     mode — the small corner indicator alone didn't carry enough
     "this is a folder" visual weight, so the folder card itself
     now reads as a tinted-glass tile elevated off the board
     canvas. Layered translucent white gradients (top sheen +
     center pearl) overlay the inline categorical background-color
     so the card stays color-identified while reading as glass.
     Multi-layer outer drop shadows give the raised elevation;
     inset top highlight + inset rim soften the edge into a
     gradient transition rather than a hard color slab. !important
     on background-image and box-shadow so this stack wins over
     the soft-borders rule (at app.scss:62979) when both modes are
     active — soft-borders' !important would otherwise clobber a
     non-important background-image declaration here. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.05) 100%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.05) 80%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.12), 0 6px 18px rgba(27, 54, 93, 0.1), 0 14px 32px rgba(27, 54, 93, 0.06), inset 0 0 18px rgba(27, 54, 93, 0.1), inset 0 2px 6px rgba(255, 255, 255, 0.7) !important;
}

.md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card--folder::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* Fan-shaped corner: a symmetric quarter-circle wedge whose curved
     edge fans inward toward the button center. Square footprint +
     full bottom-left radius = a clean quarter-disc "fan" in the
     top-right corner. */
  width: 20px;
  height: 20px;
  /* Glass-modern surface treatment — replaces the previous flat
     solid quarter-disc. The categorical color (--btn-border with
     --btn-bg fallback, matching the rest of the grid) is now the
     base layer; a single bright top-right radial highlight gives
     the wedge a tinted-glass reading. opacity:0.92 lets a hint of
     the button face show through so the corner reads as
     semi-transparent — same vocabulary as the soft-borders glass
     effect at app.scss:62979. Depth at the inner curve is now
     produced by an INSET box-shadow rather than a dark radial
     gradient; a wide radial overlay reads as a muddy interior
     blob on light bases (yellow/mint) because the dark color is
     hue-blind, while a small directional inset shadow with crisp
     falloff reads as an edge shadow on every hue.

     Shadow stack (2026-05-26 v3): the previous version layered an
     OUTER drop (`-1px 2px 4px rgba(0,0,0,0.10)`) for elevation
     plus an inset 4px-blur depth for inner-curve shadow. Both
     blurs read clean on dark categorical colors (purple, deep
     orange) because black-over-dark = small luminance delta;
     same blurs on light categorical colors (yellow, mint) =
     high-contrast dark smudge bleeding ~4px into the button face,
     reading as "blurry." Replaced with: NO outer drop (the corner
     sits flush against the button face — the rim highlight +
     0.92 opacity carry the glass cue without needing elevation)
     and a tighter inset depth (2px blur, .14 alpha) so the
     inner-curve shadow stays a crisp line on every hue. */
  background-color: var(--btn-border, var(--btn-bg, currentColor));
  background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0) 65%);
  border-radius: 0 0 0 100%;
  box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.4), inset 1px -1px 2px rgba(0, 0, 0, 0.14);
  opacity: 0.92;
  /* 10% chroma reduction so the colored corner reads as a
     support cue rather than competing with the category label
     for primary attention. Edge geometry unchanged — only the
     in-color intensity is muted. */
  filter: saturate(0.9);
  z-index: 3;
  pointer-events: none;
}

/* On larger screens (tablet-landscape / desktop and up) bump the
   corner-tab footprint by 20% (20px → 24px). At narrower widths the
   card itself is smaller and 20px reads as a proportional corner;
   at 1024px+ the card grows but the fixed 20px corner became visually
   underweight relative to the rest of the button face. 1024px is the
   project's canonical tablet-landscape / desktop threshold (matches
   other board-detail responsive rules nearby). */
@media (min-width: 1024px) {
  .md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card--folder::after {
    width: 24px;
    height: 24px;
  }
}
/* On narrow screens (≤640px — phone-portrait threshold), make the
   corner tabs ~50% more transparent (opacity 0.92 → 0.46). At small
   viewport widths the cards are denser and the categorical-color
   wedge starts to compete visually with the symbol image; halving
   the opacity keeps it as a quiet folder cue without dominating the
   tile. Larger viewports retain the standard 0.92 from the base
   rule. */
@media (max-width: 640px) {
  .md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card--folder::after {
    opacity: 0.46;
  }
}
/* At <=500px viewport height (short / landscape), shrink the colored-corner
   folder tab (20px -> 15px, width + height) so it stays proportional on the
   shrunk short-screen board-detail layout. Placed after the base and the
   min-width:1024 rule so it wins at short heights regardless of width. */
@media (max-height: 500px) {
  .md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card--folder::after {
    width: 15px;
    height: 15px;
  }
}
.md-board-detail-grid--folder-colored-corner .md-board-detail-symbol-card__folder-badge {
  display: none;
}

/* (Removed: previously the colored-corner folder style auto-painted
   the folder face with var(--btn-bg) in edit mode, plus a set of
   bg-preference sub-overrides to undo that paint when the user had
   chosen a non-colored symbol background. Now redundant because the
   standalone "Colored Folder Front" toggle in the Folders section
   handles painting the face on demand — independently of the folder
   display style. The base folder rule (#fff face) and the general
   symbol_background_* rules cover all other cases.) */
/* Folder display style dropdown */
.md-board-detail-folder-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(27, 42, 65, 0.18);
  padding: 4px;
  min-width: 200px;
}

.md-board-detail-folder-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target — was 8×12 (~16 tall). */
  padding: 12px 14px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 15px;
  font-weight: 500;
  color: #46505F;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  border-radius: 6px;
}

.md-board-detail-folder-dropdown__item:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-board-detail-folder-dropdown__item--active {
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  font-weight: 600;
}

/* ── New folder-style picker (right-edit-panel Folders section) ──
   Replaces the prior dropdown + icon-toggle pair with a labeled
   radio list. Each option is a full-width row with an icon, label,
   and a checkmark that's only visible when active. Lives directly
   in the panel body — no dropdown chrome. */
.md-folder-style-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-folder-style-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: #46505F;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-folder-style-option:hover,
.md-folder-style-option:focus-visible {
  background: rgba(27, 54, 93, 0.05);
  border-color: rgba(27, 54, 93, 0.15);
  color: #1B365D;
  outline: none;
}

.md-folder-style-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2A9D8F;
  flex-shrink: 0;
}

.md-folder-style-option__label {
  flex: 1 1 auto;
}

.md-folder-style-option__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Stays in flow so the label column stays the same width whether
     or not the check is visible — color goes transparent when the
     row isn't selected. */
  color: transparent;
  flex-shrink: 0;
  width: 18px;
}

.md-folder-style-option--active {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.45);
  color: #1B365D;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.1);
}

.md-folder-style-option--active .md-folder-style-option__check {
  color: #2A9D8F;
}

.md-folder-style-option--active:hover,
.md-folder-style-option--active:focus-visible {
  background: rgba(42, 157, 143, 0.14);
  border-color: rgba(42, 157, 143, 0.6);
  color: #1B365D;
}

/* "Colored Folder Front" toggle row — reuses the .nb-toggle__switch
   chrome from create-board-new so every on/off switch in the app
   reads the same. The off/on text labels sit on either side of the
   switch and dim when not the active state. */
.md-folder-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

.md-folder-toggle-row__label {
  font-size: 13px;
  font-weight: 600;
  color: #46505F;
  flex: 1 1 auto;
}

.md-folder-toggle-row__control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.md-folder-toggle-row__state {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 54, 93, 0.4);
  transition: color 0.15s ease;
}

.md-folder-toggle-row__state--active {
  color: #1B365D;
}

/* Customize Menu (right-panel "Customize Menu" accordion). Modern
   grouped-card design: each section ("Board", "Buttons", etc.)
   sits inside its own subtle card with the section name as a small
   uppercase label above. Inside each card every row pairs a leading
   item label with a trailing Hide / Show segmented pill — the
   active side fills with a colored chip, the inactive side reads
   as muted neutral text. The whole pill is a single rounded
   surface so it reads as one control, not three separate elements
   with external labels (replaces the older external-HIDE / switch /
   external-SHOW layout). */
.md-customize-menu {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 6px;
}

.md-customize-menu__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-customize-menu__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(27, 54, 93, 0.5);
  padding: 0 4px;
}

.md-customize-menu__group-card {
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.07);
  border-radius: 14px;
  padding: 4px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(27, 54, 93, 0.04);
}

/* Each row is itself the clickable checkbox: leading custom box
   (filled verdigris with white check when "Show", muted hollow
   when "Hide") + item label + trailing tiny state hint ("Show" /
   "Hidden"). The whole row is the touch target so the label
   itself is part of the hit area — gives the cramped right panel
   room to read long labels like "Switch Communicators" without
   wrapping under the control. */
.md-customize-menu__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  font-family: inherit;
}

.md-customize-menu__row + .md-customize-menu__row {
  border-top: 1px solid rgba(27, 54, 93, 0.06);
}

.md-customize-menu__row:hover {
  background: rgba(27, 54, 93, 0.04);
}

.md-customize-menu__row:focus-visible {
  outline: 2px solid #2A9D8F;
  outline-offset: -2px;
}

.md-customize-menu__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(27, 54, 93, 0.3);
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.md-customize-menu__row--checked .md-customize-menu__check {
  background: linear-gradient(180deg, #2A9D8F 0%, #1A7B7A 100%);
  border-color: #1A7B7A;
  box-shadow: 0 1px 2px rgba(26, 123, 122, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.md-customize-menu__label {
  font-size: 14px;
  font-weight: 600;
  color: #46505F;
  flex: 1 1 auto;
  line-height: 1.25;
}

/* State icon badge — compact square chip to the right of the
   label holding just an eye (Shown) or eye-with-slash (Hidden)
   glyph. The right panel is too narrow to fit text pills next to
   long labels like "Switch Communicators"; the icon-only form
   keeps the column tight without losing the state cue. Hover /
   focus rings come from the parent row so this stays a passive
   indicator, not its own focus target. */
.md-customize-menu__check-hint {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.md-customize-menu__check-hint--shown {
  background: rgba(42, 157, 143, 0.14);
  color: #1A7B7A;
  border-color: rgba(42, 157, 143, 0.3);
}

.md-customize-menu__check-hint--hidden {
  background: rgba(27, 54, 93, 0.06);
  color: rgba(27, 54, 93, 0.55);
  border-color: rgba(27, 54, 93, 0.14);
}

/* When the "Colored Folder Front" toggle is on, paint the folder card
   face with the button's Fitzgerald color (var(--btn-bg)). Applies in
   any folder display style (default / tab_labels / colored_corner) and
   in any mode (speak / edit). Higher specificity (0,2,1) beats the
   base folder-front rule (0,1,1). */
.md-board-detail-grid--folder-colored-face .md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
  background: var(--btn-bg, #fff) !important;
}

/* In default folder mode, non-folder cells pick up the same 12px top reserve
   the folder cells use for their tab — so non-folder buttons render the same
   visual height as the folder fronts, keeping the grid rows aligned. */
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
  padding-top: 10px;
}

/* ── Folder geometry — single source of truth ────────────────────
   Takes a visible-tab height (the part that pokes above the folder
   back) and derives every paired value so the four pieces stay
   consistent: tab visible / tab element height / back top offset /
   cell padding-top (both folder and non-folder cells, so card tops
   stay flush across the grid row).

   Formula:
     visible:        $v           (user-chosen visible tab height)
     tab height:     $v + 4px     (4px hidden behind back as buffer)
     tab top:        -$v          (negative offset from back top)
     back top:       $v + 2px     (2px breathing room above tab)
     cell padding-top: ($v + 2) + 4 = $v + 6px
                                  (back top + 4px "lip" above card)

   To retune any mode, call with a new $v value — every dependent
   value updates automatically. Non-mixin overrides further down
   (tab width, tab padding for the label, card translateY in
   tab-labels mode) are left intact since they're mode-specific
   chrome, not geometry. */
/* Default mode (no tab-labels, no colored-corner): 10px visible
   tab — small protrusion, mostly invisible chrome. */
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) {
  /* Default folder view: button top padding 14px (back-top 12px + 2px)
     instead of the prior 16px (+4px). Scoped to this invocation only —
     the Show-Labels-on-Tab variant below keeps its 4px default. */
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-back {
  top: 12px;
  bottom: -3px;
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-tab {
  top: calc(4px - 12%);
  height: 12%;
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell--folder {
  padding-top: 14px;
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
  padding-top: 14px;
}

/* Larger boards on smaller viewports: at ≤1024px, for the DEFAULT
   folder type only (no tab-labels, no colored-corner — mirrors the
   selector above), halve the visible folder tab height (10px → 5px,
   geometry kept proportional via the same mixin so folder-back / cell
   padding stay aligned). A shorter tab reclaims vertical space when
   the grid is tight. Tab WIDTH is unchanged — it stays at the base 1/3
   (33.3333%) of the backdrop at every breakpoint. */
@media (max-width: 1024px) {
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-back {
    top: 7px;
    bottom: -3px;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-tab {
    top: calc(4px - 12%);
    height: 12%;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell--folder {
    padding-top: 9px;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
    padding-top: 9px;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) {
    /* Tab width intentionally NOT overridden here — the base 1/3 (33.3333%)
       width holds at this breakpoint so the tab stays 1/3 of the backdrop. */
  }
}
/* ≤1024px and below: tighten board-detail button vertical padding to
   2px (from the base 4px) to recover grid space on smaller viewports
   for larger boards. Horizontal padding is left at 4px. Scoped to the
   board-detail grid (specificity above the base .md-board-detail-symbol-card
   rule) so other symbol-card contexts (color legend, previews) are
   unaffected. */
@media (max-width: 1024px) {
  .md-board-detail-grid .md-board-detail-symbol-card {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}
/* Show Labels on Tab mode: 18px visible tab — taller than default
   to give the label text inside room to render. The label rules +
   tab padding / width / flex centering still live in the dedicated
   tab-labels block above; this mixin only supplies the geometry
   portion. */
.md-board-detail-grid--folder-tab-labels .md-folder-back {
  top: 20px;
  bottom: -3px;
}
.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  top: calc(4px - 12%);
  height: 12%;
}
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder {
  padding-top: 24px;
}
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
  padding-top: 24px;
}

/* Show Labels on Tab — font-size-aware override. When the user
   bumps the button text size above 18px in Display Settings,
   --bd-button-text-size grows; the rules below scale the tab
   geometry to match so the label never clips. At default 18px the
   max() floors keep us at the 18px-visible baseline from the mixin
   call above; at 24px font we get a 24px visible tab; at 32px we
   get 32px. Formula:
     visible   = max(18px, font)
     tab height = visible + 4px (hidden buffer behind back)
     tab top   = -visible
     back top  = visible + 2px (= max(20px, font + 2))
     cell pad  = back top + 4px (= max(24px, font + 6))
   Card translateY (set in the dedicated tab-labels symbol-card
   rule above) is left as a constant additive offset; as cell
   padding grows with font, the card naturally moves down with the
   expanding tab, preserving the visual gap between tab bottom and
   card top. */
.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  /* Tab grows with the font Text Size and a bit more (×1.3) so the label —
     with its line-height — clears the button face at larger fonts instead of
     running into it; the +4px is the hidden overlap behind the back. The
     protrusion (top) scales to match so the extra height grows UPWARD, away
     from the card. Dial the 1.3 if labels still crowd the face. */
  height: calc(max(18px, var(--bd-button-text-size, 18px)) * 1.3 + 4px);
  top: calc(max(18px, var(--bd-button-text-size, 18px)) * -1.3);
}

.md-board-detail-grid--folder-tab-labels .md-folder-back {
  /* Seat the TAB at the top of the cell, INDEPENDENT of the cell padding. The
     tab protrudes max(18px, text-size) × 1.3 above the folder-back top, so make
     the back tall enough that its top lands exactly at that protrusion (height
     = cell + 3px bottom overhang − protrusion). Then the tab's top edge sits at
     the cell top no matter what the padding is — the padding only governs how
     far the CARD sits below the tab, never the tab itself. Bottom-anchored. */
  top: auto;
  bottom: -3px;
  /* max(24px, …) floor so the back can't collapse to 0 (and the tab detach)
     when the protrusion (huge Text Size × 1.3) exceeds a short cell on a
     dense/short board. */
  height: max(24px, 100% + 3px - max(18px, var(--bd-button-text-size, 18px)) * 1.3);
  /* Top corners keep the base 14px 14px 20px 20px radius (no override). */
}

.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder,
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--folder) {
  /* Grid cell top padding for Show-Labels-on-Tab: 8px. The tab is seated at the
     cell top by the folder-back rule above (NOT by this padding), so this only
     controls how far the card sits below the tab — dial it freely; the tab
     stays put. */
  padding-top: 8px;
}

/* Card sits on top — elevated above folder */
.md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
  position: relative;
  z-index: 1;
  background: #fff !important;
  border: none !important;
  /* No categorical outline on folder cards — the folder-back/tab
     (or the colored-corner triangle in that mode) is the only
     color cue the folder design needs. The outline ring used by
     regular buttons would compete with that decoration. */
  outline: none !important;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.12), 0 8px 24px rgba(27, 42, 65, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

/* Folder badge icon — small, modern. Colored to match what a regular
   board button's outline would be: 20% darker than the Fitzgerald POS
   color (the same darken-by-20 transform tinycolor applies to compute
   border_color from background_color in _make_btn). color-mix with
   black at 20% is the CSS equivalent. Falls back to charcoal blue when
   the button has no assigned color. */
.md-board-detail-symbol-card__folder-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(70, 80, 95, 0.08);
  color: color-mix(in srgb, var(--btn-bg, #46505F) 80%, black 20%);
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Hide the folder badge on very narrow folder cards so it doesn't crowd a tiny
   tile. (Re-added after it was accidentally dropped alongside the dead
   edit-actions container query; the badge itself is still rendered. The card
   establishes container-type:size / container-name:symbol-card above.) */
@container symbol-card (max-width: 59px) {
  .md-board-detail-symbol-card__folder-badge {
    display: none !important;
  }
}
/* Default AND Show-Labels-on-Tab folder styles: place the folder badge at the
   BOTTOM-right of the folder face instead of the shared top-right (top-right
   sits near the folder tab). Only top/bottom change — right: 6px is inherited
   from the base. Scoped via :not(colored-corner) to cover both badge-showing
   modes at once (colored-corner hides the badge entirely). */
.md-board-detail-grid:not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-symbol-card__folder-badge {
  top: auto;
  bottom: 6px;
}

/* Placeholder folder icon shown on the face when the folder has no
   image. Painted at the same color a board button's outline would be —
   20% darker than the Fitzgerald POS color via color-mix. Solid (no
   opacity reduction) so the icon reads at the same weight as a real
   button outline; the placeholder div behind it carries the lighter
   tinted fill. */
.md-board-detail-symbol-card__folder-placeholder {
  /* Polished folder fallback. The SVG carries the multi-layer
     glass treatment internally — diagonal back-tab gradient,
     4-stop front-face gradient, lit-from-above radial highlight,
     seam shadow band, top rim highlight, bottom grounding line.
     CSS adds a layered drop-shadow stack so the icon reads as a
     real lifted card on the colored button surface. Three layers:
     a tight contact shadow + a medium soft halo + a long ambient
     diffusion — same approach a 3D illustration would use to
     ground a card in its environment. */
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(13, 36, 56, 0.22)) drop-shadow(0 4px 8px rgba(13, 36, 56, 0.18)) drop-shadow(0 10px 22px rgba(13, 36, 56, 0.1));
}

/* Folder image area: TRANSPARENT so the card face shows through.
   The base `.symbol_background_clear .__image, .__image--placeholder`
   rule (line ~58139) paints BOTH the image-band div and the
   placeholder variant with `var(--btn-bg) !important` — that's
   for the PNG-matte fix on regular (non-folder) cards, where
   transparent PNG pixels need to show the categorical color. For
   FOLDER cards, that override forces the image band to the
   categorical color even when the "Colored Folder Front" toggle is
   OFF (card face goes white but the image area stays colored,
   leaving a peach square inside an otherwise-white folder).
   Forcing transparent here lets the card's face color win
   uniformly — white when the toggle is off, colored when it's on.
   Folder-scoped so non-folder cards keep the PNG-matte behavior. */
.md-board-detail-symbol-card--folder .md-board-detail-symbol-card__image,
.md-board-detail-symbol-card--folder .md-board-detail-symbol-card__image--placeholder {
  background: transparent !important;
}

/* Folder label styling */
.md-board-detail-symbol-card--folder .md-board-detail-symbol-card__label {
  font-weight: 600;
}

.md-board-detail-color-legend__swatch.md-board-detail-symbol-card--folder {
  background: #fff;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ── Board-Detail: Drag & Drop feedback ─────────────── */
/* touch-action:none keeps touch contexts (real devices + DevTools
   touch emulation) from claiming a tile-drag as a scroll-pan before
   the custom pointer-tracking drag pipeline in raw_events.js can
   take over. Without this, jQuery's document-level touchmove
   handler is registered as passive by modern Chrome, so its
   preventDefault() is silently ignored and the browser pans the
   page instead of letting the drag clone follow the finger. Scoped
   to [draggable="true"] so speak-mode (draggable="false") long-press
   gestures (inflections overlay, dwell, etc.) are untouched. */
.md-board-detail-grid__cell[draggable=true] {
  cursor: grab;
  touch-action: none;
}

.md-board-detail-grid__cell[draggable=true]:active {
  cursor: grabbing;
}

.md-board-detail-grid__cell.drop_target .md-board-detail-symbol-card {
  outline: 3px solid #4C86D8;
  outline-offset: -3px;
  background-color: rgba(76, 134, 216, 0.08) !important;
}

/* ── Board-Detail: Level preview badge ──────────────── */
.md-board-detail-edit-toolbar__level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── Responsive ───────────────────────────────────────── */
/* ── Board Detail Responsive ──────────────────────────── */
/* Phones (≤ 600px): collapse the header into a column stack so the
   title group and Details & Actions panel each get their own row.
   Above this width there's plenty of room for both side-by-side, so
   forcing a stack at 900px (the previous threshold) created an
   unnecessarily tall header on tablets and small desktops. */
@media (max-width: 600px) {
  .md-board-detail-header__row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .md-board-detail-board-actions-wrap {
    width: 100%;
    justify-content: center;
  }
  .md-board-detail-board-actions {
    width: 100%;
    justify-content: center;
  }
  .md-board-detail-board-actions__btn span {
    font-size: 15px;
  }
  .md-board-detail-board-actions__btn svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 550px) {
  .md-board-detail-board-actions {
    padding: 3px 4px;
  }
  .md-board-detail-board-actions__btn {
    padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2vw, 12px);
    gap: 2px;
  }
  .md-board-detail-board-actions__btn span {
    /* Floor at 14px — anything smaller is unreadable for AAC users. */
    font-size: 15px;
  }
  .md-board-detail-board-actions__btn svg {
    width: clamp(12px, 3.5vw, 20px);
    height: clamp(12px, 3.5vw, 20px);
  }
  .md-board-detail-board-actions__divider {
    height: clamp(16px, 5vw, 28px);
  }
}
@media (max-width: 1024px) {
  .md-board-detail-grid {
    gap: 2px;
  }
}
@media (max-width: 1200px) {
  .md-board-detail-symbol-card__label {
    font-size: clamp(10px, 14cqw, var(--bd-button-text-size, 15px)) !important;
  }
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(10px, 14cqw, var(--bd-button-text-size, 15px)) !important;
  }
  .md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__label {
    font-size: clamp(11px, 17cqw, var(--bd-button-text-size, 19px) * 1.2) !important;
  }
}
@media (max-width: 820px) {
  .md-board-detail-symbol-card__label {
    font-size: clamp(9px, 13cqw, var(--bd-button-text-size, 15px)) !important;
  }
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(9px, 13cqw, var(--bd-button-text-size, 15px)) !important;
  }
  .md-folder-tab__label {
    font-size: clamp(10px, 2vw, var(--bd-button-text-size, 14px)) !important;
  }
  .md-folder-tab__label-input {
    font-size: clamp(10px, 2vw, var(--bd-button-text-size, 14px)) !important;
  }
  .md-board-detail-symbol-card__alt-text {
    font-size: clamp(11px, 2vw, 15px) !important;
  }
  .md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__label {
    font-size: clamp(9px, 16cqw, var(--bd-button-text-size, 19px) * 1.2) !important;
  }
}
@media (max-width: 1200px) and (min-width: 821px) {
  /* Default (collapsed): single column, hide both sidebars */
  .md-board-detail-layout {
    grid-template-columns: 1fr;
  }
  .md-board-detail-sidebar,
  .md-board-detail-right-panel {
    display: none;
  }
  /* Expanded: show sidebar + main, right panel below */
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) {
    grid-template-columns: 194px 1fr;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-sidebar {
    display: block;
    order: 1;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-main {
    order: 2;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-right-panel {
    display: block;
    position: static;
    order: 3;
    grid-column: 1/-1;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(27, 54, 93, 0.1);
    padding: 16px 20px;
  }
  /* When expanded, show floating close button in top-right */
  .md-board-detail-panels-close-btn {
    display: flex !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
    width: 44px; /* WCAG 2.5.5 — minimum touch target 44×44 */
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(27, 54, 93, 0.12);
    background: #fff;
    color: #374151;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease;
  }
  .md-board-detail-panels-close-btn:hover {
    background: #F0F4F8;
  }
}
@keyframes md-board-detail-slide-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes md-board-detail-slide-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
/* Tablets: single column, sidebars as overlays */
@media (max-width: 820px) {
  .md-shell--board-detail {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .md-board-detail-layout {
    grid-template-columns: 1fr;
    padding: 14px 16px 20px;
    height: auto;
    min-height: calc(100dvh - var(--topbar-height, 68px));
  }
  .md-board-detail-sidebar,
  .md-board-detail-right-panel {
    display: none;
  }
  .md-board-detail-overlay-backdrop {
    display: none !important;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) {
    grid-template-columns: 1fr;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-sidebar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    position: static !important;
    order: 1;
    width: 100% !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid rgba(27, 54, 93, 0.1);
    padding: 12px 14px;
    opacity: 1 !important;
    overflow: visible;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    gap: 0 24px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-sidebar .md-board-detail-sidebar__section {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 8px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-sidebar .md-board-detail-sidebar__heading {
    font-size: 15px;
    padding-bottom: 4px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-sidebar .md-board-detail-sidebar__item {
    padding: 6px 10px;
    font-size: 15px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-right-panel {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    position: static !important;
    order: 2;
    width: 100% !important;
    height: auto !important;
    border-left: none;
    border-bottom: 1px solid rgba(27, 54, 93, 0.1);
    padding: 12px 14px;
    opacity: 1 !important;
    overflow: visible;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    gap: 0 24px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-right-panel .md-board-detail-right-panel__section {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 20px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-right-panel .md-board-detail-right-panel__heading {
    font-size: 15px;
  }
  .md-board-detail-layout:not(.md-board-detail-layout--collapsed) .md-board-detail-main {
    order: 3;
  }
  .md-board-detail-panels-close-btn {
    display: flex !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
    width: 44px; /* WCAG 2.5.5 — minimum touch target 44×44 */
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(27, 54, 93, 0.12);
    background: #fff;
    color: #374151;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  .md-board-detail-panels-close-btn:hover {
    background: #F0F4F8;
  }
  .md-board-detail-main {
    padding: 0 10px 24px;
  }
  .md-board-detail-sentence-row {
    margin: 6px 2px 14px 2px;
  }
  .md-board-detail-sentence-bar {
    padding: 8px 20px;
  }
  .md-board-detail-sentence-bar__btn-label {
    display: none;
  }
  .md-board-detail-sentence-bar__text {
    font-size: 15px;
  }
  .md-board-detail-sentence-bar__btn {
    padding: 8px 16px;
    font-size: 15px;
  }
  .md-board-detail-sentence-bar__btn svg {
    width: 14px;
    height: 14px;
  }
  .md-board-detail-sentence-bar__tool-btn {
    width: 30px;
    height: 30px;
  }
  .md-board-detail-sentence-bar__tool-btn svg {
    width: 13px;
    height: 13px;
  }
  .md-board-detail-actions-toggle {
    width: 32px;
  }
  /* Header row stays in side-by-side layout at this breakpoint —
     800-820px tablets still have plenty of room for title-group +
     Details & Actions on one line. The column-stack rules used to
     live here but caused the regression where everything below
     820px (including ample-width tablets) jumped to a vertical
     stack. The single-column stack now only kicks in at ≤600px (see
     the matching block above). The action button `order` rules also
     no longer apply here since they only affect a wrapped actions
     row, which doesn't exist outside the column stack. */
  .md-board-detail-grid {
    grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
    gap: 8px;
  }
  .md-board-detail-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .md-board-detail-add-wrap {
    margin-left: 0;
    align-self: flex-end;
  }
  .md-board-detail-cat-panel {
    margin-left: 0;
    margin-top: 8px;
    max-width: 100%;
  }
  .md-board-detail-cat-panel__right {
    max-width: none;
  }
  .md-board-detail-color-picker {
    width: 320px;
  }
}
/* ── Board-Detail: Folder responsive adjustments ── */
/* Medium screens — narrower folder back, shorter tab */
@media (max-width: 1024px) {
  .md-folder-back {
    left: calc(-1px + 2.5%);
    right: calc(-1px + 2.5%);
  }
  .md-folder-tab {
    /* width stays at the base 1/3 (33.3333%) — only the vertical geometry
       (height/top) shrinks at this breakpoint. */
    height: 3.3px; /* 3px + 10% */
    top: -3px;
    border-radius: 3px 3px 0 0;
  }
  .md-board-detail-grid--folder-tab-labels .md-folder-tab {
    width: 90%; /* 90% of the folder back (inherits left: 5% centering) */
    /* height/top inherited from the base font-scaled rule so the tab keeps
       growing with the font at this breakpoint too. */
  }
  .md-board-detail-grid__cell--folder {
    margin-bottom: 0.25rem;
  }
  .md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
    width: 92%;
    align-self: center;
    border-radius: 10px;
  }
  .md-folder-back {
    border-radius: 8px 8px 12px 12px;
  }
}
/* Below 900px — hide folder badge icon, taller folder cards */
@media (max-width: 900px) {
  .md-board-detail-symbol-card__folder-badge {
    display: none !important;
  }
  .md-board-detail-grid__cell--folder > .md-board-detail-symbol-card {
    margin-top: -2px;
  }
}
/* Small tablets / large phones */
@media (max-width: 640px) {
  .md-board-detail-layout {
    padding: 10px 10px 16px;
  }
  .md-board-detail-main {
    padding: 0 6px 20px;
  }
  .md-board-detail-sentence-row {
    margin: 6px 2px 14px 2px;
  }
  .md-board-detail-sentence-bar {
    border-radius: 16px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .md-board-detail-sentence-bar__text {
    font-size: 15px;
    min-height: 22px;
  }
  /* On smaller screens the bar reflows to full width; left-align the
     placeholder hint so it reads naturally against the bar's left
     edge instead of floating centered. */
  .md-board-detail-sentence-bar__placeholder {
    text-align: left;
  }
  /* (The compact 2×2 action-button grid was removed — it made the sentence bar
     too tall. The mic/backspace/clear/chevron now stay in their default single
     row at every width.) */
  .md-board-detail-actions-toggle {
    width: 28px;
  }
  .md-board-detail-header__title {
    font-size: 23px;
  }
  .md-board-detail-header__title-group {
    gap: 10px;
  }
  .md-board-detail-boards-btn {
    width: 38px;
    height: 38px;
  }
  .md-board-detail-boards-btn svg {
    width: 20px;
    height: 20px;
  }
  .md-board-detail-grid {
    grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
    gap: 2px;
  }
  .md-board-detail-symbol-card__image {
    min-height: 24px;
  }
  .md-board-detail-edit-btn {
    padding: 8px 14px;
    font-size: 15px;
  }
  .md-board-detail-color-legend-toggle {
    padding: 6px 12px;
    font-size: 15px;
  }
  .md-board-detail-collapse-btn {
    width: 32px;
    height: 32px;
  }
  .md-board-detail-quick-reveal__btn {
    padding: 5px 10px;
    font-size: 15px;
  }
  .md-board-detail-color-picker {
    width: 280px;
  }
  /* Folder tab width intentionally NOT widened at ≤640px — it stays at the
     base 1/3 (33.3333%) of the backdrop, consistent across all breakpoints. */
}
/* Phones */
@media (max-width: 480px) {
  .md-board-detail-layout {
    padding: 8px 6px 12px;
  }
  .md-board-detail-main {
    padding: 0 4px 16px;
  }
  .md-board-detail-sentence-row {
    margin: 6px 2px 10px 2px;
  }
  .md-board-detail-sentence-bar {
    border-radius: 12px;
    padding: 6px 10px;
  }
  .md-board-detail-sentence-bar__text {
    font-size: 15px;
    min-height: 18px;
  }
  .md-board-detail-sentence-bar__btn {
    padding: 5px 10px;
    font-size: 15px;
  }
  .md-board-detail-sentence-bar__btn svg {
    width: 11px;
    height: 11px;
  }
  .md-board-detail-sentence-bar__tools {
    gap: 1px;
    padding: 2px 3px;
  }
  .md-board-detail-sentence-bar__tool-btn {
    width: 24px;
    height: 24px;
  }
  .md-board-detail-sentence-bar__tool-btn svg {
    width: 11px;
    height: 11px;
  }
  .md-board-detail-actions-toggle {
    width: 24px;
  }
  .md-board-detail-header__title {
    font-size: 19px;
  }
  .md-board-detail-header__sub {
    font-size: 15px;
  }
  .md-board-detail-header__actions {
    gap: 6px;
  }
  .md-board-detail-grid {
    grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
    gap: 2px;
  }
  .md-board-detail-symbol-card__image {
    min-height: 18px;
  }
  .md-board-detail-color-trigger {
    width: 22px;
    height: 22px;
    top: 4px;
    right: 4px;
    font-size: 15px;
  }
  .md-board-detail-toolbar {
    gap: 6px;
  }
  .md-board-detail-quick-toggle {
    padding: 6px 10px;
    font-size: 15px;
    gap: 5px;
  }
  .md-board-detail-add-btn {
    padding: 6px 10px;
    font-size: 15px;
    gap: 5px;
  }
  .md-board-detail-cat-panel {
    padding: 8px 10px;
    border-radius: 12px;
  }
  .md-board-detail-color-picker {
    width: calc(100vw - 24px);
  }
}
/* ── Dark Mode ─────────────────────────────────────────── */
/* Three-tier surface system harmonised with $brand-blue-black (#111A2E):
   base #0f1724 (L≈10%) for the page canvas, panel #172131 (L≈14%) for
   the side rails + edit toolbar, raised #1d293d (L≈18%) for the center
   board stage. Each tier sits ~4% lightness above the previous so the
   panels read as a continuous atmospheric canvas with soft tonal shifts
   instead of the high-contrast left/center/right striping that pure
   black-on-charcoal produces. */
#within_ember.board-detail-view:has(.md-board-detail--dark) {
  background: #0f1724 !important;
}

#within_ember.board-detail-view:has(.md-board-detail--dark) #content {
  background: #0f1724 !important;
}

.md-board-detail--dark.md-shell--board-detail {
  /* Atmospheric dark canvas — was flat #0f1724, which made the rails
     read as opaque slabs stamped on a flat field. Subtle radial
     halos (teal / charcoal-blue / verdigris / slate at low alphas)
     mirror the light-mode shell's backdrop and give the rails
     something to bleed into via their now-translucent panel-surface
     base. Halo alphas are ~half of the light shell's so dark mode
     stays calm and never reads as colorful — it just stops feeling
     flat. */
  background: radial-gradient(1400px 700px at 10% 5%, rgba(49, 111, 112, 0.12), transparent 50%), radial-gradient(1200px 600px at 90% 15%, rgba(70, 80, 95, 0.1), transparent 50%), radial-gradient(1100px 700px at 50% 95%, rgba(55, 65, 81, 0.1), transparent 50%), radial-gradient(900px 500px at 80% 55%, rgba(42, 157, 143, 0.06), transparent 45%), radial-gradient(800px 400px at 25% 65%, rgba(76, 134, 216, 0.05), transparent 50%), #0f1724 !important; /* base remains #0f1724; halos lift it off flat */
}

.md-board-detail--dark .md-board-detail-main {
  /* Translucent grid container — layered translucent navy gradient
     + backdrop-blur lets the page-canvas atmospheric halos bleed
     through, making the center surface feel light, airy, and
     softly layered like the boards-page cards. Bg pulled toward
     black per request: top `rgba(33,43,64,0.72)` → `rgba(25,32,47,0.74)`,
     bottom `rgba(26,35,54,0.64)` → `rgba(19,25,38,0.66)` — ~8 units
     darker across all channels, alpha bumped slightly so the
     darker tone still carries through the halos. The blue channel
     keeps its lead over R/G (47 vs 25/32) so the surface still
     reads as deep blue-black rather than flat grey. backdrop-blur,
     border, shadows, and inset top highlight are unchanged so the
     atmospheric modern treatment is preserved. */
  background: linear-gradient(180deg, rgba(25, 32, 47, 0.74), rgba(19, 25, 38, 0.66));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.md-board-detail--dark .md-board-detail-sentence-bar {
  /* Translucent atmospheric bar — was opaque #2d3a4d slab which read
     as a flat utility element against the now-translucent center
     stage. Layered gradient is slightly lighter than the center
     stage's `rgba(33,43,64, .72)` so the bar sits one step UP in the
     depth hierarchy (canvas → center → bar → tiles). backdrop-filter
     blur inherits from the base rule and now actually shows through. */
  background: linear-gradient(180deg, rgba(48, 62, 82, 0.72), rgba(42, 54, 73, 0.66));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Tour spotlight (dark mode): the "Your message" step targets the INNER __text,
   which is transparent — so the white `.shepherd-target` glow follows the words
   rather than the bar, leaving the dark glass pill looking un-highlighted while
   only its contents pop. While that step is active, brighten the bar's glass +
   add an inset sheen and a faint edge ring so the SPEAK BAR ITSELF reads as the
   spotlit element. Medium tone keeps the light __text readable. */
.md-board-detail--dark .md-board-detail-sentence-bar:has(.md-board-detail-sentence-bar__text.shepherd-target) {
  background: linear-gradient(180deg, rgba(249, 251, 253, 0.98), rgba(240, 244, 249, 0.97));
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(214, 244, 240, 0.65), 0 4px 16px rgba(0, 0, 0, 0.26);
}

/* On the near-white spotlit bar, flip the (normally light) dark-mode text,
   placeholder and chip labels to dark ink so they stay readable. */
.md-board-detail--dark .md-board-detail-sentence-bar:has(.md-board-detail-sentence-bar__text.shepherd-target) .md-board-detail-sentence-bar__text,
.md-board-detail--dark .md-board-detail-sentence-bar:has(.md-board-detail-sentence-bar__text.shepherd-target) .md-board-detail-sentence-bar__placeholder,
.md-board-detail--dark .md-board-detail-sentence-bar:has(.md-board-detail-sentence-bar__text.shepherd-target) .md-board-detail-sentence-bar__chip-label {
  color: rgba(40, 52, 74, 0.88);
}

.md-board-detail--dark .md-board-detail-sentence-bar__text {
  color: #e1e5eb;
}

.md-board-detail--dark .md-board-detail-sentence-bar__placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.md-board-detail--dark .md-board-detail-sentence-bar__chip {
  /* Match the dark prediction tile: inherits the base backdrop-blur, re-tunes
     the frosted tint, sheen, and ambient drop for the darker bar. */
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-board-detail-sentence-bar__chip-label {
  color: #e1e5eb;
}

.md-board-detail--dark .md-board-detail-sentence-bar__prediction-group {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.7);
}

.md-board-detail--dark .md-board-detail-sentence-bar__prediction {
  /* Inherits the base backdrop-blur; just re-tunes the frosted tint, sheen,
     and ambient drop for the darker bar. */
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-board-detail-sentence-bar__prediction:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09));
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 14px rgba(0, 0, 0, 0.34);
}

.md-board-detail--dark .md-board-detail-sentence-bar__prediction-label {
  /* Match the base label brightness (0.95) so predictions read clearly on the
     dark bar — the dashed border and slightly-dimmed (0.85) symbol still keep
     them visually distinct from committed words without dimming the text. */
  color: rgba(255, 255, 255, 0.95);
}

.md-board-detail--dark .md-board-detail-sentence-bar__btn {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-sentence-bar__btn--speak {
  background: rgba(33, 43, 58, 0.75);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-sentence-bar__btn--speak:hover {
  background: rgba(45, 58, 77, 0.85);
  color: #fff;
}

.md-board-detail--dark .md-board-detail-sentence-bar__btn:hover {
  background: rgba(42, 157, 143, 0.2);
  color: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-sentence-bar__tool-btn {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-board-detail-sentence-bar__tool-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-sentence-bar::before,
.md-board-detail--dark .md-board-detail-sentence-bar::after {
  background: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-search__label {
  color: rgba(255, 255, 255, 0.85);
  fill: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-search__input {
  background: rgba(52, 59, 72, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e1e5eb;
}

.md-board-detail--dark .md-board-detail-search__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.md-board-detail--dark .md-board-detail-search__input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2);
}

.md-board-detail--dark .md-board-detail-search__clear {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.md-board-detail--dark .md-board-detail-search__clear:hover {
  color: #2A9D8F;
  background: rgba(42, 157, 143, 0.15);
  border-color: rgba(42, 157, 143, 0.3);
}

/* Dark mode for the left stack — mirrors the right stack's dark treatment.
   Top (primary) follows .md-board-detail-actions-toggle dark style; bottom
   (secondary) keeps the translucent tint, mirroring sidebar-toggle--stacked. */
.md-board-detail--dark .md-board-detail-sentence-nav__btn {
  background: #2a3344;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-sentence-nav__btn:hover {
  background: #344054;
}

.md-board-detail--dark .md-board-detail-sentence-nav .md-board-detail-collapse-btn--sentence-row {
  background: rgba(118, 147, 185, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.md-board-detail--dark .md-board-detail-sentence-nav .md-board-detail-collapse-btn--sentence-row:hover {
  background: rgba(118, 147, 185, 0.3) !important;
  color: #fff !important;
}

.md-board-detail--dark .md-board-detail-actions-toggle {
  background: #2a3344;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.md-board-detail--dark .md-board-detail-actions-toggle:hover {
  background: #344054;
}

.md-board-detail--dark .md-board-detail-actions-backdrop {
  background: transparent;
}

.md-board-detail--dark .md-board-detail-actions-menu {
  background: #1e2530;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-board-detail-actions-menu__item {
  color: #d1d5db;
}

.md-board-detail--dark .md-board-detail-actions-menu__item:hover {
  /* Neutral glass overlay on dark — translucent white, no teal. */
  background: rgba(255, 255, 255, 0.08);
  color: #f0f4fb;
}

.md-board-detail--dark .md-board-detail-actions-menu__item svg {
  color: rgba(255, 255, 255, 0.45);
}

.md-board-detail--dark .md-board-detail-actions-menu__item:hover svg {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-actions-menu__divider {
  background: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-actions-menu__item--exit {
  background: #46505F;
  color: #fff;
}

.md-board-detail--dark .md-board-detail-actions-menu__item--exit:hover {
  background: #344054;
}

.md-board-detail--dark .md-board-detail-symbol-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.26), 0 6px 12px rgba(0, 0, 0, 0.2), 0 20px 50px rgba(0, 0, 0, 0.22);
  outline-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-symbol-card--no-color {
  background-color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-symbol-card--no-color .md-board-detail-symbol-card__label {
  color: #374151;
}

/* Dark mode: darken folder cells by 2% as a single filter operation —
   no overlay, no pseudo-element, no wrapper. brightness(0.98) multiplies
   text and background RGB by the same factor, so contrast stays well above
   WCAG AAA. Applied to the cell so the folder back, tab, badge, and inner
   symbol card all darken together. */
.md-board-detail--dark .md-board-detail-grid__cell--folder {
  filter: brightness(0.98);
}

/* Lighter folder-back in dark mode so the folder body reads against the
   darker panel background. */
.md-board-detail--dark .md-folder-back {
  background: rgb(144.4545454545, 156.0909090909, 173.5454545455);
}

.md-board-detail--dark .md-folder-tab {
  background: rgb(144.4545454545, 156.0909090909, 173.5454545455);
}

/* ── Dark-mode overrides for the right-panel folder-style picker ──
   The light-mode rules use white-ish glass + dark text + verdigris
   accent; dark mode flips that to a translucent-white-over-navy
   glass with light text and a brighter verdigris.
   ────────────────────────────────────────────────────────────── */
.md-board-detail--dark .md-folder-style-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
}

.md-board-detail--dark .md-folder-style-option:hover,
.md-board-detail--dark .md-folder-style-option:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.md-board-detail--dark .md-folder-style-option__icon {
  color: rgb(50.6110552764, 189.1889447236, 172.3185929648);
}

.md-board-detail--dark .md-folder-style-option--active {
  background: rgba(42, 157, 143, 0.2);
  border-color: rgba(42, 157, 143, 0.65);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.2);
}

.md-board-detail--dark .md-folder-style-option--active .md-folder-style-option__check,
.md-board-detail--dark .md-folder-style-option--active .md-folder-style-option__icon {
  color: rgb(65.9688442211, 204.4311557789, 187.5748743719);
}

.md-board-detail--dark .md-folder-style-option--active:hover,
.md-board-detail--dark .md-folder-style-option--active:focus-visible {
  background: rgba(42, 157, 143, 0.28);
  border-color: rgba(42, 157, 143, 0.85);
}

.md-board-detail--dark .md-folder-toggle-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-folder-toggle-row__label {
  color: rgba(255, 255, 255, 0.88);
}

.md-board-detail--dark .md-folder-toggle-row__state {
  color: rgba(255, 255, 255, 0.38);
}

.md-board-detail--dark .md-folder-toggle-row__state--active {
  color: rgba(255, 255, 255, 0.96);
}

.md-board-detail--dark .md-customize-menu__group-label {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-customize-menu__group-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.md-board-detail--dark .md-customize-menu__row + .md-customize-menu__row {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.md-board-detail--dark .md-customize-menu__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.md-board-detail--dark .md-customize-menu__label {
  color: rgba(255, 255, 255, 0.88);
}

.md-board-detail--dark .md-customize-menu__check {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-customize-menu__row--checked .md-customize-menu__check {
  background: linear-gradient(180deg, #2A9D8F 0%, #1A7B7A 100%);
  border-color: #2A9D8F;
}

.md-board-detail--dark .md-customize-menu__check-hint--shown {
  background: rgba(42, 157, 143, 0.22);
  color: rgb(65.9688442211, 204.4311557789, 187.5748743719);
  border-color: rgba(42, 157, 143, 0.45);
}

.md-board-detail--dark .md-customize-menu__check-hint--hidden {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Dark-mode glassy border for the OFF state of the toggle pill. The
   base rule's navy-on-dark border (rgba(13, 36, 56, 0.18)) and fill
   (rgba(13, 36, 56, 0.10)) disappear against the panel's dark
   gradient, leaving the toggle without a visible chrome edge. Swap
   in a translucent white border + frosted fill + faint inset top
   highlight so the pill reads as a distinct interactive element.
   :not(--on) keeps the verdigris ON-state styling untouched (the
   ON rule lives at .nb-toggle__switch--on; this dark rule wins on
   specificity for the OFF case only via :not). */
.md-board-detail--dark .nb-toggle__switch:not(.nb-toggle__switch--on) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-board-actions {
  background: linear-gradient(135deg, #1f2937, #374151);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-board-detail-board-actions__group {
  background: rgba(30, 40, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.md-board-detail--dark .md-board-detail-board-actions__group-pill {
  color: rgba(255, 255, 255, 0.7);
  border-right-color: rgba(255, 255, 255, 0.06);
}

.md-board-detail--dark .md-board-detail-board-actions__group-pill svg {
  color: rgba(255, 255, 255, 0.4);
}

.md-board-detail--dark .md-board-detail-board-actions__group-pill:hover {
  background: rgba(42, 157, 143, 0.15);
  color: #e1e5eb;
}

.md-board-detail--dark .md-board-detail-board-actions__group-pill:hover svg {
  color: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-board-actions__group-pill--standalone {
  background: rgba(30, 40, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.md-board-detail--dark .md-board-detail-board-actions__divider {
  background: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-header__title {
  color: #e1e5eb;
}

.md-board-detail--dark .md-board-detail-header__sub {
  color: rgba(255, 255, 255, 0.5);
}

.md-board-detail--dark .md-board-detail-sidebar {
  border-right-color: rgba(255, 255, 255, 0.06);
}

/* Dark-mode sidebar card: translucent white surface (so the dark
   panel gradient subtly shows through), brighter teal top stroke
   for legibility, deeper shadow to keep the card lifted off the
   dark glass underneath. Mirrors the My Board Collection card
   language in this same surface family. */
.md-board-detail--dark .md-board-detail-sidebar__section {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(20, 127, 130, 0.62);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.md-board-detail--dark .md-board-detail-sidebar__section:hover {
  border-top-color: rgba(80, 217, 209, 0.82);
}

.md-board-detail--dark .md-board-detail-sidebar__heading {
  color: rgba(255, 255, 255, 0.68);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-sidebar__item {
  color: rgba(255, 255, 255, 0.88);
}

.md-board-detail--dark .md-board-detail-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.md-board-detail--dark .md-board-detail-sidebar__item--active {
  background: linear-gradient(135deg, rgba(80, 217, 209, 0.18), rgba(80, 217, 209, 0.06));
  color: #fff;
  border: 1px solid rgba(80, 217, 209, 0.3);
  box-shadow: 0 1px 4px rgba(80, 217, 209, 0.14);
}

.md-board-detail--dark .md-board-detail-sidebar__item--active::before {
  background: rgb(115, 232, 224);
}

.md-board-detail--dark .md-board-detail-right-panel {
  border-left-color: rgba(255, 255, 255, 0.06);
}

.md-board-detail--dark .md-board-detail-right-panel__heading {
  color: rgba(255, 255, 255, 0.65);
}

.md-board-detail--dark .md-board-detail-right-panel__empty {
  color: rgba(255, 255, 255, 0.5);
}

.md-board-detail--dark .md-board-detail-collapse-btn {
  background: rgba(30, 37, 48, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-collapse-btn svg {
  filter: brightness(3);
}

.md-board-detail--dark .md-board-detail-collapse-btn:hover {
  background: rgba(40, 50, 65, 0.9);
  color: #fff;
}

.md-board-detail--dark .md-board-detail-collapse-btn:hover svg {
  filter: brightness(4);
}

/* Brighten hardcoded SVG strokes in dark mode for the sidebar toggle. */
.md-board-detail--dark .md-board-detail-sidebar-toggle svg {
  filter: brightness(3);
}

.md-board-detail--dark .md-board-detail-sidebar-toggle:hover svg {
  filter: brightness(4);
}

/* Edit toolbar in dark mode — matches the actions-cluster gradient so the
   toolbar reads as one elevated panel grouping its sections. Sits at the
   same panel-surface tier (#172131) as the left/right rails so the three
   chrome surfaces share one continuous tone; the inset 1px highlight + 1px
   outline keep it visually discrete against the raised center stage
   (#1d293d) without needing a contrast-stripe fill. */
.md-board-detail--dark .md-board-detail-edit-toolbar {
  /* Atmospheric depth on top of the panel-surface tier: a translucent
     white glass-veil (rgba(255,255,255, .04 → .015)) layered above the
     #172131 base gives the surface a subtle lit-from-above quality.
     Hard .22-alpha border drops to .06; layered shadows (mid 18px, broad
     60px ambient haze, close 2px contact) carry the separation; inset
     top-edge highlight + 1px outline keep the toolbar distinct against
     the raised center stage. Mirrors the rail dark formula. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), linear-gradient(180deg, #131A27 0%, #161F2E 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__section-label {
  color: rgba(255, 255, 255, 0.5);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__divider {
  background: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__btn {
  background: #2a3344;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__btn:hover {
  background: #344054;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__btn:disabled {
  opacity: 0.35;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__btn:disabled:hover {
  background: #2a3344;
}

/* Active-state override in dark mode: without this, the dark-mode base
   rule above (specificity 0,2,0) wins over the active rule (0,1,0) and
   active toolbar buttons render with the inactive dark bg. Mirrors the
   md-settings-icon-btn--active dark-mode rule so the Speak Bar's
   active option and the toolbar's active toggles share the same blue-
   grey bg in both light and dark modes. */
.md-board-detail--dark .md-board-detail-edit-toolbar__btn--active,
.md-board-detail--dark .md-board-detail-edit-toolbar__btn--active:hover {
  background: #7693B9;
  color: #111A2E;
  border-color: rgba(70, 80, 95, 0.3);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__btn svg {
  filter: brightness(3);
}

/* Rows/Cols steppers in dark mode */
.md-board-detail--dark .md-board-detail-edit-toolbar__stepper {
  background: #2a3344;
  border-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn {
  color: rgba(255, 255, 255, 0.55);
}

/* Dark-mode divider tint so the between-button line stays visible on the
   dark stepper wrapper. */
.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn + .md-board-detail-edit-toolbar__stepper-btn,
.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-label + .md-board-detail-edit-toolbar__stepper-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn:has(+ .md-board-detail-edit-toolbar__stepper-label) {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85) !important;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn:hover {
  background: #344054;
  color: #2A9D8F;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-btn:active {
  background: #3d4a5e;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__stepper-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Search in dark mode */
.md-board-detail--dark .md-board-detail-edit-toolbar__search {
  background: #2a3344;
  border-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__search-input {
  color: rgba(255, 255, 255, 0.9);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.md-board-detail--dark .md-board-detail-edit-toolbar__search svg {
  filter: brightness(3);
}

/* Search container focus: rounded ring matching the 8px border-radius */
.md-board-detail-edit-toolbar__search:focus-within {
  box-shadow: 0 0 0 3px #1B365D !important;
  border-radius: 8px;
}

.md-board-detail--dark .md-board-detail-edit-toolbar__search:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85) !important;
}

#within_ember .md-board-detail-edit-toolbar__search-input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

.md-board-detail--dark .md-board-detail-divider {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-options-btn {
  background: rgba(30, 37, 48, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}

.md-board-detail--dark .md-board-detail-options-btn:hover {
  background: rgba(40, 50, 65, 0.9);
  color: #fff;
}

.md-board-detail--dark .md-board-detail-grid__empty {
  color: rgba(255, 255, 255, 0.35);
}

.md-board-detail--dark .md-board-detail-suggestion {
  background: rgba(30, 37, 48, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}

.md-board-detail--dark .md-board-detail-suggestion:hover {
  background: rgba(42, 157, 143, 0.15);
  border-color: rgba(42, 157, 143, 0.3);
  color: #fff;
}

.md-board-detail--dark .md-board-detail-phrase-list__item {
  color: rgba(255, 255, 255, 0.75);
}

.md-board-detail--dark .md-board-detail-phrase-list__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ── Modern Modal Styles ──────────────────────────────── */
/* Reduce the default Bootstrap margin-top on modernized modals so they sit
   closer to the top of the viewport — the default 30px is too much. */
.modal-dialog:has(.md-modal-header) {
  margin-top: 15px;
}

.md-modal-header {
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  padding: 32px 24px;
  position: relative;
}

.md-modal-header .close,
.md-modal-header .la-modal-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  /* WCAG 2.5.5 AAA touch target. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.04);
  color: #6B7280;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
  padding: 0;
  opacity: 1;
}

.md-modal-header .close:hover,
.md-modal-header .la-modal-close:hover {
  background: #46505F;
  color: #fff;
  border-color: #46505F;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  margin: 0;
}

.md-modal-body {
  padding: 8px 24px 28px;
  text-align: center;
  font-size: 16px;
}

/* Speak Mode PIN input (pin-settings modal): sized for a 4-digit PIN and
   centered. The modal body is already text-align: center, so margin auto
   centers the fixed-width field; text-indent offsets the trailing
   letter-spacing so the digits stay visually centered. */
.md-pin-settings__input {
  width: 120px;
  max-width: 120px;
  /* Centering + top gap now handled by __input-wrap (which also holds the clear
     button); the input just fills its 120px slot. */
  margin: 0;
  text-align: center;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-weight: 600;
}

/* Holds the centered PIN input; the clear (✕) button floats to its right via
   absolute positioning so the input stays put whether or not the button shows
   (it only shows when there's a value), avoiding a left-shift as you type. */
.md-pin-settings__input-wrap {
  position: relative;
  width: fit-content;
  margin: 6px auto 0;
}

.md-pin-settings__clear {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 8px;
  background: rgba(27, 54, 93, 0.04);
  color: #1B365D;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.md-pin-settings__clear-label {
  /* AAC: keep the control label comfortably readable. */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* Sits below the PIN input row — give it breathing room from the field/button. */
.md-pin-settings__warning {
  margin-top: 14px;
}

.md-pin-settings__clear:hover {
  background: rgba(225, 82, 65, 0.14);
  border-color: rgba(225, 82, 65, 0.4);
  color: #c0392b;
}

.md-pin-settings__clear:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: 2px;
}

/* Modern checkbox cards (la-edit-board-checkbox) sit in a centered modal body —
   constrain + center each card, and keep its label text left-aligned. */
.md-pin-settings__checkbox {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Import from another platform modal — CoughDrop export bookmarklet + file upload */
.md-json-bundle-export {
  text-align: left;
  max-width: 34rem;
  margin: 0 auto 1.25rem;
}

.md-json-bundle-export__title {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1B365D;
}

.md-json-bundle-export__lead {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.82);
}

.md-json-bundle-export__drag {
  margin: 0 0 1.35rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.1);
}

.md-json-bundle-export__drag-label {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #1B365D;
}

.md-json-bundle-export__steps {
  margin: 0 0 0.85rem 1.15rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(27, 54, 93, 0.9);
}
.md-json-bundle-export__steps li + li {
  margin-top: 0.65rem;
}

.md-json-bundle-export__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.5rem;
}

.md-json-bundle-export__bookmarklet {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: grab;
}

.md-json-bundle-export__bookmarklet:active {
  cursor: grabbing;
}

.md-json-bundle-export__alt-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
}

.md-json-bundle-export__alt-sep {
  color: rgba(27, 54, 93, 0.35);
  font-size: 1rem;
  line-height: 1;
}

.md-json-bundle-export__copy {
  font-size: 1rem;
  padding: 0.35rem 0;
}

.md-json-bundle-export__help {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(27, 54, 93, 0.7);
}

.md-json-bundle-export__help--drag {
  margin-top: 0.15rem;
}

.md-json-bundle-export__divider {
  max-width: 34rem;
  margin: 1.35rem auto;
  border-color: rgba(27, 54, 93, 0.12);
}

.md-modal-body .md-json-bundle-export + hr + section {
  text-align: left;
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
}

/* Board Details modal — fill the viewport. We pin the dialog via
   `position: fixed` with explicit insets rather than relying on
   Bootstrap's centered `.modal-dialog` margin, because the
   surrounding `#within_ember` ancestor uses `position: fixed; inset: 0`
   under some routes (bento layout) which makes the auto-centered
   sizing fragile. Pinning directly to the viewport is deterministic
   and survives both layouts. */
.md-board-details-modal__dialog.md-board-details-modal__dialog {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1051; /* above the .modal-backdrop (1040) and the .modal (1050) */
}

.md-board-details-modal__content {
  /* Fill the dialog box (which is sized to nearly the full viewport).
     Body scrolls when content exceeds the available height. */
  height: 100%;
  max-height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: #fff;
  box-shadow: 0 24px 64px rgba(27, 54, 93, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modern modal header: title centered with the loading indicator
   sitting next to it, close button pinned right via la-modal-close. */
.md-board-details-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Symmetric 72px horizontal inset reserves room for the absolutely-positioned
     close button (right:18px, 48px wide) on BOTH sides, so a long wrapping title
     (e.g. the "We recommend this board" suggestion header) stays centered and
     never runs under the close X. */
  padding: 24px 72px 16px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
}
.md-board-details-modal__header h3 {
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.01em;
}

/* Close X button — modern circular chrome matching the beta-feedback
   modal close pattern (48×48 WCAG AAA target, navy-tinted surface
   with a soft border, charcoal icon that flips to white on hover).
   Double-class selector raises specificity above `.la-modal-close`
   so we win the cascade regardless of source-order.
   IMPORTANT: must explicitly reset `transform: none` — the global
   `.md-modal-header .la-modal-close` rule sets
   `top: 50%; transform: translateY(-50%)` to vertically center,
   and at our explicit `top: 18px` the translate pulled a 48px
   button to y = -6, clipping its top half against the modal's
   `overflow: hidden` + `border-radius: 22px` corner. */
.md-board-details-modal__close.md-board-details-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  transform: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.md-board-details-modal__close.md-board-details-modal__close svg {
  width: 18px;
  height: 18px;
}
.md-board-details-modal__close.md-board-details-modal__close:hover, .md-board-details-modal__close.md-board-details-modal__close:focus-visible {
  background: #46505F;
  border-color: #46505F;
  color: #fff;
  outline: none;
}

/* Inline loading indicator on the header — spinner + "Loading
   preview..." text next to the title. Shrinks gracefully on narrow
   modals. */
.md-board-details-modal__header-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
  font-size: 13px;
  font-weight: 600;
}

.md-board-details-modal__header-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(42, 157, 143, 0.22);
  border-top-color: #2A9D8F;
  animation: ll-loading-overlay-spin 0.9s linear infinite;
}

.md-board-details-modal__header-loading-text {
  white-space: nowrap;
}

.md-board-details-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px 28px 28px;
  text-align: left;
  font-size: 15px;
  /* Positioning context for the loading overlay so it pins to the
     body bounds instead of the document. */
  position: relative;
}

/* Full-body loading overlay — covers the modal body with a soft white
   wash + centered spinner card until the canvas image-loading promises
   have all settled. Shown until either the board model failed to load
   or the canvas component emits `onCanvasReady`. */
.md-board-details-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  z-index: 5;
  /* Modern blur effect on the obscured content; degrades gracefully
     on browsers that don't support backdrop-filter. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: md-board-details-modal__overlay-fade 0.18s ease-out;
}

.md-board-details-modal__overlay-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(27, 54, 93, 0.18);
  border: 1px solid rgba(27, 54, 93, 0.08);
}

.md-board-details-modal__overlay-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(42, 157, 143, 0.22);
  border-top-color: #2A9D8F;
  animation: ll-loading-overlay-spin 0.9s linear infinite;
  flex: 0 0 auto;
}

.md-board-details-modal__overlay-text {
  color: #1B365D;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.005em;
}

/* Per-image "N / total" count under the loading label. Block so it sits on its
   own line; tabular-nums so the width doesn't jitter as the count ticks up. */
.md-board-details-modal__overlay-count {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: rgba(27, 54, 93, 0.65);
}

@keyframes md-board-details-modal__overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* The canvas wrapper inside the body picks up dark-mode styling via
   the inline `style` attribute the component sets; we just give the
   surrounding column a tiny breathing strip so the dark preview has
   room to breathe from the left actions column. */
.md-board-details-modal__body .col-sm-8 {
  padding-left: 18px;
}

/* ──────────────────────────────────────────────────────────────
   BOARD PREVIEW inner column — modernizes the bootstrap btn /
   dl-horizontal vocabulary inside the preview modal so the inner
   content matches the modal chrome (md-board-details-modal__*).
   Scoped under .md-board-preview to avoid leaking into other
   places that still use the older bootstrap classes.
   ────────────────────────────────────────────────────────────── */
.md-board-preview__info {
  font-size: 15px;
  color: #46505F;
}

/* Fill the modal body's full height so the preview canvas can use all the
   available vertical space (the canvas grows to fill, see below) instead of
   stopping short and leaving a gap. The bootstrap `.row` columns stretch to the
   row height (flex align-items:stretch default), so the canvas column gets the
   full height to distribute. */
.md-board-details-modal__body .md-board-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 100%;
}

/* Right-hand column: stack the canvas (grows) above the action row (natural
   height). The growing canvas pushes the actions to the bottom of the modal. */
.md-board-preview__canvas-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Action buttons sit in a row DIRECTLY BELOW the preview canvas (inside the
   right-hand canvas column, to the right of the board-detail info). The row is
   RIGHT-ALIGNED so the primary CTA and its neighbours (Board Actions / Back)
   cluster at the right edge; the destructive Remove is pushed to the far LEFT
   (margin-right:auto below) so it stays isolated. Wraps on narrow viewports.
   The canvas above is sized to the board's content height (not flex-grown), so
   `margin-top:auto` pins this row to the bottom of the modal. */
.md-board-preview__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  /* Guaranteed breathing room between the bottom of the preview canvas and the
     buttons, independent of the flex/auto-margin sizing above. */
  padding-top: 24px;
}

/* Modern button override — beats the legacy `.btn` / `.btn-lg`
   bootstrap rules that were on these elements (we keep the bootstrap
   classes for safety, and let the md-* rules take over via specificity
   + the !important in md-modal-btn--primary). */
.md-board-preview__action.md-board-preview__action {
  display: inline-flex;
  width: auto;
  justify-content: center;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  min-height: 48px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: normal;
  /* Bootstrap's .btn applies a 1px transparent border + its own
     focus shadow; reset both so the modern style reads cleanly. */
  border: none;
  text-shadow: none;
}

.md-board-preview__action--primary.md-board-preview__action--primary {
  font-size: 16px;
  min-height: 52px;
  letter-spacing: 0.02em;
}

/* Touch-device parity for the tile's hover-only `.board_action`.
   De-emphasized danger treatment. `margin-right:auto` pushes it to the far LEFT
   of the right-aligned row so it stays isolated from the positive CTAs (Try /
   Board Actions / Copy For). Capitalize via CSS because remove_label ships
   lowercase ("delete", "un-like") from i18n — those strings double as title
   tooltips on the tile, where lowercase is correct. */
.md-board-preview__action--remove.md-board-preview__action--remove {
  margin-right: auto;
  background: rgba(176, 42, 42, 0.06);
  color: #b02a2a;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  text-transform: capitalize;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-preview__action--remove.md-board-preview__action--remove:hover,
.md-board-preview__action--remove.md-board-preview__action--remove:focus-visible {
  background: #b02a2a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(176, 42, 42, 0.3);
}

.md-board-preview__action--remove-icon {
  font-size: 14px;
  line-height: 1;
}

.md-board-preview__action--remove-text {
  line-height: 1;
}

.md-board-preview__heading {
  text-align: center;
  margin-bottom: 14px;
}

.md-board-preview__title {
  font-size: 22px;
  font-weight: 800;
  color: #1B365D;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  line-height: 1.2;
}

.md-board-preview__byline {
  font-size: 13px;
  color: rgba(27, 54, 93, 0.65);
  font-weight: 500;
}

.md-board-preview__description {
  max-height: 190px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  font-size: 14px;
  line-height: 1.5;
  color: #46505F;
  margin-bottom: 14px;
}

.md-board-preview__description-text {
  white-space: pre-line;
}

.md-board-preview__status {
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.55);
  font-style: italic;
}

.md-board-preview__status--error {
  color: #b03a3a;
  font-style: normal;
  font-weight: 600;
}

/* Modern definition list — replaces the bootstrap .dl-horizontal
   look (floated dt with fixed width + truncation). Uses a 2-column
   grid so labels and values align neatly without truncating long
   board keys. */
.md-board-preview__meta.md-board-preview__meta {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  column-gap: 14px;
  row-gap: 6px;
  margin: 0;
  font-size: 13px;
}
.md-board-preview__meta.md-board-preview__meta dt {
  /* Override bootstrap's float / width / overflow rules. */
  float: none;
  width: auto;
  overflow: visible;
  text-align: left;
  text-overflow: clip;
  white-space: normal;
  color: rgba(27, 54, 93, 0.6);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.md-board-preview__meta.md-board-preview__meta dd {
  margin-left: 0;
  color: #46505F;
  font-weight: 500;
  word-break: break-word;
}

.md-modal-icon-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.md-modal-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(70, 80, 95, 0.1);
  color: #46505F;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-modal-message {
  font-size: 16px;
  color: #46505F;
  line-height: 1.5;
  margin: 0 0 8px;
}

.md-modal-board-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  margin: 0;
}

.md-modal-footer {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.md-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.5.5 AAA touch target — was 10×20 (~20 tall). */
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.md-modal-btn--primary {
  background: #46505F !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-modal-btn--primary:hover {
  background: #3a4350 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(70, 80, 95, 0.3);
}

/* Disabled (e.g. the PIN-settings Done button while a gate is on but the PIN
   isn't yet a valid 4-digit value) — dim the pill and block the pointer. */
.md-modal-btn--primary:disabled,
.md-modal-btn--primary[disabled],
.md-modal-btn--primary:disabled:hover,
.md-modal-btn--primary[disabled]:hover {
  background: rgba(70, 80, 95, 0.45) !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
}

.md-modal-btn--cancel {
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
}

.md-modal-btn--cancel:hover {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
}

/* ──────────────────────────────────────────────────────────────
   SWITCH COMMUNICATORS modal — modernized choice rows
   ──────────────────────────────────────────────────────────────
   The original modal used Bootstrap .btn-group with btn-primary /
   btn-default and inline-style glyphicons. Replaced with a pair of
   segmented choice cards per row, matching the brand vocabulary used
   in the modern UI: verdigris-tinted active state with a soft glow +
   inset highlight, glass-translucent inactive state, hover lift.
   Icons swapped for Feather-style stroke SVGs (24×24) so they sit in
   the same icon family as the dashboard cards, board-detail menu,
   and Share & Print tiles. */
.md-switch-comms__choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
}

.md-switch-comms__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.65);
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-switch-comms__choice:hover {
  border-color: rgba(26, 123, 122, 0.45);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.08);
  transform: translateY(-1px);
}

.md-switch-comms__choice:focus-visible {
  outline: none;
  border-color: #1A7B7A;
  box-shadow: 0 0 0 3px rgba(26, 123, 122, 0.2);
}

.md-switch-comms__choice--active {
  /* Soft verdigris-tinted illuminated active state. */
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.22) 0%, rgba(26, 123, 122, 0.14) 100%);
  border-color: #2A9D8F;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(42, 157, 143, 0.25), 0 4px 14px rgba(42, 157, 143, 0.18);
}

.md-switch-comms__choice--active:hover {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.3) 0%, rgba(26, 123, 122, 0.2) 100%);
  border-color: #1A7B7A;
  transform: none;
}

.md-switch-comms__choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 54, 93, 0.08);
  color: #1A7B7A;
}

.md-switch-comms__choice--active .md-switch-comms__choice-icon {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(26, 123, 122, 0.3);
  color: #1A7B7A;
}

.md-switch-comms__choice-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Narrow viewports: stack the two cards full-width. */
@media (max-width: 540px) {
  .md-switch-comms__choice-row {
    grid-template-columns: 1fr;
  }
}
.md-modal-btn--secondary {
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
}

.md-modal-btn--secondary:hover {
  background: rgba(27, 54, 93, 0.15);
  color: #1B365D;
}

/* Save / Update primary action — uses brand slate blue so it reads as
   the affirmative action without competing visually with the darker
   .md-modal-btn--primary (charcoal blue). Disabled state dims the
   pill so users see the saving / submitting moment. */
.md-modal-btn--save {
  background: #5A6A85 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(90, 106, 133, 0.25);
}

.md-modal-btn--save:hover,
.md-modal-btn--save:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(90, 106, 133, 0.3);
  outline: none;
}

.md-modal-btn--save:disabled,
.md-modal-btn--save[disabled] {
  background: rgba(90, 106, 133, 0.55) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Modern modal disclosure/expander — a collapsed-by-default section (e.g. the
   copy-board sub-board picker: everything is selected, so the picker is opt-in). */
.md-modal-expander {
  margin: 10px 0 6px;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  overflow: hidden;
}

.md-modal-expander__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: #f6f8fa;
  color: #46505F;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.md-modal-expander__toggle:hover {
  background: #eef1f4;
}

.md-modal-expander__toggle:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: -2px;
}

.md-modal-expander__chevron {
  flex-shrink: 0;
  color: #6b7683;
  transition: transform 0.18s ease;
}

.md-modal-expander--open .md-modal-expander__chevron {
  transform: rotate(90deg);
}

.md-modal-expander__body {
  padding: 10px 14px 12px;
  border-top: 1px solid #e2e6ea;
}

/* board-hierarchy selectable toolbar (Select All / Deselect All / Expand / Collapse). */
.md-hierarchy-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 8px;
  font-size: 15px;
}

.md-hierarchy-toolbar__link {
  color: #1A7B7A;
  font-weight: 600;
  text-decoration: none;
}

.md-hierarchy-toolbar__link:hover {
  text-decoration: underline;
}

.md-hierarchy-toolbar__sep {
  color: #c2c9d1;
}

/* Inline spinner inside a modal button — appears next to the label
   while a network request is in flight (e.g. "Adding Goal…"). Uses
   currentColor so it inherits the button's text color (white on the
   primary button). */
.md-modal-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -2px;
  animation: md-modal-spin 0.7s linear infinite;
}

.md-modal-btn.is-loading {
  cursor: progress;
}

@keyframes md-modal-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Indeterminate progress bar — slim track pinned across the footer
   while the save promise is pending. Two-bar gradient animates left-
   to-right for the "indeterminate" Material-style sweep. */
.md-modal-progress {
  flex-basis: 100%;
  margin: 10px 0 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  overflow: hidden;
  position: relative;
}

.md-modal-progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2A9D8F, #46505F);
  animation: md-modal-progress-slide 1.2s ease-in-out infinite;
}

@keyframes md-modal-progress-slide {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
/* ── Translation modal (button-set) ─────────────────────────────
   Replaces the legacy Bootstrap list-group + float layouts inside
   the Translate Boards modal with a calm 2-column row grid: source
   label on the left, translation input on the right, board-key
   path muted underneath. Each row reads as a self-contained card
   with subtle borders and hover state, matching the modern modal
   vocabulary (md-modal-*). The .md-modal-body { text-align:center }
   rule stays for the hero copy; the list overrides to
   text-align:left so words and inputs line up properly. */
.md-translate-hero {
  margin-bottom: 24px;
}

.md-translate-hero__title {
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  margin: 0 0 8px;
}

.md-translate-hero__caption {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 540px;
}

.md-translate-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
}

.md-translate-filters {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.md-translate-filter {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.md-translate-filter:hover,
.md-translate-filter:focus-visible {
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  text-decoration: none;
  outline: none;
}

.md-translate-filter--active {
  background: rgba(26, 123, 122, 0.15);
  color: #1A7B7A;
  border-color: rgba(26, 123, 122, 0.25);
}

.md-translate-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #46505F;
  text-decoration: none;
}

.md-translate-download:hover {
  color: #1B365D;
  text-decoration: underline;
}

.md-translate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.md-translate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.md-translate-row:hover {
  border-color: rgba(27, 54, 93, 0.16);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.05);
}

.md-translate-row--repeat {
  opacity: 0.7;
  border-style: dashed;
}

.md-translate-row--board {
  background: rgba(26, 123, 122, 0.06);
  border-color: rgba(26, 123, 122, 0.18);
}

.md-translate-row__source {
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  word-break: break-word;
}

.md-translate-row__source-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.md-translate-row__source-tag {
  font-size: 13px;
  color: #6B7280;
  font-weight: 400;
  margin-left: 4px;
}

.md-translate-row__target {
  min-width: 0;
}

.md-translate-row__path {
  grid-column: 1/-1;
  font-size: 12px;
  color: #6B7280;
  margin: 2px 0 0;
}

.md-translate-row__path a {
  color: inherit;
  text-decoration: none;
}

.md-translate-row__path a:hover {
  color: #46505F;
  text-decoration: underline;
}

.md-translate-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: #fff;
  color: #1B365D;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.md-translate-input:focus,
.md-translate-input:focus-visible {
  outline: none;
  border-color: #1A7B7A;
  box-shadow: 0 0 0 3px rgba(26, 123, 122, 0.2);
}

.md-translate-input::placeholder {
  color: rgba(27, 54, 93, 0.35);
  font-style: italic;
}

.md-translate-status {
  text-align: center;
  font-size: 14px;
  color: #6B7280;
  padding: 24px 0;
}

.md-translate-status--error {
  color: #C0392B;
}

/* Stack rows full-width on narrow viewports — source above input. */
@media (max-width: 540px) {
  .md-translate-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}
/* ── Edit Room Details modal — curriculum row repeater ──────────── */
.md-edit-unit-curriculum {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-edit-unit-curriculum__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 8px;
}

.md-edit-unit-curriculum__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: transparent;
  color: rgba(27, 54, 93, 0.55);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-edit-unit-curriculum__remove:hover,
.md-edit-unit-curriculum__remove:focus-visible {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.25);
  color: #dc3545;
  outline: none;
}

.md-edit-unit-curriculum__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  margin-top: 4px;
  border-radius: 999px;
  border: 1px dashed rgba(90, 106, 133, 0.45);
  background: rgba(90, 106, 133, 0.06);
  color: #5A6A85;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-edit-unit-curriculum__add:hover,
.md-edit-unit-curriculum__add:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.7);
  border-style: solid;
  outline: none;
}

@media (max-width: 550px) {
  .md-edit-unit-curriculum__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title  remove" "url    url";
    row-gap: 6px;
  }
  .md-edit-unit-curriculum__title {
    grid-area: title;
  }
  .md-edit-unit-curriculum__url {
    grid-area: url;
  }
  .md-edit-unit-curriculum__remove {
    grid-area: remove;
  }
}
/* Reusable modern-select styling for any modal — mirrors the
   .la-new-board-modal-wrap .modern-select pattern so the dropdown
   renders identically (rounded teal-focus trigger + custom listbox)
   anywhere we drop in {{modern-select class="md-modal-modern-select" ...}}.
   Key advantage over Bootstrap-styled <select>: the open list is a
   real <ul>, fully CSS-controlled — no native OS rendering. */
/* ── Global bound-select modernization ──
 * The bound-select component was rewritten to render a custom
 * <button> + <ul> listbox instead of a native <select>, so the
 * Bootstrap-styled <select> visual is gone everywhere {{bound-select}}
 * is used (200+ instances across modals, settings pages, forms).
 *
 * These rules style the new DOM globally so the modern look applies
 * regardless of context. Per-area overrides (e.g. specific
 * widths/colors) can be layered on .bound-select.<custom-class>.
 */
.bound-select {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  /* The wrapper is purely structural — the visual chip is the
     inner .bound-select__trigger button. Force-reset wrapper-level
     visuals so any legacy `select_class` (e.g. "form-control",
     "la-contact-input", "la-board-privacy-select", etc. — all
     classes that originally targeted a native <select>) doesn't
     paint a competing border / background / padding around the
     trigger. Without this, scoped rules like
     `.la-record-note-modal-body .form-control { border:1.5px;
     padding:8px 14px }` would nest a second box around the
     already-styled trigger. */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.bound-select__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #1B365D;
  text-align: left;
  background-color: rgba(27, 54, 93, 0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346505F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.bound-select__trigger:hover {
  border-color: rgba(27, 54, 93, 0.25);
  background-color: rgba(27, 54, 93, 0.05);
}

.bound-select__trigger:focus,
.bound-select__trigger:focus-visible,
.bound-select--open .bound-select__trigger {
  border-color: #2A9D8F;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.bound-select__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bound-select__trigger-text--placeholder {
  color: #6B7280;
  font-weight: 500;
}

.bound-select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  /* Below $aac-z-topbar (400) so the navbar always sits above the
     dropdown when the user scrolls past the trigger. */
  z-index: 150;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(27, 54, 93, 0.1);
  max-height: 320px;
  overflow-y: auto;
}

.bound-select__search {
  list-style: none;
  padding: 6px 6px 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
}

.bound-select__search-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bound-select__search-input:focus,
.bound-select__search-input:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

.bound-select__option {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease;
}

.bound-select__option:hover,
.bound-select__option:focus,
.bound-select__option:focus-visible {
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
  outline: none;
}

/* Stronger ring on keyboard-driven focus so the active option is
   distinguishable from hover-tinted siblings during arrow-key nav.
   See docs/styling-recurring-problems.md #11. */
.bound-select__option:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(42, 157, 143, 0.55);
}

.bound-select__option--selected {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  font-weight: 600;
}

/* Empty-state row inside any dropdown — shared rules covering the
   bound-select, modern-select, and Bootstrap-style `.dropdown-empty`
   patterns so every empty dropdown across the app reads as a single
   modern UX instead of a blank menu. */
.bound-select__empty,
.modern-select__empty,
.dropdown-menu .dropdown-empty,
.dropdown-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
  cursor: default;
  user-select: none;
  list-style: none;
}

.bound-select__empty-icon,
.modern-select__empty-icon,
.dropdown-empty .dropdown-empty__icon,
.dropdown-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.45);
}

.bound-select__empty-text,
.modern-select__empty-text,
.dropdown-empty .dropdown-empty__text,
.dropdown-empty__text {
  line-height: 1.4;
}

/* Bootstrap dropdown variant — wraps icon + text in `__inner` so the
   <li>'s flex layout doesn't fight Bootstrap's anchor styling. */
.dropdown-menu .dropdown-empty .dropdown-empty__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   Base .modern-select rules — light theme.
   The component had only scoped rules (`.la-new-board-modal-wrap`,
   `.md-modal-modern-select`) — anywhere else (e.g. /user_name/edit
   "Login Role" dropdown) it fell through to no styles or inherited
   dark-mode bleed. These base rules give every modern-select a
   consistent light pill + popover appearance and ensure the dropdown
   list breaks out of its container instead of being clipped.
   ────────────────────────────────────────────────────────────────── */
.modern-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.modern-select__trigger {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6A85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modern-select__trigger:hover {
  border-color: rgba(27, 54, 93, 0.28);
}

.modern-select__trigger:focus,
.modern-select__trigger:focus-visible,
.modern-select--open .modern-select__trigger {
  border-color: #2A9D8F;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.modern-select__trigger-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modern-select__trigger-text--placeholder {
  color: #6B7280;
  font-style: italic;
  font-weight: 500;
}

.modern-select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  /* Below $aac-z-topbar (400) so the navbar / topbar always sits
     above the dropdown when the user scrolls. Also below modal
     overlays ($aac-z-modal: 200 — but modals declare their own
     stacking context, so cross-stack ordering doesn't apply). */
  z-index: 150;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(27, 54, 93, 0.1);
  max-height: 280px;
  overflow-y: auto;
}

.modern-select__option {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.modern-select__option:hover,
.modern-select__option:focus,
.modern-select__option:focus-visible {
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
  outline: none;
}

/* Stronger ring on keyboard-driven focus so it's visually obvious
   which single option is currently selected during arrow-key
   navigation (without relying solely on the bg tint, which already
   doubles as the hover state). */
.modern-select__option:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(42, 157, 143, 0.55);
}

.modern-select__option--selected {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  font-weight: 600;
}

/* Search row — pinned at the top of `.modern-select__list--searchable`
   dropdowns when the consumer passes `searchable=true`. Sits inside
   the listbox <ul> as a `role="none"` row so it's outside the
   accessibility option tree but still inside the absolute-positioned
   dropdown chrome. Sticky-positioned so it stays visible while the
   option list scrolls beneath. */
.modern-select__search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  margin: -6px -6px 6px;
  background: #fff;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  position: sticky;
  top: -6px;
  z-index: 1;
  list-style: none;
}

.modern-select__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(27, 54, 93, 0.5);
  flex: 0 0 auto;
  padding-left: 4px;
}

.modern-select__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1B365D;
  background: #fff;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.modern-select__search-input::placeholder {
  color: rgba(27, 54, 93, 0.4);
  font-weight: 400;
}

.modern-select__search-input:focus,
.modern-select__search-input:focus-visible {
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.18);
}

.bound-select__option--selected:hover,
.bound-select__option--selected:focus-visible {
  background: rgba(42, 157, 143, 0.2);
}

.bound-select__option--disabled {
  color: rgba(27, 54, 93, 0.35);
  cursor: not-allowed;
}

.bound-select__option--disabled:hover {
  background: transparent;
  color: rgba(27, 54, 93, 0.35);
}

.bound-select__divider {
  padding: 8px 14px 4px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  pointer-events: none;
}

.bound-select__divider:first-child {
  border-top: none;
  margin-top: 0;
}

/* Compact variant (some callers use `short=true` for tight UI). */
.bound-select--short .bound-select__trigger {
  min-height: 32px;
  padding: 4px 36px 4px 12px;
  font-size: 13px;
}

.modern-select.md-modal-modern-select {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.modern-select.md-modal-modern-select .modern-select__trigger {
  display: block;
  width: 100%;
  padding: 12px 44px 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  background-color: rgba(27, 54, 93, 0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2346505F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.modern-select.md-modal-modern-select .modern-select__trigger:hover {
  border-color: rgba(27, 54, 93, 0.25);
}

.modern-select.md-modal-modern-select .modern-select__trigger:focus,
.modern-select.md-modal-modern-select .modern-select__trigger:focus-visible,
.modern-select.md-modal-modern-select.modern-select--open .modern-select__trigger {
  border-color: #2A9D8F;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.modern-select.md-modal-modern-select .modern-select__trigger-text--placeholder {
  color: #6B7280;
  font-weight: 500;
}

.modern-select.md-modal-modern-select .modern-select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
  max-height: 280px;
  overflow-y: auto;
}

.modern-select.md-modal-modern-select .modern-select__option {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.modern-select.md-modal-modern-select .modern-select__option:hover {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

.modern-select.md-modal-modern-select .modern-select__option--selected {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  font-weight: 600;
}

.modern-select.md-modal-modern-select .modern-select__option--selected:hover {
  background: rgba(42, 157, 143, 0.2);
}

/* Stacked-form wrapper used by new-goal and other modernized modals
   in place of Bootstrap form-horizontal. The body's text-align is
   already left for forms; this just resets vertical rhythm so each
   field's md-modal-field margin-top reads cleanly. */
.md-modal-form {
  text-align: left;
  margin: 0;
}

.md-modal-form .md-modal-field:first-child {
  margin-top: 0;
}

/* Inline row for label-adjacent helper text (e.g. "5 attempts per
   day" — narrow numeric input + free text on the same line). */
.md-modal-inline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.md-modal-input--narrow {
  max-width: 100px;
  flex: 0 0 auto;
}

/* Date-picker variant — wider than --narrow because date inputs need
   to show MM/DD/YYYY plus the native picker icon. Caps at 200px so
   it doesn't stretch the full inline row and leaves space for an
   adjacent button (e.g. "clear"). */
.md-modal-input--date {
  max-width: 200px;
  flex: 0 1 auto;
}

/* Inline secondary action sized to sit next to a same-row input
   without dominating it. Lighter padding + min-height than the
   footer .md-modal-btn so it reads as an inline form helper. */
.md-modal-btn--inline {
  padding: 8px 14px;
  min-height: 38px;
  font-size: 14px;
  flex: 0 0 auto;
}

.md-modal-hint--inline {
  margin: 0;
  font-size: 15px;
  color: #6B7280;
}

/* Modern checkbox row — replaces Bootstrap's "checkbox big_checkbox"
   inside the new-goal modal (and any other md-modal-form context).
   The label is the click target so checkbox + text both trigger the
   toggle; sunken bg + thin border give it the same "embedded chip"
   feel as md-modal-input / md-modal-modern-select. */
.md-modal-check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.md-modal-check:hover {
  background: rgba(27, 54, 93, 0.05);
  border-color: rgba(27, 54, 93, 0.18);
}

.md-modal-check:focus-within {
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
  outline: none;
}

.md-modal-check__input,
.md-modal-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid rgba(27, 54, 93, 0.35);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.md-modal-check__input:checked,
.md-modal-check input[type=checkbox]:checked {
  background: #46505F;
  border-color: #46505F;
}

.md-modal-check__input:checked::after,
.md-modal-check input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.md-modal-check__input:focus-visible,
.md-modal-check input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.6);
  outline-offset: 2px;
}

.md-modal-check__input:disabled,
.md-modal-check input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.md-modal-check__label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #1B365D;
  line-height: 1.4;
}

/* User-list variant — adds avatar slot and stronger selected state
   so the row reads as "this user gets the goal" rather than just a
   generic checkbox. */
.md-modal-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-modal-user-list li {
  margin: 0;
}

.md-modal-check--user {
  gap: 12px;
}

.md-modal-check--user.is-selected {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.35);
}

.md-modal-check--user.is-selected .md-modal-check__label {
  font-weight: 700;
}

.md-modal-check--user.is-not-premium {
  opacity: 0.6;
  cursor: not-allowed;
}

.md-modal-user-list__avatar {
  width: 30px;
  height: 30px;
  max-width: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  background: rgba(27, 54, 93, 0.06);
}

/* Goal video preview — modern rounded surface in place of the
   inline-styled <video> element that the old form-horizontal
   markup rendered. */
.md-modal-video {
  display: block;
  width: 100%;
  max-height: 400px;
  margin: 4px 0 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #000;
}

/* Tertiary text link inside the modal body — uses the brand slate-
   blue so it reads as actionable but doesn't compete with the
   footer buttons. */
.md-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #5A6A85;
  text-decoration: none;
  cursor: pointer;
}

.md-modal-link:hover,
.md-modal-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.md-modal-field {
  margin-top: 18px;
  text-align: left;
}

.md-modal-label {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  display: block;
  margin-bottom: 4px;
}

.md-modal-hint {
  font-size: 16px;
  color: #6B7280;
  margin: 0 0 8px;
  line-height: 1.5;
}

.md-modal-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 10px;
  font-size: 14px;
  color: #1B365D;
  background: rgba(27, 54, 93, 0.03);
  transition: border-color 0.12s ease;
  appearance: none;
  -webkit-appearance: none;
}

.md-modal-select:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

/* Style any Bootstrap form-control inside modern modals to match the
   md-modal-input / md-modal-select look (e.g. user-select component
   which hardcodes form-control). */
.md-modal-body select.form-control {
  width: 100% !important;
  padding: 10px 14px !important;
  padding-right: 40px !important;
  border: 1px solid rgba(27, 54, 93, 0.15) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  color: #1B365D !important;
  background: rgba(27, 54, 93, 0.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346505F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Force user-select component spans to full width inside modals */
.md-modal-body .md-modal-field > span {
  display: block !important;
  width: 100% !important;
}

.md-modal-body input.form-control,
.md-modal-body textarea.form-control {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(27, 54, 93, 0.15) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  color: #1B365D !important;
  background: rgba(27, 54, 93, 0.03) !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}

.md-modal-body select.form-control:focus,
.md-modal-body select.form-control:focus-visible,
.md-modal-body input.form-control:focus,
.md-modal-body input.form-control:focus-visible,
.md-modal-body textarea.form-control:focus,
.md-modal-body textarea.form-control:focus-visible {
  border-color: #2A9D8F !important;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12) !important;
  outline: none !important;
}

/* Bootstrap's .form-control:focus rule (loaded after our overrides
   in some bundles) reapplies the heavy navy border + glow. Pin our
   modern teal focus state with a maximally-specific selector that
   wins regardless of stylesheet order. The triple .form-control
   chain bumps specificity to (0,5,2), well above Bootstrap's (0,2,1). */
.md-modal-body select.form-control.form-control.form-control:focus,
.md-modal-body select.form-control.form-control.form-control:focus-visible,
.md-modal-body select.form-control.form-control.form-control:active,
.md-modal-body input.form-control.form-control.form-control:focus,
.md-modal-body input.form-control.form-control.form-control:focus-visible,
.md-modal-body input.form-control.form-control.form-control:active,
.md-modal-body textarea.form-control.form-control.form-control:focus,
.md-modal-body textarea.form-control.form-control.form-control:focus-visible,
.md-modal-body textarea.form-control.form-control.form-control:active,
.md-modal-form select.form-control.form-control.form-control:focus,
.md-modal-form select.form-control.form-control.form-control:focus-visible,
.md-modal-form input.form-control.form-control.form-control:focus,
.md-modal-form input.form-control.form-control.form-control:focus-visible,
.md-modal-form textarea.form-control.form-control.form-control:focus,
.md-modal-form textarea.form-control.form-control.form-control:focus-visible {
  border: 1px solid #2A9D8F !important;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12) !important;
  outline: none !important;
}

/* Resting (non-focus) override — also pin border so any other
   Bootstrap rule (validation/parent state) can't reapply navy. */
.md-modal-body select.form-control.form-control.form-control,
.md-modal-body input.form-control.form-control.form-control,
.md-modal-body textarea.form-control.form-control.form-control,
.md-modal-form select.form-control.form-control.form-control,
.md-modal-form input.form-control.form-control.form-control,
.md-modal-form textarea.form-control.form-control.form-control {
  border: 1px solid rgba(27, 54, 93, 0.15) !important;
  box-shadow: none !important;
}

/* ── Voice & Output Modal layout helpers ── */
.md-voice-output__voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.md-voice-output__voice-select {
  flex: 1 1 200px;
  min-width: 180px;
}

.md-voice-output__voice-row .md-modal-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.md-voice-output__volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.md-voice-output__volume-row .md-modal-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Usage checklist (global — used in setup pages, modals, etc.) ── */
.usage-checklist__title {
  margin: 0 0 1rem;
  font-size: 17px;
  font-weight: 700;
  color: var(--md-ink, #1B365D);
}

.usage-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.usage-checklist__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink, #1B365D);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border-left: 4px solid rgba(44, 183, 176, 0.6);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.06);
}

.usage-checklist__item::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(44, 183, 176, 0.85);
  border-radius: 50%;
  line-height: 1;
}

/* Checklist inside modals uses dusty-denim with white checkmark.
   White on #4C86D8 = 3.86:1 — passes WCAG 1.4.11 non-text (3:1). */
.md-modal-body .usage-checklist__item {
  border-left-color: #4C86D8;
}

.md-modal-body .usage-checklist__item::before {
  background: #4C86D8;
  color: #fff;
}

/* ── Share Board Modal: shared users list ── */
.md-modal-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  margin: 16px 0 10px;
}

.md-modal-shared-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.md-modal-shared-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  transition: background 0.15s ease;
}

.md-modal-shared-user:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-modal-shared-user__info {
  flex: 1;
  min-width: 0;
}

.md-modal-shared-user__name {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
}

.md-modal-shared-user__detail {
  font-size: 14px;
  color: #6B7280;
}

.md-modal-shared-user__detail a {
  color: #2A9D8F;
}

.md-modal-shared-user__badge {
  font-size: 14px;
  color: #9CA3AF;
  margin-left: 4px;
}

.md-modal-shared-user__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: #9CA3AF;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-modal-shared-user__remove:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* ── Swap or Drop Modal ── */
.md-swap-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.md-swap-preview__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.1);
  min-width: 110px;
}

.md-swap-preview__card--folder {
  background: rgba(42, 157, 143, 0.06);
  border-color: rgba(42, 157, 143, 0.18);
}

.md-swap-preview__img {
  height: 48px;
  max-width: 80px;
  object-fit: contain;
}

.md-swap-preview__label {
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
}

.md-swap-preview__folder-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #2A9D8F;
  font-weight: 500;
}

.md-swap-preview__arrow {
  color: #8896a7;
  flex-shrink: 0;
}

.md-swap-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: left;
}

.md-swap-alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.md-swap-alert--error {
  background: #fef2f2;
  color: #C0392B;
  border: 1px solid rgba(192, 57, 43, 0.15);
}

.md-swap-alert--warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid rgba(146, 64, 14, 0.15);
}

.md-swap-alert--info {
  background: rgba(42, 157, 143, 0.06);
  color: #2A9D8F;
  border: 1px solid rgba(42, 157, 143, 0.15);
}

/* ── Manage Languages Modal ── */
.md-manage-lang-section {
  margin-bottom: 8px;
}

.md-manage-lang-boards {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.02);
}

.md-manage-lang-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: #8896a7;
  font-size: 14px;
}

.md-manage-lang-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-manage-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: rgba(27, 54, 93, 0.02);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin: 0;
  font-weight: normal;
}

.md-manage-lang-item:hover {
  background: rgba(27, 54, 93, 0.05);
}

.md-manage-lang-item--active {
  background: rgba(42, 157, 143, 0.06);
  border-color: rgba(42, 157, 143, 0.25);
  font-weight: 600;
}

.md-manage-lang-item--active:hover {
  background: rgba(42, 157, 143, 0.1);
}

.md-manage-lang-checkbox {
  margin: 0 !important;
  accent-color: #2A9D8F;
}

.md-manage-lang-name {
  font-size: 14px;
  color: #1B365D;
  flex: 1;
}

.md-manage-lang-code {
  font-size: 14px;
  color: #8896a7;
  font-family: monospace;
  background: rgba(27, 54, 93, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
}

.md-modal-input {
  width: 100%;
  /* WCAG 2.5.5 AAA touch target — was 10px 14px (~34 tall). */
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 10px;
  font-size: 14px;
  color: #1B365D;
  background: rgba(27, 54, 93, 0.03);
  transition: border-color 0.12s ease;
}

.md-modal-input:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}

.md-modal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #46505F;
  cursor: pointer;
}

.md-modal-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #46505F;
  flex-shrink: 0;
}

.md-modal-toggle-group {
  display: flex;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(27, 54, 93, 0.12);
}

.md-modal-toggle-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: rgba(27, 54, 93, 0.03);
  color: #46505F;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-modal-toggle-btn + .md-modal-toggle-btn {
  border-left: 1px solid rgba(27, 54, 93, 0.12);
}

.md-modal-toggle-btn--active {
  background: #46505F;
  color: #fff;
}

.md-modal-toggle-btn:hover:not(.md-modal-toggle-btn--active) {
  background: rgba(27, 54, 93, 0.08);
}

.md-modal-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  overflow: hidden;
  margin-top: 14px;
}

.md-modal-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: #46505F;
  transition: width 0.3s ease;
}

.md-modal-link {
  color: #46505F;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.12s ease;
}

.md-modal-link:hover {
  color: #1B365D;
}

/* Greyed-out variant used when an inline link is conditionally rendered
   without a target (e.g. premium-required modal when no user_name is
   present — the phrase still reads naturally but isn't clickable). */
.md-modal-link--disabled {
  color: #6B7280;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: default;
  pointer-events: none;
}

/* When a button needs to render as an inline link (e.g. browse goals
   in new-goal modal) — strip default button chrome so it inherits
   the .md-modal-link look. */
.md-modal-link--inline-button {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* New Goal modal: header layout with the icon-circle alongside the
   h3 title. Mirrors how the dashboard cards present the title row
   (.md-card__head — icon + title stack). */
.md-new-goal-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 56px; /* clear the absolute-positioned close button */
}

.md-new-goal-header .md-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.01em;
}

.md-new-goal-icon {
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
  flex-shrink: 0;
}

/* New-goal modal layout: cap the modal at viewport height with the
   body as the only scrollable region. The modern-select dropdown
   renders inline (position: relative) so it scrolls with the rest
   of the form content rather than floating outside the modal —
   replaces the previous "let it float outside the modal" approach
   which left a visible gap between the modal card and a floating
   dropdown card. Scoped to new-goal so other modals keep their
   original overlay behavior. */
.modal-dialog:has(.md-new-goal-header) {
  /* Push the modal up so the header isn't lost behind the topbar
     and there's headroom to grow downward. */
  margin-top: 15px;
  margin-bottom: 15px;
}

.modal-content:has(.md-new-goal-header) {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 30px);
  /* Clip the rounded corners so the inner scrollbar doesn't sit
     on top of them — overflow:hidden also prevents the body's
     scrollbar from rendering outside the modal radius. */
  overflow: hidden !important;
}

.modal-content:has(.md-new-goal-header) > .md-modal-header,
.modal-content:has(.md-new-goal-header) > .modal-header {
  flex: 0 0 auto;
}

.modal-content:has(.md-new-goal-header) > .md-modal-footer,
.modal-content:has(.md-new-goal-header) > .modal-footer {
  flex: 0 0 auto;
}

.modal-content:has(.md-new-goal-header) .modal-body,
.modal-content:has(.md-new-goal-header) .md-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: visible !important;
  /* Slim accent scrollbar so the modal body still reads as a clean
     modern surface even when the content scrolls. */
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 54, 93, 0.25) transparent;
}

.modal-content:has(.md-new-goal-header) .modal-body::-webkit-scrollbar,
.modal-content:has(.md-new-goal-header) .md-modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-content:has(.md-new-goal-header) .modal-body::-webkit-scrollbar-thumb,
.modal-content:has(.md-new-goal-header) .md-modal-body::-webkit-scrollbar-thumb {
  background: rgba(27, 54, 93, 0.25);
  border-radius: 999px;
}

.modal-content:has(.md-new-goal-header) .md-modal-form {
  overflow: visible !important;
}

.modal-content:has(.md-new-goal-header) .modern-select__list {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 6px !important;
  z-index: auto !important;
}

/* The legacy Bootstrap form-group blocks inside the new-goal modal
   (selected_goal / sequence / Users / Badges / Video) still use
   .col-sm-* which floats children. Without a clearfix the
   following fields collide. Force the row to clear inside the
   modern modal body so each form-group reads as its own row. */
.modal-content:has(.md-new-goal-header) .md-modal-body .form-group {
  display: block;
  margin-bottom: 14px;
}

.modal-content:has(.md-new-goal-header) .md-modal-body .form-group::after {
  content: "";
  display: table;
  clear: both;
}

.modal-content:has(.md-new-goal-header) .md-modal-body .form-group .control-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
}

.modal-content:has(.md-new-goal-header) .md-modal-body .form-group [class*=col-sm-] {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

.modal-content:has(.md-new-goal-header) .md-modal-body .form-group [class*=col-sm-offset-] {
  margin-left: 0;
}

/* Inline error message in modal footer — replaces ad-hoc text-danger. */
.md-modal-error {
  flex-basis: 100%;
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #b32a4d;
  background: rgba(179, 42, 77, 0.08);
  border: 1px solid rgba(179, 42, 77, 0.16);
  border-radius: 8px;
  line-height: 1.4;
}

/* Quick Assessment modal — header icon, type-row dropdown alignment,
   tally rows (number input + step buttons), and the large correct /
   incorrect action squares. Uses md-modal-* base styles for the
   shell, header, body, and footer; these rules layer the
   assessment-specific layout on top. */
.md-quick-assess-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.md-quick-assess-icon {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  flex: 0 0 auto;
}

.md-quick-assess-body {
  text-align: left;
}

.md-quick-assess-type-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.md-quick-assess-type-input {
  flex: 1 1 auto;
  min-width: 0;
}

.md-quick-assess-type-row .md-quick-assess-goal-menu {
  margin-left: -1px;
}

.md-quick-assess-type-row .md-quick-assess-goal-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 100%;
  min-height: 44px;
}

.md-quick-assess-goal-list {
  right: 0;
  left: auto;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
  padding: 6px;
}

.md-quick-assess-goal-list > li > a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  border-radius: 8px;
}

.md-quick-assess-goal-list > li > a:hover,
.md-quick-assess-goal-list > li > a:focus {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

/* Tally row: single integrated stepper group [−][input][+] sharing
   one rounded outer border with internal dividers. Reads as one
   cohesive control instead of three loose elements. The "Adjust if
   needed" caption to the right replaces the inline "oops?" hint —
   same intent, less visual clutter. */
.md-quick-assess-tally-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.md-quick-assess-stepper {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-quick-assess-stepper:hover {
  border-color: rgba(27, 54, 93, 0.28);
}

.md-quick-assess-stepper:focus-within {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.16);
}

.md-quick-assess-stepper__btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 54, 93, 0.03);
  border: none;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-quick-assess-stepper__btn:hover {
  background: rgba(27, 54, 93, 0.08);
  color: rgb(20.115, 40.23, 69.285);
}

.md-quick-assess-stepper__btn:active {
  background: rgba(27, 54, 93, 0.12);
}

.md-quick-assess-stepper__btn:focus-visible {
  outline: none;
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
}

.md-quick-assess-stepper__btn--minus {
  border-right: 1px solid rgba(27, 54, 93, 0.1);
}

.md-quick-assess-stepper__btn--plus {
  border-left: 1px solid rgba(27, 54, 93, 0.1);
}

/* Stepper number input — sits as the middle segment of the
   integrated stepper group. Must override the generic
   `.md-modal-body input.form-control` rules above, which apply
   border-radius:10px / border:1px / background tint with
   !important. We re-pin those with !important here so the input
   reads as a flat rectangular middle segment, not a rounded inner
   chip. */
.md-quick-assess-stepper__input.form-control.form-control,
.md-modal-body .md-quick-assess-stepper__input.form-control.form-control,
.md-modal-form .md-quick-assess-stepper__input.form-control.form-control {
  width: 72px !important;
  flex: 0 0 72px;
  height: 44px !important;
  min-height: 44px;
  padding: 0 6px !important;
  margin: 0;
  text-align: center;
  font-size: 18px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1B365D !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

.md-quick-assess-stepper__input.form-control.form-control:focus,
.md-quick-assess-stepper__input.form-control.form-control:focus-visible,
.md-modal-body .md-quick-assess-stepper__input.form-control.form-control.form-control:focus,
.md-modal-body .md-quick-assess-stepper__input.form-control.form-control.form-control:focus-visible,
.md-modal-form .md-quick-assess-stepper__input.form-control.form-control.form-control:focus,
.md-modal-form .md-quick-assess-stepper__input.form-control.form-control.form-control:focus-visible {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide native number-input spinners — the custom +/- buttons replace them. */
.md-quick-assess-stepper__input.form-control.form-control::-webkit-outer-spin-button,
.md-quick-assess-stepper__input.form-control.form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.md-quick-assess-stepper-caption {
  font-size: 12px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.5);
  letter-spacing: 0.02em;
}

/* Danger variant — used on the Incorrect stepper so its focus glow
   and active-state tint read as "negative" instead of mirroring the
   Correct stepper's verdigris (the action buttons below already
   carry the green/red split). Desaturated tomato — matches the
   --incorrect action button base, dimmed for control chrome. */
.md-quick-assess-stepper--danger:focus-within {
  border-color: #B94B4B;
  box-shadow: 0 0 0 3px rgba(185, 75, 75, 0.16);
}

.md-quick-assess-stepper--danger .md-quick-assess-stepper__btn:focus-visible {
  background: rgba(185, 75, 75, 0.1);
  color: #9A3F3F;
}

.md-quick-assess-actions {
  display: flex;
  gap: 16px;
  margin-top: 22px;
  justify-content: center;
}

.md-quick-assess-action {
  flex: 1 1 0;
  min-height: 96px;
  max-width: 240px;
  border: none;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.md-quick-assess-action--correct {
  background: linear-gradient(180deg, #5BBE7A 0%, #3FA361 100%);
  box-shadow: 0 6px 14px rgba(63, 163, 97, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.md-quick-assess-action--correct:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(63, 163, 97, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.md-quick-assess-action--incorrect {
  background: linear-gradient(180deg, #D26A6A 0%, #B94B4B 100%);
  box-shadow: 0 6px 14px rgba(185, 75, 75, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.md-quick-assess-action--incorrect:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(185, 75, 75, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.md-quick-assess-action:active {
  transform: translateY(1px);
}

.md-quick-assess-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.3), 0 6px 14px rgba(27, 54, 93, 0.18);
}

/* ── Record Note modal (record-note) — modernized to the md-modal-* family ──────
   Reuses the shared md-modal-header / md-modal-icon-circle / md-modal-title /
   md-modal-body / md-modal-field / md-modal-label / md-modal-footer / md-modal-btn /
   md-modal-check classes; these md-record-note-* rules add only the bits unique to
   this modal (header row, segmented Type toggle, goal-status pills, "From Template"
   dropdown, prior-note panel), mirroring the quick-assessment modal's design language. */
.md-record-note-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.md-record-note-icon {
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  flex: 0 0 auto;
}

.md-record-note-body {
  text-align: left;
}

.md-record-note-textarea {
  resize: vertical;
}

/* The bound-select Topic dropdown floats with position:absolute; inside the modal's
   rounded/overflow-hidden body it would clip. Flow-position its menu so it pushes the
   form down instead (docs/styling-recurring-problems.md #1). */
.md-record-note-body .bound-select__list {
  position: static;
}

/* Type segmented control [ Text | Video ] + optional "From Template" dropdown. */
.md-record-note-type-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.md-record-note-segmented {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  gap: 3px;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
}

.md-record-note-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-record-note-seg__icon {
  opacity: 0.85;
}

.md-record-note-seg:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-record-note-seg:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

.md-record-note-seg--active {
  background: #fff;
  color: #2A9D8F;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.1), 0 2px 6px rgba(27, 54, 93, 0.08);
}

/* "From Template" dropdown — secondary md-modal button + a flow-anchored menu that
   mirrors the quick-assessment goal dropdown. */
.md-record-note-template-btn {
  white-space: nowrap;
}

.md-record-note-template-list {
  right: 0;
  left: auto;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
  padding: 6px;
}

.md-record-note-template-list > li > a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
  border-radius: 8px;
}

.md-record-note-template-list > li > a:hover,
.md-record-note-template-list > li > a:focus {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

/* Goal-status pills (shown once a Topic/goal is picked). The 50px faces.png sprite
   is rendered by the existing `.face_button .face` rule (app.scss ~8748); these rules
   reset the legacy Bootstrap `.btn` look and give a modern selectable pill. The active
   one carries `.btn-primary` (from button_display_class). */
.md-record-note-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.md-record-note-status {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 14px;
  background: #fff;
  color: #1B365D;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.md-record-note-status:hover {
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

.md-record-note-status:active {
  transform: translateY(1px);
}

.md-record-note-status:focus-visible {
  outline: none;
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

.md-record-note-status.btn-primary {
  border-color: #2A9D8F;
  background: rgba(42, 157, 143, 0.1);
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.16);
}

.md-record-note-status__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Previous-note panel — a quiet quoted card so the prior note reads as reference. */
.md-record-note-prior {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-left: 4px solid rgba(42, 157, 143, 0.5);
  border-radius: 12px;
  color: var(--md-muted);
  font-style: italic;
  line-height: 1.5;
}

.md-record-note-prior__mark {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  color: rgba(42, 157, 143, 0.7);
  flex-shrink: 0;
}

.md-record-note-prior__text {
  flex: 1 1 auto;
}

/* Premium Required modal — gold-tinted icon and text overrides. The
   modal uses .md-modal-* base styles; these rules add the premium
   accent and tighten paragraph spacing for the multi-paragraph body. */
.md-premium-required-icon {
  background: rgba(224, 168, 46, 0.14);
  color: #B8860B;
}

.md-premium-required-body {
  text-align: left;
}

.md-premium-required-body .md-modal-icon-row {
  justify-content: center;
}

.md-premium-required-body .md-modal-message {
  font-size: 16px;
  text-align: center;
  margin: 0 auto 14px;
  max-width: 520px;
}

.md-premium-required-body .md-modal-message:last-child {
  margin-bottom: 0;
}

/* Debug strip rendered only for the 'edi' admin user — surfaces the
   raw modal payload (reason / action / user_name) above the icon row.
   Compact, minimum 14px text to comply with accessibility floor. */
.md-premium-required-debug {
  font-size: 14px;
  color: #6B7280;
  background: rgba(27, 54, 93, 0.04);
  border: 1px dashed rgba(27, 54, 93, 0.14);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-family: monospace;
  word-break: break-word;
}

.md-modal-status {
  width: 100%;
  margin: 10px 0 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.md-modal-status--success {
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
}

.md-modal-dropup {
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.12);
  padding: 6px;
  overflow: hidden;
}

.md-modal-dropup li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-modal-dropup li a:hover {
  background: rgba(70, 80, 95, 0.08);
  color: #1B365D;
}

.md-icon-heart {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center/contain;
  color: #e74c6f;
  vertical-align: middle;
}

.md-modal-icon-circle--danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.md-modal-btn--danger {
  background: #dc3545 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

.md-modal-btn--danger:hover {
  background: #c82333 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.md-modal-board-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 10px;
  margin-top: 4px;
}

.md-modal-board-preview__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.md-modal-board-preview__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-modal-board-preview__name {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.md-modal-board-preview__size {
  font-size: 14px;
  color: #6B7280;
}

.md-modal-status--warning {
  background: rgba(212, 168, 75, 0.1);
  color: #b8860b;
}

.md-modal-supervisee-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.md-modal-avatar {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.md-modal-status--error {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.md-modal-status--info {
  background: rgba(42, 157, 143, 0.08);
  color: #2A9D8F;
}

/* ── Add App Modal: app store grid + callout ── */
.md-modal-app-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  margin: 18px 0;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 14px;
}

.md-modal-app-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.md-modal-app-store:hover {
  transform: translateY(-2px);
  border-color: rgba(42, 157, 143, 0.3);
  box-shadow: 0 6px 16px rgba(27, 54, 93, 0.12);
}

.md-modal-app-store img {
  height: 44px;
  display: block;
}

.md-modal-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  background: rgba(42, 157, 143, 0.06);
  border: 1px solid rgba(42, 157, 143, 0.18);
  border-radius: 12px;
}

.md-modal-callout__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(42, 157, 143, 0.2);
}

.md-modal-callout__text {
  margin: 0;
  font-size: 14px;
  color: #46505F;
  line-height: 1.5;
  flex: 1;
}

/* ── Premium Voices Modal: dark close button ── */
.md-modal-header--premium-voices .close {
  background: #46505F;
  color: #fff;
  border-color: #46505F;
}

.md-modal-header--premium-voices .close:hover {
  background: #3a4350;
  color: #fff;
  border-color: #3a4350;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.3);
}

/* ── Premium Voices Modal: voice list ── */
.md-modal-voice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.md-modal-voice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-modal-voice:hover {
  background: rgba(27, 54, 93, 0.06);
  border-color: rgba(27, 54, 93, 0.12);
}

.md-modal-voice--inactive {
  opacity: 0.65;
}

.md-modal-voice__info {
  flex: 1;
  min-width: 0;
}

.md-modal-voice__name {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.md-modal-voice__claimed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2A9D8F;
  color: #fff;
  flex-shrink: 0;
}

.md-modal-voice__locale {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  background: rgba(27, 54, 93, 0.06);
  padding: 2px 8px;
  border-radius: 999px;
}

.md-modal-voice__meta {
  font-size: 14px;
  color: #6B7280;
  margin-top: 2px;
}

.md-modal-voice__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.md-modal-voice__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.md-modal-voice__btn:hover {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
}

.md-modal-voice__btn--play:hover {
  background: rgba(42, 157, 143, 0.12);
  color: #2A9D8F;
}

.md-modal-voice__btn--download {
  background: #46505F;
  color: #fff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.2);
}

.md-modal-voice__btn--download:hover {
  background: #3a4350;
  color: #fff;
  box-shadow: 0 4px 10px rgba(70, 80, 95, 0.28);
}

.md-modal-voice__btn--remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.md-modal-voice__none {
  font-size: 14px;
  color: #9CA3AF;
  font-style: italic;
  padding: 0 6px;
}

.md-modal-voice__progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #46505F;
  padding: 0 4px;
}

.md-modal-voice__spinner {
  animation: md-modal-voice-spin 1s linear infinite;
}

@keyframes md-modal-voice-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   Organization Page – Modern Layout
   ========================================================================== */
.md-shell--org {
  min-height: 100%;
}

.md-shell--org > .md-workspace {
  padding-bottom: 4rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Contained dashboard surface for an INDIVIDUAL org page — mirrors the Reports
   page's `.md-workspace .md-stats-page` frosted-glass panel so the org content
   sits in the same translucent rounded card (the pillnav + hero stay ABOVE it on
   the plain workspace background, exactly like reports). Scoped away from the org
   DIRECTORY (`--org-directory`, the org LIST page), which keeps its plain layout.
   The org `<main>` is a direct child of `.md-workspace`, so this must also beat
   `.md-workspace > .md-main { max-width:100% }` — same (0,2,0) specificity, later
   source order wins. */
.md-shell--org:not(.md-shell--org-directory) .md-main--org {
  max-width: 100% !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(251, 252, 254, 0.34) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  border-radius: 32px !important;
  box-shadow: 0 6px 40px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
}

.md-hero--org {
  text-align: center !important;
  padding: 20px 2px 10px !important;
}

/* Match the Reports hero title exactly (32px Maitree via `.md-hero--dashboard
   .md-hero__title`) — drop the 28px override so both heroes read as one family. */
.md-hero--org .md-hero__title {
  font-family: "Maitree", serif !important;
}

/* Dot separators between the org hero meta items (users · managers · created).
   Scoped to the org hero — the shared `.md-hero-meta__item + …{margin-left:30px}`
   is for the reports hero, which carries its own inline dot element. The `::before`
   is a flex child at the start of the second+ item (the item is inline-flex with a
   7px gap), so its margins + that gap frame the middot evenly on both sides. */
.md-hero--org .md-hero-meta__item + .md-hero-meta__item {
  margin-left: 0;
}

.md-hero--org .md-hero-meta__item + .md-hero-meta__item::before {
  content: "·";
  margin-left: 13px;
  margin-right: 6px;
  color: rgba(27, 54, 93, 0.4);
  font-weight: 700;
  line-height: 1;
}

/* #1 header hierarchy: capitalize the meta labels (Users / Managers / Created)
   but keep the "created" date value lowercase (via .md-hero-meta__nocap), so it
   reads "Created 5 months ago", not "Created 5 Months Ago". Org-scoped. */
.md-hero--org .md-hero-meta__item {
  text-transform: capitalize;
}

.md-hero-meta__nocap {
  text-transform: none;
}

/* Org meta chips row below hero title */
.md-org-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}

/* Informational tag style — mirrors `.md-caseload__access-badge`
   (flat, no shadow, soft-tinted background) so these read as
   metadata, not interactive controls. Lighter font weight than
   the access badge (500 vs 700) per spec — these convey passive
   counts/dates, the access badge conveys a permission state. */
.md-org-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #5a6678;
  background: rgba(27, 54, 93, 0.045);
  border: none;
  border-radius: 8px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.md-org-meta__chip svg {
  opacity: 0.55;
  flex: 0 0 auto;
}

.md-org-meta__chip--muted {
  color: rgba(27, 54, 93, 0.55);
  background: rgba(27, 54, 93, 0.035);
}

/* Sub-navigation pills inside admin index (Managers, Supervisors, etc.) */
.md-pillnav--org-sub {
  width: fit-content !important;
  margin: 0 auto 24px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.md-pillnav--org-sub .md-pillnav__pill {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--md-navy, #1B365D) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.md-pillnav--org-sub .md-pillnav__pill:hover {
  background: rgba(76, 134, 216, 0.08) !important;
}

.md-pillnav--org-sub .md-pillnav__pill.is-active {
  background: var(--md-navy, #1B365D) !important;
  color: #fff !important;
}

/* Parent org badge */
.md-org-parent-badge {
  text-align: center;
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  margin-bottom: 16px;
}

.md-org-parent-badge a {
  color: #2860C9; /* WCAG AA fix — was $brand-dusty-denim (3.49:1). */
  text-decoration: none;
  font-weight: 600;
}

.md-org-context-actions,
.md-org-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--md-muted, #1B365D);
  font-size: 14px;
}

.md-org-hero-actions {
  margin: 10px 0 0;
}

.md-org-context-actions__link,
.md-org-hero-actions__link {
  color: #2860C9;
  font-weight: 700;
  text-decoration: none;
}

.md-org-context-actions__link:hover,
.md-org-hero-actions__link:hover {
  text-decoration: underline;
}

.md-org-context-actions__divider {
  color: rgba(27, 54, 93, 0.35);
}

/* Stats grid */
.md-org-stats {
  margin-bottom: 28px;
}

/* Metric cards mirror the Reports (/{user}/stats) summary panels: an even grid
   (was a centered flex-wrap that left an awkward 4+2 layout), elevated tiles with
   a tinted header band over a prominent value. The responsive rules below already
   assume a grid (grid-template-columns / --wide span) — they were inert against
   the old flex base. */
.md-org-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* #8 — a touch more room between cards so the grid breathes. */
  gap: 16px;
  margin-bottom: 22px;
}

/* System Health row: a compact Cache Memory tile + a wider Background Queues
   status panel. */
.md-org-stats__grid--system {
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 1.7fr);
}

.md-org-stat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  /* Layered elevation from the reports metric cards: inset top highlight + two
     soft navy drops, so the tiles read as solid + raised (not flat-bordered). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(27, 54, 93, 0.07), 0 8px 20px rgba(27, 54, 93, 0.08);
}

.md-org-stat-card--wide {
  grid-column: span 2;
}

/* Tinted header band (verdigris teal, matching the reports primary-row heading)
   over a hairline rule — carries the label. */
.md-org-stat-card__head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(44, 183, 176, 0.26) 0%, rgba(44, 183, 176, 0.14) 100%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px -1px rgba(17, 26, 46, 0.06);
}

.md-org-stat-card__label {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-muted, rgba(27, 54, 93, 0.7));
}

.md-org-stat-card__body {
  padding: 12px 14px 14px;
}

.md-org-stat-card__value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #1B365D;
}

/* Card variant by PURPOSE (per design ask): activity cards keep the teal header;
   SYSTEM cards get a neutral gray-blue header so the two categories are legible at
   a glance without loud color. */
.md-org-stat-card--system .md-org-stat-card__head {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.11) 0%, rgba(27, 54, 93, 0.05) 100%);
}

/* Subtle amber "stale" dot on the Last Session value when the org hasn't logged a
   session in > 2 weeks — communicates staleness at a glance (#10). */
.md-org-stat-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

.md-org-stat-dot--stale {
  background: #d9a400;
  box-shadow: 0 0 0 3px rgba(217, 164, 0, 0.16);
}

/* Background Queues STATUS PANEL (#4) — rows of dot + label + count instead of a
   run-on metric string, so infra load is scannable. */
.md-org-status-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-org-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.md-org-status-row__label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.72);
}

.md-org-status-row__count {
  margin-left: auto;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1B365D;
  font-variant-numeric: tabular-nums;
}

/* Status dot color = queue health (#10). Green healthy → amber building →
   orange/red issue. The state class comes from the controller's queue_state. */
.md-org-status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aa4b2;
}

.md-org-status-dot.site-normal {
  background: #2e9e6a;
}

.md-org-status-dot.site-warning {
  background: #d9a400;
}

.md-org-status-dot.site-danger {
  background: #cc6600;
}

.md-org-status-dot.site-emergency {
  background: #c0392b;
}

/* The Default queue reads blue when healthy (a neutral baseline rather than a
   green "good" signal); it still escalates to amber/orange/red if it spikes. */
.md-org-status-dot--default.site-normal {
  background: #4c86d8;
}

/* Caseload-card header — center the "My Caseload · People you
   support" group horizontally instead of pinning each side. The
   base .md-card__head--between rule uses justify-content:
   space-between for the dashboard Boards card (title left,
   button right), but the caseload card has nothing on the right
   so centering reads cleaner. Scoped to .md-card--sup so the
   dashboard's Boards-card header isn't affected. */
.md-card--sup .md-card__head--between {
  justify-content: center !important;
  text-align: center !important;
}

/* Native <details>/<summary> dropdown that replaces the pillnav at
   ≤375px on the caseload page. The shared .md-pillnav-dropdown
   styles (line ~47897 in this file) gate visibility on a JS-toggled
   .is-open class; since we use native <details>, we mirror those
   reveal selectors against the [open] attribute instead.
   Scoped to .md-pillnav-dropdown--caseload so other pages' JS-driven
   dropdowns are unaffected. */
.md-pillnav-dropdown--caseload {
  /* Strip the default disclosure triangle so our custom chevron
     reads as the open/close affordance. */
  list-style: none;
}

.md-pillnav-dropdown--caseload > summary {
  list-style: none;
}

.md-pillnav-dropdown--caseload > summary::-webkit-details-marker {
  display: none;
}

.md-pillnav-dropdown--caseload > summary::marker {
  content: "";
}

/* Mirror the .is-open chevron rotation + list reveal against the
   native [open] attribute. Same end state, different open-state
   signal. The chevron rotate is global at ≤550px (inside the
   shared block); the reveal needs both selectors so the dropdown
   actually opens when clicked. */
.md-pillnav-dropdown--caseload[open] .md-pillnav-dropdown__chevron {
  transform: rotate(180deg) !important;
}

.md-pillnav-dropdown--caseload[open] .md-pillnav-dropdown__trigger {
  border-color: rgba(90, 106, 133, 0.65) !important;
  box-shadow: 0 2px 12px rgba(90, 106, 133, 0.32) !important;
}

.md-pillnav-dropdown--caseload[open] .md-pillnav-dropdown__list {
  max-height: 320px !important;
  opacity: 1 !important;
}

/* LinkTo renders <a>; make the option fill the row consistently. */
.md-pillnav-dropdown--caseload .md-pillnav-dropdown__option {
  text-decoration: none;
}

/* ── People I Supervise link card ── */
.md-org-supervisees-link {
  margin-bottom: 20px;
  text-align: center;
}

.md-org-supervisees-link__card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.md-org-supervisees-link__card:hover {
  background: #F8F9FA;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
  text-decoration: none;
  color: inherit;
}

.md-org-supervisees-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(42, 157, 143, 0.08);
  flex-shrink: 0;
}

.md-org-supervisees-link__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.md-org-supervisees-link__label {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.md-org-supervisees-link__desc {
  font-size: 14px;
  color: #6B7280;
}

.md-org-supervisees-link__arrow {
  flex-shrink: 0;
}

.md-org-home-board {
  margin-bottom: 20px;
  text-align: center;
}

.md-org-home-board__card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-org-home-board__card:hover {
  border-color: rgba(76, 134, 216, 0.25);
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.1);
}

.md-org-home-board__icon {
  color: #2860C9; /* WCAG AA fix. */
  flex-shrink: 0;
}

.md-org-home-board__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-org-home-board__label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(27, 54, 93, 0.5);
}

.md-org-home-board__link {
  color: var(--md-navy, #1B365D);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.md-org-home-board__link:hover {
  color: #2860C9; /* WCAG AA fix. */
}

.md-org-home-board__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(27, 54, 93, 0.3);
  transition: background 0.15s ease, color 0.15s ease;
  margin-left: 4px;
  flex-shrink: 0;
}

.md-org-home-board__arrow:hover {
  background: rgba(76, 134, 216, 0.08);
  color: #2860C9; /* WCAG AA fix. */
}

/* Charts layout */
.md-org-charts {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  /* #8 — more space between chart cards. */
  gap: 20px;
  margin-bottom: 28px;
}

/* #5 — Communication Activity: the weekly chart gets 2/3, the recent-sessions
   ratio 1/3, so the chart is clearly the emphasis. */
.md-org-charts--comm {
  grid-template-columns: 2fr 1fr;
}

/* Goals & Progress: goal ratio + (optional) two profile ratios, equal thirds. */
.md-org-charts--goals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-org-charts--words-row {
  grid-template-columns: 1fr 1fr;
}

.md-org-charts--stats {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.md-org-charts__item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  padding: 16px;
  min-width: 0;
  /* Same elevated tile language as the metric cards / reports panels. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(27, 54, 93, 0.07), 0 8px 20px rgba(27, 54, 93, 0.08);
}

.md-org-charts__item--wide {
  grid-column: span 1;
}

.md-org-chart-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  margin: 0 0 8px;
}

/* Empty state for a data-less chart card (recent sessions / goals / profiles when
   the org has no users/data). #6 — an icon + a title + a soft one-line hint so the
   card reads as intentional ("nothing yet, here's what will appear"), not broken. */
.md-org-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 12px;
  margin: 0;
  text-align: center;
}

.md-org-chart-empty__icon {
  color: rgba(27, 54, 93, 0.32);
  margin-bottom: 2px;
}

.md-org-chart-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.72);
}

.md-org-chart-empty__sub {
  margin: 0;
  max-width: 260px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(27, 54, 93, 0.5);
}

/* Section containers */
/* Start-code detail page (/start_codes/:id) — modern card styling that reuses
   the org-section + user-row design language for a professional, consistent look. */
.md-start-code {
  width: min(680px, 100%);
  box-sizing: border-box;
  /* top margin so the card clears the fixed header + shell padding. Placed on
     the container (flex child of .md-shell) so it isn't swallowed by
     parent/first-child margin-collapsing the way a card margin would be. */
  margin: 72px auto 48px;
  padding: 0 16px;
}

.md-start-code__card {
  margin-bottom: 0;
}

.md-start-code__status {
  text-align: center;
}

.md-start-code__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
}

.md-start-code__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex-shrink: 0;
  background: rgba(76, 134, 216, 0.1);
  color: #2860C9;
}

.md-start-code__badge svg {
  width: 28px;
  height: 28px;
}

.md-start-code__badge-img {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
}

.md-start-code__head-text {
  flex: 1;
  min-width: 0;
}

.md-start-code__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-muted, #1B365D);
  opacity: 0.75;
}

.md-start-code__code {
  margin: 3px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--md-ink, #111A2E);
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  word-break: break-all;
}

.md-start-code__chip {
  align-self: flex-start;
}

/* Detail card: responsive grid of label/value field tiles (mirrors the
   eyebrow → value language of the header for a modern info-panel look). */
.md-start-code__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.md-start-code__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.035);
  border: 1px solid rgba(27, 54, 93, 0.05);
}

.md-start-code__field--wide {
  grid-column: 1/-1;
}

.md-start-code__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
}

.md-start-code__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-ink, #111A2E);
  word-break: break-word;
}

.md-start-code__value a {
  color: #2860C9;
  font-weight: 700;
}

.md-start-code__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Activated-users sub-section inside the single detail card, set off with a
   divider so the whole card reads as one cohesive block of information. */
.md-start-code__section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(27, 54, 93, 0.09);
}

.md-start-code__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.md-start-code__section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-start-code__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(76, 134, 216, 0.12);
  color: #2860C9;
  font-size: 13px;
  font-weight: 700;
}

/* Activated users: responsive grid of avatar + name tiles. */
.md-start-code__users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.md-start-code__user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.035);
  border: 1px solid rgba(27, 54, 93, 0.05);
  text-decoration: none;
  color: var(--md-ink, #111A2E);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.md-start-code__user:hover {
  background: rgba(76, 134, 216, 0.07);
  border-color: rgba(76, 134, 216, 0.2);
  color: #2860C9;
  text-decoration: none;
  transform: translateY(-1px);
}

.md-start-code__user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.md-start-code__user-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .md-start-code__fields {
    grid-template-columns: 1fr;
  }
}
.md-org-section {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  /* Same elevated tile language as the metric cards / reports panels. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(27, 54, 93, 0.07), 0 8px 20px rgba(27, 54, 93, 0.08);
}

.md-org-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.md-org-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}

.md-org-section-head .md-org-section-title {
  margin-bottom: 6px;
}

.md-org-section-desc,
.md-org-directory__intro {
  margin: 0;
  color: var(--md-muted, #1B365D);
  font-size: 15px;
  line-height: 1.45;
}

.md-org-section-title__sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
}

/* User list rows */
.md-org-user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.md-org-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.md-org-user-row:hover {
  background: rgba(76, 134, 216, 0.04);
}

.md-org-user-row--parent {
  background: rgba(76, 134, 216, 0.05);
}

.md-org-user-row--child {
  margin-left: 24px;
}

.md-org-user-row--indented {
  margin-left: 24px;
}

.md-org-user-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--md-ink, #111A2E);
}

.md-org-user-row__main:hover {
  text-decoration: none;
  color: #2860C9; /* WCAG AA fix. */
}

.md-org-user-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.md-org-user-row__org-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(76, 134, 216, 0.1);
  color: #2860C9; /* WCAG AA fix. */
  flex-shrink: 0;
}

.md-org-user-row__name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-org-user-row__real-name {
  font-weight: 400;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
  margin-left: 6px;
}

.md-org-user-row__supervisees {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
}

.md-org-user-row__supervisee-link {
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
}

.md-org-user-row__supervisee-link:hover {
  text-decoration: underline;
}

.md-org-user-row__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(70, 80, 95, 0.45);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.md-org-user-row__edit:hover {
  background: rgba(76, 134, 216, 0.1);
  color: #4C86D8;
  text-decoration: none;
}

.md-org-user-row__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(70, 80, 95, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.md-org-user-row__remove:hover {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

/* Add user row */
.md-org-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 54, 93, 0.06);
}

.md-org-add-row__link {
  font-size: 14px;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
  font-weight: 600;
}

.md-org-add-row__link:hover {
  text-decoration: underline;
}

.md-org-input {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  max-width: 220px;
}

.md-org-input:focus-visible {
  border-color: rgba(76, 134, 216, 0.4);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.1);
}

.md-btn--sm {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

.md-org-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 8px;
}

.md-org-see-all {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: #2860C9; /* WCAG AA fix. */
  font-weight: 600;
  text-decoration: none;
}

.md-org-see-all:hover {
  text-decoration: underline;
}

/* Search wrapper */
.md-org-search-wrap {
  margin-bottom: 16px;
  max-width: 280px;
}

.md-org-section-head .md-org-search-wrap {
  margin-bottom: 0;
}

/* Organization directory */
.md-shell--org-directory .md-main--org {
  max-width: 980px;
  margin: 0 auto;
}

.md-org-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.md-org-directory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(76, 134, 216, 0.045));
  color: var(--md-ink, #111A2E);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.md-org-directory-card:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 134, 216, 0.22);
  box-shadow: 0 12px 30px rgba(27, 54, 93, 0.08);
  color: var(--md-ink, #111A2E);
  text-decoration: none;
}

.md-org-directory-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.md-org-directory-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 800;
}

.md-org-directory-card__meta {
  color: var(--md-muted, #1B365D);
  font-size: 1rem;
  line-height: 1.35;
}

.md-org-directory-card__arrow {
  color: rgba(27, 54, 93, 0.45);
  flex-shrink: 0;
}

.md-org-letter-group__letter {
  font-size: 18px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
}

.md-org-letter-group__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.4;
  transition: transform 0.2s ease;
  margin-left: auto;
}

/* Recent Sessions — a scan-friendly activity feed: each session is a contained
   card with a metadata row (user · time · count-pill) over a muted 2-line
   message preview, rather than a run-on paragraph list. */
.md-org-session-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-org-session-row {
  position: relative;
  /* Clip the left accent stripe to the card's rounded corners. */
  overflow: hidden;
  padding: 11px 16px 12px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  /* Subtle resting elevation so each card reads as a distinct tile. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05), 0 2px 6px rgba(27, 54, 93, 0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

/* Left accent stripe (verdigris→denim) — subtle, so rows read as designed. */
.md-org-session-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2A9D8F, #4C86D8);
  opacity: 0.7;
}

/* Restrained interactive hover — near-white lift, verdigris-tinted border, 1px rise. */
.md-org-session-row:hover {
  background: #fbfcfe;
  border-color: rgba(42, 157, 143, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 16px rgba(27, 54, 93, 0.1);
}

/* Top line: identity (avatar + username) leads on the left; the View action sits
   apart on the right. */
.md-org-session-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.md-org-session-row__id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.md-org-session-row__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  color: rgba(27, 54, 93, 0.45);
}

/* Navy + heavy (not the shouty bright-blue link); still clickable, underlines on hover. */
.md-org-session-row__user {
  font-size: 15px;
  font-weight: 800;
  color: #1B365D;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-org-session-row__user:hover {
  text-decoration: underline;
}

/* The action, separated from the descriptive metadata. */
.md-org-session-row__view {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #2860C9;
  text-decoration: none;
  white-space: nowrap;
}

.md-org-session-row__view:hover {
  text-decoration: underline;
}

.md-org-session-row__view:hover .md-org-session-row__view-arrow {
  transform: translateX(2px);
}

.md-org-session-row__view-arrow {
  transition: transform 0.14s ease;
}

/* Descriptive metadata grouped on one quiet line (when · how much) — almost
   disappears so the username leads. */
.md-org-session-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: 13px;
  /* Muted secondary line, but must clear WCAG AA 4.5:1 on the ~white card
     (#7b859c was 3.70:1). rgba(navy, 0.72) ≈ 4.9:1 keeps it quiet yet legible. */
  color: rgba(27, 54, 93, 0.72);
}

.md-org-session-row__count {
  font-weight: 600;
}

.md-org-session-row__sep {
  opacity: 0.55;
}

/* Warmer, secondary preview clamped to EXACTLY 2 lines — the min-height reserves
   both lines even for short messages, so every card is the same height. */
.md-org-session-row__summary {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: #68748e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

/* ═══════════════ Organization Reports ═══════════════ */
.md-org-report-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.md-org-report-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27, 54, 93, 0.12) 20%, rgba(27, 54, 93, 0.12) 80%, transparent);
  margin: 0 0 24px;
}

.md-org-report-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-org-report-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.md-org-report-field__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-navy, #1B365D);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.md-org-report-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322365f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-ink, #111A2E);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-width: 180px;
}

.md-org-report-select:hover {
  border-color: rgba(76, 134, 216, 0.3);
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.1);
}

.md-org-report-select:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.12);
  background-color: #fff;
}

.md-org-report-select--sm {
  min-width: 0;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  border-radius: 10px;
}

.md-org-report-custom-label {
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
}

.md-org-report-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(27, 54, 93, 0.06);
}

.md-org-report-input {
  padding: 8px 14px;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 820px) {
  .md-org-charts {
    grid-template-columns: 1fr;
  }
  .md-org-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-org-stat-card--wide {
    grid-column: span 2;
  }
}
.md-org-report-input:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.12);
  background-color: #fff;
}

.md-org-report-results-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.md-org-report-results-header svg {
  opacity: 0.5;
}

.md-org-report-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-org-report-row {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(27, 54, 93, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-org-report-row:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(76, 134, 216, 0.12);
}

.md-org-report-row--user {
  align-items: center;
  padding: 8px 16px;
}

.md-org-report-row--stat {
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 15px;
}

.md-org-report-row__main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.md-org-report-row__link {
  font-size: 14px;
  font-weight: 600;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
}

.md-org-report-row__link:hover {
  text-decoration: underline;
}

.md-org-report-row__sep {
  color: var(--md-muted, #1B365D);
  opacity: 0.3;
}

.md-org-report-row__user {
  font-weight: 600;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
}

.md-org-report-row__user:hover {
  text-decoration: underline;
}

.md-org-report-row__time {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.65;
  margin-left: auto;
}

.md-org-report-row__summary {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-basis: 100%;
}

/* ═══════════════ Organization Telemetry ═══════════════ */
.md-org-telemetry__summary {
  margin-bottom: 22px;
}

.md-org-telemetry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.md-org-telemetry__heatmap-note {
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0 0 16px;
  max-width: 72ch;
}

.md-org-telemetry__zero-hint {
  background: rgba(76, 134, 216, 0.06);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
}

.md-org-telemetry__zero-hint-lead {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
}

.md-org-telemetry__zero-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--md-muted-ink, #1B365D);
}

.md-org-telemetry-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 16px;
  padding: 18px;
}

.md-org-telemetry-card--wide {
  margin-bottom: 16px;
}

.md-org-telemetry-card__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
}

.md-org-telemetry .col-sm-8 {
  float: none;
  width: 100%;
}

.md-org-telemetry .touch_locations {
  border-radius: 14px;
}

.md-org-report-row__remove {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--md-muted, #1B365D);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
}

.md-org-report-row__remove:hover {
  opacity: 1;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.md-org-report-row__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.md-org-report-row__status:hover {
  background: rgba(76, 134, 216, 0.08);
  border-color: rgba(76, 134, 216, 0.2);
}

.md-org-report-row__user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.md-org-report-row__user-card:hover {
  text-decoration: none;
}

.md-org-report-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(76, 134, 216, 0.06);
}

.md-org-report-row__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.md-org-report-row__username {
  font-size: 15px;
  font-weight: 600;
  color: var(--md-ink, #111A2E);
}

.md-org-report-row__email {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.6;
}

.md-org-report-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.md-org-report-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
}

.md-org-report-tag--pending {
  color: #e67e22;
  opacity: 1;
}

.md-org-report-tag--active {
  color: #2A9D8F;
  opacity: 1;
}

.md-org-report-row__stat-key {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-org-report-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.md-org-report-download {
  margin-top: 12px;
}

.md-org-report-download__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.md-org-report-download__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.md-org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.md-org-btn--outline {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(76, 134, 216, 0.2);
  color: #2860C9; /* WCAG AA fix. */
}

.md-org-btn--outline:hover {
  background: rgba(76, 134, 216, 0.08);
  border-color: rgba(76, 134, 216, 0.35);
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.1);
}

.md-org-btn--outline:active {
  transform: scale(0.98);
}

/* ═══════════════ Organization Settings ═══════════════ */
.md-org-settings-form {
  max-width: 680px;
  margin: 0 auto;
}

.md-org-settings-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
}

.md-org-settings-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.md-org-settings-card__title svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.md-org-settings-card__host-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(76, 134, 216, 0.1);
  color: #2860C9; /* WCAG AA fix. */
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
}

.md-org-settings-field {
  margin-bottom: 18px;
}

.md-org-settings-field__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-navy, #1B365D);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.md-org-settings-field__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.md-org-settings-field__static {
  font-size: 14px;
  color: var(--md-ink, #111A2E);
}

.md-org-settings-field__suffix {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
}

.md-org-settings-field__suffix--pending {
  font-style: italic;
  opacity: 0.5;
}

.md-org-settings-field__hint {
  display: block;
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.6;
  font-style: italic;
  margin-top: 4px;
  line-height: 1.5;
}

.md-org-settings-field__hint--warn {
  color: #e67e22;
  opacity: 1;
  font-style: normal;
  font-weight: 500;
}

.md-org-settings-field__nested {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-left: 16px;
  border-left: 3px solid rgba(76, 134, 216, 0.15);
}

.md-org-settings-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-org-settings-input:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.12);
  background: #fff;
}

.md-org-settings-input--sm {
  width: auto;
  min-width: 120px;
  max-width: 200px;
  display: inline-block;
}

.md-org-settings-input--xs {
  width: auto;
  min-width: 60px;
  max-width: 90px;
  display: inline-block;
  text-align: center;
}

.md-org-settings-textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-org-settings-textarea:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.12);
  background: #fff;
}

.md-org-settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
}

.md-org-settings-toggle__input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #4C86D8;
  flex-shrink: 0;
}

.md-org-settings-toggle__label {
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  line-height: 1.4;
}

.md-org-settings-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0 8px;
}

.md-org-btn--primary {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border: none;
  color: #fff;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.2);
}

.md-org-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(70, 80, 95, 0.25);
  transform: translateY(-1px);
  color: #fff;
}

.md-org-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(70, 80, 95, 0.15);
}

.md-org-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Google Charts tooltip: prevent hover flicker on bar charts */
.google-visualization-tooltip {
  pointer-events: none !important;
}

/* ═══════════════ Start Codes Modal ═══════════════ */
.md-sc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-sc-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(27, 54, 93, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-sc-row:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(76, 134, 216, 0.12);
}

.md-sc-row--disabled {
  opacity: 0.5;
}

.md-sc-row__code {
  display: flex;
  flex-direction: column;
  min-width: 100px;
  flex-shrink: 0;
}

.md-sc-row__code-text {
  font-size: 14px;
  font-weight: 700;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
  font-family: monospace;
}

.md-sc-row__code-text:hover {
  text-decoration: underline;
}

.md-sc-row__code-text--disabled {
  color: var(--md-muted, #1B365D);
}

.md-sc-row__settings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.md-sc-tag {
  font-size: 14px;
  font-weight: 600;
  color: #2860C9; /* WCAG AA fix. */
  font-style: italic;
}

.md-sc-detail {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.75;
}

.md-sc-row__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.md-sc-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ═══════════════ Organization Rooms ═══════════════ */
.md-org-rooms {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.md-org-room-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-org-room-card:hover {
  border-color: rgba(76, 134, 216, 0.15);
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.06);
}

.md-org-room-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.06);
  background: rgba(255, 255, 255, 0.5);
}

.md-org-room-card__title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.md-org-room-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.md-org-room-card__title:hover {
  color: #2860C9; /* WCAG AA fix. */
}

.md-org-room-card__details-link {
  font-size: 14px;
  font-weight: 500;
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
  /* Note: with opacity:0.7 the effective contrast drops below AA. */
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.md-org-room-card__details-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.md-org-room-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.md-org-room-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: transparent;
  color: var(--md-navy, #1B365D);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-org-room-card__action-btn-icon {
  flex-shrink: 0;
}

.md-org-room-card__action-btn-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.md-org-room-card__action-btn:hover,
.md-org-room-card__action-btn:focus-visible {
  opacity: 1;
  background: rgba(76, 134, 216, 0.08);
  border-color: rgba(76, 134, 216, 0.25);
  outline: none;
}

.md-org-room-card__action-btn--danger:hover,
.md-org-room-card__action-btn--danger:focus-visible {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.25);
  color: #dc3545;
}

.md-org-room-card__body {
  padding: 20px 24px;
}

.md-org-room-add-users {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(76, 134, 216, 0.03);
  border-bottom: 1px solid rgba(27, 54, 93, 0.06);
}

.md-org-room-add-users__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 320px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
}

.md-org-room-add-users__group-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.md-org-room-add-users__group--stacked .md-org-room-add-users__group-body {
  flex-direction: column;
  align-items: stretch;
}

.md-org-room-add-users__select-wrap {
  min-width: 200px;
  position: relative;
}

.md-org-room-add-users__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.65);
}

/* Open dropdown list inside the rooms-add-users panel grows to fit
   its longest option instead of being capped to the trigger's width.
   Overrides the default `.bound-select__list { left:0; right:0 }`
   that pins the menu to the trigger edges. */
.md-org-room-add-users .bound-select__list {
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(420px, 90vw);
}

.md-org-room-add-users__btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.md-org-room-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: transparent;
  color: #2860C9; /* WCAG AA fix. */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-org-room-toggle:hover {
  background: rgba(76, 134, 216, 0.06);
  border-color: rgba(76, 134, 216, 0.2);
}

.md-org-room-toggle__icon {
  transition: transform 0.2s ease;
}

.md-org-room-toggle__icon--open {
  transform: rotate(90deg);
}

.md-org-room-detail {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.md-org-room-detail__section {
  padding-left: 16px;
  border-left: 3px solid rgba(76, 134, 216, 0.15);
}

.md-org-room-detail__heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  margin: 0 0 10px;
}

.md-org-room-summary {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
}

.md-org-room-summary__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.md-org-room-summary__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  opacity: 0.65;
  white-space: nowrap;
}

.md-org-room-summary__users {
  font-size: 14px;
  line-height: 1.6;
}

.md-org-room-summary__link {
  color: #2860C9; /* WCAG AA fix. */
  text-decoration: none;
}

.md-org-room-summary__link:hover {
  text-decoration: underline;
}

/* View-only (supervisor) org landing — centered icon + message + caseload CTA. */
.md-org-viewonly {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 24px;
}

.md-org-viewonly__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #1A7B7A;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(160deg, rgba(42, 157, 143, 0.16), rgba(42, 157, 143, 0.07));
}

.md-org-viewonly__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-muted, #1B365D);
}

/* Secondary caseload pointer shown only to supporters (supervisors). */
.md-org-viewonly__hint {
  margin: 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-muted, #1B365D);
  opacity: 0.85;
}

.md-org-rooms-empty {
  text-align: center;
  padding: 40px 20px;
}

.md-org-rooms-empty__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  margin: 16px 0 8px;
}

.md-org-rooms-empty__desc {
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.7;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.md-org-room-add-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.md-org-room-add-form__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
}

.md-org-btn--sm {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 820px) {
  .md-org-charts {
    grid-template-columns: 1fr;
  }
  .md-org-telemetry__grid {
    grid-template-columns: 1fr;
  }
  .md-org-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-org-stat-card--wide {
    grid-column: span 2;
  }
}
@media (max-width: 550px) {
  .md-org-stats__grid {
    grid-template-columns: 1fr;
  }
  .md-org-stat-card--wide {
    grid-column: span 1;
  }
  .md-org-section {
    padding: 16px;
    border-radius: 14px;
  }
  .md-org-add-row {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-input {
    max-width: 100%;
  }
  .md-org-report-controls,
  .md-org-report-filters,
  .md-org-room-add-form,
  .md-org-settings-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-settings-card {
    padding: 16px;
    border-radius: 14px;
  }
  .md-org-settings-input--sm,
  .md-org-settings-input--xs {
    width: 100%;
    max-width: 100%;
  }
  .md-org-settings-field__row {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-room-card__header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .md-org-room-card__body {
    padding: 16px;
  }
  .md-org-room-add-users {
    flex-direction: column;
  }
  .md-org-room-add-users__group {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-room-add-users__group-body {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-room-add-users__select-wrap {
    min-width: 0;
  }
  .md-org-report-field--inline {
    flex-direction: column;
    align-items: stretch;
  }
  .md-org-report-select {
    min-width: 0;
    width: 100%;
  }
  .md-org-report-input {
    width: 100%;
  }
}
/* Beta feedback admin (inbox + detail) */
.la-beta-feedback-admin__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--md-ink, #111A2E);
}

.la-beta-feedback-admin__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.la-beta-feedback-admin__search-label {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la-beta-feedback-admin__search-input {
  width: 100%;
}

.la-beta-feedback-admin__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.la-beta-feedback-admin__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.la-beta-feedback-admin__filter .form-control {
  min-width: 0;
}

.la-beta-feedback-admin__label-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  opacity: 0.85;
}

.la-beta-feedback-admin__clear {
  align-self: flex-end;
}

.la-beta-feedback-admin__loading {
  margin: 8px 0 16px;
  color: var(--md-muted, #1B365D);
}

.la-beta-feedback-admin__table-wrap {
  margin-top: 8px;
}

.la-beta-feedback-admin__table {
  font-size: 14px;
  color: var(--md-ink, #111A2E);
}

.la-beta-feedback-admin__table th,
.la-beta-feedback-admin__table td {
  vertical-align: middle;
}

.la-beta-feedback-admin__sort-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.la-beta-feedback-admin__sort-btn:hover,
.la-beta-feedback-admin__sort-btn:focus-visible {
  color: #2860C9; /* WCAG AA fix. */
}

.la-beta-feedback-admin__sort-ind {
  margin-left: 4px;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.75;
}

.la-beta-feedback-admin__summary-cell {
  max-width: 28rem;
  word-break: break-word;
}

.la-beta-feedback-admin__meeting-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(20, 127, 130, 0.15);
  color: #0d5c5f;
}

.la-beta-feedback-admin__actions {
  white-space: nowrap;
}

.la-beta-feedback-admin__actions .btn + .btn {
  margin-left: 6px;
}

/* Database schema explorer (admin / support) */
.la-wrapper.la-wrapper--pricing .la-section.la-database-explorer {
  padding: 0;
  margin: 0;
}

.la-database-explorer ~ *,
.la-database-explorer .la-support-content-wrapper {
  max-width: none;
}

.la-wrapper.la-wrapper--pricing .la-database-explorer .la-support-content-wrapper {
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.la-database-explorer__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--md-ink, #111A2E);
}

/* 14px floor — bump specificity with wrapper prefix to outrank generic
   .md-support-content / Bootstrap rules that shrink children below 14px. */
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__label-text,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__search-input,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__loading,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__table-btn,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__column-count,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__columns-table,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__columns-table th,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__columns-table td,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__columns-table code,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__cell-default,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__cell-name,
.la-wrapper.la-wrapper--pricing .la-database-explorer .la-database-explorer__cell-type {
  font-size: 14px;
}

.la-database-explorer__header .la-pricing-hero-subtitle {
  max-width: 44rem;
}

.la-database-explorer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.la-database-explorer__search-label {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la-database-explorer__search-input {
  width: 100%;
}

.la-database-explorer__label-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  opacity: 0.85;
}

.la-database-explorer__search-input {
  font-size: 1rem;
}

.la-database-explorer__loading {
  margin: 8px 0 16px;
  color: var(--md-muted, #1B365D);
}

.la-database-explorer__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.la-database-explorer__sidebar {
  flex: 1 1 240px;
  max-width: 100%;
  max-height: min(70vh, 520px);
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.la-database-explorer__table-list {
  margin-bottom: 0;
}

.la-database-explorer__table-item {
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.la-database-explorer__table-item:last-child {
  border-bottom: none;
}

.la-database-explorer__table-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}

.la-database-explorer__table-btn:hover,
.la-database-explorer__table-btn:focus-visible {
  background: rgba(100, 185, 188, 0.12);
  outline: none;
}

.la-database-explorer__table-btn--active {
  font-weight: 700;
  background: rgba(100, 185, 188, 0.18);
}

.la-database-explorer__main {
  flex: 2 1 320px;
  min-width: 0;
}

.la-database-explorer__table-title {
  font-size: 1.35rem;
  margin: 0 0 8px;
  word-break: break-word;
}

.la-database-explorer__column-count {
  font-size: 1rem;
  margin-bottom: 12px;
}

.la-database-explorer__table-wrap {
  margin-top: 4px;
}

.la-database-explorer__columns-table {
  font-size: 1rem;
}

.la-database-explorer__columns-table th,
.la-database-explorer__columns-table td {
  font-size: 1rem;
}

.la-database-explorer__columns-table code {
  font-size: 1em;
  word-break: break-word;
}

.la-database-explorer__cell-default {
  word-break: break-word;
  max-width: 22rem;
  font-size: 1rem;
}

/* Tabs at the top of the database explorer card. */
.la-database-explorer__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.la-database-explorer__tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
  cursor: pointer;
  margin-bottom: -1px;
}

.la-database-explorer__tab:hover {
  color: var(--md-ink, #111A2E);
}

.la-database-explorer__tab--active {
  color: var(--md-ink, #111A2E);
  border-bottom-color: rgba(100, 185, 188, 0.9);
}

/* Contents tab — stack the table picker on top, preview below. */
.la-database-explorer__layout--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
}

.la-database-explorer__sidebar--top {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
  max-height: 200px; /* limited height — scroll inside if list is long */
}

.la-database-explorer__main--wide {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}

/* Contents tab — wide row table with horizontal scroll. */
.la-database-explorer__contents-wrap {
  max-height: min(70vh, 600px);
  overflow: auto;
}

.la-database-explorer__layout--stacked .la-database-explorer__contents-wrap {
  max-height: min(75vh, 800px);
}

.la-database-explorer__contents-table {
  font-size: 14px;
}

.la-database-explorer__contents-table th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* Pin the first column so id/primary key stays visible while scrolling
   horizontally. Header cell (top-left) needs both sticky directions plus a
   higher z-index so it sits above other sticky cells when both axes scroll. */
.la-database-explorer__contents-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.la-database-explorer__contents-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Match Bootstrap .table-striped row backgrounds on the pinned column so the
   stripe pattern continues underneath the freeze. */
.la-database-explorer__contents-table.table-striped tbody tr:nth-child(odd) td:first-child {
  background: #f9f9f9;
}

.la-database-explorer__contents-table.table-striped tbody tr:nth-child(even) td:first-child {
  background: #fff;
}

.la-database-explorer__contents-cell {
  vertical-align: top;
  padding: 8px 12px !important;
}

.la-database-explorer__contents-cell-clamp {
  max-width: 28rem;
  max-height: 4.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  white-space: pre-wrap;
  cursor: zoom-in;
}

.la-database-explorer__contents-cell-clamp:hover,
.la-database-explorer__contents-cell-clamp:focus {
  max-height: none;
  -webkit-line-clamp: unset;
  display: block;
  cursor: zoom-out;
  background: rgba(255, 248, 220, 0.55);
}

.la-database-explorer__pager {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.la-database-explorer__pager-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner shown while contents load — visible animated indicator instead of
   plain text so the user knows something is happening. */
.la-database-explorer__spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 12px;
  color: var(--md-muted, #4a6e8e);
}

.la-database-explorer__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(100, 185, 188, 0.9);
  border-radius: 50%;
  animation: la-database-explorer__spin 0.8s linear infinite;
}

@keyframes la-database-explorer__spin {
  to {
    transform: rotate(360deg);
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   Custom confirm dialog — brand-styled replacement for browser confirm().
   Used in button-settings "Clear Button" and reusable elsewhere.
   ───────────────────────────────────────────────────────────────────────── */
.ll-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: ll-premium-progress-fade-in 120ms ease-out;
}

.ll-confirm-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px 32px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  max-width: 520px;
  width: 90%;
  text-align: center;
}

.ll-confirm-title {
  margin: 0 0 12px;
  font-size: 1.7rem;
  font-weight: 700;
  color: #1B365D;
}

.ll-confirm-desc {
  margin: 0 0 28px;
  font-size: 1.4rem;
  color: #374151;
  line-height: 1.5;
}

.ll-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.ll-confirm-btn {
  padding: 14px 32px;
  min-height: 52px;
  border: none;
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.ll-confirm-btn--cancel {
  background: #F0F4F8;
  color: #374151;
}

.ll-confirm-btn--cancel:hover {
  background: rgb(222.6136363636, 231.25, 239.8863636364);
}

.ll-confirm-btn--danger {
  background: #C0392B;
  color: #fff;
}

.ll-confirm-btn--danger:hover {
  background: rgb(158.6655319149, 47.1038297872, 35.5344680851);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .ll-confirm-overlay {
    animation: none;
  }
}
.la-beta-feedback-admin__more-hint {
  margin-top: 12px;
  font-size: 14px;
}

.la-beta-feedback-admin__back {
  margin-top: 24px;
}

.la-beta-feedback-detail__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--md-ink, #111A2E);
}

.la-beta-feedback-detail__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--md-ink, #111A2E);
  line-height: 1.35;
}

.la-beta-feedback-detail__meta {
  margin: 0 0 24px;
  padding: 0;
}

.la-beta-feedback-detail__meta-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 8px 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.12);
  align-items: baseline;
}

.la-beta-feedback-detail__meta-row:last-child {
  border-bottom: none;
}

.la-beta-feedback-detail__meta dt {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.9;
}

.la-beta-feedback-detail__meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--md-ink, #111A2E);
}

.la-beta-feedback-detail__wrap {
  word-break: break-word;
}

.la-beta-feedback-detail__block {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(27, 54, 93, 0.12);
}

.la-beta-feedback-detail__block-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--md-ink, #111A2E);
}

.la-beta-feedback-detail__text {
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  white-space: pre-wrap;
  word-break: break-word;
}

.la-beta-feedback-detail__screenshot-wrap {
  margin: 0;
}

.la-beta-feedback-detail__screenshot {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.15);
}

.la-beta-feedback-detail__back {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .la-beta-feedback-detail__meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .la-beta-feedback-admin__actions {
    white-space: normal;
  }
  .la-beta-feedback-admin__actions .btn {
    margin-bottom: 6px;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   Spin keyframe — formerly paired with the now-deleted `.ll-loading-overlay`
   chrome, but still referenced by `.board-picker__loading-spinner` and the
   `.md-board-details-modal__overlay-spinner` / `__header-spinner` pair, so
   the @keyframes block stays. The old class rules were removed in favor of
   the unified `.ll-premium-progress` chrome (see below) — one "Preparing
   your workspace" card serves every loading surface.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes ll-loading-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Premium progress card — used by index-loading.hbs (route-loading
   template) AND mirrors the inline-styled chrome in:
   - boards/index.html.erb (bootstrap skeleton's `.ll-skel-progress`)
   - app/frontend/app/index.html (Ember-served bootstrap skeleton)
   - login-form.js (`#ll-pre-reload-overlay` inline styles)
   All three render the same look — the user perceives one continuous
   loading state across the entire login flow. */
.ll-premium-progress {
  position: fixed;
  inset: 0;
  z-index: 10054;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  animation: ll-premium-progress-fade-in 220ms ease-out;
}

.ll-premium-progress__card {
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 36px 40px 32px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.1), 0 32px 64px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.ll-premium-progress__title {
  margin: 0 0 8px;
  font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #1B365D;
  line-height: 1.3;
}

.ll-premium-progress__sub {
  margin: 0 0 22px;
  font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(27, 54, 93, 0.65);
  line-height: 1.5;
}

/* Per-image "N / total" count under the loading label. Block so it sits on its
   own line; tabular-nums so the width doesn't jitter as the count ticks up. */
.ll-premium-progress__count {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ll-premium-progress__bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.08);
  overflow: hidden;
}

.ll-premium-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, #2A9D8F 25%, #4C86D8 75%, rgba(76, 134, 216, 0) 100%);
  transform: translateX(-100%);
  animation: ll-premium-progress-sweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ll-premium-progress-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes ll-premium-progress-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-premium-progress {
    animation: none;
  }
  .ll-premium-progress__bar::after {
    animation: none;
    transform: translateX(0);
    opacity: 0.6;
  }
}
/* Modal-scoped variant of `.ll-premium-progress` — sits absolutely
   inside its modal-body container instead of covering the viewport.
   Same card chrome so the visual reads as the same loading state,
   just confined to the modal's bounds. Used by the board-preview
   modal while the preview canvas finishes settling every button-image
   promise. */
.ll-premium-progress--in-modal {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Classic → Modern view switch overlay ──────────────────────────
   Used by board/index.js `go_to_modern` to mask the route-transition
   flash when the user clicks "Modern View" on the classic board page.
   The user briefly sees the classic board WITHOUT its board-alt-view
   styling (because that class drops the instant the route changes,
   and board-detail's /tree model hook is still async). We cover that
   window with a board-detail speak-mode skeleton mockup PLUS the
   login-flow premium-progress card overlay.

   The overlay paints at full opacity from frame 1 (no fade-in) so
   nothing slips through the first frame. The mockup behind the card
   is blurred by the card's own `backdrop-filter` (~line 79975), so
   the user reads it as a soft preview of where they're going. */
.ll-view-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 10056;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ll-view-switch-overlay--dark {
  background: #1f2937;
}

/* Skeleton mockup of the modern board-detail speak-mode page —
   roughly: header (back/picker, sentence bar, options, avatar) +
   left sidebar with 3 cards + button grid (8×5). All elements are
   neutral-tinted blocks; no text. Subtle shimmer animation gives
   the impression of in-flight loading without being noisy. */
.ll-view-switch-mockup {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
}

/* Header row mock */
.ll-view-switch-mockup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 8px;
  margin-bottom: 14px;
}

.ll-view-switch-mockup__nav,
.ll-view-switch-mockup__opts,
.ll-view-switch-mockup__avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.1);
  flex-shrink: 0;
}

.ll-view-switch-mockup__avatar {
  border-radius: 999px;
}

.ll-view-switch-mockup__sentence {
  flex: 1 1 auto;
  height: 44px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.08);
}

/* Body: sidebar + grid layout */
.ll-view-switch-mockup__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  min-height: 0;
}

.ll-view-switch-mockup__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}

.ll-view-switch-mockup__sidebar-card {
  height: 110px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.08);
  border-top: 3px solid rgba(20, 127, 130, 0.32);
}

.ll-view-switch-mockup__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 4px;
}

.ll-view-switch-mockup__tile {
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.08);
}

/* Subtle shimmer — slow sweep across every block so the mockup
   reads as actively loading rather than static. Uses the same
   timing function as the premium-progress bar so the two
   animations feel coordinated. `prefers-reduced-motion` opts out. */
.ll-view-switch-mockup__sentence,
.ll-view-switch-mockup__sidebar-card,
.ll-view-switch-mockup__tile,
.ll-view-switch-mockup__nav,
.ll-view-switch-mockup__opts,
.ll-view-switch-mockup__avatar {
  position: relative;
  overflow: hidden;
}

.ll-view-switch-mockup__sentence::after,
.ll-view-switch-mockup__sidebar-card::after,
.ll-view-switch-mockup__tile::after,
.ll-view-switch-mockup__nav::after,
.ll-view-switch-mockup__opts::after,
.ll-view-switch-mockup__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ll-view-switch-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ll-view-switch-shimmer {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-view-switch-mockup__sentence::after,
  .ll-view-switch-mockup__sidebar-card::after,
  .ll-view-switch-mockup__tile::after,
  .ll-view-switch-mockup__nav::after,
  .ll-view-switch-mockup__opts::after,
  .ll-view-switch-mockup__avatar::after {
    animation: none;
    opacity: 0;
  }
}
/* Dark-mode placeholder palette — slightly translucent white blocks
   on the dark canvas, brighter shimmer to read against. */
.ll-view-switch-overlay--dark .ll-view-switch-mockup__nav,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__opts,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__avatar,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__sentence,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__sidebar-card,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__tile {
  background: rgba(255, 255, 255, 0.06);
}

.ll-view-switch-overlay--dark .ll-view-switch-mockup__sidebar-card {
  border-top-color: rgba(80, 217, 209, 0.55);
}

.ll-view-switch-overlay--dark .ll-view-switch-mockup__sentence::after,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__sidebar-card::after,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__tile::after,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__nav::after,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__opts::after,
.ll-view-switch-overlay--dark .ll-view-switch-mockup__avatar::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

/* The premium-progress card already sits at z-index 10054 — bump
   the version inside this overlay above the mockup so the card
   reads cleanly on top. */
.ll-view-switch-overlay .ll-premium-progress {
  z-index: 1;
}

/* "(Page-Set & Vocabularies)" accent within the view-switch title.
   Scoped to `.ll-view-switch-overlay .ll-premium-progress__title-accent`
   so only THIS overlay's title picks up the verdigris tint — the
   login flow's "Preparing your workspace" overlay never renders
   this span and is therefore untouched.

   The `--accent-light` modifier on the card opts the parenthetical
   into a lighter font-weight. Applied by Modern → Classic
   (controllers/user/board-detail.js#go_to_classic) so the parenthesized
   clarifier reads softer in that direction; Classic → Modern keeps
   the default heavier weight. */
.ll-view-switch-overlay .ll-premium-progress__title-accent {
  color: #2A9D8F;
  font-weight: 600;
}

.ll-view-switch-overlay .ll-premium-progress__card--accent-light .ll-premium-progress__title-accent {
  font-weight: 400;
}

/* ── Modern Toast Notification ─────────────────────────
   Slides in from the top-right, auto-dismisses, doesn't
   block the UI. Replaces the legacy flash-notice pattern. */
.ll-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(420px, 100vw - 48px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 18px;
  background: #fff;
  border-radius: 12px;
  border-left: 4px solid #2A9D8F;
  box-shadow: 0 10px 28px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  z-index: 10000;
  animation: ll-toast-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2A9D8F;
}

.ll-toast__message {
  flex: 1;
}

.ll-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(27, 54, 93, 0.5);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}

.ll-toast__close:hover {
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
}

.ll-toast__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2A9D8F;
}

/* Kind variants — change the accent color & icon tint */
.ll-toast--success {
  border-left-color: #2ecc71;
}

.ll-toast--success .ll-toast__icon {
  color: #2ecc71;
}

.ll-toast--warning {
  border-left-color: #f39c12;
}

.ll-toast--warning .ll-toast__icon {
  color: #f39c12;
}

.ll-toast--error {
  border-left-color: #C0392B;
}

.ll-toast--error .ll-toast__icon {
  color: #C0392B;
}

@keyframes ll-toast-slide-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-toast {
    animation: none;
  }
}
@media (max-width: 480px) {
  .ll-toast {
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
  }
  /* On phones the toast spans the full width, so the slide-in needs to
     animate without the centering translate. */
  @keyframes ll-toast-slide-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* ── Tooltip background override (keep last) ──
   Anything on an ancestor that drops opacity/filter would bleed through the
   ::after pseudo. Isolate the tooltip into its own stacking context with a
   fully-opaque fill that nothing else can undercut. */
#within_ember .md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::after,
.md-board-detail--dark .md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::after {
  background: #1b2a4a !important;
  background-color: #1b2a4a !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  z-index: 9999 !important;
  box-shadow: 0 0 0 1px #1b2a4a, 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

#within_ember .md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::before,
.md-board-detail--dark .md-board-detail-edit-toolbar [data-tooltip]:hover:not(:active)::before {
  border-bottom-color: #1b2a4a !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 9999 !important;
}

/* ── Accessibility: 14px font-size floor for vendored Bootstrap ──
   The vendored Bootstrap 3 ships ~26 built-in selectors that render text
   below our 14px accessibility floor (e.g. .small = 85% → 8.5px at 10px
   root, .h6 = 12px, .badge = 12px, .tooltip = 12px, etc). These overrides
   force every such selector up to 14px so any Bootstrap-styled UI in the
   app still meets the AAC legibility requirement. (We deliberately do NOT
   override html's 10px root — doing so would scale every rem-based size in
   the app up by 1.4x and break layouts.) */
small,
.small,
.h6,
h6,
.initialism,
code,
kbd,
pre,
.input-sm,
input.input-sm,
select.input-sm,
textarea.input-sm,
.form-group-sm .form-control,
.form-group-sm .form-control-static,
.form-horizontal .form-group-sm .control-label,
.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.btn-group-xs > .btn,
.dropdown-header,
.input-group-sm > .input-group-btn > .btn,
.input-group-addon.input-sm,
.pagination-sm > li > span,
.pagination-sm > li > a,
.label,
.badge,
.progress-bar,
.tooltip,
.tooltip-inner,
.popover-title,
sub,
sup,
.h3 .small,
.h6 .small,
blockquote .small,
blockquote footer,
blockquote small {
  font-size: 14px !important;
}

/* Beta feedback form (same wrapper as support) */
.beta-feedback-panel {
  background: transparent;
}

.beta-feedback-panel__header {
  position: relative;
  text-align: center;
  padding: 0 0 1.5rem;
}

.beta-feedback-panel__intro {
  margin-left: auto;
  margin-right: auto;
}

.beta-feedback-panel__privacy-note {
  max-width: 720px;
  margin: 0.75rem auto 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #374151;
}

.beta-feedback-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: #374151;
}

.beta-feedback-drawer-tab {
  position: fixed;
  top: var(--topbar-height, 70px);
  left: 50%;
  z-index: 1078;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.35rem 1.7rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #263d5c 0%, #1b2a4a 40%, #0d1525 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(17, 26, 46, 0.12);
}

.app-navbar .app-navbar__inner {
  overflow: visible !important;
}

.beta-feedback-drawer-tab--navbar {
  position: absolute;
  top: 100%;
}

.beta-feedback-drawer-tab--speak {
  /* Speak mode: the drawer lives at the BOTTOM of the page, so the tab hangs
     UP from the bottom edge — rounded top corners, top border restored,
     bottom border/rounding dropped. */
  top: auto;
  bottom: 0;
  border-radius: 14px 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: none;
}

/* Caret points UP when closed (drawer opens upward), flips DOWN when open —
   the reverse of the top-drawer default. */
.beta-feedback-drawer-tab--speak .beta-feedback-drawer-tab__caret {
  transform: rotate(180deg);
}

.beta-feedback-drawer-tab--speak.beta-feedback-drawer-tab--open .beta-feedback-drawer-tab__caret {
  transform: rotate(0deg);
}

.beta-feedback-drawer-tab:hover {
  color: #fff;
  outline: none;
  box-shadow: 0 8px 22px rgba(17, 26, 46, 0.16);
}

.beta-feedback-drawer-tab:focus-visible {
  color: #fff;
  outline: none;
  box-shadow: 0 3px 0 rgba(70, 80, 95, 0.16), 0 8px 22px rgba(17, 26, 46, 0.12);
}

.beta-feedback-drawer-tab__caret {
  transition: transform 0.18s ease;
}

.beta-feedback-drawer-tab--open .beta-feedback-drawer-tab__caret {
  transform: rotate(180deg);
}

.beta-feedback-drawer {
  --beta-feedback-drawer-offset: var(--topbar-height, 70px);
  position: fixed;
  top: var(--beta-feedback-drawer-offset);
  left: 0;
  right: 0;
  z-index: 1077;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.18s ease;
}

#within_ember > header.header-index-with-dark-toggle:not(.header--hidden):not(:has(#inner_header #speak)):not(:has(#inner_header #nav_header)) + .beta-feedback-drawer {
  --beta-feedback-drawer-offset: 70px;
}

#within_ember > header.header-index-with-dark-toggle:not(.header--hidden):has(#inner_header #nav_header) + .beta-feedback-drawer {
  --beta-feedback-drawer-offset: 129px;
}

.beta-feedback-drawer--speak {
  --beta-feedback-drawer-offset: 0px;
  /* Anchor to the BOTTOM in speak mode — the panel slides UP from below. */
  top: auto;
  bottom: 0;
}

.beta-feedback-drawer--speak .beta-feedback-drawer__panel {
  /* Rounded TOP corners (it rises from the bottom); bottom padding clears the
     tab pill that now sits at the bottom edge. */
  border-radius: 20px 20px 0 0;
  padding: 1.5rem 1.5rem 5.5rem;
}

.beta-feedback-drawer--speak.beta-feedback-drawer--hidden {
  /* Tuck below the viewport instead of above. */
  transform: translateY(calc(100% + 18px));
}

/* Top-center placement for ALL pages EXCEPT board-alt and board-detail.
   On those everyday pages the drawer (and its trigger tab) pin to the very
   top-center of the viewport, floating over the navbar, instead of dropping
   in just beneath it. board-alt / board-detail are excluded via the
   `#within_ember` route classes; board-detail's drawer is bottom-anchored
   via `--speak`, so it's excluded there too. The `top: 0` override beats the
   base `top: var(--offset)` on specificity (id + classes), so no !important. */
#within_ember:not(.board-alt-view):not(.board-detail-view) .beta-feedback-drawer:not(.beta-feedback-drawer--speak) {
  top: 0;
}

#within_ember:not(.board-alt-view):not(.board-detail-view) .beta-feedback-drawer-tab--navbar {
  position: fixed;
  top: 0;
}

/* Hide the Beta Feedback drawer + tab entirely while a Shepherd tour is
   running, so the tour chrome owns the screen. Shepherd portals an active
   step's popover (`.shepherd-element.shepherd-enabled`) into <body>; the
   drawer lives inside #within_ember, so `body:has(...)` catches it on every
   page. Removed automatically when the tour ends and the popover is gone. */
body:has(.shepherd-element.shepherd-enabled) .beta-feedback-drawer,
body:has(.shepherd-element.shepherd-enabled) .beta-feedback-drawer-tab {
  display: none;
}

.beta-feedback-drawer__panel {
  width: min(780px, 100vw - 36px);
  max-height: calc(100vh - var(--beta-feedback-drawer-offset) - 22px);
  margin: 0 auto;
  overflow-y: auto;
  pointer-events: auto;
  border-radius: 0 0 20px 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 26, 46, 0.22), 0 8px 28px rgba(17, 26, 46, 0.12);
  padding: 5.5rem 1.5rem 1.5rem;
}

.beta-feedback-drawer--hidden {
  transform: translateY(calc(-100% - 18px));
  opacity: 0;
}

.beta-feedback-drawer--hidden .beta-feedback-drawer__panel {
  pointer-events: none;
}

.beta-feedback-drawer--open {
  transform: translateY(0);
  opacity: 1;
  /* When open, sit ABOVE the "Back to Kiddo's View" bar (z-index 1200) so the
     drawer panel covers it instead of opening behind it. (Base drawer z-index is
     1077; only the OPEN state needs to win — closed it's tucked off-screen.) */
  z-index: 1300;
}

.beta-feedback-panel--drawer .beta-feedback-panel__title {
  font-family: "Maitree", serif;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-align: center;
  font-size: 35px;
}
@media (max-width: 1366px) {
  .beta-feedback-panel--drawer .beta-feedback-panel__title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .beta-feedback-panel--drawer .beta-feedback-panel__title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .beta-feedback-panel--drawer .beta-feedback-panel__title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .beta-feedback-panel--drawer .beta-feedback-panel__title {
    font-size: 17px;
  }
}

.beta-feedback-panel--drawer .beta-feedback-panel__title .hero-gradient {
  font-size: 1em;
}

.beta-feedback-panel .la-hero-title-wrap {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.la-wrapper--support .la-support-form.md-support-form {
  position: relative;
}

.la-wrapper--support .la-beta-feedback__reaction-options,
.beta-feedback-drawer .la-beta-feedback__reaction-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.la-wrapper--support .la-beta-feedback__reaction-btn,
.beta-feedback-drawer .la-beta-feedback__reaction-btn {
  min-height: 5.25rem;
  border: 2px solid rgba(17, 26, 46, 0.12);
  border-radius: 16px;
  background: #fff;
  color: #374151;
  font-size: 1rem;
  font-weight: 700;
}

.la-wrapper--support .la-beta-feedback__reaction-btn--selected,
.beta-feedback-drawer .la-beta-feedback__reaction-btn--selected {
  border-color: #46505F;
  box-shadow: 0 0 0 3px rgba(70, 80, 95, 0.14);
}

.la-beta-feedback__reaction-face {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 0.4rem;
}

.la-beta-feedback__reaction-face--neutral {
  color: #a16207;
}

.la-beta-feedback__reaction-face--frown {
  color: #b91c1c;
}

.la-beta-feedback__reaction-face--smile {
  color: #15803d;
}

.la-beta-feedback__reaction-icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.la-beta-feedback__reaction-icon circle:not(:first-child) {
  fill: currentColor;
  stroke: none;
}

.la-wrapper--support .la-contact-input--file {
  padding: 0.5rem 0.75rem;
  font-size: 14px;
}

.la-wrapper--support .la-beta-feedback__screenshot-preview,
.beta-feedback-drawer .la-beta-feedback__screenshot-preview {
  margin-top: 0.75rem;
}

.la-wrapper--support .la-beta-feedback__screenshot-img,
.beta-feedback-drawer .la-beta-feedback__screenshot-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid rgba(55, 65, 81, 0.15);
  display: block;
}

.la-wrapper--support .la-beta-feedback__clear-shot,
.beta-feedback-drawer .la-beta-feedback__clear-shot {
  margin-top: 0.5rem;
}

.la-wrapper--support .la-beta-feedback__dropzone,
.beta-feedback-drawer .la-beta-feedback__dropzone {
  border: 2px dashed rgba(55, 65, 81, 0.28);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  min-height: 5.5rem;
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.la-wrapper--support .la-beta-feedback__dropzone:focus-visible,
.beta-feedback-drawer .la-beta-feedback__dropzone:focus-visible {
  outline: 2px solid #1B365D !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(27, 54, 93, 0.15) !important;
}
@media (forced-colors: active) {
  .la-wrapper--support .la-beta-feedback__dropzone:focus-visible,
  .beta-feedback-drawer .la-beta-feedback__dropzone:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.la-wrapper--support .la-beta-feedback__dropzone--active,
.beta-feedback-drawer .la-beta-feedback__dropzone--active {
  border-color: rgba(70, 80, 95, 0.55);
  background: rgba(70, 95, 120, 0.08);
  box-shadow: inset 0 0 0 1px rgba(70, 80, 95, 0.12);
}

.la-wrapper--support .la-beta-feedback__dropzone-hint,
.beta-feedback-drawer .la-beta-feedback__dropzone-hint {
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
  margin: 0 0 0.75rem 0;
}

.la-wrapper--support .la-beta-feedback__file-input,
.beta-feedback-drawer .la-beta-feedback__file-input {
  width: 100%;
  max-width: 100%;
}

/* ─── Beta-feedback drawer: modern form polish ───────────────────────────
   Brings the drawer's form chrome in line with the rest of the redesigned
   surface — generous spacing, refined inputs, custom-arrow dropdown,
   readable label hierarchy, and a 14px floor on every text size. */
.beta-feedback-drawer .la-contact-form {
  gap: 1.25rem;
}

/* Each form row becomes a soft, sectioned card — gives every labeled
   group its own visual lane and prevents the hints below dropzones /
   consent blocks from feeling like loose floating copy. */
.beta-feedback-drawer .la-contact-form__row {
  gap: 0.625rem;
  padding: 1.25rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(17, 26, 46, 0.07);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.03);
}

.beta-feedback-drawer .la-contact-form fieldset.la-contact-form__row {
  border: 1px solid rgba(17, 26, 46, 0.07);
  min-width: 0;
}

/* Float the legend so it flows as a normal block inside the card instead of
   sitting on the fieldset's top-border slot (which crops the label). */
.beta-feedback-drawer .la-contact-form fieldset.la-contact-form__row > legend {
  display: block;
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 0.5rem;
  border: none;
  border-bottom: none;
  background: transparent;
}

.beta-feedback-drawer .la-contact-form fieldset.la-contact-form__row > legend + * {
  clear: both;
}

.beta-feedback-drawer .la-contact-form__row--error {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(254, 242, 242, 0.6);
}

.beta-feedback-drawer .la-contact-form__label {
  font-size: 15px;
  font-weight: 600;
  color: #1b2a4a;
  letter-spacing: 0.01em;
}

.beta-feedback-drawer .la-contact-form__hint {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.beta-feedback-drawer .la-contact-input {
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.beta-feedback-drawer .la-contact-input:focus-visible {
  outline: none;
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.14);
  background: #fff;
}

.beta-feedback-drawer .la-contact-input--textarea {
  min-height: 110px;
  line-height: 1.5;
  resize: vertical;
}

/* ─── Custom dropdown — replaces the native <select> with a fully styled
   button + listbox so the open-state list also matches our brand. ─── */
.beta-feedback-drawer .md-dropdown {
  position: relative;
  width: 100%;
}

.beta-feedback-drawer .md-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1b2a4a;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.beta-feedback-drawer .md-dropdown__trigger:hover {
  background: #fff;
  border-color: rgba(70, 80, 95, 0.32);
}

.beta-feedback-drawer .md-dropdown__trigger:focus-visible,
.beta-feedback-drawer .md-dropdown--open .md-dropdown__trigger {
  outline: none;
  border-color: rgba(20, 127, 130, 0.5);
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.14);
  background: #fff;
}

.beta-feedback-drawer .md-dropdown__value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beta-feedback-drawer .md-dropdown__chevron {
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: rgba(70, 80, 95, 0.7);
  transition: transform 0.18s ease;
}

.beta-feedback-drawer .md-dropdown--open .md-dropdown__chevron {
  transform: rotate(180deg);
}

.beta-feedback-drawer .md-dropdown__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(17, 26, 46, 0.16), 0 6px 12px rgba(17, 26, 46, 0.08);
  max-height: 280px;
  overflow-y: auto;
}

.beta-feedback-drawer .md-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  font-size: 15px;
  color: #1b2a4a;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.beta-feedback-drawer .md-dropdown__option:hover,
.beta-feedback-drawer .md-dropdown__option:focus-visible {
  background: rgba(20, 127, 130, 0.1);
  outline: none;
}

.beta-feedback-drawer .md-dropdown__option--selected {
  background: rgba(20, 127, 130, 0.16);
  color: #0d5c5f;
  font-weight: 600;
}

.beta-feedback-drawer .md-dropdown__option--selected:hover,
.beta-feedback-drawer .md-dropdown__option--selected:focus-visible {
  background: rgba(20, 127, 130, 0.22);
}

.beta-feedback-drawer .md-dropdown__option-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #0d5c5f;
}

.beta-feedback-drawer .md-dropdown__option-label {
  flex: 1 1 auto;
}

/* Custom-styled dropdown — kills native chrome and adds an inline chevron. */
.beta-feedback-drawer select.la-contact-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111a2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.beta-feedback-drawer select.la-contact-input option {
  font-size: 15px;
  padding: 8px 12px;
  color: #1b2a4a;
  background-color: #fff;
}

/* Replace Chrome's default Bootstrap-blue highlight with the brand teal. */
.beta-feedback-drawer select.la-contact-input option:checked,
.beta-feedback-drawer select.la-contact-input option:hover,
.beta-feedback-drawer select.la-contact-input option:focus {
  background: linear-gradient(0deg, rgba(20, 127, 130, 0.18), rgba(20, 127, 130, 0.18)), #fff;
  color: #1b2a4a;
  font-weight: 600;
}

/* Action row — modernize spacing and primary CTA prominence. */
.beta-feedback-drawer .la-contact-form__actions {
  margin-top: 0.75rem;
  gap: 12px;
  flex-wrap: wrap;
}

.beta-feedback-drawer .la-contact-form__actions .la-btn {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  border-radius: 999px;
}

/* Submit-context note: nudge spacing so the device-summary line breathes. */
.beta-feedback-drawer .la-beta-feedback__submit-context-note {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Validation banner inside the drawer — match the modern card chrome. */
.beta-feedback-drawer .la-beta-feedback__validation-banner {
  font-size: 14px;
  line-height: 1.45;
  color: #92400e;
  background: rgba(254, 243, 199, 0.95);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.beta-feedback-drawer .la-contact-form__field-error {
  font-size: 14px;
  line-height: 1.45;
  color: #b91c1c;
  margin: 0.375rem 0 0;
}

/* ─── Beta-feedback drawer: hero polish ────────────────────────────────
   The shared landing styles ship a 24px intro + 16px privacy note. In the
   compact drawer surface that pairing reads as "huge + tiny." Right-size
   both and tighten the spacing so the title, divider, intro, and privacy
   note read as a coherent header block. */
.beta-feedback-drawer .beta-feedback-panel__header {
  padding-bottom: 1.75rem;
}

.beta-feedback-drawer .beta-feedback-panel__hero .la-section-eyebrow-badge,
.beta-feedback-drawer .beta-feedback-panel__hero .la-hero-title-wrap {
  transform: translateX(0.5rem);
}

.beta-feedback-drawer .beta-feedback-panel__intro,
.beta-feedback-drawer .la-pricing-hero-subtitle.beta-feedback-panel__intro {
  font-size: 16px;
  line-height: 1.55;
  margin-top: 1rem;
  max-width: 600px;
  letter-spacing: 0;
}

.beta-feedback-drawer .beta-feedback-panel__privacy-note {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  text-align: left;
  color: rgba(55, 65, 81, 0.85);
}

.beta-feedback-drawer .la-about-hero-separator {
  margin: 1.25rem auto;
}

/* Checklist intro — replaces the long-form intro paragraph with a scannable
   list of what we want from feedback. Modern card with a centered title and
   teal check pills for each item. */
.beta-feedback-panel__checklist {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(20, 127, 130, 0.04));
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(17, 26, 46, 0.1), 0 4px 10px rgba(17, 26, 46, 0.06);
  text-align: left;
}

/* Privacy note nested at the bottom of the checklist — tighter spacing,
   no card-on-card stacking, matches the checklist's internal width. */
.beta-feedback-panel__checklist .beta-feedback-panel__info-pill {
  margin: 1rem 0 0;
  padding: 0.625rem 0.875rem;
  background: rgba(17, 26, 46, 0.04);
  border: 1px solid rgba(17, 26, 46, 0.06);
  border-radius: 12px;
  box-shadow: none;
  max-width: 100%;
}

.beta-feedback-panel__checklist .beta-feedback-panel__info-pill-icon {
  width: 26px;
  height: 26px;
  background: rgba(17, 26, 46, 0.08);
  color: rgba(55, 65, 81, 0.85);
}

.beta-feedback-panel__checklist .beta-feedback-panel__privacy-note {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(55, 65, 81, 0.78);
}

.beta-feedback-panel__checklist-title {
  margin: 0 0 0.875rem;
  font-size: 15px;
  font-weight: 700;
  color: #1b2a4a;
  letter-spacing: 0.005em;
}

.beta-feedback-panel__checklist-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.beta-feedback-panel__checklist-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding: 0.5rem 0.875rem;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(55, 65, 81, 0.92);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(20, 127, 130, 0.18);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.04);
}

.beta-feedback-panel__checklist-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 127, 130, 0.18);
  color: #0d5c5f;
}

.beta-feedback-panel__checklist-icon svg {
  display: block;
}

/* Info pill — wraps the privacy note with a soft tinted card and lock icon
   so the warning reads as a discrete section rather than loose body text. */
.beta-feedback-panel__info-pill {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 600px;
  margin: 1.25rem auto 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(20, 127, 130, 0.06), rgba(20, 127, 130, 0.1));
  border: 1px solid rgba(20, 127, 130, 0.22);
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
}

.beta-feedback-panel__info-pill-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 127, 130, 0.18);
  color: #0d5c5f;
  margin-top: 1px;
}

.beta-feedback-panel__info-pill-icon svg {
  display: block;
}

/* ─── Beta-feedback drawer: reaction tiles ─────────────────────────────
   Polished pill-cards with smooth hover lift, tone-specific tinted
   borders, and a clear selected state. */
.beta-feedback-drawer .la-beta-feedback__reaction-options {
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6rem;
  padding: 1rem 0.75rem;
  border: 1.5px solid rgba(17, 26, 46, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #1b2a4a;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.04);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(70, 80, 95, 0.28);
  box-shadow: 0 6px 18px rgba(17, 26, 46, 0.1);
}

/* Darker tonal hover backgrounds — each reaction tile deepens its own tint
   on hover instead of flashing to plain white. */
.beta-feedback-drawer .la-beta-feedback__reaction-btn--green:hover {
  background: linear-gradient(180deg, rgba(21, 128, 61, 0.14), rgba(21, 128, 61, 0.2));
  border-color: rgba(21, 128, 61, 0.45);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--yellow:hover {
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.14), rgba(161, 98, 7, 0.2));
  border-color: rgba(161, 98, 7, 0.45);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--red:hover {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.14), rgba(185, 28, 28, 0.2));
  border-color: rgba(185, 28, 28, 0.45);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn:focus-visible {
  outline: none;
  border-color: rgba(20, 127, 130, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.18);
}

/* Tone-specific resting tints — keep subtle, lift on hover. */
.beta-feedback-drawer .la-beta-feedback__reaction-btn--green {
  border-color: rgba(21, 128, 61, 0.22);
  background: linear-gradient(180deg, rgba(21, 128, 61, 0.04), rgba(21, 128, 61, 0.08));
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--yellow {
  border-color: rgba(161, 98, 7, 0.22);
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.04), rgba(161, 98, 7, 0.08));
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--red {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.04), rgba(185, 28, 28, 0.08));
}

/* Selected state: tonal fill + ring, replaces the generic charcoal-blue ring. */
.beta-feedback-drawer .la-beta-feedback__reaction-btn--selected {
  transform: translateY(-1px);
  border-width: 2px;
  box-shadow: 0 8px 22px rgba(17, 26, 46, 0.12);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--green.la-beta-feedback__reaction-btn--selected {
  border-color: #15803d;
  background: linear-gradient(180deg, rgba(21, 128, 61, 0.12), rgba(21, 128, 61, 0.18));
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18), 0 8px 22px rgba(17, 26, 46, 0.1);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--yellow.la-beta-feedback__reaction-btn--selected {
  border-color: #a16207;
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.12), rgba(161, 98, 7, 0.18));
  box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.18), 0 8px 22px rgba(17, 26, 46, 0.1);
}

.beta-feedback-drawer .la-beta-feedback__reaction-btn--red.la-beta-feedback__reaction-btn--selected {
  border-color: #b91c1c;
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.18));
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18), 0 8px 22px rgba(17, 26, 46, 0.1);
}

/* Reaction face icons — keep crisp at the larger button size. */
.beta-feedback-drawer .la-beta-feedback__reaction-face {
  width: 38px;
  height: 38px;
  margin: 0 0 0.15rem;
}

/* ─── Beta-feedback drawer: dropzone & recording polish ──────────────── */
.beta-feedback-drawer .la-beta-feedback__dropzone {
  border-radius: 14px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.beta-feedback-drawer .la-beta-feedback__dropzone:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(70, 80, 95, 0.4);
}

.beta-feedback-drawer .la-beta-feedback__dropzone-hint {
  font-size: 14px;
  margin-bottom: 0.875rem;
}

.beta-feedback-drawer .la-beta-feedback__consent {
  font-size: 14px;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  background: rgba(20, 127, 130, 0.05);
  border: 1px solid rgba(20, 127, 130, 0.14);
  border-radius: 12px;
}

.beta-feedback-drawer .la-beta-feedback__recording-actions {
  margin-top: 0.875rem;
  gap: 0.875rem;
}

.beta-feedback-drawer .la-beta-feedback__recording-status {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* ─── Modern file input — replaces the bare native "Choose Files" chrome ─ */
.beta-feedback-drawer .la-beta-feedback__file-input {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: none;
}

.beta-feedback-drawer .la-beta-feedback__file-input::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  margin-right: 12px;
  padding: 10px 18px;
  border: 1px solid rgba(70, 80, 95, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #1b2a4a;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.06);
}

.beta-feedback-drawer .la-beta-feedback__file-input::file-selector-button:hover {
  background: rgba(20, 127, 130, 0.08);
  border-color: rgba(20, 127, 130, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(17, 26, 46, 0.08);
}

/* ─── Dropzone: roomier, friendlier, with the file picker tucked inside ─ */
.beta-feedback-drawer .la-beta-feedback__dropzone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 7rem;
  padding: 1.5rem;
  border-radius: 16px;
  border-width: 2px;
  border-color: rgba(70, 80, 95, 0.22);
  background: rgba(20, 127, 130, 0.03);
}

.beta-feedback-drawer .la-beta-feedback__dropzone-hint {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(55, 65, 81, 0.85);
  margin: 0;
}

.beta-feedback-drawer .la-beta-feedback__dropzone--active {
  background: rgba(20, 127, 130, 0.1);
  border-color: rgba(20, 127, 130, 0.55);
  box-shadow: 0 0 0 4px rgba(20, 127, 130, 0.1);
}

/* ─── Hints inside section cards: subtle muted chips, not loose prose ── */
.beta-feedback-drawer .la-contact-form__row .la-contact-form__hint {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(55, 65, 81, 0.78);
  background: rgba(17, 26, 46, 0.035);
  border-radius: 10px;
}

.beta-feedback-drawer .la-contact-form__row .la-contact-form__hint::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
}

.beta-feedback-drawer .la-contact-form__row .la-contact-form__hint + .la-contact-form__hint {
  margin-top: 0.5rem;
}

/* Section label: clearer hierarchy, sits above hints/inputs as a header. */
.beta-feedback-drawer .la-contact-form__label,
.beta-feedback-drawer .la-contact-form fieldset.la-contact-form__row .la-contact-form__label {
  font-size: 15px;
  font-weight: 700;
  color: #1b2a4a;
  letter-spacing: 0.005em;
  margin-bottom: 0.25rem;
  padding: 0;
}

/* ─── Submit-context note: information card with an info badge ─────── */
.beta-feedback-drawer .la-beta-feedback__submit-context-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 127, 130, 0.05), rgba(20, 127, 130, 0.09));
  border: 1px solid rgba(20, 127, 130, 0.22);
  box-shadow: 0 1px 3px rgba(17, 26, 46, 0.04);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(55, 65, 81, 0.92);
}

.beta-feedback-drawer .la-beta-feedback__submit-context-note::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(20, 127, 130, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d5c5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ─── Submit/Cancel actions: full-width primary, generous spacing ────── */
.beta-feedback-drawer .la-contact-form__actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(17, 26, 46, 0.06);
  gap: 14px;
  align-items: center;
}

.beta-feedback-drawer .la-contact-form__actions .la-btn {
  min-height: 48px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.beta-feedback-drawer .la-contact-form__actions .la-btn--primary {
  box-shadow: 0 6px 16px rgba(70, 80, 95, 0.22);
}

.beta-feedback-drawer .la-contact-form__actions .la-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(70, 80, 95, 0.28);
}

/* ─── Recording controls: pull primary action out of the consent block ─ */
.beta-feedback-drawer .la-beta-feedback__recording-actions {
  margin-top: 1rem;
  gap: 1rem;
  align-items: center;
}

.beta-feedback-drawer .la-beta-feedback__recording-actions .la-btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
}

/* ─── Floor every text element at 14px so nothing reads "tiny." ─────── */
.beta-feedback-drawer .beta-feedback-panel:where(p, span, label, button, a, li, small, em, strong),
.beta-feedback-drawer .beta-feedback-panel *:where(p, span, label, button, a, li, small, em, strong) {
  font-size: max(14px, 1em);
}

.la-beta-feedback__meeting-row {
  display: flex;
  align-items: flex-start;
}

.la-beta-feedback__meeting-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
  line-height: 1.5;
}

.la-beta-feedback__meeting-checkbox {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #147F82;
  cursor: pointer;
}

.la-beta-feedback__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 1rem;
  line-height: 1.45;
}

.la-beta-feedback__recording-actions {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.la-beta-feedback__recording-preview {
  margin-top: 0.9rem;
}

.la-beta-feedback__recording-video,
.la-beta-feedback-detail__recording {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  border: 1px solid rgba(55, 65, 81, 0.15);
  background: #000;
}

.la-beta-feedback-admin__priority {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: capitalize;
}

.la-beta-feedback-admin__priority--high {
  color: #7f1d1d;
  background: #fee2e2;
}

.la-beta-feedback-admin__priority--medium {
  color: #78350f;
  background: #fef3c7;
}

.la-beta-feedback-admin__priority--low {
  color: #14532d;
  background: #dcfce7;
}

.la-beta-feedback-detail__priority-controls {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Beta feedback: client-side validation banner and field highlights */
#beta-feedback-hero .la-beta-feedback__validation-banner {
  font-size: 14px;
  line-height: 1.45;
  color: #92400e;
  background: rgba(254, 243, 199, 0.95);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

#beta-feedback-hero .la-contact-form__field-error {
  font-size: 14px;
  line-height: 1.45;
  color: #b91c1c;
  margin: 0.375rem 0 0;
}

#beta-feedback-hero .la-contact-form__row--error .la-contact-form__label {
  color: #991b1b;
}

#beta-feedback-hero .la-contact-input--invalid,
#beta-feedback-hero select.la-contact-input--invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

#beta-feedback-hero .la-contact-input--invalid:focus-visible {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  outline: none;
}

@media (max-width: 720px) {
  .beta-feedback-drawer-tab {
    top: var(--topbar-height, 70px);
    font-size: 0.95rem;
    min-height: 34px;
  }
  .beta-feedback-drawer-tab--navbar {
    top: 100%;
  }
  /* Speak mode keeps the bottom placement at narrow widths too (was top: 0,
     which overrode the bottom anchor). */
  .beta-feedback-drawer-tab--speak {
    top: auto;
    bottom: 0;
  }
  .beta-feedback-drawer__panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 78px);
    padding: 1rem;
  }
  /* Re-assert the bottom-drawer panel padding (tab clearance) in speak mode —
     the generic <=720 panel rule above resets padding to 1rem. */
  .beta-feedback-drawer--speak .beta-feedback-drawer__panel {
    padding: 1rem 1rem 5rem;
  }
  .la-wrapper--support .la-beta-feedback__reaction-options,
  .beta-feedback-drawer .la-beta-feedback__reaction-options {
    grid-template-columns: 1fr;
  }
}
/* ── Beta Feedback modal ─────────────────────────────────────────────────
   Sizing/chrome mirror the find-button modal pattern (full-height,
   border-radius 18px, .la-modal-header + .la-modal-close). Header
   reuses the about-page hero composition (.la-section-eyebrow-badge +
   .la-hero-title with .hero-gradient + .la-about-hero-separator +
   .la-pricing-hero-subtitle) so the modal reads as a "mini about-page".
   Form fields rely on the global .la-contact-input / .la-btn classes —
   no per-modal restyling. */
.modal .modal-dialog:has(.beta-feedback-modal-wrap) {
  max-width: 845px; /* find-button modal is 676px; this is ~25% wider. */
  width: calc(100vw - 16px);
  height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  margin: 4px auto;
  display: flex;
  flex-direction: column;
}

.modal .modal-dialog:has(.beta-feedback-modal-wrap) > * {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.modal-content:has(.beta-feedback-modal-wrap) {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 26, 46, 0.18), 0 8px 24px rgba(17, 26, 46, 0.1);
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.beta-feedback-modal-wrap {
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Header: about-page hero composition, centered inside a la-modal-header
   shell with the close button pinned to the top-right. */
.beta-feedback-modal-wrap > .la-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.1));
  background: rgba(255, 255, 255, 0.6);
}

.beta-feedback-modal__hero {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

/* Mirror the about-page hero treatment for the modal header. .la-hero-title
   and the eyebrow margin override are both scoped to .la-wrapper /
   .la-wrapper--about in their original definitions, so we re-apply the
   computed about-page values here. */
.beta-feedback-modal__hero .la-section-eyebrow-badge {
  margin-bottom: 2.5rem;
}

.beta-feedback-modal__title {
  font-family: "Maitree", serif;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  font-size: 35px;
}
@media (max-width: 1366px) {
  .beta-feedback-modal__title {
    font-size: 27px;
  }
}
@media (max-width: 1200px) {
  .beta-feedback-modal__title {
    font-size: 24px;
  }
}
@media (max-width: 1024px) {
  .beta-feedback-modal__title {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .beta-feedback-modal__title {
    font-size: 17px;
  }
}

/* Match the support-page rule (.la-wrapper--support .hero-gradient) so the
   "Feedback" gradient text sizes 1:1 with "Beta " — without this it inherits
   the global 1.155em and reads slightly larger than the prefix. */
.beta-feedback-modal__title .hero-gradient {
  font-size: 1em;
}

.beta-feedback-modal__subtitle {
  margin: 1.5rem auto 0;
  max-width: 680px;
  font-size: 24px;
  font-weight: 400;
  color: #374151;
  line-height: 1.75;
  letter-spacing: 0.005em;
}

.beta-feedback-modal-wrap > .la-modal-header > .la-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(17, 26, 46, 0.12);
  border-radius: 50%;
  background: #E8ECF1;
  color: var(--md-muted, #6B7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.beta-feedback-modal-wrap > .la-modal-header > .la-modal-close:hover,
.beta-feedback-modal-wrap > .la-modal-header > .la-modal-close:focus-visible {
  background: #fff;
  color: #374151;
  outline: none;
}

/* Body: scrolls when content overflows the available modal height. */
.beta-feedback-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

@media (max-width: 600px) {
  .beta-feedback-modal-wrap > .la-modal-header {
    padding: 20px 20px 16px;
  }
  .beta-feedback-modal__subtitle {
    font-size: 16px;
  }
  .beta-feedback-modal__body {
    padding: 18px 20px 20px;
  }
}
.la-wrapper--support .la-support-cookies-btn {
  font-size: 14px; /* 25% larger than 1rem */
}

/* About "Built around" section: same 1px divider as top of page */
.la-wrapper.la-wrapper--about #about-what-we-offer .la-section-header .la-about-hero-separator,
.la-wrapper.la-wrapper--about #faq-items .la-section-header .la-about-hero-separator,
.la-wrapper.la-wrapper--about #faq-questions .la-section-header .la-about-hero-separator {
  height: 1px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
}

.la-wrapper.la-wrapper--about #about-hero .la-pricing-hero-subtitle,
.la-wrapper.la-wrapper--about #faq-hero .la-pricing-hero-subtitle {
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.la-wrapper.la-wrapper--about #about-hero .la-section-header + .la-feature-grid {
  margin-top: -2rem;
}

/* Features page hero: same layout and styling as about hero top */
.la-wrapper.la-wrapper--about #features-hero .la-section-header,
.la-wrapper.la-wrapper--features #features-hero .la-section-header {
  margin-bottom: 0;
  max-width: 748px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* ============================================================
   Modern Eval Header
   ============================================================
   Scoped re-skin of the legacy speak header (<span id="speak">)
   when on an eval board (key matches /^obf\/eval/, surfaced as
   `app_state.eval_mode`). application.hbs adds `.md-eval-header`
   on that span only in eval mode, so none of these rules touch
   normal speak-mode boards. Mirrors the visual language of
   `.md-board-detail-sentence-row` (frosted home button + sunken
   sentence bar) but keeps the existing eval template structure
   intact — every action (Start, Skip, Prev, Next, Settings,
   Backspace, Clear, Home, button_list) renders from the original
   elements, just restyled. This guarantees the eval flow handlers
   (especially the on-board `button_settings` and the header
   `assessment_settings` action) keep working unchanged.
   ============================================================ */
#speak.md-eval-header {
  display: flex !important;
  align-items: stretch;
  gap: 13px;
  padding: 6px 12px;
  margin: 1px 0 3px 4px; /* right margin removed */
  width: calc(100% - 4px);
  box-sizing: border-box;
  /* Anchor for the absolutely-positioned backspace + clear buttons,
     which we visually nest INSIDE the sentence bar (mirrors the
     board-detail sentence bar's tool cluster). */
  position: relative;
}

#speak.md-eval-header .speak-header__home-marker {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* Column wrapper: stacks the Pause control UNDER the home pill while keeping it
   OUT of .speak-header__home-marker (so it isn't grouped with the home icon and
   doesn't inherit the home-button box). Transparent everywhere except a running
   eval, so non-eval speak-mode layout is untouched. */
.speak-header__home-col {
  display: contents;
}

#speak.md-eval-header .speak-header__home-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

/* In-place eval Pause/Resume button — its own control under the home pill,
   matched to the sentence-bar backspace button's exact computed style: solid
   slate-blue fill, 12px radius, soft blue shadow, white icon. Solid fill, so it
   reads on the white header (unlike the translucent md-eval-header tool style). */
#speak.md-eval-header .speak-header__eval-pause {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: none !important;
  background: rgb(118, 147, 185) !important;
  box-shadow: 0 2px 6px 0 rgba(118, 147, 185, 0.3) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease;
  cursor: pointer;
}

#speak.md-eval-header .speak-header__eval-pause:hover {
  background: rgb(104, 132, 170) !important;
}

/* Home button sized to match Pause (44x44) — ONLY on the modern board-view eval
   header. Scoped to #within_ember.board-view + #speak.md-eval-header so it does
   NOT touch board-alt (shared home button) or non-eval speak. The extra
   #within_ember.board-view + .btn make it decisively out-rank the responsive
   `#home_button.btn { width:52px }` rule in the max-1500px media block. */
#within_ember.board-view #inner_header:has(#speak) #speak.md-eval-header #home_button.btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* In-place eval pause overlay — covers the board below the fixed header and
   captures all input so no button activates while paused. */
.eval-pause-overlay {
  position: fixed;
  /* Start exactly at the inner_header's bottom. utils/eval.js pause() MEASURES
     the real header bottom and pins --eval-pause-top (the header vars don't
     equal it, so they mis-align); the calc is only a first-paint fallback. */
  top: var(--eval-pause-top, calc(var(--topbar-height) + var(--speak-bar-extra, 0px)));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start; /* anchor the card near the top of the dim, not centered */
  justify-content: center;
  overflow-y: auto;
  background: rgba(27, 54, 93, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.eval-pause-overlay__card {
  margin-top: 5rem; /* 5rem below the top of the dimmed area */
  background: #fff;
  border-radius: 20px;
  padding: 34px 44px;
  text-align: center;
  max-width: 92%;
  box-shadow: 0 14px 44px rgba(27, 54, 93, 0.28);
}

.eval-pause-overlay__icon {
  color: #1B365D;
  margin-bottom: 10px;
}

.eval-pause-overlay__title {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1B365D;
}

.eval-pause-overlay__desc {
  font-size: 1.3rem;
  color: #555;
  margin: 0 0 14px;
}

.eval-pause-overlay__elapsed {
  font-size: 1.2rem;
  color: #1B365D;
  margin: 0 0 24px;
}

.eval-pause-overlay__resume {
  font-size: 1.4rem;
  padding: 12px 32px;
  border-radius: 14px;
}

#speak.md-eval-header #home_button {
  width: 56px !important;
  min-width: 56px;
  height: auto !important;
  min-height: 56px;
  padding: 10px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: none !important;
  background: rgba(110, 122, 140, 0.32) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: #fff !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 1px rgba(27, 54, 93, 0.1), inset 0 -2px 5px rgba(27, 54, 93, 0.18), inset 0 -1px 1px rgba(27, 54, 93, 0.1) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#speak.md-eval-header #home_button:hover {
  background: rgba(110, 122, 140, 0.42) !important;
}

#speak.md-eval-header #home_button .button_icon,
#speak.md-eval-header #home_button .glyphicon {
  color: #fff !important;
  font-size: 22px !important;
  margin: 0 !important;
}

#speak.md-eval-header .speak-bar__eval-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  height: auto;
  flex-shrink: 0;
}

#speak.md-eval-header .speak-bar__eval-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(27, 54, 93, 0.15) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1B365D !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

#speak.md-eval-header .speak-bar__eval-btn:hover {
  background: #fff !important;
  border-color: rgba(27, 54, 93, 0.25) !important;
}

#speak.md-eval-header .speak-bar__eval-btn:active {
  transform: translateY(1px);
}

#speak.md-eval-header .speak-bar__eval-btn:focus-visible {
  outline: none;
  border-color: #2A9D8F !important;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

#speak.md-eval-header .speak-bar__eval-btn .glyphicon {
  color: #1B365D;
  font-size: 14px;
}

#speak.md-eval-header .speak-bar__eval-btn--compact {
  padding: 0 16px !important;
}

#speak.md-eval-header #eval_intro_start.speak-bar__eval-btn {
  background: #2A9D8F !important;
  border-color: #2A9D8F !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(42, 157, 143, 0.3);
}

#speak.md-eval-header #eval_intro_start.speak-bar__eval-btn:hover {
  background: rgb(37.6944723618, 140.9055276382, 128.3407035176) !important;
  border-color: rgb(37.6944723618, 140.9055276382, 128.3407035176) !important;
}

/* Previous + Next sections: soft blue tint rgba(44,99,157,0.09) with navy text. */
/* .speak-bar__eval-actions prefix so these out-rank the shared
   `.speak-bar__eval-actions .btn.speak-bar__eval-btn { background:#fff; color:#333 }`
   default rule (2-3-0) which was keeping them white. */
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_prev_section.speak-bar__eval-btn,
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_next_section.speak-bar__eval-btn {
  background: rgba(44, 99, 157, 0.09) !important;
  border-color: rgba(44, 99, 157, 0.2) !important;
  color: #1B365D !important;
  font-weight: 700;
}

#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_prev_section.speak-bar__eval-btn:hover,
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_next_section.speak-bar__eval-btn:hover,
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_open_settings.speak-bar__eval-btn:hover {
  background: rgba(44, 99, 157, 0.16) !important;
}

#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_prev_section.speak-bar__eval-btn .glyphicon,
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_next_section.speak-bar__eval-btn .glyphicon,
#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_open_settings.speak-bar__eval-btn .glyphicon {
  color: #1B365D !important;
}

#speak.md-eval-header .speak-bar__eval-actions__label {
  margin-left: 4px;
}

#inner_header:has(#speak) #speak.md-eval-header .speak-bar__eval-actions #eval_open_settings.speak-bar__eval-btn {
  width: 44px;
  padding: 0 !important;
  background: rgba(44, 99, 157, 0.09) !important; /* match Previous/Next */
  border-color: rgba(44, 99, 157, 0.2) !important;
}

#speak.md-eval-header #eval_open_settings.speak-bar__eval-btn .glyphicon {
  font-size: 16px;
}

#speak.md-eval-header .speak-bar__button-list-wrap {
  flex: 1;
  display: flex !important;
  align-items: center;
  position: relative;
  min-height: 56px;
  /* Reserve space at the right edge for the absolutely-positioned
     backspace + clear tool buttons (44 + 44 + ~24 of internal gap +
     trailing inset). They visually live INSIDE the sentence bar,
     mirroring the board-detail tool cluster. */
  padding: 8px 116px 8px 14px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: rgba(110, 122, 140, 0.32) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 1px rgba(27, 54, 93, 0.1), inset 0 -2px 5px rgba(27, 54, 93, 0.18), inset 0 -1px 1px rgba(27, 54, 93, 0.1);
  border: none !important;
  overflow: visible;
}

#speak.md-eval-header #button_list {
  flex: 1;
  display: flex;
  align-items: center;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

#speak.md-eval-header #button_list .button {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Backspace + Clear visually nested INSIDE the sentence bar. They
   sit absolutely at the right edge of the speak header, overlaying
   the wrap's reserved padding-right. Styled as ghost icon buttons
   on the frosted bar (no border, no fill) — matching the
   board-detail sentence-bar tool buttons (mic / backspace / clear /
   options chevron). */
#speak.md-eval-header #backspace_button,
#speak.md-eval-header #clear_button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: background 0.12s ease;
  z-index: 2;
}

#speak.md-eval-header #backspace_button {
  /* 60px -> 76px so there's a clear ~22px gap between backspace and the
     trash/clear button (was only ~6px, which read as one merged control). */
  right: 76px !important;
}

#speak.md-eval-header #clear_button {
  right: 16px !important;
}

#speak.md-eval-header #backspace_button:hover,
#speak.md-eval-header #clear_button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

#speak.md-eval-header #backspace_button:active,
#speak.md-eval-header #clear_button:active {
  background: rgba(255, 255, 255, 0.28) !important;
}

#speak.md-eval-header #backspace_button img {
  width: 18px;
  height: 18px;
  /* The delete.svg ships as a dark icon. Invert + brighten so it
     reads white-on-frost against the sentence bar background. */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

#speak.md-eval-header #clear_button .md-eval-clear-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  opacity: 0.92;
}

/* Defensive hide of the legacy `glyphicon-remove` X inside the
   eval clear button. The template's {{#if eval_mode}} branch
   already swaps the X for the trash SVG, but if any code path
   reintroduces the glyphicon (e.g. cached partial render), this
   CSS guarantees only the trash icon shows on eval boards. */
#speak.md-eval-header #clear_button .glyphicon-remove,
#speak.md-eval-header #clear_button .glyphicon.glyphicon-remove {
  display: none !important;
}

#speak.md-eval-header #clear_button .glyphicon {
  color: #fff !important;
  font-size: 16px;
  margin: 0 !important;
}

#speak.md-eval-header #backspace_button:focus-visible,
#speak.md-eval-header #clear_button:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.55) !important;
}

#speak.md-eval-header #speak_options,
#speak.md-eval-header #speak_mode_notification {
  display: none !important;
}

/* ============================================================
   Modern Eval Board Body
   ============================================================
   Companion to the Modern Eval Header above. Re-skins the BODY
   of an eval board (the classic board/index renderer) to the
   home / board-detail visual language WITHOUT switching renderers
   — `routes/board.js` keeps `^obf/` on the classic route on
   purpose, so the eval flow handlers stay intact. Scoped to
   `.board.eval_mode` (added by `display_class` in
   controllers/board/index.js only when `app_state.eval_mode`),
   so NO normal classic board is touched. The buttons' inline
   `computed_style` (button.js) sets position/size only, never
   the face fill/border/radius, so the visual skin is pure CSS;
   `!important` beats the base `.button` / `.colored_icons` rules
   (same approach as the header block).
   ============================================================ */
/* Board surface — replace the flat classic grey with the same soft
   three-stop brand wash the home/modal surfaces use (verdigris ->
   denim -> violet at low alpha over a near-white base), so the eval
   canvas reads as part of the modern app rather than a legacy board. */
.board.eval_mode,
.board.eval_mode #board_bg,
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) #board_bg {
  background: linear-gradient(150deg, rgba(42, 157, 143, 0.07) 0%, rgba(76, 134, 216, 0.06) 45%, rgba(123, 107, 173, 0.05) 100%), linear-gradient(180deg, #ffffff 0%, #eef1f6 100%) !important;
  /* Do NOT override the region height. The board sets it inline per layout —
     66.6667% when there's one button row (3 options), 33.3333% when there are two
     (6 options) — so it already shrinks to make room as rows are added. A fixed
     height here forced every board to ~2/3 and made 6-option boards overlap the
     second button row. Gradient fills the correctly-sized div (border-box); the
     image is inset via its own max-height so it never reaches the button row. */
  box-sizing: border-box;
  padding: 4px;
  align-items: center;
}

/* Background image → rounded, lifted photo card that sits ABOVE the button row
   rather than a full-bleed block clipped at the row edge. width/height:auto +
   max:100% sizes the <img> box to the contain-scaled photo itself, so the
   border-radius rounds the actual photo edges (not a transparent letterbox
   block); flex-shrink + min-height:0 lets it fit the space the .text header
   leaves, and align-self centers it. */
.board.eval_mode #board_bg img,
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) #board_bg img {
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  /* 85% of the available region → ~15% smaller than full-bleed. */
  max-width: 85% !important;
  max-height: 85% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: center;
  border-radius: clamp(10px, 1.4vw, 18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(27, 54, 93, 0.14);
}

/* Text header ("Find X") → the modern board-detail surface: translucent white
   glass card, navy hairline, rounded, layered lift shadow (mirrors
   .md-eval-intro__panel). Replaces the legacy flat white highlight span. */
.board.eval_mode #board_bg .text,
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) #board_bg .text {
  padding: clamp(6px, 1.5vh, 14px) clamp(12px, 2vw, 24px);
}

.board.eval_mode #board_bg .text span,
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) #board_bg .text span {
  display: inline-block;
  /* Scale the whole card (text + padding + surface) uniformly, 15% smaller then
     another 15% → 0.85 * 0.85 ≈ 0.72. */
  transform: scale(0.72);
  transform-origin: center;
  padding: clamp(6px, 1.2vh, 12px) clamp(16px, 2.4vw, 28px);
  color: #1B365D;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(27, 54, 93, 0.1), 0 12px 30px rgba(27, 54, 93, 0.14) !important;
}

/* Review helper: the open-ended scene's target concept (core_word), rendered as
   a small muted caption below the prompt image so reviewers can see what each
   page is testing. */
.board.eval_mode #board_bg .eval-helper,
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) #board_bg .eval-helper {
  margin-top: 8px;
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.62);
  text-align: center;
}

/* Button cards — crisp white tiles that clearly lift off the surface:
   generous radius, a hairline navy border for definition, and a
   layered soft shadow (mirrors .md-board-detail-symbol-card). The
   harsh classic border is dropped. */
.board.eval_mode .button {
  background: #fff !important;
  border: 1px solid rgba(27, 54, 93, 0.07) !important;
  border-radius: clamp(12px, 1.6vw, 22px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 5px rgba(27, 54, 93, 0.08), 0 10px 26px rgba(27, 54, 93, 0.13) !important;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* Hover / touch — clear lift + deeper shadow + verdigris-tinted edge,
   the standard board-detail tile affordance. */
.board.eval_mode .button:hover,
.board.eval_mode .button.touched {
  transform: translateY(-3px);
  border-color: rgba(42, 157, 143, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 6px rgba(27, 54, 93, 0.1), 0 16px 34px rgba(27, 54, 93, 0.18) !important;
}

/* Keyboard focus — verdigris ring (matches the header eval buttons). */
.board.eval_mode .button:focus-visible {
  outline: 3px solid #2A9D8F !important;
  outline-offset: 2px;
  border-color: rgba(42, 157, 143, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 6px rgba(27, 54, 93, 0.1), 0 16px 34px rgba(27, 54, 93, 0.18) !important;
}

/* Open-ended NAV buttons (previous / next / done) — a modern polish distinct
   from the answer tiles. Prev/Next read as secondary navigation: cool white→
   slate glass cards with a hairline navy edge. Done reads as the primary
   "finish" action: a verdigris-tinted CTA that echoes its green check. Targeted
   by their eval button ids (rendered as data-id). */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty),
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty) {
  background: linear-gradient(180deg, #ffffff 0%, #e9edf3 100%) !important;
  border: 1px solid rgba(27, 54, 93, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(27, 54, 93, 0.07), 0 12px 28px rgba(27, 54, 93, 0.11) !important;
}

#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.18) 0%, rgba(42, 157, 143, 0.07) 100%) !important;
  border: 1px solid rgba(42, 157, 143, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(42, 157, 143, 0.16), 0 14px 30px rgba(42, 157, 143, 0.22) !important;
}

#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty):hover,
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty).touched {
  border-color: rgba(42, 157, 143, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 8px rgba(42, 157, 143, 0.22), 0 18px 40px rgba(42, 157, 143, 0.32) !important;
}

/* Nav button LAYOUT: compact content-sized pills with the label + icon as one
   tight centered group (was a full-cell-wide tile with the label pinned to the
   top and the icon floating far below). fit-content + auto height shrink them so
   they read as controls, not answer tiles; the normally-absolute label and the
   JS-positioned symbol are flowed into a centered flex column; prev pins left,
   next/done pin right. */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty),
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty),
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: fit-content !important;
  min-width: 88px;
  height: auto !important;
  padding: 10px 18px !important;
}

#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty) {
  left: 1.5% !important;
  right: auto !important;
}

#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty),
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) {
  left: auto !important;
  right: 1.5% !important;
}

/* Flow the label (normally absolute at the top) directly above the icon. */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty) .button-label-holder,
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty) .button-label-holder,
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) .button-label-holder {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  order: 1;
}

/* Flow the symbol holder (normally inline-block with a JS top-margin). */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty) span:has(> img.symbol),
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty) span:has(> img.symbol),
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) span:has(> img.symbol) {
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 0 !important;
  order: 2;
}

/* Modern icon size; strip the photo-symbol radius/shadow (these are line icons). */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty) img.symbol,
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty) img.symbol,
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) img.symbol {
  width: clamp(30px, 3.2vw, 44px) !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* No action glyph on these controls. */
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_prev]:not(.empty) .action_container,
#within_ember.board-view:has(#speak.md-eval-header) .board .button[data-id=button_next]:not(.empty) .action_container,
#within_ember.board-view:has(#speak.md-eval-header) .board .button:is([data-id=button_done], [data-id=button_save]):not(.empty) .action_container {
  display: none !important;
}

/* Label holder — transparent so the white card face reads as one clean
   surface (kills the legacy white "highlight box" look behind text). */
.board.eval_mode .button .button-label-holder {
  background: transparent !important;
}

/* Button label — navy, BOLD, modern sans (drops the legacy serif),
   so text reads as modern UI copy rather than a flat classic caption.
   Applies to the small corner labels (settings / next) and the big
   text-only instruction button alike. */
.board.eval_mode .button .button-label,
.board.eval_mode .button .button-label span {
  color: #1B365D !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
}

/* Text-only instruction tile (the "Welcome to the Eval Tool…" intro):
   the holder carries `.no_image`, so promote that whole card to a
   verdigris-tinted "hero callout" — a soft brand gradient face + inset
   verdigris keyline — so the intro copy reads as a designed panel, not
   a plain button. The person illustration behind it is the board
   background and is unaffected. */
.board.eval_mode .button:has(.button-label-holder.no_image) {
  background: linear-gradient(160deg, rgba(42, 157, 143, 0.1), rgba(76, 134, 216, 0.06)), #ffffff !important;
  border-color: rgba(42, 157, 143, 0.3) !important;
  box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.18), 0 4px 10px rgba(27, 54, 93, 0.1), 0 16px 36px rgba(27, 54, 93, 0.16) !important;
}

/* Eval text-only keys (e.g. the open-keyboard letters): the .no_image label was
   landing in the key's lower half and clipping at the bottom edge — its centering
   uses `bottom: 50%` + translateY, which only centers while `position` is
   relative, but an existing rule makes it `absolute`, so it drops low. Fill the
   key and flex-center the label instead. Font is left to the inline fast_html
   sizing (already fine); only vertical placement is corrected. Text-only only,
   so the symbol answer tiles are untouched. */
#within_ember.board-view:has(#speak.md-eval-header) .board .button:has(.button-label-holder.no_image) .button-label-holder.no_image {
  position: absolute !important;
  inset: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
}

#within_ember.board-view:has(#speak.md-eval-header) .board .button:has(.button-label-holder.no_image) .button-label-holder.no_image .button-label {
  height: auto !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* ============================================================
   Modern Eval Intro Screen (bespoke)
   ============================================================
   For eval INTRO steps, controllers/board/index.js adds `eval_intro`
   to the board container and renders the <eval-intro> component in
   place of the legacy OBF grid. Hide every grid artifact so only the
   modern panel shows; the component (CTA/Settings) reuses the existing
   eval flow actions, so the eval logic is untouched. The intro board's
   absolute height (board_style) no longer applies — the panel sizes
   itself and centers in the available board area. */
.board.eval_intro #board_bg,
.board.eval_intro .button_row,
.board.eval_intro #board_canvas,
.board.eval_intro .board_status,
.board.eval_intro #stash_hover {
  display: none !important;
}

.board.eval_intro,
.board:has(.md-eval-intro__panel) {
  height: auto !important;
  /* Fill the full viewport below the fixed header so the eval surface
     extends to the bottom of the page (was capped at min(72vh,620px),
     which left dead space below). #content reserves the measured header
     via padding-top; subtract the same header height + the 1.5rem
     `#content .board` top margin so the board bottom lands at the page
     bottom with no scroll. */
  /* Fill to the page bottom by coupling to the SAME header variable #content
     uses for its padding-top (--speak-header-height, ~l.8887), with NO extra
     offset. The board starts exactly at #content's padding edge (measured
     board_top === content padding-top; there is no 1.5rem margin), so
     board_top (= --speak-header-height) + this min-height = 100dvh, always.
     The old `- 1.5rem` subtracted a non-existent margin and left that gap. */
  min-height: calc(100dvh - var(--speak-header-height, 70px));
  display: flex;
  /* Top-align (not center) so the card sits right under the speak bar —
     centering in the tall board area was what created the big gap below
     the header. */
  align-items: flex-start;
  justify-content: center;
}

/* (Removed the old --topbar-height welcome override: its `:has(> header…)`
   selector never matched this DOM — the header isn't a direct child of
   board-view — so #content always reserves --speak-header-height and the rule
   above (coupled to that same variable) fills correctly for the welcome too.
   Measured: content padding-top === board_top === --speak-header-height.) */
/* Eval SECTION boards (the actual test steps): same fill, but these show the
   speak-bar header, so reserve the measured --speak-header-height (matching
   #content's padding-top rule ~l.8887) plus the 32px `.board.speak` top margin,
   so the board's background reaches the viewport bottom instead of collapsing
   to the JS-computed grid height (the white strip below the grid). Scoped to the
   eval speak header + non-intro board so only eval steps are affected. */
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) {
  min-height: calc(100dvh - var(--speak-header-height, calc(var(--topbar-height) + var(--speak-bar-extra, 0px))) - 32px) !important;
}

/* Eval board buttons: give them the board-detail speak-card chrome (rounded
   corners + seated-tile drop shadow) but drive the sheen from VARIANTS of each
   button's OWN inline color — a lighter tint at the top fading to a darker shade
   at the base — instead of the board-detail white pearl. background-image layers
   OVER the inline background-color, so the button's categorical color still
   reads through the gradient; box-shadow mirrors .md-board-detail-symbol-card. */
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button:not(.empty):not(.hidden_button) {
  border-radius: clamp(6px, 1.2vw, 16px) !important;
  overflow: hidden;
  padding: 6px !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(0, 0, 0, 0.05) 72%, rgba(0, 0, 0, 0.13) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(27, 54, 93, 0.1), 0 8px 24px rgba(27, 42, 65, 0.08), 0 20px 50px rgba(27, 54, 93, 0.06) !important;
}

/* Keyboard focus: the global focus indicator is a box-shadow ring (l.232), which
   our seated-tile box-shadow above overrides. Re-layer the 3px navy ring on top
   of the tile shadow so focused eval buttons stay clearly highlighted (WCAG
   2.4.7). Higher specificity than the tile rule (adds :focus-visible). */
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button:not(.empty):not(.hidden_button):focus-visible {
  box-shadow: 0 0 0 3px #1B365D, inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 12px rgba(27, 54, 93, 0.1), 0 8px 24px rgba(27, 42, 65, 0.08) !important;
}

/* Eval header keyboard focus: the shared box-shadow focus ring loses here — the
   header buttons each carry an id-based :focus-visible ELEVATION box-shadow
   (e.g. #home_button) that out-specifies any *-based ring rule, so the ring
   never shows and the white ring from l.239 is invisible on this white header
   anyway. Use `outline` instead: a different property no per-button rule
   contests, so it wins over the global `outline:none` trivially and reads as a
   clear navy ring on the white header (WCAG 2.4.7). */
#inner_header:has(#speak) #speak.md-eval-header *:focus-visible,
#inner_header:has(#speak.md-eval-header) #identity *:focus-visible {
  outline: 3px solid #1B365D !important;
  outline-offset: 2px !important;
}

/* Hide the general user-Preferences gear during an eval — Eval Settings is
   already in the speak bar, and opening Preferences would exit the assessment.
   display:none removes it visually AND from the layout AND from the tab order. */
#inner_header:has(#speak.md-eval-header) .ll-header-settings-btn {
  display: none !important;
}

/* Horizontal inset only. The label sits in a fixed ~23px slot with the symbol
   positioned directly below it, so vertical padding or a taller line-height
   grows the label DOWN over the symbol — which covers it entirely on small
   buttons. Keep only the left/right inset, which is vertically safe. */
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button:not(.empty):not(.hidden_button) .button-label {
  padding: 0 6px !important;
}

/* Small-button symbol fit. On the `small_text` / `really_small_text` sizes the
   layout math sizes the symbol band to just overrun the short button, and the
   stock overflow clip (plus the card's 6px inset) then crops the symbol at the
   bottom. Give the small buttons more room and cap the symbol to the button so
   the whole image fits INSIDE — without touching the shared grid sizing:
     • trim the card inset back toward stock (6px → 2px) to reclaim vertical space
     • make the small button a size container so the symbol can measure against it
     • cap the symbol height to a fraction of the button height (cqh) so the image
       fits below the label instead of overflowing and being clipped.
   Scoped to the small text sizes only — normal-size buttons keep the 6px inset
   and are not size containers, so their layout is untouched. */
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button.small_text:not(.empty):not(.hidden_button),
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button.really_small_text:not(.empty):not(.hidden_button) {
  padding: 2px !important;
  container-type: size;
}

#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button.small_text:not(.empty):not(.hidden_button) .symbol,
#within_ember.board-view:has(#speak.md-eval-header) .board.speak:not(.eval_intro) .button.really_small_text:not(.empty):not(.hidden_button) .symbol {
  max-height: 70cqh !important;
}

/* Eval answer PHOTOS → rounded corners + a bit of depth. Scoped to photo symbols
   only (rel points at the /photos/ library) so line-drawing icon symbols on other
   eval boards aren't given odd shadows. filter: drop-shadow (not box-shadow) so
   the depth hugs the actual photo even where object-fit letterboxes it. */
#within_ember.board-view:has(#speak.md-eval-header) .board:not(.eval_intro) .button:not(.empty):not(.hidden_button) img.symbol[rel*="/photos/"] {
  border-radius: clamp(8px, 1vw, 14px);
  filter: drop-shadow(0 3px 5px rgba(27, 54, 93, 0.18)) drop-shadow(0 9px 16px rgba(27, 54, 93, 0.1));
}

/* Intro page ONLY: the bespoke center screen already provides the primary
   Start Evaluation + Eval Settings actions, so hide the redundant header
   Home, Start, and Settings controls. Also hide the backspace button —
   its delete.svg glyph (a ⌫ key with an × built in) reads as a stray "x"
   next to the trash, and there's no composed sentence to backspace on the
   intro. The trash/clear button stays. Scoped via :has(.board.eval_intro)
   (the class lives on the board inside #content) so later eval steps —
   which render as real boards and may compose a response — keep them all. */
#within_ember.board-view:has(.board.eval_intro) #speak.md-eval-header .speak-header__home-marker,
#within_ember.board-view:has(.board.eval_intro) #speak.md-eval-header #eval_intro_start,
#within_ember.board-view:has(.board.eval_intro) #speak.md-eval-header #eval_open_settings,
#within_ember.board-view:has(.board.eval_intro) #speak.md-eval-header #backspace_button {
  display: none !important;
}

/* The intro host fills the board area and centers the panel. */
.md-eval-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* Hero panel — frosted card on the brand-washed eval surface, mirroring
   the modern board-detail / home card language. */
.md-eval-intro__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  width: 100%;
  max-width: 620px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(27, 54, 93, 0.1), 0 24px 60px rgba(27, 54, 93, 0.16);
}

/* Hero icon in a soft verdigris medallion. */
.md-eval-intro__icon {
  width: clamp(64px, 9vw, 92px);
  height: clamp(64px, 9vw, 92px);
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(42, 157, 143, 0.16), rgba(76, 134, 216, 0.1));
  box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-eval-intro__eyebrow {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1A7B7A;
}

.md-eval-intro__lead {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.28;
  color: #1B365D;
}

/* Combined welcome screen: heading + scannable checklist (replaces the
   three paragraph intros). */
.md-eval-intro__heading {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: #1B365D;
}

.md-eval-intro__checklist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.md-eval-intro__checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  color: #1B365D;
}

/* Verdigris check medallion — the "done/included" cue that makes the
   list scannable instead of a wall of text. */
.md-eval-intro__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.14);
  color: #1A7B7A;
}

.md-eval-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

/* Primary CTA — verdigris pill, matches the eval header Start button. */
.md-eval-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: 16px;
  background: #2A9D8F;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42, 157, 143, 0.34);
  transition: background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}

.md-eval-intro__cta:hover {
  background: rgb(37.6944723618, 140.9055276382, 128.3407035176);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(42, 157, 143, 0.4);
}

.md-eval-intro__cta:active {
  transform: translateY(0);
}

.md-eval-intro__cta:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.4);
  outline-offset: 3px;
}

.md-eval-intro__cta-arrow {
  transition: transform 0.16s ease;
}

.md-eval-intro__cta:hover .md-eval-intro__cta-arrow {
  transform: translateX(3px);
}

/* Secondary action — quiet ghost button for Settings. */
.md-eval-intro__settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: #1B365D;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.md-eval-intro__settings:hover {
  background: #fff;
  border-color: rgba(27, 54, 93, 0.28);
  transform: translateY(-1px);
}

.md-eval-intro__settings:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.4);
  outline-offset: 3px;
}

/* Section navigation row — quiet secondary controls below the primary
   actions, separated by a hairline divider. Back (left) and Next (right)
   sit at the edges; Skip (when available) centers between them. */
.md-eval-intro__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.md-eval-intro__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #5A6A85;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.md-eval-intro__nav-btn:hover {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
}

.md-eval-intro__nav-btn:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.4);
  outline-offset: 2px;
}

/* Skip is the most secondary — render it as a muted underlined link so it
   reads as an escape hatch, not a primary path. The parent nav's
   justify-content: space-between sits it between Back (left) and Next (right),
   and keeps Back/Next pinned to the edges when Skip isn't shown. */
.md-eval-intro__nav-btn--skip {
  color: rgba(27, 54, 93, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-eval-intro__nav-btn--skip:hover {
  background: transparent;
  color: #1B365D;
}

/* ──────────────────────────────────────────────────────────────────
   Universal modal styling — applies to every modal in the app.
   Each per-modal rule above can still customize its inner content,
   but these globals enforce a consistent 28px header/footer vertical
   padding and the brand three-stop gradient skin on a light surface.
   Defined at the very end of the file so source-order beats the
   per-modal `.la-*-wrap > .modal-header` rules at the same
   specificity (0,2,0).
   `la-modal-header` is intentionally excluded — it lives on the
   landing-alt page, not a modal.
   ────────────────────────────────────────────────────────────────── */
.modal-content > .modal-header,
.modal .modal-header,
.modal .md-modal-header,
.modal .md-getting-started-modal__header,
.modal .la-modal-header {
  padding-top: 28px;
  padding-bottom: 28px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
}

.modal-content > .modal-footer,
.modal .modal-footer,
.modal .md-modal-footer,
.modal .la-assign-lesson-modal-footer,
.modal .la-colors-modal-footer,
.modal .la-devices-modal-footer,
.modal .la-modify-core-modal-footer,
.modal .la-new-board-modal-footer,
.modal .la-phrases-modal-footer,
.modal .la-record-note-modal-footer,
.modal .la-sync-details-modal-footer,
.modal .la-valet-modal-footer {
  padding-top: 28px;
  padding-bottom: 28px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
}

/* Same flow-positioned fix for the .md-pref-box pattern used in
   /u/<user>/edit (Account Type / External Access Method selectors).
   Each preference box is a rounded card with overflow:hidden, so
   the absolutely-positioned dropdown gets clipped without this. */
.md-pref-box .modern-select__list,
.md-pref-box .bound-select__list {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 6px;
}

/* Add-app modal footer Close button (the .md-modal-btn--cancel button
   in the modal footer, not the small X in the header). Scoped via
   `:has(.md-modal-app-stores)` so the rule only applies to the
   add-app modal — the app-stores grid is unique to that template.
   Solid $brand-slate-blue fill — matches the about-lingolinq Learn
   More button so the two cross-modal CTAs read as one family. */
.modal-content:has(.md-modal-app-stores) .md-modal-btn--cancel,
.modal-content:has(.md-modal-app-stores) .md-modal-btn--cancel:hover,
.modal-content:has(.md-modal-app-stores) .md-modal-btn--cancel:focus,
.modal-content:has(.md-modal-app-stores) .md-modal-btn--cancel:focus-visible,
.modal-content:has(.md-modal-app-stores) .md-modal-btn--cancel:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* About-LingoLinq modal "Learn More" link (.md-modal-btn--primary <a>
   in the modal body). Scoped via `:has(.usage-checklist)` so the rule
   only applies to the about-lingolinq modal — the usage checklist is
   unique to that template. Solid $brand-slate-blue fill — slightly
   muted compared to the add-app close button's denim, distinguishing
   primary actions in this modal as more secondary in tone. */
.modal-content:has(.usage-checklist) .md-modal-btn--primary,
.modal-content:has(.usage-checklist) .md-modal-btn--primary:hover,
.modal-content:has(.usage-checklist) .md-modal-btn--primary:focus,
.modal-content:has(.usage-checklist) .md-modal-btn--primary:focus-visible,
.modal-content:has(.usage-checklist) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Add-supervisor modal primary action (Add Supervisor / Send Consent
   Request / Add From Start Code — all use .md-modal-btn--primary).
   Scoped via `:has(.md-add-supervisor)` so the rule only applies to
   the add-supervisor modal. Solid $brand-slate-blue fill matches the
   other primary CTA restyles. */
.modal-content:has(.md-add-supervisor) .md-modal-btn--primary,
.modal-content:has(.md-add-supervisor) .md-modal-btn--primary:hover,
.modal-content:has(.md-add-supervisor) .md-modal-btn--primary:focus,
.modal-content:has(.md-add-supervisor) .md-modal-btn--primary:focus-visible,
.modal-content:has(.md-add-supervisor) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Add-to-Sidebar modal primary action (Add to Sidebar / Adding...).
   Scoped via `:has(.md-add-to-sidebar)` — the marker class added to
   the modal-body in the template. Same $brand-slate-blue fill as the
   other primary CTAs. */
.modal-content:has(.md-add-to-sidebar) .md-modal-btn--primary,
.modal-content:has(.md-add-to-sidebar) .md-modal-btn--primary:hover,
.modal-content:has(.md-add-to-sidebar) .md-modal-btn--primary:focus,
.modal-content:has(.md-add-to-sidebar) .md-modal-btn--primary:focus-visible,
.modal-content:has(.md-add-to-sidebar) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Supervisors modal "Add Supervisor" button — uses .md-btn--primary
   from the supervision-settings component (inline mode), not
   .md-modal-btn--primary. Scoped via .md-dashboard-supervisors-modal-wrap
   so other usages of md-btn--primary across the app are unaffected.
   Same $brand-slate-blue fill as the other primary CTA restyles. */
.md-dashboard-supervisors-modal-wrap .md-btn--primary,
.md-dashboard-supervisors-modal-wrap .md-btn--primary:hover,
.md-dashboard-supervisors-modal-wrap .md-btn--primary:focus,
.md-dashboard-supervisors-modal-wrap .md-btn--primary:focus-visible,
.md-dashboard-supervisors-modal-wrap .md-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Approve-Board-Share modal "Approve This Share" button — uses
   .md-modal-btn--primary. Scoped via `:has(.md-approve-board-share)`
   (marker class on the modal-body) so other primary buttons across
   the app aren't affected. Same $brand-slate-blue fill as the rest
   of the primary CTA family. */
.modal-content:has(.md-approve-board-share) .md-modal-btn--primary,
.modal-content:has(.md-approve-board-share) .md-modal-btn--primary:hover,
.modal-content:has(.md-approve-board-share) .md-modal-btn--primary:focus,
.modal-content:has(.md-approve-board-share) .md-modal-btn--primary:focus-visible,
.modal-content:has(.md-approve-board-share) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Assessment-settings (Eval Settings) modal Update/Save button —
   uses .md-modal-btn--primary. Scoped via `:has(.md-assessment-settings)`
   (marker class on the modal-body). Same $brand-slate-blue fill as
   the rest of the primary CTA family. */
.modal-content:has(.md-assessment-settings) .md-modal-btn--primary,
.modal-content:has(.md-assessment-settings) .md-modal-btn--primary:hover,
.modal-content:has(.md-assessment-settings) .md-modal-btn--primary:focus,
.modal-content:has(.md-assessment-settings) .md-modal-btn--primary:focus-visible,
.modal-content:has(.md-assessment-settings) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Badge-Awarded modal "New Goal" button — uses .md-modal-btn--primary.
   Scoped via `:has(.md-badge-awarded)` so only this modal is affected.
   Same $brand-slate-blue fill as the rest of the primary CTA family. */
.modal-content:has(.md-badge-awarded) .md-modal-btn--primary,
.modal-content:has(.md-badge-awarded) .md-modal-btn--primary:hover,
.modal-content:has(.md-badge-awarded) .md-modal-btn--primary:focus,
.modal-content:has(.md-badge-awarded) .md-modal-btn--primary:focus-visible,
.modal-content:has(.md-badge-awarded) .md-modal-btn--primary:active {
  background-color: #5A6A85 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Badge-Awarded modal — modern empty state shown when the modal opens
   without any badge data (e.g. via the dev console for testing).
   Friendly trophy + encouragement copy instead of a blank body. */
.md-badge-awarded__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px 24px;
  gap: 14px;
}

.md-badge-awarded__empty-medal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(242, 185, 90, 0.18), rgba(42, 157, 143, 0.18));
  color: #1A7B7A;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.md-badge-awarded__empty-sparkle {
  position: absolute;
  font-size: 16px;
  color: #F2B95A;
  text-shadow: 0 1px 2px rgba(27, 54, 93, 0.12);
  pointer-events: none;
  animation: md-badge-empty-sparkle 2.4s ease-in-out infinite;
}

.md-badge-awarded__empty-sparkle--1 {
  top: -2px;
  right: 6px;
  font-size: 14px;
  animation-delay: 0s;
}

.md-badge-awarded__empty-sparkle--2 {
  bottom: 4px;
  left: -4px;
  font-size: 18px;
  animation-delay: 0.6s;
}

.md-badge-awarded__empty-sparkle--3 {
  top: 30%;
  right: -8px;
  font-size: 12px;
  animation-delay: 1.2s;
}

@keyframes md-badge-empty-sparkle {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}
.md-badge-awarded__empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.md-badge-awarded__empty-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6B7280;
  max-width: 380px;
}

/* Inline status / error rows for the Badges and Goals view — replaces
   raw "Error Loading Badges" / "Error Loading Goals" lines with soft
   pill cards that read as a friendly, momentary state instead of a
   harsh failure. */
.md-badge-awarded__inline-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 16px;
  font-size: 14px;
  font-style: italic;
  color: #6B7280;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  line-height: 1.4;
}

.md-badge-awarded__inline-status--error {
  background: rgba(242, 185, 90, 0.1);
  border-color: rgba(242, 185, 90, 0.28);
  color: #374151;
  font-style: normal;
}

.md-badge-awarded__inline-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #F2B95A;
}

/* Extra top padding on the approve-board-share modal-body so the
   centered share icon has more breathing room from the header
   gradient above. */
.md-approve-board-share {
  padding-top: 32px !important;
}

.md-approve-board-share .md-modal-icon-row {
  margin-top: 8px;
  margin-bottom: 20px;
}

/* Add-tool modal empty state — replaces the bare "No tools available"
   line with a centered icon + heading + friendly message inviting the
   user to check back later. */
.md-add-tool-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 12px;
}

.md-add-tool-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
}

.md-add-tool-empty__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.2px;
}

.md-add-tool-empty__message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6B7280;
  max-width: 380px;
}

/* ──────────────────────────────────────────────────────────────────
   User-select buttons — modern card chrome.
   Replaces the legacy heavy inset shadow with a flat rounded card,
   vertically-centered content, and a soft hover lift. Used by the
   add-to-sidebar / supervisee picker modal and any other user-pick UI.
   The avatar swap below pulls the modern brand-teal SVG silhouette
   in place of the legacy /avatars/avatar-N.png cartoons (same SVG
   data-URI used by the caseload avatar so both contexts read as
   one component family).
   ────────────────────────────────────────────────────────────────── */
.modal-content .user_select.btn,
.user-select-modern .user_select.btn {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(27, 54, 93, 0.1) !important;
  background: #F8F9FA !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 4px 12px rgba(27, 54, 93, 0.06) !important;
  color: #1B365D !important;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
  text-align: center;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.modal-content .user_select.btn:hover,
.user-select-modern .user_select.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 157, 143, 0.35) !important;
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 20px rgba(27, 54, 93, 0.1) !important;
}

.modal-content .user_select.btn-info,
.user-select-modern .user_select.btn-info {
  /* Selected state — deliberately LOUD so the choice is unmistakable.
     The earlier soft tint read as a hover state, not a commit. Now:
     a verdigris tint fill, a 2px solid verdigris border, a wide 4px
     verdigris focus-ring halo, and a checkmark badge in the corner
     (see ::after below) make "this user is selected" a single glance
     read. Color flips slightly so the name text retains AA contrast
     against the tinted background. */
  background: rgba(42, 157, 143, 0.18) !important;
  border: 2px solid #1A7B7A !important;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.28), 0 6px 16px rgba(26, 123, 122, 0.2) !important;
  color: #1B365D !important;
  position: relative;
  /* Compensate for the 1px → 2px border swap so the card doesn't
     shift its neighbors by 1px when toggled. */
  margin: -1px;
}

/* Checkmark badge pinned to the top-right of the selected card so
   even at a glance it reads as "picked" rather than "highlighted". */
.modal-content .user_select.btn-info::after,
.user-select-modern .user_select.btn-info::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1A7B7A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/14px 14px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(26, 123, 122, 0.3);
  pointer-events: none;
}

/* Required-selection marker — small amber notice sitting above the
   user-select grid, paired with the asterisk-led label. The asterisk
   itself uses the danger red so the user maps "* = mandatory" without
   having to read the copy. */
.md-modal-required-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(217, 138, 36, 0.1);
  border: 1px solid rgba(217, 138, 36, 0.3);
  color: #7a4a08;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.md-modal-required-label__asterisk {
  color: #c0392b;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.modal-content .user_select.btn:disabled,
.user-select-modern .user_select.btn:disabled {
  opacity: 0.5;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04) !important;
  cursor: not-allowed;
  transform: none;
}

.modal-content .user_select.btn img,
.user-select-modern .user_select.btn img {
  display: block;
  height: 60px !important;
  width: 60px !important;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 !important;
}

/* Replace `<br>` whitespace runs with explicit margin so the typography
   sits cleanly under the avatar. */
.modal-content .user_select.btn br,
.user-select-modern .user_select.btn br {
  display: none;
}

/* Section body — sits inside the open section's unified container,
   so it no longer needs its own left-border accent. Top padding
   gives the first body row breathing room from the toggle header.
   align-items: center horizontally centers each row inside the
   unified card for a focused, focused look. */
.md-board-edit-right-panel__section-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 14px 12px;
}

/* Bound-select dropdown lists inside any modal switch from the
   default `position: absolute` to `position: static` so opening a
   dropdown grows the modal-body to contain it (instead of floating
   the list past the modal's bottom edge). The list's existing
   chrome — rounded card, shadow, internal max-height scroll — is
   preserved. */
.modal-content .bound-select__list,
.modal .bound-select__list,
.modal-content .modern-select__list,
.modal .modern-select__list {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 6px;
}

/* Same flow-positioned fix for the .md-pref-box pattern used in
   /u/<user>/edit (Account Type / External Access Method selectors).
   Each preference box is a rounded card with overflow:hidden, so
   the absolutely-positioned dropdown gets clipped without this. */
.md-pref-box .modern-select__list,
.md-pref-box .bound-select__list {
  position: static;
  top: auto;
  left: auto;
  right: 0;
}

.md-board-edit-right-panel__custom-picker-apply {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #5A6A85;
  border-radius: 999px;
  background: #5A6A85;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Avatar swap intentionally NOT applied here — per design decision,
   the user-select buttons in modals keep the legacy
   /avatars/avatar-N.png placeholders rather than the modern brand-teal
   SVG silhouette used by the caseload/identity dropdown. */
/* ───────────────────────────────────────────────────────────────────
   Board Edit Page — Glassy Left Side Panel
   Phase 03 (.planning/phases/03-board-edit-side-panel/03-PLAN.md).
   Permanent left rail visible only in edit mode. Pushes the board
   grid + edit toolbar to the right column. Mode A (full panel,
   ≥1024px) styling lives here; Mode B (compact rail, <1024px) lives
   in the breakpoint block further down.
   ─────────────────────────────────────────────────────────────────── */
/* ── Layout: panel + main as two grid columns in edit mode.
   The base rule at L57792 forces the layout to a single column in
   edit mode (`grid-template-columns: 1fr !important`) — that was
   correct when <main> was the only visible child. Now the new
   `.md-board-edit-panel` is also a child, so we expand to two
   columns. The other potential children (`.md-board-detail-sidebar`,
   `.md-board-detail-right-panel`, the overlay backdrop) are
   `display: none` in edit mode and therefore removed from grid
   auto-placement, so the panel falls into column 1 and <main> into
   column 2 naturally. ────────────────────────────────────────────── */
.md-shell--board-detail-edit .md-board-detail-layout:has(.md-board-edit-panel),
.md-shell--board-detail-edit .md-board-detail-layout:not(.md-board-detail-layout--collapsed):has(.md-board-edit-panel) {
  /* Three-column edit layout at a FIXED ~15% / 70% / 15% ratio on
     EVERY screen width (left panel / board area / right "Live Preview
     Edit" panel). Same template as the smaller-screen breakpoints
     below, so the proportions never change with viewport size.
     minmax(0,1fr) on the centre absorbs the gap and prevents wide
     board content from blowing the track out. The panels fill their
     15% track (width:100%, max-width:none on the panel rules). */
  /* Side widths via per-side custom props (deterministic — replaces
     fit-content(15%), whose content-measurement collapsed the
     COLLAPSED rail to slivers):
       - default/EXPANDED: var fallback 15% (the MAX side width).
       - COLLAPSED: the :has() rules below set the side's var to the
         fixed rail width (72px) — the floor; the side never shrinks
         below its collapsed width.
     Centre minmax(0,1fr) absorbs whatever the sides don't use. */
  grid-template-columns: var(--bd-edit-side-l, 15%) minmax(0, 1fr) var(--bd-edit-side-r, 15%) !important;
  gap: 12px;
}

/* When a side panel is collapsed, that side's track = the fixed rail
   width (the collapsed panel is width:72px). Independent per side via
   :has() on each panel's own collapsed class, so left/right collapse
   independently and the centre reclaims the freed space. 72px keeps
   the rail flush with the collapsed panel; not below it. */
.md-shell--board-detail-edit .md-board-detail-layout:has(.md-board-edit-panel--collapsed) {
  /* Collapsed left rail = 56px (was 68; shrunk by 12 per request
     after the DOWNLOAD label was split to two lines in the template
     and no longer needs the extra width). Matches the right rail
     so the two rails read as a perfectly symmetric pair. */
  --bd-edit-side-l: 68px;
}

.md-shell--board-detail-edit .md-board-detail-layout:has(.md-board-edit-right-panel--collapsed) {
  --bd-edit-side-r: 68px;
}

/* Expanded right panel: 265px on ALL screen sizes (was
   previously 15% as a default fallback + 265px override scoped to
   ≤1024px via @media). The 265px width is the design baseline at
   every breakpoint now — wider screens previously rendered 15%
   which translated to ~225-300px, but the user wants the panel
   width fixed for predictable layout. Keyed off
   `:not(:has(--collapsed))` so the 56px rail rule below still wins
   when the panel is in its collapsed-rail state. */
.md-shell--board-detail-edit .md-board-detail-layout:not(:has(.md-board-edit-right-panel--collapsed)) {
  --bd-edit-side-r: 265px;
}

/* Expanded left panel: 225px on ALL screen sizes — 40px narrower than the right panel (265px)
   per request (was previously the 15% fallback which shrank below
   200px on smaller viewports and forced the panel content into a
   narrower rail layout). Pinning at 265px lets the expanded panel
   show its full larger-screen content (labels, subheaders, search
   input) at every breakpoint, mirroring the right panel's behavior.
   Keyed off `:not(:has(--collapsed))` so the 56px rail rule above
   still wins when the panel is in collapsed-rail state. The
   `@media (max-width: 1023px)` content-collapse rules below are
   scoped to `.md-board-edit-panel--collapsed` so the expanded
   panel keeps its full layout. */
.md-shell--board-detail-edit .md-board-detail-layout:not(:has(.md-board-edit-panel--collapsed)) {
  --bd-edit-side-l: 225px;
}

/* ── Panel chrome: glassy gradient + backdrop blur + soft border + shadow.
   Light-mode gradient mirrors the edit toolbar's pill gradient
   (`#ffffff → #f1f4f8`); dark-mode swaps to the toolbar's panel-surface
   tier (`#172131 → #1a2538`, +4% from the #0f1724 page canvas).
   `backdrop-filter` adds the glass effect on top of whatever is behind. */
.md-board-edit-panel {
  display: flex;
  flex-direction: column;
  /* Section rhythm: 18px between major rail sections (Board Actions, Search &
     Filter, Share & Print, View Style / Board Display) so the left rail breathes
     like the right rail instead of reading as a denser stack. The collapsed rail
     sets its own gap (.md-board-edit-panel--collapsed) so this is expanded-only. */
  gap: 18px;
  /* min-width:0 lets this grid item shrink to its 15% track.
     container-type:inline-size + the fluid root font-size make all
     panel text/icons scale to THIS panel's own width (cqi units, see
     the scoped `font-size:1em` rule below) — true responsive, not
     viewport-coupled, no breakpoint overrides.
     min-height:0 hardens the scroll behavior on short viewports —
     without it, a tall content stack can ignore overflow:auto and
     push the panel past its max-height cap (no scroll). */
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  /* Fluid panel type: scales with the panel's own width (cqi). 6cqi
     descends to the 10px floor on small screens (≈167px panel) so
     labels stop truncating, and is capped at 13px so it never balloons
     on wide screens. Floor 10px = the smallest readable size. */
  font-size: clamp(11px, 6cqi, 14px);
  /* Top padding matches the right panel (14px) so the Action Panel
     collapse band lines up with Live Preview Edit's. */
  padding: 14px 12px 20px;
  /* Edit-page rails fill their 15% grid track at EVERY width — the
     layout grid owns the proportion (fixed 15% / 70% / 15%), so the
     panel must follow it with width:100% and NO max-width cap. (A
     250px cap previously broke the ratio above ~1680px, where 15%
     exceeds 250px.) Mirrors the right
     .nb-create-rail.md-board-edit-right-panel rule. */
  width: 100%;
  max-width: none;
  /* Pin to the viewport: a fixed height of (viewport − topbar − gap)
     with sticky `top` keeps the panel in place while the board
     scrolls; overflow-y:auto lets the panel scroll internally when
     its own content is taller than the viewport. align-self:start
     stops the grid from stretching it to the (tall) board column,
     which previously made the sticky element scroll away with the
     page instead of staying fixed. */
  height: calc(100dvh - var(--topbar-height, 68px) - 16px);
  max-height: calc(100dvh - var(--topbar-height, 68px) - 16px);
  align-self: start;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 8px;
  /* Rail panel-surface — now translucent (.78 alpha) so the
     atmospheric canvas halos bleed through via the backdrop-filter
     blur on the rail. Embeds the rail in the page instead of
     stamping it on top. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 244, 248, 0.78) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* Atmospheric depth instead of a hard stroke: drop the border alpha
     from .10 → .06 (becomes a barely-there hairline), then build the
     rail's separation via layered shadows — close 1px lift, mid 24px
     drop, broad 60px ambient haze that bleeds into the canvas — plus
     a bright inset top-edge highlight that reads as "lit from above"
     (mirrors the boards-page card pattern). */
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 24px rgba(27, 54, 93, 0.07), 0 24px 60px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #1B365D;
  box-sizing: border-box;
  z-index: 5;
}

/* Responsive contract for the LEFT (Action) panel: every text element
   is 1em so it scales with the container-query-fluid root font-size on
   .md-board-edit-panel; icons scale via em too. Single authoritative
   rule (specificity 0,2,0 > each element's base px rule), so it wins
   without !important and regardless of source order — the panel is
   "completely responsive" to its own 15% width at any viewport. */
/* Container-query fluid sizing for the rail's scaling content.
   `__collapse-label` deliberately NOT in this list — the Action
   Panel / Settings Panel header should hold a stable 14px (its
   dedicated rule sets that explicitly), not scale with the
   container-query font on the rail root which clamps at 10-13px. */
.md-board-edit-panel .md-board-edit-panel__subheader,
.md-board-edit-panel .md-board-edit-panel__back-link,
.md-board-edit-panel .md-board-edit-panel__btn,
.md-board-edit-panel .md-board-edit-panel__row,
.md-board-edit-panel .md-board-edit-panel__tile-label,
.md-board-edit-panel .md-board-edit-panel__search-input {
  font-size: 1em;
}

.md-board-edit-panel .md-board-edit-panel__icon {
  width: 1.5em;
  height: 1.5em;
}

.md-board-detail--dark .md-board-edit-panel {
  /* Panel-surface tier (#172131) base + a translucent white glass-veil
     layered on top (rgba(255,255,255,.04 → .015)) so the rail catches
     light from above instead of reading as a flat dark slab. Border
     alpha further reduced .10 → .06 — the layered shadows now carry
     the separation. Shadow stack: close 1px lift, mid 24px drop, broad
     60px ambient haze, plus a subtle inset top-edge highlight at .06
     alpha for the "lit from above" cue. Mirrors the rail-light formula
     and the Boards page premium-SaaS surface technique. */
  /* Rail panel-surface — now translucent (.88 alpha) so the
     atmospheric canvas halos bleed through via the backdrop-filter
     blur on the rail. This is what makes the rails feel embedded
     in the page rather than slabs stamped on top of it. The
     translucent white veil (.04 → .015) on top still catches light
     from above. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), linear-gradient(180deg, rgba(19, 26, 39, 0.88) 0%, rgba(22, 31, 46, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Left panel collapse control ──────────────────────────────────
   A labelled button pinned to the bottom of the panel. Collapsing
   shrinks the panel to a slim rail and hides its contents; this
   button stays (icon only) so the panel can be reopened. */
/* Header — collapse chevron pill + label, mirroring the right panel's
   .md-board-edit-right-panel__header so both rails read identically
   (same pill height, icon background, teal title colour). */
.md-board-edit-panel__header {
  position: relative;
  /* Stack: collapse button on its own line, the title WRAPPING BELOW
     it (was a centred flex row whose 36px side padding collided with
     the title in the narrow 15% panel). The title is font-size:1em via
     the scoped rule, so it scales responsively with the panel. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-height: 28px;
  padding: 0 6px 6px;
}

/* Collapse pill pinned to the far right of the header; the label is
   the only in-flow child so it centers in the div. */
.md-board-edit-panel__header .md-board-edit-panel__collapse-btn {
  /* Flows in the column header (no longer absolutely pinned) so the
     title wraps BELOW it instead of colliding in the narrow panel. */
  position: static;
  transform: none;
}

/* Collapsed rail: drop the row wrapper so the chevron pill becomes a
   direct rail item (centered) — same trick used for the share grid. */
.md-board-edit-panel--collapsed .md-board-edit-panel__header {
  display: contents;
}

/* Collapsed rail: restore static flow so the existing rail-centering
   rules place the chevron, not the absolute far-right placement. */
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-btn {
  position: static;
  transform: none;
}

.md-board-edit-panel__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: #1B365D;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.2s ease;
}

.md-board-edit-panel__collapse-btn:hover,
.md-board-edit-panel__collapse-btn:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  outline: none;
}

.md-board-edit-panel__collapse-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-icon {
  transform: rotate(180deg);
}

.md-board-edit-panel__collapse-label {
  /* Action Panel / Settings Panel header label — dropped uppercase
     + 700-weight + .10em tracking, all three of which made the label
     read as "utility chrome shouting". Title-case (set in template),
     600 weight, no letter-spread reads as a calm editorial header —
     matches the boards-page typography lineage. The verdigris accent
     stays so the active panel reads as branded. */
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: #1A7B7A;
  white-space: nowrap;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-label {
  display: none;
}

/* Collapsed left panel: the finish buttons (Done Editing / Discard) show ICON
   ONLY. The label text is the buttons' accessible name (the icon badge is
   aria-hidden), so visually hide it with aac-sr-only (kept in the a11y tree)
   rather than display:none, and center the icon badge (the buttons left-align
   their content when expanded for label alignment). */
.md-board-edit-panel--collapsed .md-board-edit-panel__finish-btn {
  justify-content: center;
  /* Symmetric horizontal padding so the centered badge sits in the visual middle.
     The base btn uses 17px right / 7px left for the (now-hidden) label, which would
     otherwise push the icon-only badge off-center to the left. */
  padding-left: 7px;
  padding-right: 7px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__finish-btn .md-board-edit-session__btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-size screens (>=1500px): both expanded panels are wide enough
   for the header label (ACTION PANEL / SETTINGS PANEL) to sit INLINE
   with the collapse chevron pill, instead of stacking onto a second
   row. The original column layout existed because at narrow widths
   the 15% panel couldn't fit them side-by-side; at 1500px+ the panel
   is ~225px wide which fits both. Scoped under :not(--collapsed) so
   the collapsed-rail keeps its stacked icon-rail layout untouched. */
/* Expanded LEFT panel header — always inline chevron + ACTION
   PANEL label, at every screen width. Was previously gated to
   `@media (min-width: 1500px)` only, which meant the header
   stacked the chevron above the label at <1500px and the
   expanded panel rendered differently across widths. Per user
   request the expanded left panel's styling must stay identical
   at every viewport size, so the row layout (the wider-screen
   treatment we're keeping) is now unconditional — matching how
   the right panel's __header is already pinned to row at every
   width via its own rule below. */
.md-board-edit-panel:not(.md-board-edit-panel--collapsed) .md-board-edit-panel__header,
.md-board-edit-right-panel:not(.md-board-edit-right-panel--collapsed) .md-board-edit-right-panel__header {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Expanded right panel: always inline chevron + SETTINGS PANEL
   label, on ALL screen sizes (was previously only at ≥1500px and
   ≤1024px, leaving the 1024-1500px gap with a column-stacked
   header that pushed SETTINGS PANEL to a second row). The panel's
   fixed 265px width is enough for the inline layout at every
   breakpoint. Scoped only to the right panel since the left panel
   auto-collapses at ≤1024px via the controller's matchMedia
   listener and uses different header rules at wider widths. */
.md-board-edit-right-panel:not(.md-board-edit-right-panel--collapsed) .md-board-edit-right-panel__header {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Collapsed = slim icon rail. Instead of hiding everything, keep the
   action icons as a centered vertical strip so the panel reads as a
   compact preview of itself. Text, expandable bodies, search field,
   view-style/theme and dividers are hidden; only the representative
   SVG icons remain. Inner controls are non-interactive so a click
   anywhere falls through to the <aside>'s expand_left_panel (and the
   collapse chevron toggles back) — the rail expands before any action
   can fire. */
.md-board-edit-panel--collapsed {
  /* Labeled rail. Fill the grid track (the layout's --bd-edit-side-l
     var defines the rail width: 68px) instead of a fixed width, so
     the panel never mismatches its track (no empty gap) and the
     caption has room. Lateral padding is 2px per request — the
     longer captions (DOWNLOAD, CATEGORY) need every horizontal
     pixel they can get to render fully without truncation.
     gap is the BETWEEN-ROW spacing only — each row's internal
     icon-above-label spacing is owned by the per-row `__btn` /
     `__row` rules below (margin between label + icon inside the
     row), so bumping this gap adds breathing room between groups
     without crowding the icon/label pair. */
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 12px 2px;
  /* Between-row gap. Each row is label-on-top / icon-on-bottom
     (column-reverse), so this gap renders as the space BELOW each
     icon and ABOVE the next group's label. Share-grid gap below
     matches this so all rail items read at the same rhythm. */
  gap: 16px;
  align-items: center;
  cursor: pointer;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Lock every flex item in the collapsed rails to `flex-shrink: 0`
   so they keep their full per-item height and the rail overflows
   into its own `overflow-y: auto` scroll instead of compressing
   children. Previously the default flex-shrink:1 made the items
   (ACTIONS caption + divider + icon rows + theme pill) silently
   squeeze on short viewports — the divider visibly vanished at
   ≤576px viewport height because its 2px height was the easiest
   thing to shrink to 0, but the whole rail was being compressed.
   The list enumerates every direct/effective flex child class on
   each rail: the display:contents wrappers (`__header`,
   `__filter`, `__share-grid`, `__group--*`) don't need the
   property themselves since they have no flex box, but their
   children become the actual flex items of the rail and DO need
   it. */
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-btn,
.md-board-edit-panel--collapsed .md-board-edit-panel__label-collapsed,
.md-board-edit-panel--collapsed .md-board-edit-panel__divider,
.md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-toggle,
.md-board-edit-panel--collapsed .md-board-edit-panel__search,
.md-board-edit-panel--collapsed .md-board-edit-panel__row,
.md-board-edit-panel--collapsed .md-board-edit-panel__tile,
.md-board-edit-panel--collapsed .md-board-edit-panel__btn,
.md-board-edit-panel--collapsed .md-board-edit-panel__subheader,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__collapse-btn,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title-collapsed,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-toggle,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__subheader,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__divider {
  flex-shrink: 0 !important;
}

/* Hide only the genuinely-unfittable bits; KEEP the short labels
   (__label / __tile-label / section/collapse labels) — shown small
   under their icon by the rule below — so the rail is labeled, not
   bare icons. */
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-sublabel,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-chevron,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-list,
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse,
.md-board-edit-panel--collapsed .md-board-edit-panel__bottom,
.md-board-edit-panel--collapsed .md-board-edit-panel__divider,
.md-board-edit-panel--collapsed .md-board-edit-panel__subheader,
.md-board-edit-panel--collapsed .md-board-edit-panel__search-input,
.md-board-edit-panel--collapsed .md-board-edit-panel__search-clear {
  display: none !important;
}

/* Per-icon 8px caption under each rail item. One word per caption —
   long action labels (e.g. "Board Actions") get a short
   __label-collapsed form ("Actions") shown only in the rail, and the
   long __label is hidden in collapsed state via the rule below.
   Tile labels use the same 8px treatment so the whole rail's
   sub-label rhythm reads as one. The panel HEADERS (ACTIONS /
   SETTINGS) — `__collapse-label` and `__title-collapsed` — are
   handled by their own rules so they inherit the EXPANDED panel's
   heading color and stay one notch brighter than the sub-labels. */
.md-board-edit-panel--collapsed .md-board-edit-panel__tile-label,
.md-board-edit-panel--collapsed .md-board-edit-panel__label-collapsed,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-label-collapsed {
  display: block !important;
  font-size: 9px;
  /* Weight dropped 700 → 500 per request — the captions previously
     read as bold all-caps shouting; 500 sits as quiet secondary
     chrome under the louder ACTIONS / SETTINGS headings. */
  font-weight: 500;
  /* Line-height bumped from 1.1 → 1.5 so two-line captions
     (DOWN- / LOAD on the Download tile) have visible breathing
     room between the two lines. Single-line captions are
     unaffected by line-height since they have only one line. */
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Sub-label color — neutral white-ish per request ("set back to
     white"). Light mode uses navy, dark mode (paired rule below)
     uses white. Alpha pinned to .85 per latest request — bumped
     up from .40 / .55 so the captions read clearly against the
     panel surface while still sitting visibly quieter than the
     ACTIONS / SETTINGS headers (which are full-strength teal). */
  color: rgba(27, 54, 93, 0.85) !important;
  /* Allow longer captions ("DOWNLOAD", etc.) to render fully — the
     tile's 40px footprint was clipping them to "DOWNL...". Letting
     the label overflow into the rail's outer 56px width via
     overflow:visible + a min-width:0 release prevents the truncate;
     for cases where the label is still wider than the rail, we
     allow it to break on any character. */
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  text-overflow: clip;
  max-width: none;
  margin-top: 3px;
}

.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__tile-label,
.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__label-collapsed,
.md-board-detail--dark .md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-label-collapsed {
  /* Dark-mode sub-label color — white at .85 alpha per latest
     request (was .55). The captions stay crisp white against the
     dark panel surface while remaining one tier below the
     ACTIONS / SETTINGS headers which paint at full-strength teal. */
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Panel headers on the collapsed rails — handled by the shared
   __title-collapsed rule below (see comment there). No standalone
   rule is needed here; ACTIONS lives in the `__header` element's
   `__label-collapsed` span (the long-form `__collapse-label` h3
   stays hidden in the collapsed rail, same as the long-form
   `__title` h3 on the right). */
/* For rail items WITHOUT a __label-collapsed short form, fall back
   to showing the regular __label at the same 8px treatment so every
   icon ends up with a caption. nowrap + ellipsis keeps multi-word
   labels readable inside the 56px rail (no mid-word stacking).
   Weight + opacity match the __label-collapsed sub-label rule above
   so the fallback caption (CATEGORY, etc.) reads at the same
   quieter prominence as the rest of the sub-labels. */
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-text:not(:has(.md-board-edit-panel__label-collapsed)) .md-board-edit-panel__label,
.md-board-edit-panel--collapsed .md-board-edit-panel__row:not(:has(.md-board-edit-panel__label-collapsed)) .md-board-edit-panel__label {
  display: block !important;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(27, 54, 93, 0.85) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 3px;
}

/* When the row DOES have a __label-collapsed, hide the long
   __label so only the short form shows. */
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-text:has(.md-board-edit-panel__label-collapsed) .md-board-edit-panel__label,
.md-board-edit-panel--collapsed .md-board-edit-panel__row:has(.md-board-edit-panel__label-collapsed) .md-board-edit-panel__label {
  display: none !important;
}

/* Dark-mode color for the __label fallback rule above — same
   white-at-.85-alpha as the rule for __label-collapsed so CATEGORY
   (which uses __label) renders identically to SEARCH/BOARDS/etc.
   (which use __label-collapsed). */
.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__filter-text:not(:has(.md-board-edit-panel__label-collapsed)) .md-board-edit-panel__label,
.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__row:not(:has(.md-board-edit-panel__label-collapsed)) .md-board-edit-panel__label {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* The filter-text wrapper itself was hidden in the earlier rule;
   restore so the labels inside become visible at all. */
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-text {
  display: block !important;
}

/* Board Actions filter (--actions modifier) — the gear icon's
   rail caption is set to "BOARDS" via the __label-collapsed span
   in the template (one word, distinct from the panel header's
   "ACTIONS" caption so it no longer reads as a duplicate). The
   prior CSS hide on __filter-text was removed so the label can
   render again. */
/* Collapsed-rail Light/Dark toggle — uses the EXACT
   `.new-board-mockup-toggle` pill from the create-board-new
   preview (defined elsewhere in this file). The pill is 56px wide
   which matches the rail's 56px track exactly. Wrapper rule below
   re-establishes flex centering inside the rail's column layout so
   the pill is centered horizontally rather than left-aligned. The
   earlier hack that re-exposed the __bottom segmented toggle in
   collapsed has been removed — the new pill is rendered only
   inside `{{#if this.left_panel_collapsed}}` in the template, so
   __bottom stays hidden in the rail as originally designed. */
/* Wrap that stacks MODE caption ABOVE the Light/Dark pill,
   matching the label-over-icon rhythm of every other rail row.
   column-reverse keeps HTML order (pill first, caption second) for
   accessibility while flipping the visual order so the caption
   reads first. */
.md-board-edit-panel--collapsed .md-board-edit-panel__row--theme-pill-wrap {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  align-self: center;
  margin: 6px auto 0;
  gap: 6px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__row--theme-pill {
  align-self: center;
  margin: 0 auto;
  /* The base .new-board-mockup-toggle is 56px wide — exactly the
     rail width. The collapsed rail has 4px lateral padding which
     would clip the pill, so override to a tighter footprint that
     fits inside the rail with breathing room. The internal padding
     and gap shrink in concert so the sun↔thumb↔moon spacing stays
     visually focused at the smaller size. */
  width: 44px !important;
  padding: 2px 3px !important;
  gap: 2px !important;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__row--theme-pill .new-board-mockup-toggle__thumb {
  /* Smaller thumb that fits inside the new 44px width. Slide distance
     also reduces accordingly so the thumb still sits centered under
     the moon icon in dark mode. */
  width: 16px;
  height: 16px;
  left: 2px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__row--theme-pill.new-board-mockup-toggle--dark .new-board-mockup-toggle__thumb {
  transform: translate(22px, -50%);
}

/* Collapsed label swaps: show short forms, hide the long ones.
   __label-collapsed ("Actions") + right __title-collapsed
   ("Settings") + per-section __section-label-collapsed are
   hidden by default and revealed only in the rail. */
.md-board-edit-panel__label-collapsed,
.md-board-edit-right-panel__title-collapsed,
.md-board-edit-right-panel__section-label-collapsed {
  display: none;
}

/* In collapsed rail: hide the long __section-label so only the
   short __section-label-collapsed is shown. */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-label {
  display: none !important;
}

/* Hide the long-form h3 headers in the collapsed rail; the short
   __label-collapsed (left) / __title-collapsed (right) spans show
   instead. Also hide the long `__label` inside `__filter-text`
   wrappers so its short __label-collapsed sibling shows. */
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-label,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-text .md-board-edit-panel__label {
  display: none !important;
}

/* SETTINGS (right __title-collapsed) + ACTIONS (left header
   __label-collapsed) share one rule so the two panel-header
   captions render with IDENTICAL typography (font-size, weight,
   line-height, transform, tracking, margin-top) and identical
   color (both inherit panel body color — white-ish in dark mode,
   navy in light). The selector on the left side is SCOPED to
   `__header > __label-collapsed` so the rule only catches the
   ACTIONS header span, NOT the BOARDS / SEARCH / etc.
   __label-collapsed spans that live inside __filter-toggle /
   __search / __tile (those continue to use the quieter sub-label
   rule). Per user: "ACTIONS font styling needs to be identical to
   SETTINGS (all of it — opacity, color, weight, etc)". */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title-collapsed,
.md-board-edit-panel--collapsed .md-board-edit-panel__header .md-board-edit-panel__label-collapsed {
  display: block !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: normal;
  margin-top: 4px;
  /* Match the EXPANDED panel headings ("Action Panel" /
     "Settings Panel") which both use $brand-verdigris-aa in light
     mode (line 83282 .__collapse-label + line 81975 .__title) and
     #8fe4df in dark mode (line 83785 + line 81994). The collapsed
     captions now share those exact colors so the verdigris/teal
     hue is the SAME whether the rail is collapsed or expanded.
     !important is required because the sub-label dark rule
     (`.md-board-detail--dark .md-board-edit-panel--collapsed
     .md-board-edit-panel__label-collapsed`) sits at the same
     specificity (0,3,0) — without the bang, sub-label color
     would tie and lose by source order. The dark-mode override
     for these headers lives in the paired rule below. */
  color: #1A7B7A !important;
  /* Opacity stays full — sub-labels carry the reduced alpha
     treatment via their color's alpha channel; the panel headers
     stay at full strength so they read as the loudest text on
     the rail. */
  opacity: 1 !important;
}

.md-board-detail--dark .md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title-collapsed,
.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__header .md-board-edit-panel__label-collapsed {
  /* Dark-mode teal — mirrors the expanded heading rule at line
     83785 / 81994. Specificity 0,4,0 (header side) beats the
     sub-label dark rule's 0,3,0; on the right side 0,3,0 beats
     0,2,0 nothing else targets __title-collapsed for color. */
  color: #8fe4df !important;
}

/* Search row → magnifier glyph stacked above the SEARCH caption,
   centered. Was a horizontal row (icon | label) which put the label
   beside the icon and truncated it as "SEA..."; column-stack matches
   the icon-over-caption pattern every other rail item uses. gap
   gives the SEARCH caption breathing room below the magnifier (the
   shared 3px label margin felt too tight specifically for this
   icon, since the magnifier sits visually lower than the icons in
   the other tile rows). */
.md-board-edit-panel--collapsed .md-board-edit-panel__search {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  gap: 6px;
}

/* Every icon-bearing control → a centered label-OVER-icon stack
   (was a 40px icon-only square; now auto height so the small label
   fits ABOVE the icon). column-reverse flips visual order while
   keeping HTML order (icon first, label second) for accessibility. */
.md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-toggle,
.md-board-edit-panel--collapsed .md-board-edit-panel__tile,
.md-board-edit-panel--collapsed .md-board-edit-panel__row {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 44px;
  flex-direction: column-reverse;
  padding: 6px 2px;
  margin: 0 auto;
  justify-content: center;
  /* Inner icon/label gap — matched to the right rail's
     collapsed section-toggle gap (bumped together from 2px → 6px
     so the two rails stay in lockstep at the same comfortable
     breathing room between caption and icon). */
  gap: 6px;
}

/* Share/Export 2×2 grid → single icon column in the rail. Gap
   matches the parent rail's between-group gap so the Copy /
   Download / Print / Share tiles don't read as a tightly-packed
   cluster while everything around them has breathing room. Kept
   in lockstep with the rail gap. */
.md-board-edit-panel--collapsed .md-board-edit-panel__share-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The Classic View shortcut row is a collapsed-rail-only
   convenience — it duplicates the View Style segmented toggle
   that lives in the bottom block. The toggle is `display: none`
   in the collapsed rail (hence the shortcut), but in the EXPANDED
   panel the toggle IS visible, which made the shortcut redundant.
   Hide it when expanded so it only surfaces on the rail. */
.md-board-edit-panel:not(.md-board-edit-panel--collapsed) .md-board-edit-panel__row--classic {
  display: none;
}

/* Download tile spacing now follows the uniform rail rhythm — the
   earlier +16px bump was needed when the rail's outer gap was 16px
   AND every row was hard-capped to a 40px square with no room for
   the caption to breathe, which made DOWN-LOAD sit too close to
   the COPY icon. With the spacing fix above (rail gap → 8px;
   rows allowed to grow to a label-over-icon stack with 4px top/
   bottom padding) every tile pair shares the same 8px between-row
   gap, matching the right rail. Targets the 2nd tile in the
   share-grid; share-grid uses `display: contents` so the tile
   selector still matches via DOM order. */
.md-board-edit-panel--collapsed .md-board-edit-panel__share-grid .md-board-edit-panel__tile:nth-child(2) {
  margin-top: 0;
}

/* Rail items remain clickable in the collapsed state. The OLDER design
   relied on an aside-level `{{action "expand_left_panel"}}` to catch
   every click on the rail and re-expand the panel — that pattern
   required `pointer-events: none` on the inner items so the click
   would bubble to the aside. That aside-level action was intentionally
   removed (see board-detail.hbs lines 95-102) so each rail icon would
   fire its own action and the panel would NOT auto-expand on every
   tap. The stale `pointer-events: none` below was the missed half of
   that change — it kept every icon (Copy / Download / Print / Share /
   Classic View / Filter / Board Actions / Search) silently dead. Only
   the theme slider (`__row--theme-pill`, a different class) escaped
   and worked.
   With the rule removed, clicks reach the actions:
     - Section toggles (Board Actions / Filter by Category) flip their
       own state AND expand the panel via the rail-mode branch added in
       `toggle_board_actions` / `toggle_panel_filter`.
     - Direct-action tiles (Copy / Download / Print / Share) and the
       Classic View row fire their handlers normally.
   The collapse button at the top of the rail still has its own
   `pointer-events: auto` rule below — unchanged. */
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-btn {
  /* 30×30 — shrunk from 40×40 per request to match the now-
     smaller right-panel collapse-btn. transform shifts the
     chevron 2px right per request so it lines up visually with
     the rest of the rail (the chevron's bare-icon look meant it
     was reading 2px off-center next to the chip-backed icons
     below it). */
  pointer-events: auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 auto;
  transform: translateX(2px);
}

/* Controls ship their SVGs at 16–22px; normalize every rail icon to
   one size so the strip reads evenly. The collapse chevron is
   sized but NOT given the chip background — it lives inside the
   __collapse-btn pill which already provides its own surface, so
   a chip behind the chevron stacks two backgrounds and reads
   double. */
.md-board-edit-panel--collapsed .md-board-edit-panel__icon,
.md-board-edit-panel--collapsed .md-board-edit-panel__search-icon,
.md-board-edit-panel--collapsed .md-board-edit-panel__collapse-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Per-icon ROUND chip — mirrors the right rail's `__section-icon`
   treatment so both rails share an identical per-icon affordance:
   24×24 outer circle, 1px padding around the 20×20 SVG, hairline
   border, low-alpha fill. Scoped to action/search icons only;
   the __collapse-icon is intentionally excluded so the chevron
   sits bare inside its already-styled __collapse-btn pill.
   `flex: 0 0 auto` + `aspect-ratio: 1 / 1` lock the chip to a
   1:1 ratio inside the flex column rail — without those, short
   viewport heights cause the parent rail's default flex-shrink
   to compress the SVG vertically while the width stays 20px,
   producing the visible oval/squish reported on small screens. */
.md-board-edit-panel--collapsed .md-board-edit-panel__icon,
.md-board-edit-panel--collapsed .md-board-edit-panel__search-icon {
  padding: 1px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.08);
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__icon,
.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__search-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Search row → a real 40px square with the magnifier centered. The
   base rule absolutely-positions the icon for the (now hidden) input,
   which collapsed the row to ~0 height and floated a tiny glyph. */
.md-board-edit-panel--collapsed .md-board-edit-panel__search {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0 auto;
  align-items: center;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__search-icon {
  position: static;
  transform: none;
  left: auto;
  top: auto;
}

/* Strip per-control card chrome (the share tiles / back-link / filter
   wrappers otherwise show different backgrounds + borders) so every
   item reads as the same plain icon square. */
.md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-toggle,
.md-board-edit-panel--collapsed .md-board-edit-panel__tile,
.md-board-edit-panel--collapsed .md-board-edit-panel__row,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* One flat flex column, evenly spaced (per request). The panel nests
   icons in wrappers (__group--share → __share-grid holds the 4 tiles;
   __filter wraps each toggle) and the tiles' base min-height:70px
   made them taller boxes than the search/filter ones — so equal gaps
   still read unevenly. Collapse those wrappers to `display: contents`
   so EVERY icon control becomes a direct flex item of the rail, and
   force them all to one identical 40px box. The single container gap
   then spaces them identically. */
.md-board-edit-panel--collapsed {
  /* Outer between-row gap matches the right rail's collapsed
     `__body { gap: 8px }` so the two flanks share an identical
     vertical rhythm. Previously 16px here made each row sit twice
     as far apart as the right rail's sections, which read as
     unbalanced even though it was "more" space — the user reported
     the rail still felt crowded because each row was hard-capped
     to 40px (no room for the caption to breathe above the icon).
     Pair this with the height/padding fix below to give every row
     a comfortable label-over-icon stack at the same cadence as
     the right rail. */
  gap: 8px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__group--share,
.md-board-edit-panel--collapsed .md-board-edit-panel__group--search,
.md-board-edit-panel--collapsed .md-board-edit-panel__share-grid,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter {
  display: contents;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
.md-board-edit-panel--collapsed .md-board-edit-panel__search,
.md-board-edit-panel--collapsed .md-board-edit-panel__filter-toggle,
.md-board-edit-panel--collapsed .md-board-edit-panel__tile,
.md-board-edit-panel--collapsed .md-board-edit-panel__row {
  /* Was hard-capped to a 40px square (`height: 40px; max-height: 40px;
     padding: 0`) which left no room for the label-over-icon stack to
     breathe — the caption sat flush against the icon and the rail
     read as crowded vs the right rail. Mirror the right rail's
     `__section-toggle` sizing: 40px min-height + 4px top/bottom
     padding + column-reverse so the caption sits ABOVE the icon
     with a 6px gap (set on the earlier rule at line 83572). The
     `align-self: stretch` keeps each item full-width inside the
     rail; min-height (not fixed height) lets a two-line caption
     (DOWN-/LOAD) grow without clipping. */
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Separator after Save. __top still wraps just the save back-link
   (it's NOT display:contents), so the border has a box to sit on. */
.md-board-edit-panel--collapsed .md-board-edit-panel__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 2px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.14);
}

.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__top {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* (Removed the ::before divider that used to sit above the collapse
   chevron — the control moved to the TOP of the panel, so a line
   above it would render at the very top of the collapsed rail.) */
.md-board-detail--dark .md-board-edit-panel__collapse-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-panel__collapse-btn:hover,
.md-board-detail--dark .md-board-edit-panel__collapse-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-panel__collapse-label {
  color: #8fe4df;
}

/* ── Top cluster: back link + Save/Cancel pair ──────────────────── */
.md-board-edit-panel__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-board-edit-panel__back-link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  /* Icon + label sit flush at the left edge of the button (respecting
     the button's own padding) instead of being centered as a group —
     removes the dead space that was sitting to the left of the arrow. */
  justify-content: flex-start;
  gap: 10px;
  /* ~20% taller than original 8px-vertical pill — Traci's tweak so
     the back action feels like a primary CTA, not a chip. */
  padding: 12px 12px;
  min-height: 44px;
  border-radius: 10px;
  /* Same diagonal slate-blue → charcoal-blue gradient as the
     primary Save action, so the panel's lead CTA reads with the
     same visual weight as the rest of the brand's primary buttons. */
  background: linear-gradient(135deg, #5A6A85, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.4);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-board-edit-panel__back-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Inside the back-link the label should sit flush against the icon,
   not flex-grow into the empty space — otherwise the icon hugs the
   left edge while the label centers itself in the leftover (the
   <button> default `text-align: center` then centers the text). */
.md-board-edit-panel__back-link .md-board-edit-panel__label {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

/* Back-link icon: less transparent than the row icons since this is
   the primary action and benefits from stronger emphasis. */
.md-board-edit-panel__icon--back {
  /* High-contrast white icon for AAC legibility — filled chunky
     arrow + solid grid stand out clearly on the dark gradient. The
     icon is rendered as filled silhouettes (fill="currentColor",
     stroke="none" in markup), so this color drives the actual fill. */
  color: #ffffff;
  opacity: 1;
  /* Sharper drop-shadow — small blur radii so the shadow reads as
     a crisp lift off the gradient, not a soft glow. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
}

.md-board-detail--dark .md-board-edit-panel__icon--back {
  color: #ffffff;
}

/* No hover color change — button stays its resting gradient on
   hover/focus. The :active press-down (translateY) below still
   provides tactile feedback, and the global focus-visible outline
   keeps keyboard accessibility intact. */
.md-board-edit-panel__back-link:hover,
.md-board-edit-panel__back-link:focus-visible {
  text-decoration: none;
}

.md-board-edit-panel__back-link:active {
  transform: translateY(1px);
}

.md-board-detail--dark .md-board-edit-panel__back-link {
  background: linear-gradient(135deg, rgb(98.2331838565, 115.6968609865, 145.1668161435), #46505F);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.md-board-edit-panel__action-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.md-board-edit-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #ffffff;
  color: #1B365D;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-board-edit-panel__btn:hover:not(:disabled),
.md-board-edit-panel__btn:focus-visible {
  border-color: rgba(27, 54, 93, 0.25);
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

.md-board-edit-panel__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.md-board-edit-panel__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.md-board-edit-panel__btn--cancel {
  color: #46505F;
}

.md-board-edit-panel__btn--cancel:hover:not(:disabled),
.md-board-edit-panel__btn--cancel:focus-visible {
  border-color: rgba(70, 80, 95, 0.4);
  background: rgba(70, 80, 95, 0.05);
}

.md-board-edit-panel__btn--save {
  background: linear-gradient(135deg, #5A6A85, #46505F);
  border-color: rgba(70, 80, 95, 0.4);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-board-edit-panel__btn--save:hover:not(:disabled),
.md-board-edit-panel__btn--save:focus-visible {
  background: linear-gradient(135deg, rgb(102.3497757848, 120.5452914798, 151.2502242152), #46505F);
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
}

.md-board-edit-panel__btn--saving {
  opacity: 0.8;
  cursor: wait;
}

.md-board-detail--dark .md-board-edit-panel__btn {
  /* Midtone lift mirroring tile: bg .04 → .06, border .12 → .10. */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-panel__btn:hover:not(:disabled),
.md-board-detail--dark .md-board-edit-panel__btn:focus-visible {
  /* Softer hover: bg .08 → .10, border .25 → .16, drop-shadow .35 → .28
     so the lift reads as ambient depth rather than a sharp outline. */
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.md-board-detail--dark .md-board-edit-panel__btn--cancel {
  color: #cfd8e8;
}

.md-board-detail--dark .md-board-edit-panel__btn--save {
  background: linear-gradient(135deg, rgb(98.2331838565, 115.6968609865, 145.1668161435), #46505F);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ── Search input — same state as the toolbar's search field
   (`board_search_string` + `update_board_search` + `clear_board_search`).
   Restyled for the panel context. ──────────────────────────────── */
.md-board-edit-panel__search {
  position: relative;
  display: flex;
  align-items: center;
  /* Allow the wrap (and its <input> child) to shrink with the panel's
     max-content width — otherwise the input's default intrinsic
     ~20ch width forces the panel wider than the longest text row. */
  min-width: 0;
  width: 100%;
}

.md-board-edit-panel__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* Primary tone aligned with the right rail's __section-icon
     (rgba($la-navy, .65)) so the search magnifier's "handle"
     stroke reads at the same alpha as the verdigris/currentColor
     two-tones used elsewhere. */
  color: rgba(27, 54, 93, 0.65);
  pointer-events: none;
}

.md-board-edit-panel__search-input {
  width: 100%;
  /* Pair with size="1" on the <input> in the template — together
     they release the input's default intrinsic max-content width so
     the panel can collapse to its longest text row. */
  min-width: 0;
  height: 36px;
  padding: 6px 30px 6px 36px;
  /* Boards-page surface language: radius 10 → 12, hairline border
     .14 → .08. Inset shadow stays subtle — at .04 alpha it just
     suggests the input is recessed without pooling a dark well. */
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-board-edit-panel__search-input::placeholder {
  color: rgba(27, 54, 93, 0.5);
  font-weight: 400;
}

.md-board-edit-panel__search-input:focus {
  outline: none;
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 0 0 3px rgba(42, 157, 143, 0.18);
  background: #ffffff;
}

.md-board-edit-panel__search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-board-edit-panel__search-clear:hover,
.md-board-edit-panel__search-clear:focus-visible {
  background: rgba(27, 54, 93, 0.18);
}

.md-board-detail--dark .md-board-edit-panel__search-icon {
  /* Match the right rail's dark __section-icon (rgba(white, .60)) so
     the magnifier handle reads at the same alpha across both rails. */
  color: rgba(255, 255, 255, 0.6);
}

.md-board-detail--dark .md-board-edit-panel__search-input {
  /* Midtone lift: bg .06 → .08, border .14 → .10; inset shadow
     softened .30 → .20 so the input no longer pools a pure-black
     well that competes with the panel midtone. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f0f4fb;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.md-board-detail--dark .md-board-edit-panel__search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.md-board-detail--dark .md-board-edit-panel__search-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(42, 157, 143, 0.65);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.25);
}

.md-board-detail--dark .md-board-edit-panel__search-clear {
  background: rgba(255, 255, 255, 0.1);
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-panel__search-clear:hover,
.md-board-detail--dark .md-board-edit-panel__search-clear:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Groups: subheader + rows ──────────────────────────────────── */
.md-board-edit-panel__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-board-edit-panel__subheader {
  /* Section header — premium-desktop refinement per design pass:
     smaller (15 → 12), tighter tracking restored (.06em → .08em),
     slightly heavier weight (500 → 600), opacity .72 instead of
     color-alpha so the label reads as a calmer, more editorial
     section marker rather than a utility-panel shout. Uppercase
     kept (it still adds sectional hierarchy) but the smaller size
     + softer opacity make it subtle rather than loud. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #1B365D;
  opacity: 0.72;
  padding: 10px 8px 8px;
  margin: 0;
  border-bottom: 1px solid rgba(27, 54, 93, 0.22);
}

.md-board-detail--dark .md-board-edit-panel__subheader {
  /* opacity: .72 (from base rule) handles the alpha — color base
     just switches to white for dark mode. */
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* ── SEARCH & FILTER card ──────────────────────────────────────────
   Present the buttons-search field and the Filter by Category control
   as ONE professional grouped card (an actual outer container with its
   own surface), the subheader acting as its title. The base __group
   gap is 2px — far too tight, so the two controls visually collide;
   give the card real internal spacing so they read as a clean pair. */
.md-board-edit-panel__group--search,
.md-board-edit-panel__group--share,
.md-board-edit-panel__group--view,
.md-board-edit-panel__group--theme {
  /* Settings-section card carrying the boards-page surface language:
     larger radius (12 → 16), more internal padding (12 → 14), the
     hairline border alpha (.12 → .06), and the layered glass-card
     shadow recipe (top highlight + close + ambient). The frosted
     glass + backdrop-blur stays — it's how the existing card pattern
     gets its premium feel. */
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(13, 36, 56, 0.04), 0 1px 2px rgba(27, 54, 93, 0.05), 0 6px 18px rgba(27, 54, 93, 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.md-board-edit-panel__group--search .md-board-edit-panel__subheader,
.md-board-edit-panel__group--share .md-board-edit-panel__subheader,
.md-board-edit-panel__group--view .md-board-edit-panel__subheader,
.md-board-edit-panel__group--theme .md-board-edit-panel__subheader {
  /* Equal breathing room below the section label across all four
     grouped cards (SEARCH & FILTER, SHARE & PRINT, VIEW STYLE,
     DISPLAY). Previously the segmented View/Theme toggles read as
     visually crammed under their labels compared to the wider Search
     and Tile grids; bumping the subheader's bottom padding from 2px
     to 10px makes every section sit with the same gap as SEARCH &
     FILTER. */
  padding: 0 2px 10px;
}

/* View Style + Display: NO divider under the subheader (per request) — the divider
   stays on Search & Filter / Share & Print and the right-panel headers. */
.md-board-edit-panel__group--view .md-board-edit-panel__subheader,
.md-board-edit-panel__group--theme .md-board-edit-panel__subheader {
  border-bottom: none;
}

/* SEARCH & FILTER and SHARE & PRINT — tighter bottom padding (6px) so
   the controls sit closer to their section header (both the search
   field/filter and the share tiles carry plenty of internal padding
   themselves, so a 10px header gap reads as a stranded label). */
.md-board-edit-panel__group--search .md-board-edit-panel__subheader,
.md-board-edit-panel__group--share .md-board-edit-panel__subheader {
  padding-bottom: 6px;
}

/* The View Style / Theme blocks carry their own inner padding (and
   the theme block an old top-divider) for the pre-card layout — zero
   them so the group card's own 12px padding governs and the two
   blocks read as separate cards with no rule between them. */
.md-board-edit-panel__group--view .md-board-edit-view-style,
.md-board-edit-panel__group--theme .md-board-edit-view-style {
  padding: 0;
  border-top: none;
}

/* Keep the search field and the Filter by Category control clearly
   separated without pushing the title away from them. */
/* Higher-specificity sibling selector so this beats the legacy
   `.md-board-edit-panel__search + .md-board-edit-panel__filter`
   rule (margin-top: -8px) that otherwise collapses the spacing.
   margin-top: 0 leaves just the card's 8px flex gap between the
   search field and the filter control. */
.md-board-edit-panel__group--search .md-board-edit-panel__search + .md-board-edit-panel__filter {
  margin-top: 0;
}

/* Search + Category sit left-to-right and only stack when they don't
   fit. The group (normally a flex column) becomes a wrap-aware grid:
   the subheader and the OPEN category list span the full row; the
   search field and the (closed) Category control share an auto-fit
   row — 2-up when the panel is wide enough for two ~110px cells,
   dropping to one column only when it genuinely can't fit. */
.md-board-edit-panel__group--search {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  align-content: start;
  gap: 8px;
}

.md-board-edit-panel__group--search .md-board-edit-panel__subheader,
.md-board-edit-panel__group--search .md-board-edit-panel__filter--open {
  grid-column: 1/-1;
}

.md-board-edit-panel__group--search .md-board-edit-panel__search,
.md-board-edit-panel__group--search .md-board-edit-panel__filter {
  min-width: 0;
  margin: 0;
}

/* Two-tone primary aligned with the right rail's `__section-icon`
   (rgba($la-navy, .65)) and the rest of the left rail. The prior
   `$brand-slate-blue + opacity 0.6` flattened the two-tone because
   layer-wide opacity dims the verdigris `#2A9D8F` accent stroke
   the same amount as the primary. Switched to rgba alpha so the
   verdigris stays at full strength against the muted primary. */
.md-board-edit-panel__group--search .md-board-edit-panel__search-icon {
  color: rgba(27, 54, 93, 0.65);
  opacity: 1;
}

.md-board-detail--dark .md-board-edit-panel__group--search,
.md-board-detail--dark .md-board-edit-panel__group--share,
.md-board-detail--dark .md-board-edit-panel__group--view,
.md-board-detail--dark .md-board-edit-panel__group--theme {
  /* Dark equivalent of the boards-page card chrome — subtle top
     highlight + soft bottom darken + close + ambient ring. Keeps
     the section reading as a distinct card surface against the
     midtone panel without a hard outline. */
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.md-board-detail--dark .md-board-edit-panel__group--search .md-board-edit-panel__search-icon {
  /* Dark primary tone aligned with the right rail's __section-icon
     (rgba(255,255,255, .60)). Opacity dropped to 1 so the verdigris
     `#2A9D8F` accent stroke stays at full strength against the muted
     primary — was being collapsed by the layer-wide opacity 0.6. */
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Match the search placeholder's opacity + weight to the Filter by
   Category label so empty-state text reads at the same strength as
   the filter row (it was a faded 0.50, the filter label near-full). */
.md-board-edit-panel__group--search .md-board-edit-panel__search-input::placeholder {
  color: rgba(27, 54, 93, 0.62);
  font-weight: 500;
}

.md-board-detail--dark .md-board-edit-panel__group--search .md-board-edit-panel__search-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

/* Keep the Filter by Category label at the same slightly-transparent
   strength as the search placeholder so the pair reads consistently. */
.md-board-edit-panel__group--search .md-board-edit-panel__filter-toggle {
  color: rgba(27, 54, 93, 0.62);
}

.md-board-detail--dark .md-board-edit-panel__group--search .md-board-edit-panel__filter-toggle {
  color: rgba(255, 255, 255, 0.62);
}

/* Board Actions collapse body — simple column; the toggle/chevron
   reuse the Filter by Category control's classes. */
.md-board-edit-panel__collapse {
  display: flex;
  flex-direction: column;
}

.md-board-edit-panel__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Tighter row padding — content sets the column width via
     max-content, so trim chrome on the sides. */
  padding: 9px 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.md-board-edit-panel__row:hover,
.md-board-edit-panel__row:focus-visible {
  background: rgba(90, 106, 133, 0.08);
  border-color: rgba(90, 106, 133, 0.2);
  color: #5A6A85;
}

.md-board-edit-panel__row:active {
  transform: translateY(1px);
}

.md-board-edit-panel__row:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.md-board-edit-panel__icon {
  /* Two-tone icon primary color aligned with the right rail's
     `__section-icon` (rgba($la-navy, .65)) so both rails share the
     same `currentColor` resolution and the two-tone balance reads
     consistently across the page. Replaced `color: $brand-slate-blue
     + opacity: 0.6` (different hue + layer-wide opacity) with the
     direct rgba alpha so dark-mode SVG attribute remaps below also
     work cleanly. */
  flex: 0 0 auto;
  color: rgba(27, 54, 93, 0.65);
  transition: color 0.15s ease;
}

/* Lift the icon color on hover/focus so it "wakes up" with the row.
   Was an opacity ramp; now bumps the rgba alpha directly so it
   composes cleanly with the dark-mode SVG attribute remaps below. */
.md-board-edit-panel__row:hover .md-board-edit-panel__icon,
.md-board-edit-panel__row:focus-visible .md-board-edit-panel__icon,
.md-board-edit-panel__back-link:hover .md-board-edit-panel__icon,
.md-board-edit-panel__back-link:focus-visible .md-board-edit-panel__icon,
.md-board-edit-panel__btn:hover:not(:disabled) .md-board-edit-panel__icon,
.md-board-edit-panel__btn:focus-visible .md-board-edit-panel__icon {
  color: rgba(27, 54, 93, 0.95);
}

.md-board-edit-panel__search:focus-within .md-board-edit-panel__search-icon {
  /* On focus, bump the magnifier handle's alpha (was an opacity
     ramp which also dimmed the verdigris lens — broke the two-tone
     into a single muted hue). */
  color: rgba(27, 54, 93, 0.9);
}

.md-board-edit-panel__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-detail--dark .md-board-edit-panel__row {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-panel__row:hover,
.md-board-detail--dark .md-board-edit-panel__row:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-panel__icon {
  /* Dark-mode primary aligned with the right rail's section-icon
     dark color (rgba(255,255,255, .60)). */
  color: rgba(255, 255, 255, 0.6);
}

/* ── Share & Export grid — 2x2 of square-ish tiles ─────────────── */
.md-board-edit-panel__share-grid {
  display: grid;
  /* ONE responsive rule for every tile group (Discard/Save AND
     Share/Copy/Print/Download): tiles flow left-to-right and wrap —
     2-up (2x2) when there's room, dropping to a single column only
     when the panel is too narrow for two ~72px tiles. auto-fit so
     columns can shrink without overflowing the panel. The longest
     single-word label ("Download", which can't wrap) is made to fit
     the 72px column via reduced 2px L/R padding on that one tile (see
     .md-board-edit-panel__tile--download) rather than widening every
     column — so full-size panels keep their clean 2x2. */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.md-board-edit-panel__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Boards-page card surface language: larger internal padding +
     larger radius + the .simple_board_icon glass-card shadow
     recipe (inset top highlight, subtle bottom darken, close +
     ambient drops). Hairline border at .06 instead of .10. */
  padding: 14px 10px;
  min-height: 70px;
  /* Allow the tile to shrink into its minmax(0,1fr) grid track so the
     two tiles are exactly equal halves; grid's default align stretch
     already makes them equal height once the labels wrap. */
  min-width: 0;
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(13, 36, 56, 0.04), 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 14px rgba(27, 54, 93, 0.08);
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* Download tile: "Download" is the longest single-word label and can't wrap,
   so on the full-size expanded panel it needs more horizontal room to fit the
   72px grid track without spilling. Trim its L/R padding to 2px (vs the shared
   10px) — only this one tile, so the others keep their roomier padding and the
   group stays a clean 2x2. */
.md-board-edit-panel__tile--download {
  padding-left: 2px;
  padding-right: 2px;
}

.md-board-edit-panel__tile:hover,
.md-board-edit-panel__tile:focus-visible {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.3);
  color: #5A6A85;
  outline: none;
}

.md-board-edit-panel__tile:active {
  transform: translateY(1px);
}

.md-board-edit-panel__tile .md-board-edit-panel__icon {
  /* Previously dimmed the whole icon to opacity .75 to get a
     "muted" tile look, but layer-wide opacity also dimmed the
     hardcoded #2A9D8F verdigris accent, collapsing the two-tone
     into a single muted hue. Bumped the primary tone via rgba alpha
     instead so the verdigris accent stays at full strength against
     the muted primary — same approach the right rail uses. */
  color: rgba(27, 54, 93, 0.8);
}

.md-board-detail--dark .md-board-edit-panel__tile .md-board-edit-panel__icon {
  color: rgba(255, 255, 255, 0.75);
}

.md-board-edit-panel__tile:hover .md-board-edit-panel__icon,
.md-board-edit-panel__tile:focus-visible .md-board-edit-panel__icon {
  color: rgba(27, 54, 93, 0.95);
}

.md-board-detail--dark .md-board-edit-panel__tile:hover .md-board-edit-panel__icon,
.md-board-detail--dark .md-board-edit-panel__tile:focus-visible .md-board-edit-panel__icon {
  color: rgba(255, 255, 255, 0.92);
}

.md-board-edit-panel__tile-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  /* Intentionally wrap (was nowrap+ellipsis). Two-word labels like
     "Discard Changes" / "Save and Exit" break onto a second line, which
     (a) lets the tiles shrink to true equal halves without overflowing
     the panel, and (b) makes both tiles the same (taller) height so the
     row reads as a focused pair. */
  /* Wrap at spaces only — NOT overflow-wrap:break-word, which split
     words mid-character ("Discar d", "Dow nloa d") when the tile got
     narrow. Two-word labels still break cleanly at the space; single
     long words rely on the single-per-row share grid giving the tile
     full panel width. */
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.md-board-detail--dark .md-board-edit-panel__tile {
  /* Midtone lift: bg .04 → .06 so tiles read as a present midtone
     surface against the panel base, not a near-transparent ghost.
     Border alpha .10 → .08 — barely-there hairline. Dark equivalent
     of the boards-page card chrome shadow (subtle white top edge,
     soft black bottom edge, close + ambient drops). */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5ecf8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.22), 0 6px 14px rgba(0, 0, 0, 0.28);
}

.md-board-detail--dark .md-board-edit-panel__tile:hover,
.md-board-detail--dark .md-board-edit-panel__tile:focus-visible {
  /* Softer hover contrast — was a .04 → .22 jump on border, now
     .08 → .14. The eye reads the lift via background + shadow,
     not a sharp outline change. */
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* (Removed) the old ≤1023px block that force-collapsed the tile grid
   to a single icon-only column and HID __tile-label. The panel now
   stays a real 15% panel at every width (not an icon rail), so the
   auto-fit share-grid (2x2 → single only when genuinely too narrow)
   plus the container-query fluid type handle small screens, and the
   tile labels stay visible. Premature single-column + label-hiding
   was the "unprofessional/icon-only" look. */
/* ── Divider between groups ─────────────────────────────────────── */
.md-board-edit-panel__divider {
  height: 1px;
  /* flex-shrink:0 so the panel's flex column can't crush this 1px line
     to 0px when its content overflows the height-capped, scrolling
     panel (the cause of the "missing" left divider). The collapsed
     rail already pins flex-shrink:0 on dividers; the expanded panel
     needs the same guard. */
  flex-shrink: 0;
  /* Identical to the Settings-panel divider under its header — teal, full width. */
  margin: 8px 0 8px;
  background: rgba(26, 123, 122, 0.55);
}

.md-board-detail--dark .md-board-edit-panel__divider {
  /* Panel-font teal to match the Settings-panel dividers (thickness + colour). */
  background: rgba(143, 228, 223, 0.55);
}

/* Divider directly under the Action Panel header. Mirrors the right
   panel's .md-board-edit-right-panel__divider exactly — full-width
   (no horizontal inset) with an 8px top margin — so both rails show
   the same teal underline beneath their header label. */
.md-board-edit-panel__header + .md-board-edit-panel__divider {
  margin: 0 0 8px;
}

/* Extra breathing room above the divider that sits directly under
   the Filter by Category control — separates the filter cluster
   from the BOARD DETAILS group below. */
.md-board-edit-panel__filter + .md-board-edit-panel__divider {
  margin-top: 4px;
}

/* Pull the filter toggle visually closer to the search input — the
   two are a related pair (input + filter button) and benefit from
   tighter coupling. Negative margin offsets the panel's 14px gap. */
.md-board-edit-panel__search + .md-board-edit-panel__filter {
  margin-top: -8px;
}

/* Collapsed-rail layout — applies at ALL viewports, not just
   ≤1023px (the @media block below auto-collapses on small screens,
   but the user can also toggle collapse at any width and the inner
   content needs the icon-rail treatment in both cases).
   - Panel padding tightened so the rail's 68px width has usable
     content area (24px L+R from base would leave only 44px).
   - Inner buttons (back-link, btn, row) stretch full width so they
     fill the rail visibly.
   - Labels hide (icons + tooltips carry the meaning); subheaders
     hide (replaced by dividers). */
.md-board-edit-panel--collapsed {
  padding: 12px 2px 16px;
  gap: 10px;
  align-items: center;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__top {
  width: 100%;
  align-items: stretch;
  gap: 6px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
.md-board-edit-panel--collapsed .md-board-edit-panel__btn,
.md-board-edit-panel--collapsed .md-board-edit-panel__row {
  justify-content: center;
  padding: 8px 0;
  min-height: 38px;
  width: 100%;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__action-pair {
  grid-template-columns: 1fr;
  gap: 6px;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__label {
  display: none;
}

.md-board-edit-panel--collapsed .md-board-edit-panel__subheader {
  display: none;
}

/* ── Mode B: compact rail at <1024px ───────────────────────────────
   Panel narrows to an icon-only rail, labels collapse to tooltips
   (using the existing `data-tooltip` attribute already on each row),
   subheaders disappear (replaced by the divider alone), and the
   search input collapses to an icon-button placeholder. ──────────── */
@media (max-width: 1023px) {
  /* Layout grid + gap override removed: the expanded left panel
     now inherits the base layout rule's 12px gap and identical
     `grid-template-columns` at every viewport width, so the
     expanded panel renders the same on every screen width
     (`--bd-edit-side-l` is pinned to 265px above for non-collapsed
     state). The `.md-board-edit-panel--collapsed` rules below
     stay — they only affect the icon-rail (collapsed) state. */
  .md-board-edit-panel--collapsed {
    padding: 12px 2px 16px;
    gap: 10px;
    align-items: center;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__top {
    width: 100%;
    align-items: stretch;
    gap: 6px;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__back-link,
  .md-board-edit-panel--collapsed .md-board-edit-panel__btn,
  .md-board-edit-panel--collapsed .md-board-edit-panel__row {
    justify-content: center;
    padding: 8px 0;
    min-height: 38px;
    width: 100%;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__action-pair {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__label {
    /* Hide labels — icons + tooltips carry the meaning. */
    display: none;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__subheader {
    /* Subheaders consume horizontal space; replace with the divider. */
    display: none;
  }
  /* In collapsed-rail mode the dedicated `.md-board-edit-panel--collapsed
     .md-board-edit-panel__search` rules elsewhere (~line 77269/77331)
     already make the search wrapper a 40px square with the icon
     centered via flex and `position: static; transform: none`. We
     intentionally do NOT re-center the icon here, because a same-
     specificity rule later in source order would override the reset
     and shift the icon by translate(-50%, -50%) on top of the static
     positioning — causing the visible "skew". The search input itself
     is `display: none` in collapsed (~line 77085), so the input
     collapse-to-icon treatment from the old <=1023px expanded-panel
     model is no longer needed. */
  /* Tooltip on hover/focus (CSS-only, leveraging `data-tooltip`
     already wired on each row + back-link + buttons). Tooltips are
     only useful when labels are hidden — i.e. only in the collapsed
     rail. Scoped to --collapsed so the expanded panel doesn't get
     duplicate tooltip + visible-label paint. */
  .md-board-edit-panel--collapsed [data-tooltip] {
    position: relative;
  }
  .md-board-edit-panel--collapsed [data-tooltip]:hover::after,
  .md-board-edit-panel--collapsed [data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 9px;
    background: #1B365D;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.25);
    pointer-events: none;
    z-index: 20;
  }
}
@media (max-width: 819px) {
  /* Layout grid + gap override removed — expanded panel keeps the
     base 12px layout gap and pinned 265px width at every viewport. */
  .md-board-edit-panel--collapsed {
    padding: 10px 2px 14px;
    gap: 8px;
  }
}
@media (max-width: 640px) {
  /* Layout grid + gap override removed — expanded panel keeps the
     base 12px layout gap and pinned 265px width at every viewport. */
  .md-board-edit-panel--collapsed {
    padding: 8px 2px 12px;
    gap: 6px;
  }
  .md-board-edit-panel--collapsed .md-board-edit-panel__row,
  .md-board-edit-panel--collapsed .md-board-edit-panel__btn,
  .md-board-edit-panel--collapsed .md-board-edit-panel__back-link {
    min-height: 36px;
    padding: 7px 0;
  }
}
/* ── Filter by Category — expandable section under search input.
   Header reuses the row look + chevron rotates open. Body shows
   each Fitzgerald-coded part-of-speech category with a small
   color swatch + label, mirroring the panel's row aesthetic. ── */
.md-board-edit-panel__filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-board-edit-panel__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Left padding 9px per design — gives the funnel icon visible
     breathing room from the toggle's rounded edge. Top/bottom
     reduced 9px → 6px per request to tighten the toggle's vertical
     height (it was reading as too tall vs the search input it sits
     beside). Icon width is FORCED to 16px below (without that
     override, the panel's global `.md-board-edit-panel .__icon
     { width: 1.5em }` rule would render this icon at 21px (1.5 ×
     14px font-size) and break both alignment and visual size
     parity with the search magnifier). */
  padding: 6px 10px 6px 9px;
  min-height: 38px;
  /* Discrete control surface within the panel — same surface
     language as the search input pair: hairline border .14 → .08,
     radius 10 → 12, subtle inset shadow stays. */
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Force the funnel icon to render at exactly 16px so it (a) matches
   the search magnifier's declared size and (b) sits at the X-offset
   the toggle's padding-left+gap math assumes. Otherwise the panel's
   global `.md-board-edit-panel .__icon { width: 1.5em }` rule wins
   by source order and the icon renders at 21px in this 14px-font
   toggle. */
.md-board-edit-panel__filter-toggle .md-board-edit-panel__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.md-board-edit-panel__filter-toggle:hover,
.md-board-edit-panel__filter-toggle:focus-visible {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.32);
  color: #5A6A85;
  outline: none;
}

/* Stronger outline when the dropdown is open so the toggle reads
   as the "active" control within the panel. */
.md-board-edit-panel__filter--open .md-board-edit-panel__filter-toggle {
  border-color: rgba(90, 106, 133, 0.4);
  background: rgba(90, 106, 133, 0.06);
}

/* Two-line label stack: "Filter by Category" on top, the active
   category name as a smaller, muted sub-line below it (only when
   a filter other than All is set). Replaces the prior right-side
   pill so the active filter reads as a status note, not a tag. */
.md-board-edit-panel__filter-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Bigger gap so the active-category pill sits clearly below the
     "Filter by Category" label with breathing room — the previous
     1px gap had it crammed against the title. */
  gap: 5px;
  min-width: 0;
  align-items: flex-start;
}

.md-board-edit-panel__filter-toggle .md-board-edit-panel__label {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active-category indicator — a subtle pill that hugs the label
   width. Sits below the title so the toggle reads as
   "Filter by Category / [active filter]" stacked rather than
   competing on one line. */
.md-board-edit-panel__filter-sublabel {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(90, 106, 133, 0.14);
  color: #5A6A85;
  border: 1px solid rgba(90, 106, 133, 0.22);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.md-board-detail--dark .md-board-edit-panel__filter-sublabel {
  background: rgba(255, 255, 255, 0.1);
  color: #cfd8e8;
  border-color: rgba(255, 255, 255, 0.18);
}

/* Give the toggle a touch more vertical padding when the pill is
   present so the two stacked lines sit comfortably. */
.md-board-edit-panel__filter-text:has(.md-board-edit-panel__filter-sublabel) {
  padding: 3px 0;
}

.md-board-edit-panel__filter-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.18s ease, opacity 0.15s ease;
}

.md-board-edit-panel__filter--open .md-board-edit-panel__filter-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.md-board-edit-panel__filter-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Indent slightly to read as a sub-section of the parent toggle. */
  margin-left: 8px;
  border-left: 1px solid rgba(27, 54, 93, 0.1);
  padding-left: 8px;
}

.md-board-edit-panel__filter-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-board-edit-panel__filter-item:hover,
.md-board-edit-panel__filter-item:focus-visible {
  background: rgba(90, 106, 133, 0.08);
  border-color: rgba(90, 106, 133, 0.18);
  outline: none;
}

.md-board-edit-panel__filter-item--active {
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.3);
  color: #5A6A85;
  font-weight: 600;
}

.md-board-edit-panel__filter-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-edit-panel__filter-check {
  flex: 0 0 auto;
  color: #5A6A85;
}

/* Color swatch — Fitzgerald-coded for each part of speech. The
   swatch is a small rounded square with a thin border so the
   lighter colors (white/yellow) are still visible on the panel. */
.md-board-edit-panel__filter-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: rgba(27, 54, 93, 0.08);
}

.md-board-edit-panel__filter-item--pronoun .md-board-edit-panel__filter-swatch {
  background: #FFFFAA;
}

.md-board-edit-panel__filter-item--verb .md-board-edit-panel__filter-swatch {
  background: #CCFFAA;
}

.md-board-edit-panel__filter-item--adjective .md-board-edit-panel__filter-swatch {
  background: #AACCFF;
}

.md-board-edit-panel__filter-item--noun .md-board-edit-panel__filter-swatch {
  background: #FFCCAA;
}

.md-board-edit-panel__filter-item--social .md-board-edit-panel__filter-swatch {
  background: #FFAACC;
}

.md-board-edit-panel__filter-item--negation .md-board-edit-panel__filter-swatch {
  background: #FFAAAA;
}

.md-board-edit-panel__filter-item--question .md-board-edit-panel__filter-swatch {
  background: #CCAAFF;
}

.md-board-edit-panel__filter-item--preposition .md-board-edit-panel__filter-swatch {
  background: #FFCCDD;
}

.md-board-edit-panel__filter-item--adverb .md-board-edit-panel__filter-swatch {
  background: #CCAA88;
}

.md-board-edit-panel__filter-item--determiner .md-board-edit-panel__filter-swatch {
  background: #CCCCCC;
}

.md-board-edit-panel__filter-item--conjunction .md-board-edit-panel__filter-swatch {
  background: #FFFFFF;
}

.md-board-edit-panel__filter-item--other .md-board-edit-panel__filter-swatch {
  background: #73CCFF;
}

.md-board-edit-panel__filter-item--folder .md-board-edit-panel__filter-swatch {
  background: linear-gradient(135deg, #5A6A85 50%, #ffffff 50%);
}

/* Dark-mode counterparts */
.md-board-detail--dark .md-board-edit-panel__filter-toggle {
  /* Midtone lift matching the search input: bg .04 → .06, border
     .14 → .10, inset .20 → .15. */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5ecf8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.md-board-detail--dark .md-board-edit-panel__filter-toggle:hover,
.md-board-detail--dark .md-board-edit-panel__filter-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-panel__filter--open .md-board-edit-panel__filter-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
}

.md-board-detail--dark .md-board-edit-panel__filter-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #cfd8e8;
}

.md-board-detail--dark .md-board-edit-panel__filter-list {
  border-left-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-edit-panel__filter-item {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-panel__filter-item:hover,
.md-board-detail--dark .md-board-edit-panel__filter-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.md-board-detail--dark .md-board-edit-panel__filter-item--active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-panel__filter-swatch {
  border-color: rgba(255, 255, 255, 0.2);
}

.md-board-detail--dark .md-board-edit-panel__filter-check {
  color: #cfd8e8;
}

/* In compact-rail mode the panel collapses to icons; the filter's
   expanded list would consume too much horizontal space, so we
   force the section closed and hide the badge/chevron. The header
   still shows as an icon-only row that opens the toolbar's
   existing categories dropdown for filtering. */
@media (max-width: 1023px) {
  .md-board-edit-panel__filter-toggle .md-board-edit-panel__filter-text,
  .md-board-edit-panel__filter-toggle .md-board-edit-panel__filter-chevron {
    display: none;
  }
  .md-board-edit-panel__filter-list {
    display: none;
  }
  .md-board-edit-panel__filter-toggle {
    justify-content: center;
    padding: 8px 0;
    width: 100%;
  }
}
/* ── Confirm-Leave-Edit modal — Discard + Save glass pills that
   mirror the toolbar's Cancel/Save aesthetic. ───────────────── */
.md-modal-icon-circle--leave-edit {
  background: rgba(90, 106, 133, 0.1);
  color: #5A6A85;
}

.md-leave-edit-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Shared pill styling — both buttons sit in the dark glass family
   used by the edit toolbar's Save/Cancel; same gradient family,
   border, shadow, and 38px touch-target height for AAC. */
.md-leave-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  min-height: 40px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-leave-edit-btn svg {
  flex: 0 0 auto;
}

.md-leave-edit-btn:active {
  transform: translateY(1px);
}

/* Discard — neutral dark-glass pill (light-mode: subtle slate
   surface; danger color reveals on hover so the verb still reads
   as destructive). Matches the toolbar Cancel button's
   "neutral-then-warn-on-hover" pattern. */
.md-leave-edit-btn--discard {
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.22);
  color: #374151;
}

.md-leave-edit-btn--discard:hover,
.md-leave-edit-btn--discard:focus-visible {
  background: rgba(192, 57, 43, 0.1);
  border-color: rgba(192, 57, 43, 0.3);
  color: #C0392B;
  box-shadow: 0 1px 4px rgba(192, 57, 43, 0.12);
  outline: none;
}

/* Save — same slate-blue → charcoal gradient as the panel's
   primary CTA, with white text + soft shadow for a confident
   "confirm" affordance. */
.md-leave-edit-btn--save {
  background: linear-gradient(135deg, #5A6A85, #46505F);
  border: 1px solid rgba(70, 80, 95, 0.4);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-leave-edit-btn--save:hover,
.md-leave-edit-btn--save:focus-visible {
  background: linear-gradient(135deg, rgb(102.3497757848, 120.5452914798, 151.2502242152), #46505F);
  border-color: rgba(70, 80, 95, 0.55);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(70, 80, 95, 0.35);
  outline: none;
}

@media (max-width: 540px) {
  .md-leave-edit-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .md-leave-edit-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ── Set Home Board modal — overrides scoped to the unique
   `md-set-as-home` body class. Bumps internal padding, adds
   breathing room above the Preferred Symbols field, and switches
   the primary action button to the brand slate-blue. ────────── */
.md-modal-body.md-set-as-home {
  /* Generous vertical padding so the home icon, prompt, and field
     cluster all breathe — was 24/24, now 36/40. */
  padding: 36px 28px 40px;
}

.md-set-as-home .md-modal-icon-row {
  margin: 4px 0 22px;
}

.md-set-as-home .md-modal-message {
  margin: 0 0 8px;
  line-height: 1.55;
}

.md-set-as-home .md-modal-field {
  /* Extra space above the Preferred Symbols cluster so it reads as
     a distinct configuration step rather than running into the
     question paragraph above it. */
  margin-top: 22px;
}

.md-set-as-home .md-modal-field + .md-modal-field {
  margin-top: 18px;
}

/* Primary action — slate-blue brand color. Scoped to this modal
   only so other modals' --primary buttons keep their existing
   verdigris/charcoal treatment. */
.md-set-as-home-footer .md-modal-btn--primary,
.md-modal-footer.md-set-as-home-footer .md-modal-btn--primary {
  background: #5A6A85;
  border-color: #5A6A85;
  color: #ffffff;
}

.md-set-as-home-footer .md-modal-btn--primary:hover,
.md-modal-footer.md-set-as-home-footer .md-modal-btn--primary:hover,
.md-set-as-home-footer .md-modal-btn--primary:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  border-color: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  color: #ffffff;
}

.md-set-as-home-footer .md-modal-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Add Board to Sidebar modal — match the same generous body
   padding rhythm used on Set Home Board so the icon, prompt,
   form fields, and checkbox all breathe. ────────────────────── */
.md-modal-body.md-add-to-sidebar {
  padding: 28px 28px;
}

/* ── Manage Languages modal — primary CTA in brand slate-blue,
   matching the rest of the modernized confirm actions across
   the app. Scoped via :has() so other modals' --primary buttons
   keep their existing treatment. ───────────────────────────── */
.modal-content:has(.md-manage-languages) .md-modal-btn--primary {
  background: #5A6A85;
  border-color: #5A6A85;
  color: #ffffff;
}

.modal-content:has(.md-manage-languages) .md-modal-btn--primary:hover:not(:disabled),
.modal-content:has(.md-manage-languages) .md-modal-btn--primary:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  border-color: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  color: #ffffff;
  outline: none;
}

.modal-content:has(.md-manage-languages) .md-modal-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────────────
   Board Edit Page — Right Panel ("Live Preview Edit")
   Mirrors the left panel's glassy aesthetic. Top-level container
   that collapses/expands; inside, two subheader groups (Button
   Settings, Board Settings) of accordion sections that each open
   to surface their tools. All controls are wired to the existing
   controller actions/state so live-preview behavior is preserved.
   ─────────────────────────────────────────────────────────────────── */
.md-board-edit-right-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Edit-page right rail: fill the 15% grid track at EVERY width (was a
     fixed 280px that overflowed the track and spilled off-screen on
     smaller screens). min-width:0 lets the grid item shrink to its
     track. container-type:inline-size makes every size below scale to
     THIS panel's own width via cqi units (true responsive, viewport-
     independent). */
  width: 100%;
  max-width: none;
  min-width: 0;
  container-type: inline-size;
  /* Fluid panel type: scales with the panel's own width (cqi). 6cqi
     descends to the 10px floor on small screens (≈167px panel) so
     labels stop truncating, and is capped at 13px so it never balloons
     on wide screens. Floor 10px = the smallest readable size. */
  font-size: clamp(11px, 6cqi, 14px);
  padding: 14px 12px 18px;
  /* Pin to the viewport (see the left panel for rationale): fixed
     viewport-minus-topbar height + sticky top keeps it in place;
     overflow-y:auto scrolls the panel internally when its content
     exceeds the viewport; align-self:start prevents the grid from
     stretching it to the tall board column. */
  height: calc(100dvh - var(--topbar-height, 68px) - 16px);
  max-height: calc(100dvh - var(--topbar-height, 68px) - 16px);
  align-self: start;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 8px;
  /* Rail panel-surface — now translucent (.78 alpha) so the
     atmospheric canvas halos bleed through via the backdrop-filter
     blur on the rail. Embeds the rail in the page instead of
     stamping it on top. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 244, 248, 0.78) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* Atmospheric depth instead of a hard stroke: drop the border alpha
     from .10 → .06 (becomes a barely-there hairline), then build the
     rail's separation via layered shadows — close 1px lift, mid 24px
     drop, broad 60px ambient haze that bleeds into the canvas — plus
     a bright inset top-edge highlight that reads as "lit from above"
     (mirrors the boards-page card pattern). */
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 8px 24px rgba(27, 54, 93, 0.07), 0 24px 60px rgba(27, 54, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #1B365D;
  box-sizing: border-box;
  z-index: 5;
  transition: width 0.2s ease, padding 0.2s ease;
}

/* Responsive contract for the RIGHT (Live Preview) panel — same model
   as the left: all text 1em (scales with the container-query-fluid
   root), icons scale via em. Single 0,2,0 rule, wins without
   !important / source-order reliance.
   `__title` is excluded — the Settings Panel header should hold a
   stable 14px (its dedicated rule sets that explicitly), not scale
   with the container-query font on the rail root. */
.md-board-edit-right-panel .md-board-edit-right-panel__subheader,
.md-board-edit-right-panel .md-board-edit-right-panel__section-toggle,
.md-board-edit-right-panel .md-board-edit-right-panel__section-label,
.md-board-edit-right-panel .md-board-edit-right-panel__row-pair-label,
.md-board-edit-right-panel .md-board-edit-right-panel__back-label,
.md-board-edit-right-panel .md-board-edit-right-panel__or-text,
.md-board-edit-right-panel .md-board-edit-right-panel__paint-pill-label,
.md-board-edit-right-panel .md-board-edit-right-panel__palette-label,
.md-board-edit-right-panel .md-board-edit-right-panel__stepper-btn {
  font-size: 1em;
}

.md-board-edit-right-panel .md-board-edit-right-panel__section-icon,
.md-board-edit-right-panel .md-board-edit-right-panel__collapse-icon {
  width: 1.5em;
  height: 1.5em;
}

.md-board-edit-right-panel--collapsed {
  /* Collapsed rail — VS Code / Notion-style activity-bar pattern:
     section icons in a vertical strip so the user always sees what
     the panel contains and can jump straight into a section by
     clicking its icon. Fill the grid track (--bd-edit-side-r width)
     instead of a fixed 56px so there's no empty gap to the panel's
     right.
     Outer (between-row) gap is 8px here per design — tighter than
     the left rail's 12px because the right rail has more sections
     and a denser vertical rhythm reads better with the SETTINGS
     PANEL header. Padding matches the left rail so the two share
     the same outer inset. */
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 12px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* In collapsed-rail mode: keep the icons visible, hide labels,
   chevrons, group subheaders, accordion bodies, and the divider
   bar between groups (replaced with a thin gap). The body's
   margin-top pushes the icon stack clearly below the SETTINGS
   caption AND the divider line so they don't overlap. */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__body {
  /* Outer (between-row) gap on the right rail — 8px per design
     (left rail uses 12px). Inner icon/label gap is set on
     .__section-toggle at 6px. */
  gap: 8px;
  /* margin-top removed per design — body sits flush below the
     collapsed rail's SETTINGS divider, matching the expanded
     panel's flush-body treatment. */
  margin-top: 0;
}

/* Divider sits below the SETTINGS caption (NOT at the top of
   __body — which would render visually ABOVE SETTINGS). Targets
   the __title-collapsed span. 12px padding-bottom (was 6) puts
   the divider farther from the SETTINGS label per request. */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title-collapsed {
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(27, 54, 93, 0.2);
}

.md-board-detail--dark .md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title-collapsed {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Companion divider on the LEFT collapsed rail — sits beneath the
   ACTIONS caption so the two rails read as a matched pair. Same
   2px-thick / 0.20 alpha as the right rail. 2px top margin (was 8px)
   hugs the divider close to the ACTIONS label per request. */
.md-board-edit-panel--collapsed .md-board-edit-panel__divider {
  display: block !important;
  width: 80%;
  height: 2px;
  margin: 2px auto 0;
  border: none;
  background: rgba(27, 54, 93, 0.2);
}

.md-board-detail--dark .md-board-edit-panel--collapsed .md-board-edit-panel__divider {
  background: rgba(255, 255, 255, 0.2);
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__group {
  /* Match the __body's 8px between-group gap so within-group
     spacing reads the same as cross-group spacing — single
     uniform 8px rhythm down the entire right rail. */
  gap: 8px;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__subheader {
  /* Previously this rule converted each section subheader into a
     quiet hairline marker so the BUTTON / BOARD grouping was still
     visually felt in the rail. Per request, those hairlines are now
     suppressed entirely — the rail reads as a single uninterrupted
     icon strip. The companion __divider rule below already hides
     the explicit divider element too. */
  display: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__group:first-of-type .md-board-edit-right-panel__subheader:first-child {
  /* The first subheader at the top of the BUTTON SETTINGS group
     reads as a top-of-rail accent — drop the line so it doesn't
     paint against the panel's top edge. */
  display: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__divider {
  /* The full-width divider isn't needed in rail mode — the
     subheader-as-hairline already separates the two groups. */
  display: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-toggle {
  /* Label-over-icon button: stack the short label ABOVE the icon
     (caption-then-icon reading order — matches the left rail's
     label-first rhythm). column-reverse keeps HTML order (icon
     first, label second) for accessibility while flipping the
     visual order so labels read first. Inner icon/label gap kept
     in lockstep with the left rail (bumped together 2px → 6px). */
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  min-height: 40px;
  border: none;
  background: transparent;
  gap: 6px;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-toggle {
  background: transparent;
  border: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-toggle:hover,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-toggle:focus-visible {
  background: transparent;
  border: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-label,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-chevron,
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__section-body {
  display: none;
}

.md-board-detail--dark .md-board-edit-right-panel--collapsed .md-board-edit-right-panel__subheader {
  background: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel {
  /* Panel-surface tier (#172131) base + a translucent white glass-veil
     layered on top (rgba(255,255,255,.04 → .015)) — mirrors the left
     rail so both flanks of the center stage share the same atmospheric
     surface. Border alpha .10 → .06; layered shadows (close + mid +
     broad ambient haze) carry the panel's separation; inset top-edge
     highlight at .06 alpha provides the "lit from above" cue. */
  /* Rail panel-surface — now translucent (.88 alpha) so the
     atmospheric canvas halos bleed through via the backdrop-filter
     blur on the rail. This is what makes the rails feel embedded
     in the page rather than slabs stamped on top of it. The
     translucent white veil (.04 → .015) on top still catches light
     from above. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), linear-gradient(180deg, rgba(19, 26, 39, 0.88) 0%, rgba(22, 31, 46, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Header — title + collapse chevron pill */
.md-board-edit-right-panel__header {
  position: relative;
  /* Stack: collapse button on its own line, the title WRAPPING BELOW
     it (was a centred flex row whose 36px side padding collided with
     the title in the narrow 15% panel). Title is font-size:1em via the
     scoped rule, so it scales responsively with the panel. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-height: 28px;
  padding: 0 6px 6px;
}

/* Collapse pill flows in the column (no longer absolutely pinned) so
   the title sits BELOW it instead of overlapping. */
.md-board-edit-right-panel__header .md-board-edit-right-panel__collapse-btn {
  position: static;
  transform: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__header {
  /* Mirror the left rail's `display: contents` collapse trick — the
     header element dissolves so its children (chevron + SETTINGS
     title) become direct flex children of the panel grid, picking
     up the panel's own 12px gap rhythm. Without this the header
     was its own flex container at 6px gap + 0 padding, which made
     the chevron-to-first-row distance different from the left
     rail's chevron-to-first-row distance, so the two rails didn't
     line up across rows. */
  display: contents;
}

/* Collapsed rail: restore static flow so the column rail layout
   places the chevron, not the absolute edge placement. 30×30 size
   mirrors the left panel's collapse-btn (shrunk from 40×40 per
   request — was reading too chunky for a header-level control). */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__collapse-btn {
  position: static;
  transform: none;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.md-board-edit-right-panel__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: #1B365D;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.2s ease;
}

.md-board-edit-right-panel__collapse-btn:hover,
.md-board-edit-right-panel__collapse-btn:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  outline: none;
}

.md-board-edit-right-panel__collapse-btn svg {
  transition: transform 0.2s ease;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__collapse-btn svg {
  /* Base icon points » (collapse outward, shown when expanded).
     When collapsed, flip to « so it reads as "expand back" —
     mirrors the left panel's collapse-chevron behaviour. Size
     matches the left rail's normalized 20×20 icon strip. */
  transform: rotate(180deg);
  width: 20px !important;
  height: 20px !important;
}

.md-board-edit-right-panel__title {
  /* Settings Panel header — mirrors the left rail's collapse-label
     softening: dropped uppercase + .10em tracking + 700 weight in
     favor of a calm 600-weight title-case header. */
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: #1A7B7A;
  white-space: nowrap;
}

/* Bottom cluster of the left edit panel: View Style + Theme toggles.
   Sits directly under the Board Actions group (no auto-margin push,
   no divider) so it flows with the rest of the panel sections. */
.md-board-edit-panel__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-board-edit-view-style--theme {
  /* Slight separation from the View Style block above. */
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding-top: 10px;
}

/* ── View-style / theme segmented toggle ───────────────────────────
   Two equal segments. Active segment uses the same slate→charcoal
   gradient as the Save and Exit CTA; inactive segments use the same
   surface as the search input. Both have dark-mode variants matched
   to those same two controls so the cluster reads as part of the
   panel's existing visual system. */
.md-board-edit-view-style {
  padding: 8px 4px 4px;
}

.md-board-edit-right-panel--collapsed .md-board-edit-view-style {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   VIEW STYLE — segmented variant (--segmented)
   ──────────────────────────────────────────────────────────────
   Reworked container: subtle navy gradient + glass overlay + soft
   shadow + faint top highlight. The original CTA-button look has
   been replaced with a low-chrome segmented control that puts
   Modern and Classic on the same hierarchy. Active state reads via
   a softly illuminated thumb + stronger text; inactive sits as
   translucent glass with muted text. */
/* VIEW STYLE container: bg/border/shadow intentionally dropped per
   request — the inner darker pill was reading as a second box-in-box
   and the user wants it to match DISPLAY visually (which has no
   inner backdrop). The outer .md-board-edit-panel__group--view
   already supplies whatever frame is needed. We only keep the
   slightly roomier vertical padding so the segmented control still
   has breathing room above the subheader. */
.md-board-edit-view-style--segmented {
  padding: 8px 4px;
}

/* Segmented toggle (Modern / Classic). Reuses the base __toggle
   track but overrides for a flatter, more "control panel" look:
   transparent rail (the segmented control IS the container's only
   chrome here, so the rail vanishes), shorter pills, softer
   transitions. Thumb under the active option is "softly illuminated"
   via a brighter surface + subtle teal glow + inset highlight. */
.md-board-edit-view-style__toggle--viewstyle {
  background: transparent;
  border: none;
  padding: 0;
  gap: 4px;
}

.md-board-edit-view-style__toggle--viewstyle::before {
  /* Embedded segmented-control thumb — less raised-button energy,
     more premium-desktop refinement. Background bg lifted .92 →
     .75 (softer brightness). Verdigris border ring .18 → .06 (the
     ring was reading as a halo on a raised button — at .06 it's
     barely there). Inset highlight .80 → .45. Outer drop softened
     (.10 → .04, 8px → 4px) so the thumb sits embedded rather than
     popping off the surface. */
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 4px rgba(27, 54, 93, 0.04);
}

.md-board-edit-view-style__toggle--viewstyle-modern::before {
  transform: translateX(100%);
}

.md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt {
  /* Tighter vertical padding (5px → 3px) for a more refined,
     premium-desktop segmented-control feel — saves ~4px total height
     per design pass. Horizontal padding unchanged. */
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
}

.md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt--active {
  /* Stronger text opacity on the active option. */
  color: #1B365D;
}

.md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt:not(.md-board-edit-view-style__opt--active):hover,
.md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt:not(.md-board-edit-view-style__opt--active):focus-visible {
  /* Inactive hover: subtle lift via background tint, no thumb. */
  background: rgba(27, 54, 93, 0.04);
  color: rgba(27, 54, 93, 0.78);
}

/* Dark mode: brighter thumb, lighter text. */
.md-board-detail--dark .md-board-edit-view-style__toggle--viewstyle::before {
  /* Dark-mode equivalent of the light-mode refinement above:
     softer bg (.18 → .12), softer verdigris ring (.30 → .12),
     softer inset highlight (.18 → .10), softer outer drop (.35 → .18).
     Embedded segmented-control feel. */
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.18);
}

.md-board-detail--dark .md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt--active {
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt:not(.md-board-edit-view-style__opt--active):hover,
.md-board-detail--dark .md-board-edit-view-style__toggle--viewstyle .md-board-edit-view-style__opt:not(.md-board-edit-view-style__opt--active):focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
}

/* Sliding segmented toggle (track + animated thumb). The thumb is a
   ::before that slides under the active option; the options sit above
   it (z-index) and are transparent so the thumb shows through. State
   is driven by `--dark` on the toggle (set from this.dark_mode in the
   template) so the slide animates on switch. */
.md-board-edit-view-style__toggle {
  position: relative;
  display: flex;
  width: 100%;
  /* Compact: 2px rail padding (was 3px). */
  padding: 2px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  border: 1px solid rgba(27, 54, 93, 0.12);
}

.md-board-edit-view-style__toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.18);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.md-board-edit-view-style__toggle--dark::before {
  transform: translateX(100%);
}

.md-board-edit-view-style__opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  /* Icon + label centered together on one line. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Compact: tighter segment padding (was 7px 10px). */
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
  cursor: pointer;
  transition: color 0.18s ease;
}

/* Light (sun) / Dark (moon) icon — inherits the option's currentColor, so it
   dims when inactive and brightens with the active label automatically. */
.md-board-edit-view-style__opt-icon {
  flex-shrink: 0;
}

.md-board-edit-view-style__opt:hover:not(.md-board-edit-view-style__opt--active),
.md-board-edit-view-style__opt:focus-visible:not(.md-board-edit-view-style__opt--active) {
  color: rgba(27, 54, 93, 0.8);
  outline: none;
}

.md-board-edit-view-style__opt--active {
  color: #1B365D;
}

/* Dark mode: lighten track, dark translucent thumb. */
.md-board-detail--dark .md-board-edit-view-style__toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-edit-view-style__toggle::before {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.md-board-detail--dark .md-board-edit-view-style__opt {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-board-edit-view-style__opt:hover:not(.md-board-edit-view-style__opt--active),
.md-board-detail--dark .md-board-edit-view-style__opt:focus-visible:not(.md-board-edit-view-style__opt--active) {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-edit-view-style__opt--active {
  color: #ffffff;
}

.md-board-edit-view-style__jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Size to its label rather than stretching the full card width,
     and center it in the (block) card via auto side margins —
     align-self does nothing here since the parent isn't flex. */
  width: fit-content;
  margin: 6px auto 0;
  /* Pill-size action (was a full-width 10px-radius button). */
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  /* Primary "go do this" action — same bg as the Save and Exit CTA:
     mid-strength glassy slate-blue (translucent + backdrop blur) with
     solid white text. White on this still clears WCAG AA contrast. */
  background: rgba(90, 106, 133, 0.3);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(90, 106, 133, 0.5);
  color: #ffffff;
  box-shadow: none;
}

.md-board-edit-view-style__jump:hover,
.md-board-edit-view-style__jump:focus-visible {
  background: rgba(90, 106, 133, 0.42);
  border-color: rgba(90, 106, 133, 0.7);
  outline: none;
}

.md-board-detail--dark .md-board-edit-view-style__jump {
  background: rgba(90, 106, 133, 0.38);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(90, 106, 133, 0.55);
  color: #ffffff;
}

/* "Current View" label + Modern pill. The pill borrows the inactive
   light-mode segment's surface but drops the button affordances
   (shadow, heavy border, bold weight) so it reads as a status tag,
   not something clickable. */
.md-board-edit-view-style__current {
  /* "Current View" on its OWN row, the Modern status pill below it
     (was side-by-side, which truncated the label in the narrow
     panel). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 4px 0 8px;
}

.md-board-edit-view-style__current-label {
  font-size: 1em;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.62);
  white-space: nowrap;
}

.md-board-edit-view-style__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(27, 54, 93, 0.1);
  color: #1B365D;
}

.md-board-detail--dark .md-board-edit-view-style__current-label {
  color: rgba(255, 255, 255, 0.62);
}

.md-board-detail--dark .md-board-edit-view-style__pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f0f4fb;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__title {
  display: none;
}

.md-board-detail--dark .md-board-edit-right-panel__collapse-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__title {
  color: #8fe4df;
}

/* Body — group + sections */
.md-board-edit-right-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Small 8px top margin so the body sits just below the header
     with a hint of breathing room (was 0; bumped per design). The
     collapsed-rail `--collapsed __body { margin-top: 0 }` rule
     stays at 0 — the rail's caption sits flush. */
  margin-top: 8px;
}

.md-board-edit-right-panel__divider {
  height: 1px;
  /* Full width (no side inset) to match the subheader's underline length, in the
     panel-font teal (the "Settings Panel" title colour). */
  margin: 8px 0 8px;
  background: rgba(26, 123, 122, 0.55);
}

.md-board-detail--dark .md-board-edit-right-panel__divider {
  background: rgba(143, 228, 223, 0.55);
}

.md-board-edit-right-panel__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-board-edit-right-panel__subheader {
  /* Mirrors left rail's __subheader — premium-desktop refinement:
     12px / 600 / .08em tracking, uppercase kept but opacity .72
     so the label reads as a calm section marker, not a loud
     utility-panel shout. */
  font-size: 12px;
  font-weight: 600;
  /* Right-panel section headers (Button Settings / Board Settings) stay UPPERCASE
     per request; the left-panel ones use proper case. Divider kept. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1B365D;
  opacity: 0.72;
  padding: 10px 8px 8px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.22);
}

.md-board-detail--dark .md-board-edit-right-panel__subheader {
  /* opacity: .72 (from base) handles the alpha; color base switches
     to white for dark mode. */
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Accordion section — header (toggle) + body (revealed when open).
   When closed, only the toggle has chrome (background/border on
   hover/focus). When open, the chrome moves to the section parent
   so toggle + body read as a single unified container — no separate
   left-border on the body. */
.md-board-edit-right-panel__section {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  /* Match the left-rail tile / group radius (12–14px) so all card-
     style internals on the edit page share one rounded vocabulary. */
  border-radius: 14px;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-board-edit-right-panel__section--open {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.3);
}

.md-board-detail--dark .md-board-edit-right-panel__section--open {
  /* Soften the open-section outline: border .18 → .10 hairline.
     The .06 bg + the section's natural elevation against the
     panel midtone carries the "open" affordance — no need for
     a heavy outline. */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Board-detail right panel: when any section is open, collapse the
   panel to JUST that section — hide every other section (and the
   group subheaders/dividers, which would otherwise dangle). Clicking
   the open section again clears --open, so :has() no longer matches
   and all sections reappear. Scoped with :not(.nb-create-rail) so the
   create-board-new rail is unaffected. CSS :has() is a browser
   feature (supported), not an Ember helper. */
.md-board-edit-right-panel:not(.nb-create-rail):has(.md-board-edit-right-panel__section--open) .md-board-edit-right-panel__section:not(.md-board-edit-right-panel__section--open),
.md-board-edit-right-panel:not(.nb-create-rail):has(.md-board-edit-right-panel__section--open) .md-board-edit-right-panel__subheader,
.md-board-edit-right-panel:not(.nb-create-rail):has(.md-board-edit-right-panel__section--open) .md-board-edit-right-panel__divider {
  display: none;
}

/* With every other section hidden, the lone open section sits right
   under the "Live Preview Edit" header — give it clear breathing
   room so it doesn't crowd the title. */
.md-board-edit-right-panel:not(.nb-create-rail):has(.md-board-edit-right-panel__section--open) .md-board-edit-right-panel__section--open {
  margin-top: 14px;
}

.md-board-edit-right-panel__section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-board-edit-right-panel__section-toggle:hover,
.md-board-edit-right-panel__section-toggle:focus-visible {
  background: rgba(90, 106, 133, 0.08);
  border-color: rgba(90, 106, 133, 0.2);
  color: #5A6A85;
  outline: none;
}

/* Open-state toggle: the section parent now carries the bg/border,
   so the toggle itself renders transparent — they merge into one
   container. Keep the slate-blue text + bolder weight so the open
   state still reads. */
.md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-toggle {
  background: transparent;
  border-color: transparent;
  color: #5A6A85;
  font-weight: 600;
}

/* Icon "chip" — small rounded square that holds the section's
   glyph. Same neutral slate at rest across every section so the
   eye isn't pulled around by a rainbow of brand colors; the
   chip itself flips to a filled slate-blue + white glyph when
   its section is open, giving a single clear "you are here"
   accent without dyeing every row. */
.md-board-edit-right-panel__section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24×24 ROUND chip matched to the left rail's __icon /
     __search-icon chip so both rails share the same per-icon
     affordance. Shrunk from 30×30 + 8px radius per request: the
     two rails must read as identical chip shapes. 1px padding +
     1px border (border-box) leaves a 20×20 content area for the
     18px section SVGs to center in. */
  width: 24px;
  height: 24px;
  padding: 1px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.08);
  color: rgba(27, 54, 93, 0.65);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.md-board-edit-right-panel__section-toggle:hover .md-board-edit-right-panel__section-icon,
.md-board-edit-right-panel__section-toggle:focus-visible .md-board-edit-right-panel__section-icon {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.22);
  color: #5A6A85;
}

.md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon {
  /* Open/active chip in LIGHT mode: a subtle slate tint + slight scale so the
     section reads as active WITHOUT recoloring the icon — the two-tone
     navy/teal icon keeps its authored colors (the white-flip below is now
     dark-mode-only). Dark mode flips to the dark gradient chip + white icon
     via the `.md-board-detail--dark …--open` rule further down. */
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.3);
  transform: scale(1.04);
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.12);
}

.md-board-detail--dark .md-board-edit-right-panel__section-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.md-board-detail--dark .md-board-edit-right-panel__section-toggle:hover .md-board-edit-right-panel__section-icon,
.md-board-detail--dark .md-board-edit-right-panel__section-toggle:focus-visible .md-board-edit-right-panel__section-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon {
  background: linear-gradient(135deg, rgb(102.3497757848, 120.5452914798, 151.2502242152), #46505F);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.md-board-edit-right-panel__section-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button Levels callout/badge/banner text was baked white (inline) for the
   DARK-mode panel, but the translucent teal/red fills resolve LIGHT on the
   light-mode panel, so white text fails contrast there. Dark text in light
   mode, white in dark mode. (The inline `color` is removed from those elements
   so this class wins.) */
.md-board-levels-callout-text {
  color: #1B365D;
}

.md-board-detail--dark .md-board-levels-callout-text {
  color: rgba(255, 255, 255, 0.95);
}

.md-board-edit-right-panel__section-chevron {
  flex: 0 0 auto;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-chevron {
  transform: rotate(180deg);
  opacity: 0.95;
}

.md-board-detail--dark .md-board-edit-right-panel__section-toggle {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__section-toggle:hover,
.md-board-detail--dark .md-board-edit-right-panel__section-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Section body — sits inside the open section's unified container,
   so it no longer needs its own left-border accent. Top padding
   gives the first body row breathing room from the toggle header.
   align-items: center horizontally centers each row inside the
   unified card for a focused, focused look. */
.md-board-edit-right-panel__section-body {
  display: flex;
  flex-direction: column;
  /* stretch — sibling cards (info callout, PAINT LEVELS card, etc) all
     fill the full section width. With `center` (the prior value) each
     child shrank to its intrinsic content size, producing visibly
     uneven card widths. Pill/badge wrappers that need to remain
     centered handle that with their own `justify-content: center`. */
  align-items: stretch;
  gap: 10px;
  padding: 14px 12px 14px 12px;
}

/* Legacy `.md-settings-sublabel-wrap` controls inside a right-panel
   section body (e.g. Background's "Background Color for All Board
   Buttons"): the base rule sets `min-width: max-content` + the
   sublabel `white-space: nowrap`, which forces the long label to its
   full unwrapped width and overflows the narrow panel. In this
   context constrain the wrap to the panel width, let the label wrap,
   and keep the wrap + its control centered. */
.md-board-edit-right-panel__section-body .md-settings-sublabel-wrap {
  min-width: 0;
  width: 100%;
  align-items: center;
}

.md-board-edit-right-panel__section-body .md-settings-sublabel {
  white-space: normal;
  width: 100%;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Bare dropdowns placed directly in a right-panel section body (e.g.
   Board Symbols) default to the inline-block / max-width:180px,
   left-aligned trigger. In the narrow rail they should fill the
   section width and center. Direct-child selector so the nested
   Background / Skin dropdowns (inside .md-settings-sublabel-wrap) are
   unaffected. */
.md-board-edit-right-panel__section-body > .md-settings-dropdown-wrap {
  display: block;
  width: 100%;
}

.md-board-edit-right-panel__section-body > .md-settings-dropdown-wrap .md-settings-select--trigger {
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: center;
  text-align: center;
}

.md-board-edit-right-panel__section-body > .md-settings-dropdown-wrap .md-settings-select__value {
  max-width: none;
}

/* Custom dropdowns (.md-settings-dropdown-menu) inside the right
   panel anchor to the trigger's RIGHT edge instead of the left, so
   they open toward the page interior. Without this, the dropdown
   extends past the panel and gets cut off at the page edge — the
   font dropdown's longer option names ("Architect's Daughter (small)")
   were rendering as "(sm" before this. */
.md-board-edit-right-panel .md-settings-dropdown-menu {
  left: auto;
  right: 0;
}

/* Active text-position button inside the right panel uses the
   darker end of the activated-section gradient as a solid fill —
   $brand-charcoal-blue. Reads as a clear "you are here" indicator
   without competing with the section icon chip's gradient. The
   btnmock inside inherits white via currentColor. */
.md-board-edit-right-panel .md-settings-icon-btn--active,
.md-board-edit-right-panel .md-settings-icon-btn--active:hover {
  background: #46505F;
  border-color: rgba(70, 80, 95, 0.35);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.25);
}

.md-board-edit-right-panel__hint {
  font-size: 14px;
  color: rgba(27, 54, 93, 0.65);
  margin: 0;
  line-height: 1.45;
}

.md-board-detail--dark .md-board-edit-right-panel__hint {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Inline tool bits used inside section bodies ──────────────── */
/* Color swatches grid (Paint Tool) */
.md-board-edit-right-panel__swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.md-board-edit-right-panel__swatch {
  aspect-ratio: 1/1;
  border-radius: 6px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  padding: 0;
}

.md-board-edit-right-panel__swatch:hover,
.md-board-edit-right-panel__swatch:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.25);
  outline: none;
}

/* Pill button row (Paint, Hidden Tool) */
.md-board-edit-right-panel__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-board-edit-right-panel__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: #1B365D;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-board-edit-right-panel__pill:hover,
.md-board-edit-right-panel__pill:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.32);
  color: #5A6A85;
  outline: none;
}

.md-board-edit-right-panel__pill--active {
  background: rgba(90, 106, 133, 0.16);
  border-color: rgba(90, 106, 133, 0.5);
  color: #5A6A85;
  font-weight: 600;
}

.md-board-detail--dark .md-board-edit-right-panel__pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__pill:hover,
.md-board-detail--dark .md-board-edit-right-panel__pill:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* Row pair: small label on left, control cluster on right */
/* Label-above-control layout with a subtle tile around each pair so
   the individual controls read as small sub-cards inside the
   section's larger unified container — instead of floating loose
   on the section background. Tile chrome is intentionally lighter
   than the section's own border so the section still wins as the
   dominant grouping. */
.md-board-edit-right-panel__row-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.06);
  border-radius: 8px;
}

.md-board-detail--dark .md-board-edit-right-panel__row-pair {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.md-board-edit-right-panel__row-pair-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.7);
  /* Inner section labels (e.g. "Text Size", "Font Type") render in
     proper case rather than the previous UPPERCASE + tracked
     treatment. The area-heading __subheader stays uppercase for
     section identity, but the inner content labels that appear
     after the user opens a section read better in proper case
     against the surrounding controls. */
  text-transform: none;
  letter-spacing: normal;
}

.md-board-detail--dark .md-board-edit-right-panel__row-pair-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Inline hint sibling — the parenthetical "(Space between buttons)"
   in the Grid Gap label renders in proper case (not uppercase) per
   request. Lighter weight + dropped tracking so it reads as a
   tagline next to the primary all-caps label without competing
   with it. Scoped to the hint span only; the parent
   __row-pair-label keeps its uppercase treatment for every other
   label that uses it. */
.md-board-edit-right-panel__row-pair-label-hint {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Multi-line labels (e.g. "Grid Gap (Space between buttons)") default
   to left-aligned text inside the centered row-pair block — center the
   wrapped lines too. */
.md-board-edit-right-panel__row-pair-label--center {
  text-align: center;
}

/* Stepper (text size, rows/cols) */
.md-board-edit-right-panel__stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.md-board-edit-right-panel__stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.md-board-edit-right-panel__stepper-btn:hover:not(:disabled),
.md-board-edit-right-panel__stepper-btn:focus-visible {
  background: rgba(90, 106, 133, 0.1);
  outline: none;
}

.md-board-edit-right-panel__stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.md-board-edit-right-panel__stepper-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1B365D;
  border-left: 1px solid rgba(27, 54, 93, 0.1);
  border-right: 1px solid rgba(27, 54, 93, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel__stepper {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-edit-right-panel__stepper-btn {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__stepper-btn:hover:not(:disabled),
.md-board-detail--dark .md-board-edit-right-panel__stepper-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel__stepper-value {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
}

/* Bound-select wrapper */
.md-board-edit-right-panel__select-wrap {
  width: 100%;
}

.md-board-edit-right-panel__select-wrap .bound-select {
  width: 100%;
}

/* Icon group + button mock (Text Position, Speak Bar) */
.md-board-edit-right-panel__icongroup {
  display: flex;
  gap: 6px;
}

.md-board-edit-right-panel__icon-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-board-edit-right-panel__icon-toggle:hover,
.md-board-edit-right-panel__icon-toggle:focus-visible {
  background: rgba(90, 106, 133, 0.1);
  border-color: rgba(90, 106, 133, 0.3);
  outline: none;
}

.md-board-edit-right-panel__icon-toggle--active {
  background: rgba(90, 106, 133, 0.14);
  border-color: rgba(90, 106, 133, 0.5);
}

.md-board-edit-right-panel__btnmock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  gap: 1px;
}

.md-board-edit-right-panel__btnmock-img {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #FDCF98, #4C86D8);
}

.md-board-edit-right-panel__btnmock-text {
  font-size: 14px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.85);
  line-height: 1;
}

.md-board-edit-right-panel__btnmock--text-only {
  font-size: 14px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.85);
}

.md-board-detail--dark .md-board-edit-right-panel__icon-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-edit-right-panel__btnmock-text,
.md-board-detail--dark .md-board-edit-right-panel__btnmock--text-only {
  color: rgba(255, 255, 255, 0.85);
}

/* Undo / Redo footer cluster — segmented-control pattern: two
   buttons sharing a single rounded outer border with no gap and
   a thin internal divider between them. Centered horizontally
   under the bottom divider. */
.md-board-edit-right-panel__history {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  padding: 0 4px 4px;
}

.md-board-edit-right-panel__history-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04);
}

/* Undo / Redo segmented pill — horizontal row at EVERY screen
   width. Previously two @media blocks here split the buttons into
   a stacked rectangle at ≤1500px and re-flipped them back to the
   horizontal pill at ≤1024px (where the expanded panel had room
   again). Both gates are removed per request: the expanded panel
   width is now consistent across viewports, so the base pill rule
   above applies unconditionally — preserving the user's preferred
   pill look without the mid-range stacked rectangle that broke it
   for 1024–1500px viewports. */
.md-board-edit-right-panel__history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  min-height: 34px;
  border: none;
  background: transparent;
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Internal divider between the two segments. */
.md-board-edit-right-panel__history-btn + .md-board-edit-right-panel__history-btn {
  border-left: 1px solid rgba(27, 54, 93, 0.14);
}

.md-board-edit-right-panel__history-btn:hover:not(:disabled),
.md-board-edit-right-panel__history-btn:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  color: #5A6A85;
  outline: none;
}

/* Back button — bottom of the right panel, shown only while a section
   is open; clears it to restore the full section list. */
.md-board-edit-right-panel__back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 8px);
  margin: 6px 4px 8px;
  padding: 9px 14px;
  border: 1px solid rgba(90, 106, 133, 0.3);
  border-radius: 10px;
  background: rgba(90, 106, 133, 0.1);
  color: #5A6A85;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-board-edit-right-panel__back:hover,
.md-board-edit-right-panel__back:focus-visible {
  background: rgba(90, 106, 133, 0.18);
  border-color: rgba(90, 106, 133, 0.45);
  outline: none;
}

/* Expanded panel (default): the base flex row already shows the
   double-chevron icon + "Back" label side by side. Collapsed panel:
   drop the word, shrink the icon to the rail's standard 20×20
   strip (was 34×34 + stroke-width:3 which read as enormous), and
   hide one of the two polyline chevrons so the icon renders as a
   SINGLE `<` instead of the `<<` double-chevron the panel's main
   collapse button uses — otherwise the back-to-overview button
   reads as a duplicate of the unexpand-panel chevron and confuses
   the user. */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__back-label {
  display: none;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__back {
  padding: 8px;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__back svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__back svg polyline:first-of-type {
  display: none;
}

.md-board-detail--dark .md-board-edit-right-panel--collapsed .md-board-edit-right-panel__back svg {
  stroke: #ffffff;
}

/* Dark mode: set color AND svg stroke explicitly (recurring problem
   #3 — currentColor can bleed on the dark panel surface). */
.md-board-detail--dark .md-board-edit-right-panel__back {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-edit-right-panel__back svg {
  stroke: rgba(255, 255, 255, 0.92);
}

.md-board-edit-right-panel__history-btn:active:not(:disabled) {
  background: rgba(90, 106, 133, 0.18);
}

.md-board-edit-right-panel__history-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.md-board-edit-right-panel__history-btn svg {
  flex: 0 0 auto;
}

.md-board-detail--dark .md-board-edit-right-panel__history-group {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.md-board-detail--dark .md-board-edit-right-panel__history-btn {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__history-btn + .md-board-edit-right-panel__history-btn {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-edit-right-panel__history-btn:hover:not(:disabled),
.md-board-detail--dark .md-board-edit-right-panel__history-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* In dark mode, lift the two-tone stroke contrast on the
   undo/redo arrows the same way we do for section icons. */
.md-board-detail--dark .md-board-edit-right-panel__history-btn svg [stroke="#46505F"] {
  stroke: #cfd8e8;
}

.md-board-detail--dark .md-board-edit-right-panel__history-btn svg [stroke="#2A9D8F"] {
  stroke: #4cd7c8;
}

/* In rail-collapsed mode the history cluster doesn't fit; hide
   it (the user can re-expand the panel to access undo/redo). */
.md-board-edit-right-panel--collapsed .md-board-edit-right-panel__history {
  display: none;
}

/* "OR" divider — small uppercase text centered between two
   hairlines, used inside the Paint Tool body to separate the
   manual color picker from the auto Recolor-by-Word-Type
   shortcut. */
.md-board-edit-right-panel__or {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: rgba(27, 54, 93, 0.55);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.md-board-edit-right-panel__or::before,
.md-board-edit-right-panel__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(27, 54, 93, 0.1);
}

.md-board-edit-right-panel__or-text {
  flex: 0 0 auto;
}

.md-board-detail--dark .md-board-edit-right-panel__or {
  color: rgba(255, 255, 255, 0.55);
}

.md-board-detail--dark .md-board-edit-right-panel__or::before,
.md-board-detail--dark .md-board-edit-right-panel__or::after {
  background: rgba(255, 255, 255, 0.12);
}

/* Paint Tool — color palette + brush row + popover swatch grid.
   Mirrors the toolbar's paint dropdown but rendered inline inside
   the accordion section so it grows the panel naturally. */
/* Name of the currently-picked paint color, shown above the swatch so the
   user can see which preset they selected (POS label or "Custom"). */
.md-board-edit-right-panel__paint-selected {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.72);
  letter-spacing: 0.01em;
}

.md-board-edit-right-panel__paint-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.md-board-edit-right-panel__palette,
.md-board-edit-right-panel__brush {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-edit-right-panel__palette {
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.md-board-edit-right-panel__brush {
  flex: 0 0 auto;
  width: 40px;
  padding: 0;
}

.md-board-edit-right-panel__palette:hover,
.md-board-edit-right-panel__palette:focus-visible,
.md-board-edit-right-panel__brush:hover,
.md-board-edit-right-panel__brush:focus-visible {
  border-color: rgba(90, 106, 133, 0.32);
  background: rgba(90, 106, 133, 0.06);
  outline: none;
}

.md-board-edit-right-panel__palette--open {
  border-color: rgba(90, 106, 133, 0.4);
  background: rgba(90, 106, 133, 0.1);
}

.md-board-edit-right-panel__brush--active {
  border-color: rgba(42, 157, 143, 0.45);
  background: rgba(42, 157, 143, 0.12);
}

.md-board-edit-right-panel__palette-preview {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(27, 54, 93, 0.2);
  background: #ffffff;
  flex: 0 0 auto;
}

/* "SELECT COLOR" eyebrow inside the palette button — small,
   muted, uppercase to read as a quiet hint rather than a heavy
   label. Centered between the swatch preview and the chevron. */
.md-board-edit-right-panel__palette-label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  /* Palette label ("Select Paint Color") renders in proper case to
     match the rest of the inner section labels. Previously
     UPPERCASE + 0.08em tracked to read as a quiet eyebrow above
     the swatch grid; that vocabulary now reserved for area
     headings only. */
  text-transform: none;
  letter-spacing: normal;
  color: rgba(27, 54, 93, 0.65);
  text-align: center;
}

.md-board-detail--dark .md-board-edit-right-panel__palette-label {
  color: rgba(255, 255, 255, 0.65);
}

/* Two-column color pill grid — each pill is a labeled row
   (dot + part-of-speech name) mirroring the toolbar's color
   picker dropdown but laid out compactly for the panel. */
.md-board-edit-right-panel__paint-grid {
  display: grid;
  /* Two columns, made to fit the 265px panel via tighter spacing + a smaller (13.5px)
     label: NO horizontal padding on the container (the columns use the full width) and
     a tight column gap, so the longest labels ("Preposition", "Determiner") no longer
     clip. min-width:0 on the pills lets the columns shrink to share the row. */
  grid-template-columns: 1fr 1fr;
  gap: 3px 2px;
  padding: 8px 0;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.md-board-edit-right-panel__paint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 6px;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #1B365D;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.md-board-edit-right-panel__paint-pill:hover,
.md-board-edit-right-panel__paint-pill:focus-visible {
  background: rgba(90, 106, 133, 0.08);
  border-color: rgba(90, 106, 133, 0.18);
  outline: none;
}

.md-board-edit-right-panel__paint-pill--active {
  background: rgba(90, 106, 133, 0.12);
  border-color: rgba(90, 106, 133, 0.4);
  color: #5A6A85;
  font-weight: 600;
}

.md-board-edit-right-panel__paint-pill-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(27, 54, 93, 0.2);
}

.md-board-edit-right-panel__paint-pill-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill {
  color: #e5ecf8;
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill:hover,
.md-board-detail--dark .md-board-edit-right-panel__paint-pill:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill--active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill-dot {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Custom Color pill — spans the full grid width with a hairline
   above so it reads as the "footer" of the swatch list. Its dot
   is a conic-gradient rainbow indicating "any color you want". */
.md-board-edit-right-panel__paint-pill--custom {
  grid-column: 1/-1;
  margin-top: 6px;
  padding: 8px 10px;
  /* Match the surrounding pill rounding instead of the previous
     hard-rounded "999px on bottom only" treatment that produced
     an oversized rounded bottom edge. */
  border-radius: 999px;
  position: relative;
}

.md-board-edit-right-panel__paint-pill--custom::before {
  /* Hairline above the Custom Color pill — visually separates
     the named POS swatches from the custom-color affordance. */
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -3px;
  height: 1px;
  background: rgba(27, 54, 93, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill--custom::before {
  background: rgba(255, 255, 255, 0.1);
}

.md-board-edit-right-panel__paint-pill-dot--custom {
  background: conic-gradient(from 0deg, #ff5b5b, #ffb84a, #ffe14a, #5cd05c, #4a8cff, #a45cff, #ff5b5b);
  border-color: rgba(27, 54, 93, 0.2);
}

.md-board-detail--dark .md-board-edit-right-panel__paint-pill--custom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Custom Color inline picker — sits as a full-width grid row
   directly below the Custom Color pill (so it reads as that
   pill's expanded body). Slight indent + soft surface differentiates
   it from the surrounding swatch pills. */
.md-board-edit-right-panel__custom-picker {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid rgba(90, 106, 133, 0.2);
  border-radius: 10px;
  background: rgba(90, 106, 133, 0.05);
}

.md-board-edit-right-panel__custom-picker-input {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

.md-board-edit-right-panel__custom-picker-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 500;
  color: #1B365D;
}

.md-board-edit-right-panel__custom-picker-hex:focus,
.md-board-edit-right-panel__custom-picker-hex:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.18);
}

.md-board-edit-right-panel__custom-picker-apply {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #5A6A85;
  border-radius: 999px;
  background: #5A6A85;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-board-edit-right-panel__custom-picker-apply:hover,
.md-board-edit-right-panel__custom-picker-apply:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  border-color: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  outline: none;
}

.md-board-detail--dark .md-board-edit-right-panel__custom-picker {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel__custom-picker-hex {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f0f4fb;
}

.md-board-detail--dark .md-board-edit-right-panel__palette,
.md-board-detail--dark .md-board-edit-right-panel__brush {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.md-board-detail--dark .md-board-edit-right-panel__palette:hover,
.md-board-detail--dark .md-board-edit-right-panel__palette:focus-visible,
.md-board-detail--dark .md-board-edit-right-panel__brush:hover,
.md-board-detail--dark .md-board-edit-right-panel__brush:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.md-board-detail--dark .md-board-edit-right-panel__paint-grid {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.md-board-detail--dark .md-board-edit-right-panel__palette-preview {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Two-tone icon strokes (verdigris + charcoal-blue) are inlined
   on the SVG paths in the template. In DARK mode, an open section's
   chip flips to a slate-blue→charcoal gradient — flatten the icons
   to white in that state so they pop on the dark chip instead of
   disappearing into it. Same fill-opacity flip for any filled
   accents (the green color-drop on the Background icon, the dotted
   speak-bar nodes, etc.).
   LIGHT mode intentionally does NOT flip: open icons keep their
   authored two-tone palette (the chip stays a light tint), so the
   icon color doesn't change when a section is expanded. */
.md-board-detail--dark .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke] {
  stroke: #ffffff !important;
}

.md-board-detail--dark .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [fill]:not([fill=none]) {
  fill: #ffffff !important;
  fill-opacity: 1 !important;
}

/* Dark-mode contrast lift — charcoal-blue strokes (#46505F) and
   the small filled accents (#46505F/#2A9D8F at low alpha)
   disappear against the panel's near-black gradient. Bump them
   to a lighter slate / brighter teal so the two-tone icons pass
   AA contrast on the dark surface. Open-state white still
   overrides this via the rule above.
   The LEFT rail icons (`.md-board-edit-panel__icon`) carry the
   same two-tone palette — `#46505F` primary + `#2A9D8F` verdigris
   accent — so the same dark-mode lifts apply, making the left and
   right rails read with identical two-tone balance. */
.md-board-detail--dark .md-board-edit-right-panel__section-icon svg [stroke="#46505F"],
.md-board-detail--dark .md-board-edit-right-panel__collapse-btn svg [stroke="#46505F"],
.md-board-detail--dark .md-board-edit-panel__icon svg [stroke="#46505F"] {
  stroke: #cfd8e8;
}

.md-board-detail--dark .md-board-edit-right-panel__section-icon svg [stroke="#2A9D8F"],
.md-board-detail--dark .md-board-edit-right-panel__collapse-btn svg [stroke="#2A9D8F"],
.md-board-detail--dark .md-board-edit-panel__icon svg [stroke="#2A9D8F"] {
  stroke: #4cd7c8;
}

.md-board-detail--dark .md-board-edit-right-panel__section-icon svg [fill="#46505F"]:not([fill=none]),
.md-board-detail--dark .md-board-edit-right-panel__collapse-btn svg [fill="#46505F"]:not([fill=none]),
.md-board-detail--dark .md-board-edit-panel__icon svg [fill="#46505F"]:not([fill=none]) {
  fill: #cfd8e8;
}

.md-board-detail--dark .md-board-edit-right-panel__section-icon svg [fill="#2A9D8F"]:not([fill=none]),
.md-board-detail--dark .md-board-edit-right-panel__collapse-btn svg [fill="#2A9D8F"]:not([fill=none]),
.md-board-detail--dark .md-board-edit-panel__icon svg [fill="#2A9D8F"]:not([fill=none]) {
  fill: #4cd7c8;
}

/* create-board-new rail exception: an expanded section must look IDENTICAL
   to a collapsed one — keep the neutral icon chip + the icon's authored
   two-tone colors, NOT board-detail's "active chip" treatment (dark
   gradient chip + flattened-white icons). Scoped to .nb-create-rail so the
   board-detail edit page keeps its active-chip behavior. Light mode keeps
   the authored #46505F/#2A9D8F; dark mode keeps the dark-lifted
   #cfd8e8/#4cd7c8 so contrast survives on the dark panel. */
.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon {
  background: rgba(27, 54, 93, 0.05);
  border-color: rgba(27, 54, 93, 0.08);
  color: rgba(27, 54, 93, 0.65);
  transform: none;
  box-shadow: none;
}

.md-board-detail--dark.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke="#46505F"] {
  stroke: #46505F !important;
}

.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke="#2A9D8F"] {
  stroke: #2A9D8F !important;
}

/* The Speak Bar (and Symbols/Background) icons have filled dots with
   stroke="none"; the open white-flip's broad [stroke] selector would
   outline those dots white. Keep them stroke-less in both themes. */
.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke=none] {
  stroke: none !important;
}

.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [fill="#46505F"]:not([fill=none]) {
  fill: #46505F !important;
  fill-opacity: 1 !important;
}

.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [fill="#2A9D8F"]:not([fill=none]) {
  fill: #2A9D8F !important;
  fill-opacity: 1 !important;
}

.md-board-detail--dark.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke="#46505F"] {
  stroke: #cfd8e8 !important;
}

.md-board-detail--dark.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [stroke="#2A9D8F"] {
  stroke: #4cd7c8 !important;
}

.md-board-detail--dark.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [fill="#46505F"]:not([fill=none]) {
  fill: #cfd8e8 !important;
  fill-opacity: 1 !important;
}

.md-board-detail--dark.nb-create-rail .md-board-edit-right-panel__section--open .md-board-edit-right-panel__section-icon svg [fill="#2A9D8F"]:not([fill=none]) {
  fill: #4cd7c8 !important;
  fill-opacity: 1 !important;
}

/* (Removed) the ≤1023px `.md-board-edit-right-panel { display:none }`
   rule used to live here — it outright HID the Settings panel on
   narrower screens (the comment mislabelled it "collapse to 0 width";
   the declaration was display:none). The edit layout keeps the panel
   as a real 15% track at every breakpoint and the panel collapses to
   a 56px rail via `--collapsed`, so the panel must never be hidden.
   Single owner for the edit-panel responsive behaviour is the
   `.md-shell--board-detail-edit` rules above — do NOT re-add a hide
   here. */
/* ── Confirm Recolor Board modal — primary action in brand
   slate-blue, scoped via :has() so other modals' --primary
   buttons keep their existing treatment. ────────────────────── */
.modal-content:has(.md-confirm-recolor-board) .md-modal-btn--primary {
  background: #5A6A85;
  border-color: #5A6A85;
  color: #ffffff;
}

.modal-content:has(.md-confirm-recolor-board) .md-modal-btn--primary:hover:not(:disabled),
.modal-content:has(.md-confirm-recolor-board) .md-modal-btn--primary:focus-visible {
  background: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  border-color: rgb(77.6502242152, 91.4547085202, 114.7497757848);
  color: #ffffff;
  outline: none;
}

.modal-content:has(.md-confirm-recolor-board) .md-modal-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* End Phase 03 — Board Edit Side Panel */
/* ── Action-Panel top tiles: purpose gradients ──────────────────────
   Save and Exit (affirmative) gets the app's slate-blue → charcoal
   "save/primary" gradient (mirrors the original back-link CTA);
   Discard Changes (destructive) gets a red $brand-danger gradient.
   Scoped under `.md-board-edit-panel__top` (2-class; dark 3-class) so
   it outranks every duplicated base `.md-board-edit-panel__tile`
   rule regardless of source order, and so the Share/Copy/Print/
   Download tiles are untouched. White text/icon for contrast on the
   filled gradients. */
/* Glassy affirmative treatment — same partially-transparent + blur
   structure as the Discard tile, using the save color ($brand-slate-
   blue) instead of $brand-danger. */
/* Mid-strength: more present than the light 0.12 glass but still
   translucent (not the original opaque gradient). */
.md-board-edit-panel__top .md-board-edit-panel__tile--save {
  background: rgba(90, 106, 133, 0.3);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(90, 106, 133, 0.5);
  color: #fff;
}

.md-board-edit-panel__top .md-board-edit-panel__tile--save:hover,
.md-board-edit-panel__top .md-board-edit-panel__tile--save:focus-visible {
  background: rgba(90, 106, 133, 0.42);
  border-color: rgba(90, 106, 133, 0.7);
  color: #fff;
}

/* Discard tile — previously red ($brand-danger); now a neutral
   slate/charcoal glass treatment per request to remove the reddish
   coloring. Still visually distinct from Save (slate-blue) via the
   darker neutral tone, but reads as "secondary action" rather than
   "destructive". The confirm-leave-edit modal still has the
   safety-net confirmation step before any edits are actually
   discarded, so demoting the color isn't softening the safeguard. */
.md-board-edit-panel__top .md-board-edit-panel__tile--discard {
  background: rgba(70, 80, 95, 0.18);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(70, 80, 95, 0.4);
  color: #46505F;
}

.md-board-edit-panel__top .md-board-edit-panel__tile--discard:hover,
.md-board-edit-panel__top .md-board-edit-panel__tile--discard:focus-visible {
  background: rgba(70, 80, 95, 0.28);
  border-color: rgba(70, 80, 95, 0.6);
  color: #46505F;
}

.md-board-edit-panel__top .md-board-edit-panel__tile--save .md-board-edit-panel__icon,
.md-board-edit-panel__top .md-board-edit-panel__tile--discard .md-board-edit-panel__icon {
  opacity: 1;
}

/* Dark mode: 3-class to beat the base `.md-board-detail--dark
   .md-board-edit-panel__tile` (2-class). Same gradients read well on
   the dark panel; keep them. */
.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--save {
  background: rgba(90, 106, 133, 0.38);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(90, 106, 133, 0.55);
  color: #fff;
}

.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--save:hover,
.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--save:focus-visible {
  background: rgba(90, 106, 133, 0.5);
  border-color: rgba(90, 106, 133, 0.75);
  color: #fff;
}

.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--discard {
  /* Dark-mode discard — lifted slightly so the neutral charcoal glass
     still reads against the dark panel backdrop. Text uses a soft
     lightened white for legibility (the navy itself disappears on
     navy). Matches the same "neutral secondary" treatment as light. */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--discard:hover,
.md-board-detail--dark .md-board-edit-panel__top .md-board-edit-panel__tile--discard:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}

/* =========================================================================
   Home tour (Shepherd.js via ember-shepherd)
   ─────────────────────────────────────────────────────────────────────────
   Trigger pill `.md-tour__*` lives inside the dashboard hero and opens the
   tour. Step popovers and the modal overlay are Shepherd's `.shepherd-*`
   elements, portalled into <body> at run time — overrides below restyle
   them to match the LingoLinq modern dashboard (atmospheric-depth recipe
   from docs/task-management/LEARNINGS.md; AAC font scale, ~30% larger than
   typical web defaults per project convention).
   ========================================================================= */
/* — Trigger pill — */
.md-tour__trigger {
  /* Home-page tour entry: constantly anchored to the top-left of the viewport,
     just below the fixed inner-header navbar, at every screen size. `fixed`
     keeps it put while the dashboard scrolls; the two per-breakpoint rules
     (>1025px / ≤1024px) mirror this exact position. The z-index (set below)
     must sit ABOVE the fixed header (z-index:1000, ~l.442) — that header was
     painting over the trigger, which is why it vanished when first fixed. */
  position: fixed;
  top: calc(var(--topbar-height, 16px) + 7.5rem);
  left: 24px;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  /* Same glassy fill as the "Dashboard Design" / Get Started pill
     (.beta-welcome-steps__num): a white rim + frosted backdrop over a translucent
     denim→verdigris tint — IDENTICAL stops so the two triggers match exactly. */
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  color: #1b2a4a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1px;
  cursor: pointer;
  /* Glassy raised-button shadow matching the Get Started pill. */
  box-shadow: 0 6px 16px rgba(76, 134, 216, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 8px rgba(42, 157, 143, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  /* Above the fixed inner-header navbar (position:fixed; z-index:1000, ~l.442)
     so the header never paints over the trigger (the cause of it vanishing). */
  z-index: 1001;
}

/* "Seen" indicator — once the page+view's tour has been COMPLETED
   (preferences.progress.guided_tours_completed), a small verdigris check badge
   sits in the trigger's top-right corner. Make the in-navbar trigger relative to
   anchor it — there it's `position:static !important`, and this rule comes after
   those static rules so it wins at equal specificity. */
.app-navbar__home-actions .md-tour__trigger {
  position: relative !important;
}

/* Gentle View: the navbar Guided Tour disc matches the Display Style disc exactly
   (their glass bg/border/shadow are already identical) — suppress the tour's
   discoverability glow halo, which the Display disc doesn't have, so the two read
   the same. Scoped to non-focused; the focused disc keeps its own treatment. */
body:not(.ll-layout-focused) .app-navbar__home-actions .md-tour__trigger::before {
  display: none !important;
}

.md-tour__trigger-seen-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2A9D8F;
  border: 2px solid #fff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.3);
  z-index: 2;
  pointer-events: none;
}

.md-tour__trigger-seen-badge svg {
  display: block;
}

/* Onboarding discoverability — a soft verdigris glow ring that gently
   pulses behind the chip so new users notice it without it shouting.
   Sits behind the chip's opaque gradient (z-index:-1) and peeks around
   the edges. Motion is opt-in only: the animation is wrapped in a
   prefers-reduced-motion guard so it stays a static soft halo for
   users who ask for reduced motion. */
.md-tour__trigger::before {
  content: "";
  position: absolute;
  /* Solid pill-shaped fill (not a radial gradient) + blur so the glow
     hugs the WHOLE button evenly. The earlier
     `radial-gradient(closest-side)` sized a circle to the button's
     shortest side (its height), so on a wide pill it read as a dot in
     the center. A full-bleed rounded fill blurred outward halos the
     entire shape, left edge to right edge. */
  inset: -4px;
  border-radius: 999px;
  /* Softer verdigris glow — lighter fill + lower resting opacity than
     the prior 0.38/0.55 so the halo reads as a gentle ambient cue, not
     a heavy dark ring. */
  background: rgba(42, 157, 143, 0.22);
  filter: blur(10px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .md-tour__trigger::before {
    animation: md-tour-trigger-pulse 4.5s ease-in-out infinite;
  }
}
@keyframes md-tour-trigger-pulse {
  /* Gentler swell: tighter opacity band + smaller scale travel so the
     glow breathes softly rather than flashing. */
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.97);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.04);
  }
}
.md-tour__trigger:hover::before {
  opacity: 0.7;
}

.md-tour__trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 134, 216, 0.45);
  /* Hover = the Get Started tint WITHOUT the resting 10% darkening, so the pill
     lifts + lightens slightly instead of flashing to a flat white gradient. */
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(76, 134, 216, 0.32) 0%, rgba(42, 157, 143, 0.28) 100%);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(70, 80, 95, 0.1), 0 2px 4px -1px rgba(70, 80, 95, 0.12), 0 8px 16px -2px rgba(70, 80, 95, 0.18), 0 18px 36px -8px rgba(70, 80, 95, 0.22);
}

.md-tour__trigger:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.7);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.22), 0 6px 18px rgba(70, 80, 95, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.md-tour__trigger:active {
  transform: translateY(0);
}

.md-tour__trigger-icon {
  color: #4C86D8;
  flex: 0 0 auto;
}

/* On narrower viewports, tighten the trigger's padding for a more
   compact chip. The label intentionally stays visible at every width
   (no `display: none` on `.md-tour__trigger-label` here) — the
   ≤1024px rule already drops the trigger out of its top-right
   absolute pin into the hero's flex column, so there's room for the
   full "Take a tour" label. The `top: 12px; right: 12px` lines are
   ineffective at this width because they're overridden by the
   ≤1024px block (top:auto !important / right:auto !important); kept
   here for the >1024px-only-but-≤640px edge case in case the wider
   override is ever changed, so this rule still works on its own. */
@media (max-width: 640px) {
  .md-tour__trigger {
    padding: 8px 12px;
    top: 12px;
    right: 12px;
  }
}
/* — Shepherd popover chrome — */
/* Shepherd tour popover — matches the modern modal vocabulary
   (.la-features-modal-wrap, subscribe-modal-header). 20px radius,
   `overflow: hidden` so the footer/button backgrounds crop to the
   rounded corners (fixes the "bottom edge cut off" perception),
   white surface, hairline navy border, modern shadow, dusty-denim
   action buttons (NO smart-blue per palette directive). */
/* "Scroll the highlight into view" reveal: while a step's target is scrolled into
   place, the dimmed page + its moving spotlight stay visible, but the popover card
   is held hidden (this class) so floating-ui's flip() can't flash it mid-scroll;
   removing the class fades it in (the .shepherd-element opacity transition below).
   The 3-class selector outweighs Shepherd's own `.shepherd-enabled.shepherd-element`
   opacity rule without needing !important. */
.shepherd-element.shepherd-enabled.md-tour__step--revealing {
  /* Hide INSTANTLY while scrolling (transition:none) — otherwise Shepherd's own
     opacity transition fades the card out/in and it flickers mid-scroll. It fades
     back in (base .shepherd-element transition) only when the class is removed on
     settle. visibility:hidden so it's fully gone, not just transparent. */
  opacity: 0;
  visibility: hidden;
  transition: none;
  pointer-events: none;
}

/* Fade the OUTGOING card OUT instead of snapping it away. Shepherd hides a step
   by setting the `hidden` attribute (→ display:none, instant). Override that so a
   just-hidden card stays RENDERED (display/visibility) — the actual fade is driven
   by an inline opacity set in guided-tour.js on the step's `hide` event (inline
   beats the cascade reliably; a CSS opacity here was getting overridden). It
   lingers transparent + non-interactive (position is absolute/fixed, no layout
   impact) until its next show destroys+recreates it, or the tour ends. */
.shepherd-element.shepherd-enabled[hidden] {
  display: block;
  visibility: visible;
  pointer-events: none;
}

.shepherd-element {
  position: relative;
  /* GRADUAL fade for the reveal above (popover held hidden while its target
     scrolls in, then faded in once the scroll settles) AND the fade-out of an
     outgoing card. ~0.45s reads as a gentle cross-fade (AAC-friendly), not a snap. */
  transition: opacity 0.45s ease;
  /* "Guided Experience" surface — soft navy-tinted glass with two
     low-opacity aurora washes (verdigris top-right, denim top-left)
     instead of the flat white card. The translucency + backdrop blur
     give it depth against the paused navy scrim, and immediately
     separate the tutorial from normal white-card UI. */
  background: radial-gradient(120% 110% at 100% 0%, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0) 52%), radial-gradient(120% 120% at 0% 0%, rgba(86, 110, 180, 0.12) 0%, rgba(86, 110, 180, 0) 55%), rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  /* Illuminated hairline border. */
  border: 1px solid rgba(86, 110, 180, 0.18);
  border-radius: 20px;
  overflow: hidden;
  /* Floating depth — a single large soft glow plus a tight contact
     shadow and an inset top highlight (the "lit" upper edge). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(22, 34, 70, 0.12), 0 26px 56px rgba(22, 34, 70, 0.26), 0 64px 150px rgba(22, 34, 70, 0.18);
  max-width: 460px;
  width: calc(100vw - 32px);
  color: var(--md-ink, #111A2E);
  font-family: inherit;
}

/* Top accent line — verdigris -> denim -> lavender brand gradient. A
   thin illuminated ribbon across the top edge that brands the surface
   as an onboarding/guided experience. */
.shepherd-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2A9D8F 0%, #4C86D8 50%, #7FA7FF 100%);
  z-index: 3;
  pointer-events: none;
}

/* Keep the header/body/footer content above the intro orbital accent. */
.shepherd-element .shepherd-content {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Board-picker "Let us pick for you" step — the assign button sits near the page
   bottom, so floating-ui flips this popover ABOVE it and it rode too high. Nudge
   the whole popover down 10rem. A margin shifts an absolutely-positioned
   floating-ui element regardless of whether it positions via `top` or `transform`. */
/* Nudge two specific spotlight popovers down 10rem: the board-picker "Let us pick
   for you" step (its assign-button target sits near the page bottom) and the
   speak-mode "Tap to communicate" step (its grid target fills the page) — both
   ride too high. The margin offset MUST combine the step class with
   [data-popper-placement] so it beats the generic placement margin rules below
   (-16px top / 16px bottom, equal specificity but later in source). We ADD to that
   arrow-gap offset via calc so the popover stays detached from its target. */
.shepherd-element.md-tour__step--bp-assign[data-popper-placement^=top],
.shepherd-element.md-tour__step--bds-grid[data-popper-placement^=top] {
  margin-top: calc(10rem - 16px);
}

.shepherd-element.md-tour__step--bp-assign[data-popper-placement^=bottom],
.shepherd-element.md-tour__step--bds-grid[data-popper-placement^=bottom] {
  margin-top: calc(10rem + 16px);
}

.shepherd-element.md-tour__step--intro {
  /* Wide enough to hold the (long) progress-dot row + the intro/outro buttons on
     one line — the tour has many steps now. */
  max-width: 560px;
  text-align: center;
  /* Hero glow + aurora blend over a lighter white base (the first pass
     read a touch dark): a soft glow behind the title (top-center) plus
     verdigris (top-left), denim (right) and lavender (lower-right)
     washes, all <=0.12 — dimensional, not noisy. Overrides the base
     element background for the centered intro/outro variant only. */
  background: radial-gradient(120% 75% at 50% 0%, rgba(127, 167, 255, 0.12) 0%, rgba(127, 167, 255, 0) 62%), radial-gradient(90% 70% at 0% 0%, rgba(42, 157, 143, 0.1) 0%, rgba(42, 157, 143, 0) 55%), radial-gradient(90% 80% at 100% 16%, rgba(86, 110, 180, 0.1) 0%, rgba(86, 110, 180, 0) 55%), radial-gradient(85% 85% at 100% 100%, rgba(146, 130, 220, 0.1) 0%, rgba(146, 130, 220, 0) 60%), radial-gradient(75% 75% at 6% 92%, rgba(42, 157, 143, 0.07) 0%, rgba(42, 157, 143, 0) 60%), rgba(255, 255, 255, 0.93);
  /* Bias the intro/outro popover above geometric center — sits at
     roughly line-of-sight on a desktop dashboard viewport instead
     of dead-middle. Shepherd centers the element via Popper.js
     inline transform; adding margin-top is purely additive and
     safe (overriding `transform` in CSS would clobber Popper's
     positioning). This governs the OUTRO ("You're all set") — the welcome
     overrides it below; raised a further 100px per design. (The short-height
     media query resets this to 0.) */
  margin-top: calc(-20rem - 100px);
}

/* Welcome (first) page only — lift it to roughly eye level (upper third) instead
   of dead-center. Shepherd 14.x centers a no-target step with INLINE
   `position:fixed; top:50%; left:50%; transform:translate(-50%,-50%)` (see
   shepherd.js floatingUIposition), so a stylesheet `margin-top` is unreliable
   against it. Instead we override the vertical anchor directly: `top` with
   !important beats the inline 50% (the inline translate(-50%,-50%) stays, so the
   card is simply centered on the new line), and we zero the base intro margin so
   the two never compound. A percentage keeps the card on-screen at every viewport
   height (no clipping on tablets) — so no media-query gating. The outro keeps the
   base -20rem above; this targets only --welcome. Tune the single % to taste. */
.shepherd-element.md-tour__step--intro.md-tour__step--welcome {
  top: 23% !important;
  /* Nudged 32px + 8rem lower than the 23% line (per design). The short-height
     media query below resets this to 0 so it stays anchored near the top there. */
  margin-top: calc(32px + 8rem) !important;
  /* 24px wider than the shared intro width (560 → 584) — the welcome page carries
     the map + checklist + the full progress-dot row, so it gets a touch more room.
     Overrides the intro max-width (this 3-class selector beats it). */
  width: 584px;
  max-width: 92vw;
}

/* Short viewports: the centered intro/outro (welcome especially) is positioned
   by its CENTER (Shepherd's translate(-50%,-50%) on the 23% line / the base
   -20rem), so on a short screen its TOP is pushed above the viewport and clipped.
   Anchor it near the top instead (drop the vertical centering) and let it scroll
   if it's taller than the screen, so the title is never cut off. Tall screens
   keep the original centered position. */
@media (max-height: 800px) {
  .shepherd-element.md-tour__step--intro,
  .shepherd-element.md-tour__step--intro.md-tour__step--welcome {
    top: 12px !important;
    margin-top: 0 !important;
    transform: translateX(-50%) !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}
/* Outro ("You're all set") — positioned the SAME reliable way as --welcome.
   A stylesheet `margin-top` against Shepherd's inline translate(-50%,-50%) is
   unreliable, AND the short-height media query above zeroes it — so the base
   intro `margin-top` could never move the outro on short screens. Anchor it by
   `top` instead. This 3-class selector (0,3,0) outranks both the base intro
   (0,2,0) and the media-query intro rule (0,2,0) on EVERY viewport height, so it
   governs the outro everywhere. Anchored by its top edge (translateX only, no
   vertical centering) so the tall recap card never clips off the top; scrolls if
   it outgrows the viewport. Tune the single `top` value to move it up/down. */
.shepherd-element.md-tour__step--intro.md-tour__step--outro {
  top: 80px !important;
  margin-top: 0 !important;
  transform: translateX(-50%) !important;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

/* Board-picker handoff outro only (--next) — its heading ("Next: pick your
   communication board (page-set)") is far longer than the celebratory outro's, so
   it needs a wider card to sit on one line. Widen the cap past the shared 560px
   intro width, but clamp to the viewport (94vw) so the centered card can never run
   off-screen and clip the title. (4-class selector beats the base intro
   max-width.) */
.shepherd-element.md-tour__step--intro.md-tour__step--outro.md-tour__step--next {
  max-width: min(720px, 94vw);
}

/* Outro only — extra breathing room above the closing line (card grows ~20px). */
.shepherd-element.md-tour__step--outro .md-tour__foot {
  margin-top: 34px;
}

/* Orbital accent — one abstract, premium onboarding visual (no
   mascot): a soft cluster of glowing brand-coloured orbs fading into
   the top-right corner. Pure CSS layered radials, blurred and low
   opacity, clipped by the card's overflow:hidden so it reads as an
   ambient glow rather than a graphic. Decorative only. */
.shepherd-element.md-tour__step--intro::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -6px;
  width: 190px;
  height: 170px;
  /* Restrained onboarding illustration — faint floating speech bubbles
     + nodes (communication motif) layered OVER a soft brand-orb glow,
     top-right, partially clipped by the card's overflow:hidden so it
     fades into the corner. The SVG (built in apply_tour_v2.py) uses
     rgb() colours and no gradient IDs to dodge the Sprockets data-URI
     mangling noted in LEARNINGS. No blur here — it would smear the
     glyphs; the orb radials are already soft. */
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27150%27%20height%3D%27140%27%20viewBox%3D%270%200%20150%20140%27%20fill%3D%27none%27%3E%3Cg%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%2772%27%20y%3D%2718%27%20width%3D%2760%27%20height%3D%2738%27%20rx%3D%2712%27%20stroke%3D%27rgb%2876%2C134%2C216%29%27%20stroke-opacity%3D%270.26%27%2F%3E%3Cpath%20d%3D%27M88%2056%20l0%2012%20l14%20-12%27%20stroke%3D%27rgb%2876%2C134%2C216%29%27%20stroke-opacity%3D%270.26%27%2F%3E%3Crect%20x%3D%2746%27%20y%3D%2762%27%20width%3D%2746%27%20height%3D%2730%27%20rx%3D%2710%27%20stroke%3D%27rgb%2842%2C157%2C143%29%27%20stroke-opacity%3D%270.26%27%2F%3E%3Cpath%20d%3D%27M66%2092%20l0%2010%20l12%20-10%27%20stroke%3D%27rgb%2842%2C157%2C143%29%27%20stroke-opacity%3D%270.26%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27rgb%2876%2C134%2C216%29%27%20fill-opacity%3D%270.28%27%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2737%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%27102%27%20cy%3D%2737%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%27114%27%20cy%3D%2737%27%20r%3D%272.4%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27rgb%2842%2C157%2C143%29%27%20fill-opacity%3D%270.28%27%3E%3Ccircle%20cx%3D%2761%27%20cy%3D%2777%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%2771%27%20cy%3D%2777%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%2781%27%20cy%3D%2777%27%20r%3D%272.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat right 48px top 4px/132px auto, radial-gradient(circle at 32% 34%, rgba(127, 167, 255, 0.3), rgba(127, 167, 255, 0) 60%), radial-gradient(circle at 68% 48%, rgba(42, 157, 143, 0.24), rgba(42, 157, 143, 0) 60%), radial-gradient(circle at 52% 74%, rgba(146, 130, 220, 0.2), rgba(146, 130, 220, 0) 62%);
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
}

/* Outro ("You're all set") — drop the top-right decoration (speech bubbles +
   orb-glow shading) for a cleaner completion card. Scoped to the outro so the
   welcome keeps its accent (3-class selector beats the base intro ::after). */
.shepherd-element.md-tour__step--intro.md-tour__step--outro::after {
  display: none;
}

/* Dashboard Design modal — drop the same top-right decoration (speech bubbles +
   orb-glow shading) on every page of the modal, per request, for a cleaner
   surface. The ds-modal steps carry both `md-tour__step--intro` and `md-ds-modal`;
   the 3-class selector beats the base intro ::after (mirrors the outro removal
   above). The guided-tour intro steps keep their accent. */
.shepherd-element.md-tour__step--intro.md-ds-modal::after {
  display: none;
}

/* Header — soft surface tint with hairline bottom rule, matching
   the canonical `.la-features-modal-wrap .la-modal-header` and the
   subscribe-modal hero. */
.shepherd-has-title .shepherd-content .shepherd-header {
  /* Modern animated separator between the header and the body: a thin
     brand-gradient hairline (verdigris→denim→lavender, matching the top
     accent) with a slow flowing-light shimmer — the animated gradient-line
     pattern modern product sites use. `position: relative` anchors the
     ::after line. */
  position: relative;
  background: transparent;
  /* Larger bottom padding (8 → 18) so the title clears the header hairline with
     more breathing room before the body — both Gentle and Focused tours. */
  padding: 22px 28px 18px;
}

.shepherd-has-title .shepherd-content .shepherd-header::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  /* Soft-ended gradient: transparent at both ends so it reads as an inset
     hairline, not a hard rule. background-size 200% leaves room for the
     highlight to travel during the flow animation. */
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, rgba(42, 157, 143, 0.55) 18%, rgba(76, 134, 216, 0.78) 50%, rgba(127, 167, 255, 0.55) 82%, rgba(127, 167, 255, 0) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  pointer-events: none;
}

/* Flowing-light shimmer — opt-in motion only; for prefers-reduced-motion
   the line stays a static gradient hairline. `alternate` + ease-in-out lets
   the highlight drift gently back and forth with no jarring loop reset. */
@media (prefers-reduced-motion: no-preference) {
  .shepherd-has-title .shepherd-content .shepherd-header::after {
    animation: md-tour-separator-flow 4s ease-in-out infinite alternate;
  }
}
@keyframes md-tour-separator-flow {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}
.shepherd-title {
  /* Stack the eyebrow identity pill above the heading on the centered
     intro/outro steps. Interior steps carry a plain-string title (a
     single text node) — column layout is harmless there. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--md-ink, #111A2E);
  letter-spacing: -0.01em;
  margin: 0;
}

.shepherd-element.md-tour__step--intro .shepherd-title {
  /* Eyebrow pill + heading left-aligned on the centered intro/outro
     steps (per request) — the body is pushed right below for an
     asymmetric, editorial layout. Footer is untouched. */
  align-items: flex-start;
  text-align: left;
  /* The title is a flex ITEM of Shepherd's flex .shepherd-header; flex items have
     min-width:auto and won't shrink below their content, so a long heading (e.g.
     the board-picker handoff title) forces the popover past its max-width and off
     the left edge of the screen. min-width:0 lets it shrink so the heading wraps
     inside the capped popover instead. */
  min-width: 0;
}

/* The "Choose your display style" step reuses the intro class for its
   eyebrow+heading treatment, but its title is CENTERED on the page rather than
   left-aligned. Scoped to the display modal (md-ds-modal--display) so the
   welcome/outro intro steps keep their editorial left alignment; placed after
   the rule above so it wins on equal specificity by source order. */
.shepherd-element.md-ds-modal--display .shepherd-title {
  align-items: center;
  text-align: center;
}

/* Eyebrow identity pill — "[ Guided Tour ]". Soft verdigris glass,
   semi-bold, slightly smaller than the nav pills, with a faint icon
   glow. Establishes the product-tour identity above the heading. */
.shepherd-title .md-tour__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.12);
  border: 1px solid rgba(42, 157, 143, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(42, 157, 143, 0.14);
  color: #1f6b60;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.shepherd-title .md-tour__eyebrow-icon {
  color: #2A9D8F;
  filter: drop-shadow(0 0 4px rgba(42, 157, 143, 0.5));
  flex: 0 0 auto;
}

/* Intro/outro heading — larger, tighter tracking, deeper navy than the
   interior step titles for a clear hierarchy step-down. */
.shepherd-title .md-tour__heading {
  /* Confident onboarding heading, not a marketing hero: a touch
     smaller, tighter line-height, slightly more tracking than the
     first pass (-0.012em vs -0.02em). */
  font-size: 24px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--md-ink, #111A2E);
  /* Wrap long headings within the popover (with min-width:0 on the title above)
     rather than overflowing on one line. */
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Body — solid white surface, AAC-scale typography (~16-17px). */
.shepherd-text {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(70, 80, 95, 0.82);
  padding: 18px 28px 8px;
  background: transparent;
}

.shepherd-text p {
  margin: 0 0 8px;
}

.shepherd-text p:last-child {
  margin-bottom: 0;
}

/* ── Modern checklist body (tourChecklist) ───────────────────────────────────
   Scannable feature lines with a small accent check disc instead of a prose
   paragraph (modern product-tour pattern). The <ul> is inline-flex so it centers
   cleanly inside the centered intro body while its items stay left-aligned; on
   the interior (left-aligned) steps it just sits at the start. */
.md-tour__lead {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  /* 0.82 (not 0.7) so the muted lead text clears WCAG AA 4.5:1 on the light
     popover — matches the body text alpha. */
  color: rgba(70, 80, 95, 0.82);
}

/* Closing line below the checklist (e.g. the outro's "return anytime" note). */
.md-tour__foot {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  /* 0.82 (not 0.7) so the muted footer note clears WCAG AA 4.5:1 on the light
     popover — matches the body text alpha. */
  color: rgba(70, 80, 95, 0.82);
}

/* Board-picker handoff outro (--next) — its closing line ("Now let's pick the
   communication board (page-set)…") is the actual call to action, so make it
   stand out instead of reading as muted footnote copy: bolder + larger, coloured
   to match the "Pick my board" button. Per layout: Focused = the hero navy that
   fills the focused primary button; Gentle = the verdigris accent of the gentle
   button (its light wash fill is too pale to read as text). */
.shepherd-element.md-tour__step--next .md-tour__foot {
  font-size: 17px;
  font-weight: 700;
  color: #1A7B7A;
  /* Soft light halo behind the glyphs so the dark text lifts off the modal
     surface and stands out — layered white glows (tight + wide). */
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.9);
}

.shepherd-element.md-tour__step--focused.md-tour__step--next .md-tour__foot {
  color: color-mix(in oklch, #120380, gray 28%);
}

/* ── Outro completion animation ──────────────────────────────────────────────
   Modern "task complete" cue: the circle draws in, the check strokes on, the
   whole mark pops, and a ring bursts outward — the success pattern modern apps
   use. Pure CSS; reduced-motion shows the finished checkmark with no animation. */
.md-tour__done {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 2px 0 18px;
}

.md-tour__done-svg {
  animation: md-tour-done-pop 0.45s cubic-bezier(0.2, 0.85, 0.3, 1.25) both;
}

.md-tour__done-circle {
  fill: rgba(42, 157, 143, 0.1);
  stroke: #2A9D8F;
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: md-tour-done-circle 0.5s ease-out 0.08s forwards;
}

.md-tour__done-mark {
  fill: none;
  stroke: #2A9D8F;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: md-tour-done-mark 0.3s ease-out 0.52s forwards;
}

/* Ring burst behind the check */
.md-tour__done::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(42, 157, 143, 0.45);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  animation: md-tour-done-ring 0.65s ease-out 0.18s forwards;
}

@keyframes md-tour-done-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes md-tour-done-circle {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes md-tour-done-mark {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes md-tour-done-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.85);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-tour__done-svg,
  .md-tour__done::after {
    animation: none;
  }
  .md-tour__done-circle,
  .md-tour__done-mark {
    animation: none;
    stroke-dashoffset: 0;
  }
  .md-tour__done::after {
    opacity: 0;
  }
}
/* ── Handoff "next action" animation ─────────────────────────────────────────
   The first-time outro hands the user off to the board picker, so it shows a
   forward cue instead of a "done" checkmark: the circle draws in, the arrow
   strokes on, the whole mark pops, then the arrow nudges to the right (twice)
   to read as "moving on". Pure CSS; reduced-motion shows the finished arrow with
   no animation. Uses the Focused accent so it reads as a CTA, not a completion. */
.md-tour__next {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 2px 0 18px;
}

.md-tour__next-svg {
  animation: md-tour-done-pop 0.45s cubic-bezier(0.2, 0.85, 0.3, 1.25) both, md-tour-next-nudge 1.3s ease-in-out 0.95s infinite;
}

.md-tour__next-circle {
  fill: rgba(76, 134, 216, 0.1);
  stroke: #4C86D8;
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: md-tour-done-circle 0.5s ease-out 0.08s forwards;
}

.md-tour__next-arrow {
  fill: none;
  stroke: #4C86D8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: md-tour-done-mark 0.3s ease-out 0.52s forwards;
}

/* Ring burst behind the arrow */
.md-tour__next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(76, 134, 216, 0.45);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  animation: md-tour-done-ring 0.65s ease-out 0.18s forwards;
}

/* Gentle right-nudge of the whole mark once it has drawn in — the "go forward"
   read. Small travel so it stays elegant, not jittery. */
@keyframes md-tour-next-nudge {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-tour__next-svg,
  .md-tour__next::after {
    animation: none;
  }
  .md-tour__next-circle,
  .md-tour__next-arrow {
    animation: none;
    stroke-dashoffset: 0;
  }
  .md-tour__next::after {
    opacity: 0;
  }
}
.shepherd-text .md-tour__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}

/* In the centered intro/outro cards (welcome / "you're ready"), the checklist
   sits in its OWN highlighted panel: rounded corners + a faintly SUNKEN (inset)
   surface so it reads as a distinct, recessed callout rather than loose text.
   The panel fill is a 30% white veil — i.e. ~30% LIGHTER than whatever modal
   surface sits behind it (works across gentle / focused / welcome variants). */
.shepherd-element.md-tour__step--intro .md-tour__list {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 3px rgba(20, 27, 46, 0.09), inset 0 0 0 1px rgba(86, 110, 180, 0.1);
}

.shepherd-text .md-tour__li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--md-ink, #111A2E);
}

/* Check disc — a soft accent circle holding a check glyph (the svg's stroke is
   currentColor; padding + radius + bg make the disc). */
.shepherd-text .md-tour__li-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.14);
  color: #2A9D8F;
  box-sizing: border-box;
}

.shepherd-text .md-tour__li-text {
  flex: 1 1 auto;
}

/* "OR" divider between checklist items (board-picker tour) — reads the three
   options as mutually-exclusive. Stretches full width of the inline-flex list
   (align-items:stretch), an uppercase tracked label flanked by thin rules.
   aria-hidden in markup (decorative — the items themselves carry the meaning). */
.shepherd-text .md-tour__or {
  display: flex;
  align-items: center;
  /* Center the whole rule+OR+rule row explicitly. Works both as a board-picker
     list item AND as a standalone welcome-step divider (block-level div), where
     the growing pseudo-rules alone weren't visibly anchoring the label. */
  justify-content: center;
  width: 100%;
  gap: 10px;
  /* Symmetric inset pulls the flanking rules in from both edges so they span the
     middle of the row (shorter lines), with OR centered between them. */
  padding: 0 20%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.7 (not 0.45) so the "OR" divider label clears WCAG AA 4.5:1 on the light
     popover; the flanking rules below are non-text (exempt). */
  color: rgba(17, 26, 46, 0.7);
}

.shepherd-text .md-tour__or::before,
.shepherd-text .md-tour__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  /* Darker so the divider rules are clearly visible on the light popover
     (was 0.16 — nearly invisible). Non-text, so no WCAG contrast requirement. */
  background: rgba(17, 26, 46, 0.42);
}

/* Welcome step: the OR divides two stacked action buttons (not checklist items),
   so give it room above — a proper bottom margin below the first button —
   matching the space below it (the second button's margin-top). Scoped to the
   welcome step so the board-picker checklist OR keeps its tight list spacing. */
.shepherd-element.md-tour__step--welcome .shepherd-text .md-tour__or {
  margin-top: 20px;
}

/* Focused View — check disc in the Focused accent (matches the rest of the
   Focused skin). */
.shepherd-element.md-tour__step--focused .shepherd-text .md-tour__li-check {
  background: rgba(76, 134, 216, 0.16);
  color: #4C86D8;
}

/* Centered intro/outro copy. The body is now a checklist (welcome + outro), so
   the old 33ch cap squeezed it into the centre with big ~130px side margins and
   wrapped the bullet lines — let it use the popover width instead (just the 28px
   side padding). The list/text are still centred via text-align. */
.shepherd-element.md-tour__step--intro .shepherd-text {
  max-width: none;
  margin: 0 auto;
  text-align: center;
  /* A touch more breathing room under the heading (was 18px via the
     base rule) — improves elegance without feeling loose. */
  padding-top: 28px;
}

/* Footer — modern tour-modal pattern (Linear / Stripe / Notion):
   the progress dots sit on the LEFT (pushed there by margin-right:auto)
   and the Back + Next buttons group together on the RIGHT with a tight
   8px gap, reading as a single nav cluster. The dots are injected by
   home-tour.js (`_renderTourProgress` via the `show` step hook). */
/* Interior (attached) tour steps: a FIXED, modest width so the long progress-dot
   row + the Back/Next buttons fit on one line — but the popover doesn't balloon.
   (A min-width let the content stretch the box out toward max-width; a fixed
   width keeps it tidy.) Excludes the centered intro/outro (its own width) and the
   Dashboard Design modal (its own width). Capped at 92vw for small screens, where
   the dot row wraps instead. */
.shepherd-element.md-tour__step:not(.md-tour__step--intro):not(.md-ds-modal) {
  width: 504px;
  max-width: 92vw;
}

.shepherd-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  /* No divider line; generous top padding pushes the footer down with
     extra breathing room between the body and the footer (per request). */
  padding: 20px 22px 16px;
  background: transparent;
}

/* Progress system — subtle muted dots showing length + position so the
   tour reads as a designed, manageable flow. Decorative (aria-hidden);
   the buttons are the actual navigation. */
.shepherd-footer .md-tour__progress {
  display: inline-flex;
  align-items: center;
  /* Tighter gap so a long tour (many steps → many dots) stays on ONE row inside
     the widened popover. `flex-wrap` is a safety net: if the count ever exceeds
     the bar width (smaller screens / even more steps), the dots wrap to a second
     row instead of spilling off the edge. */
  gap: 5px;
  row-gap: 6px;
  flex-wrap: wrap;
  margin-right: auto;
}

.shepherd-footer .md-tour__progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(86, 110, 180, 0.12);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.shepherd-footer .md-tour__progress-dot.is-done {
  background: rgba(42, 157, 143, 0.45);
}

.shepherd-footer .md-tour__progress-dot.is-active {
  /* Solid, fully-opaque dot in a slightly less-saturated denim, grown by REAL
     dimensions (not transform-scale) with two stacked 0-blur rings for a crisp
     soft halo. */
  background: #8C9CC4;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px rgba(140, 156, 196, 0.26), 0 0 0 3px rgba(140, 156, 196, 0.1);
}

.shepherd-element .shepherd-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  padding: 8px 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Primary — premium layered LIGHT denim-lavender gradient with an inner
   sheen and floating elevation, but with NAVY text (not white) so it
   never risks the AAC contrast requirement. The darkest gradient stop
   (#C5D6F2) composites about as light as the prior solid surface
   (~#C9DAF3), so navy text stays ~8:1 — comfortably past AAA — while the
   gradient + sheen + lift keep it from reading flat. */
.shepherd-element .md-tour__btn--primary {
  /* Background matches the home-page New Board pill
     (.md-grid--dashboard .md-card--boards .md-btn--pill: rgba(44,183,176,.22)
     — the verdigris fill that button intentionally keeps). Only the fill is
     borrowed; the tour CTA keeps its own border, glow/shadow, and navy text. */
  background: rgba(44, 183, 176, 0.22);
  border-color: rgba(76, 134, 216, 0.28);
  color: #1B365D;
  /* Softly-illuminated glass CTA (Linear / Arc / Apple): top inner
     sheen + a faint lower inner edge for surface curvature, a tight
     contact shadow, and a richer diffuse bottom shadow for lift. Stays
     navy-on-light so AAC contrast is untouched (~8:1). */
  box-shadow: inset 0 2px 1px rgb(255, 255, 255), inset 0 -2px 3px rgba(76, 134, 216, 0.16), 0 1px 1px rgba(22, 34, 70, 0.06), 0 3px 6px rgba(22, 34, 70, 0.1), 0 14px 32px rgba(76, 134, 216, 0.26);
}

.shepherd-element .md-tour__btn--primary:not(:disabled):hover {
  /* Hover fill — a touch more opaque than the resting verdigris fill. */
  background: rgba(44, 183, 176, 0.32);
  border-color: rgba(76, 134, 216, 0.4);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(76, 134, 216, 0.14), 0 1px 2px rgba(22, 34, 70, 0.1), 0 16px 36px rgba(76, 134, 216, 0.3);
  transform: translateY(-1px);
}

.shepherd-element .md-tour__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 10px 24px rgba(76, 134, 216, 0.2);
}

/* Ghost — lower-emphasis transparent glass. No border at rest so it
   visibly recedes against the primary CTA; a faint denim wash appears
   on hover. */
.shepherd-element .md-tour__btn--ghost {
  color: var(--md-muted, #1B365D);
  border-color: transparent;
  background: rgba(255, 255, 255, 0);
}

.shepherd-element .md-tour__btn--ghost:not(:disabled):hover {
  color: var(--md-ink, #111A2E);
  border-color: rgba(86, 110, 180, 0.22);
  background: rgba(86, 110, 180, 0.08);
}

.shepherd-element .md-tour__btn--ghost:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.6);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.22);
}

/* ── Welcome-step in-BODY action button ───────────────────────────────────────
   The "Skip tour for now — I'd like to choose my board" off-ramp renders inside
   the step body (shared.js tourBodyButton), below the checklist. It's a LARGE,
   clearly-tappable modern CTA: a soft denim-tinted glass fill (distinct from the
   popover surface, so it reads as a real button — not a card), generous padding,
   an elevation shadow that lifts it off the page, a trailing "→" arrow (the same
   "go" affordance the home-page action buttons use), and a hover lift + active
   press. The helper note lives INSIDE the button beneath the label so it reads as
   part of this choice. Navy text keeps AAC contrast high. */
.shepherd-text .md-tour__body-action {
  margin-top: 20px;
  text-align: center;
  /* Fill the content width (like the OR divider) so the full-width button is
     centered in the area beside the welcome map, not shrunk + left-aligned by the
     welcome step's align-items:flex-start. */
  width: 100%;
}

.shepherd-element .md-tour__body-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 22px;
  border-radius: 16px;
  cursor: pointer;
  color: #1B365D;
  border: 1px solid rgba(76, 134, 216, 0.3);
  background: linear-gradient(180deg, rgba(238, 243, 250, 0.97), rgba(222, 232, 245, 0.97));
  /* First layer is a crisp outer ring (spread, no blur/offset) that reads as a
     defined outline just beyond the button edge for professional emphasis. */
  box-shadow: 0 0 0 1.5px rgba(76, 134, 216, 0.4), inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(22, 34, 70, 0.06), 0 5px 10px rgba(22, 34, 70, 0.13), 0 18px 40px rgba(76, 134, 216, 0.3);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Label + sub-note stacked and centered. */
.shepherd-element .md-tour__body-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.shepherd-element .md-tour__body-btn-label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.shepherd-element .md-tour__body-btn-note {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
}

/* Trailing "→" arrow — same go-affordance as the home-page action buttons. */
.shepherd-element .md-tour__body-btn-arrow {
  flex: 0 0 auto;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  color: rgba(76, 134, 216, 0.9);
  transition: transform 0.18s ease, color 0.18s ease;
}

.shepherd-element .md-tour__body-btn:not(:disabled):hover {
  border-color: rgba(76, 134, 216, 0.5);
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.99), rgba(214, 227, 244, 0.99));
  box-shadow: 0 0 0 1.5px rgba(76, 134, 216, 0.55), inset 0 1px 0 rgb(255, 255, 255), 0 3px 7px rgba(22, 34, 70, 0.1), 0 16px 34px rgba(76, 134, 216, 0.26);
  transform: translateY(-1px);
}

.shepherd-element .md-tour__body-btn:not(:disabled):hover .md-tour__body-btn-arrow {
  transform: translateX(3px);
  color: #4C86D8;
}

.shepherd-element .md-tour__body-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 0 0 1.5px rgba(76, 134, 216, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(22, 34, 70, 0.08), 0 6px 14px rgba(76, 134, 216, 0.16);
}

.shepherd-element .md-tour__body-btn:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.65);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.25);
}

/* ── Second-round MENU step ───────────────────────────────────────────────────
   Returning users get a centered hub whose footer is a vertical BUTTON LIST of
   topic areas (instead of the usual right-aligned Back/Next pair). Restyle this
   step's footer to a full-width column; each entry reads as a tappable list row
   with a leading chevron. */
.md-tour__step--menu .shepherd-footer {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 9px;
  padding: 6px 22px 20px;
}

.shepherd-element .md-tour__menu-btn {
  /* Full-width list row, left-aligned (overrides the base button's centered
     inline-flex) with a leading chevron and a soft glass surface. */
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 16px;
  color: #1B365D;
  border-color: rgba(86, 110, 180, 0.18);
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.9));
  box-shadow: 0 1px 2px rgba(22, 34, 70, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Leading chevron — a decorative "open this" cue. */
.shepherd-element .md-tour__menu-btn::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 12px;
  border-right: 2px solid rgba(76, 134, 216, 0.7);
  border-bottom: 2px solid rgba(76, 134, 216, 0.7);
  transform: rotate(-45deg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.shepherd-element .md-tour__menu-btn:not(:disabled):hover {
  border-color: rgba(76, 134, 216, 0.4);
  background: linear-gradient(180deg, #fff, rgba(240, 244, 249, 0.95));
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.18), 0 6px 16px rgba(76, 134, 216, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.shepherd-element .md-tour__menu-btn:not(:disabled):hover::before {
  transform: rotate(-45deg) translate(1px, 1px);
  border-color: #4C86D8;
}

.shepherd-element .md-tour__menu-btn:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.6);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.22);
}

/* The "Finish & wrap up" entry sits a touch apart from the topic rows above and
   drops the chevron (it ends the tour rather than opening a topic). */
.shepherd-element .md-tour__menu-btn--finish {
  margin-top: 4px;
  color: var(--md-muted, #1B365D);
  background: rgba(86, 110, 180, 0.06);
  border-color: transparent;
}

.shepherd-element .md-tour__menu-btn--finish::before {
  display: none;
}

.shepherd-element .md-tour__menu-btn--finish:not(:disabled):hover {
  background: rgba(86, 110, 180, 0.12);
  border-color: rgba(86, 110, 180, 0.22);
  box-shadow: none;
  transform: none;
}

/* Menu-mode outro — the "Go to your board picker" link button. Lower-emphasis
   than the primary Finish: a verdigris-tinted text link with a subtle underline,
   so it reads as an optional "you can head over there" link, not a CTA. */
.shepherd-element .md-tour__btn--board-link {
  color: #1A7B7A;
  border-color: transparent;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.shepherd-element .md-tour__btn--board-link:not(:disabled):hover {
  color: #4C86D8;
  background: rgba(86, 110, 180, 0.06);
  text-decoration-thickness: 2px;
}

.shepherd-element .md-tour__btn--board-link:focus-visible {
  outline: none;
  border-color: rgba(76, 134, 216, 0.6);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.22);
}

/* ── Focused View tour skin ──────────────────────────────────────────────────
   When the home tour runs in Focused View, every step carries
   `md-tour__step--focused` (added in utils/tours/home.js). Re-skin the popover
   from the default verdigris→denim→lavender brand ribbon to the Focused View
   palette: the blue-grey → charcoal-blue accent (its nav pills / navbar circle
   buttons), the focus-surface tint, and a gradient CTA with white text — so the
   guide reads as part of the Focused chrome. Each selector adds one class over
   its base rule, so these win on specificity.

   The SAME skin is applied to the Dashboard Design modal (`.md-ds-modal`) when
   the user is in Focused View (`body.ll-layout-focused`) — it reuses the same
   shepherd + md-tour__* structure, so the second selector in each rule below
   makes that modal match the Focused tour modal. (Styles only — no JS/markup
   change; the ds modal doesn't carry the --focused class.) */
.shepherd-element.md-tour__step--focused::before,
body.ll-layout-focused .shepherd-element.md-ds-modal::before {
  background: linear-gradient(90deg, #7693B9 0%, #4C86D8 50%, #46505F 100%);
}

.shepherd-element.md-tour__step--focused.md-tour__step--intro,
body.ll-layout-focused .shepherd-element.md-ds-modal {
  background: radial-gradient(120% 75% at 50% 0%, rgba(76, 134, 216, 0.12) 0%, rgba(76, 134, 216, 0) 62%), radial-gradient(90% 80% at 100% 16%, rgba(70, 80, 95, 0.12) 0%, rgba(70, 80, 95, 0) 55%), linear-gradient(180deg, rgba(236, 241, 250, 0.97) 0%, rgba(212, 220, 236, 0.95) 100%);
}

/* First page (welcome) of the Focused tours — home, board-picker AND board-detail
   edit all share .md-tour__step--focused.md-tour__step--welcome — gets a 10% LIGHTER
   surface than the shared focused-intro background above so the opening card reads
   brighter. Scoped to --welcome (the outro keeps the deeper tone); the 0,3,0
   selector + source order beats the intro rule. */
.shepherd-element.md-tour__step--focused.md-tour__step--welcome {
  background: radial-gradient(120% 75% at 50% 0%, rgba(76, 134, 216, 0.12) 0%, rgba(76, 134, 216, 0) 62%), radial-gradient(90% 80% at 100% 16%, rgba(70, 80, 95, 0.12) 0%, rgba(70, 80, 95, 0) 55%), linear-gradient(180deg, rgba(237.9, 242.4, 250.5, 0.97) 0%, rgba(216.3, 223.5, 237.9, 0.95) 100%);
}

.shepherd-element.md-tour__step--focused .shepherd-content .shepherd-header::after,
body.ll-layout-focused .shepherd-element.md-ds-modal .shepherd-content .shepherd-header::after {
  background: linear-gradient(90deg, rgba(118, 147, 185, 0) 0%, rgba(118, 147, 185, 0.55) 18%, rgba(76, 134, 216, 0.85) 50%, rgba(70, 80, 95, 0.55) 82%, rgba(70, 80, 95, 0) 100%);
}

/* Eyebrow pill ("GUIDED TOUR" / "DASHBOARD DESIGN") — solid Focused gradient
   (blue-grey → charcoal-blue, matching the Focused nav pills + navbar discs)
   with white text + sparkle, so it clearly reads as Focused rather than a faint
   tint of the default green pill. */
.shepherd-element.md-tour__step--focused .md-tour__eyebrow,
body.ll-layout-focused .shepherd-element.md-ds-modal .md-tour__eyebrow {
  background: linear-gradient(135deg, #7693B9, #46505F);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(27, 54, 93, 0.2);
  color: #ffffff;
}

.shepherd-element.md-tour__step--focused .md-tour__eyebrow-icon,
body.ll-layout-focused .shepherd-element.md-ds-modal .md-tour__eyebrow-icon {
  color: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.shepherd-element.md-tour__step--focused .shepherd-footer .md-tour__progress-dot.is-done,
body.ll-layout-focused .shepherd-element.md-ds-modal .shepherd-footer .md-tour__progress-dot.is-done {
  background: rgba(76, 134, 216, 0.5);
}

.shepherd-element.md-tour__step--focused .shepherd-footer .md-tour__progress-dot.is-active,
body.ll-layout-focused .shepherd-element.md-ds-modal .shepherd-footer .md-tour__progress-dot.is-active {
  background: #4C86D8;
  box-shadow: 0 0 0 2px rgba(76, 134, 216, 0.26), 0 0 0 4px rgba(76, 134, 216, 0.1);
}

/* Primary CTA — styled like the Focused home page "Let's Communicate" hero
   (.md-card--speak-focused): the glossy desaturated-navy radial fill with white
   text + a raised bevel (lit top edge, dark inner bottom lip, drop shadow, faint
   brand glow), scaled for a button. */
.shepherd-element.md-tour__step--focused .md-tour__btn--primary,
body.ll-layout-focused .shepherd-element.md-ds-modal .md-tour__btn--primary {
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), inset 0 -5px 10px rgba(27, 54, 93, 0.34), 0 3px 8px rgba(27, 54, 93, 0.28), 0 0 18px rgba(42, 157, 143, 0.1);
}

.shepherd-element.md-tour__step--focused .md-tour__btn--primary:not(:disabled):hover,
body.ll-layout-focused .shepherd-element.md-ds-modal .md-tour__btn--primary:not(:disabled):hover {
  /* Keep the navy radial fill (set explicitly so the base primary-hover's light
     verdigris bg can't bleed through) and bloom the SAME brand-blue glow the
     "Let's Communicate" hero uses on hover — but NO lift (override the base
     hover's translateY). */
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -5px 10px rgba(27, 54, 93, 0.36), 0 4px 12px rgba(27, 54, 93, 0.32), 0 0 26px rgba(76, 134, 216, 0.35);
  transform: none;
}

.shepherd-element.md-tour__step--focused .md-tour__btn--primary:focus-visible,
body.ll-layout-focused .shepherd-element.md-ds-modal .md-tour__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.34), 0 6px 14px rgba(27, 54, 93, 0.34);
}

/* First (welcome) page of the Focused tour: 25% taller than the natural welcome
   height so the tour-map image sits comfortably beside the body copy. (Width is
   the shared intro 520px — the earlier 20%-wider experiment was reverted.) Make
   the content a column so the extra height flows into the body (which holds the
   image) and the footer stays pinned to the bottom. Scoped to focused welcome. */
.shepherd-element.md-tour__step--focused.md-tour__step--welcome .shepherd-content {
  min-height: 345px;
  display: flex;
  flex-direction: column;
}

/* "Make this board your own" (board-detail edit tour welcome, tagged --bd-welcome
   in board-detail.js) is 20% taller than the other tours' welcome cards: 345 → 414.
   The 0,4,0 selector + source order beats both the focused (345) and gentle (414)
   welcome content rules, so it applies in either view. */
.shepherd-element.md-tour__step--welcome.md-tour__step--bd-welcome .shepherd-content {
  min-height: 414px;
}

/* The tour-map image moves OUT of the top-right corner accent and BESIDE the
   body copy (see the .shepherd-text rules below), so suppress the base intro
   ::after graphic (speech bubbles + orb-glow shading) on the welcome page in
   BOTH views — focused (map-dark) and gentle (map-light) both carry the map
   inline instead. */
.shepherd-element.md-tour__step--welcome::after {
  display: none;
}

/* Tour-map image to the LEFT of the welcome paragraph: a left-anchored
   background + matching left padding pushes the copy to its right; the row is
   vertically centred and left-aligned (overriding the intro's centered, narrow
   body). flex:1 lets the body absorb the extra modal height so the image stays
   centred. */
.shepherd-element.md-tour__step--focused.md-tour__step--welcome .shepherd-text {
  flex: 1 1 auto;
  /* Column so the lead line + checklist STACK to the right of the map (the body
     is now a list, not a single paragraph); vertically centred beside the image. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* 24px left/right insets on the center content: the map is positioned 24px in
     from the left edge, the copy is padded 24px from the right edge, and the
     left padding (24 inset + 120 image + 20 gap = 164) keeps the text clear of
     the image. */
  background: url(/../images/tour-map-dark.png) no-repeat 24px center/120px 120px;
  min-height: 120px;
  padding-left: 164px;
  padding-right: 24px;
  text-align: left;
  max-width: none;
  margin: 0;
}

/* Gentle welcome — same map-beside-copy layout as Focused above, but with the
   light map artwork. `:not(.md-tour__step--focused)` scopes it to Gentle and
   keeps specificity level with the Focused selectors so neither wins by accident.
   Give the content the extra height + column flow so the body holds the image. */
.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-content {
  /* 20% taller than the prior 345px (the content min-height is what drives the
     welcome card's height — the natural content sits right around it). */
  min-height: 414px;
  display: flex;
  flex-direction: column;
}

.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-text {
  position: relative; /* anchor the badge pseudo-elements */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
  padding-left: 164px;
  padding-right: 24px;
  text-align: left;
  max-width: none;
  margin: 0;
}

/* Circular teal→blue gradient badge behind the light map. A linear gradient
   can't be clipped to a circle as a background layer, so the disc is a ::before
   (border-radius:50%, light teal → light blue) and the map is the ::after on top
   — both pinned at the 24px-left, vertically-centred 120px spot. ::after is
   declared last so it paints above the disc. (The welcome's CARD ::after is
   hidden elsewhere; this is .shepherd-text::after, a separate element.) */
.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-text::before,
.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-text::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translateY(-50%);
}

.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-text::before {
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.26), rgba(58, 107, 199, 0.26));
}

.shepherd-element.md-tour__step--welcome:not(.md-tour__step--focused) .shepherd-text::after {
  background: url(/../images/tour-map-light.png) no-repeat center/120px 120px;
}

/* Cancel (X) — canonical light-modal close chip (matches
   .subscribe-modal-header__close): surface-300 circle, navy
   hairline, hover lifts. Smaller than the 48px modal version
   since this is a popover. */
.shepherd-element .shepherd-cancel-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* Glassy translucent close chip — softer + more on-brand than the
     stark grey system circle: frosted white fill, faint white edge,
     muted ink, gentle shadow. Sized larger (40px) so it's an easy hit
     target on the tour / Getting Started modals. */
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: rgba(70, 80, 95, 0.52);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(22, 34, 70, 0.05);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.shepherd-element .shepherd-cancel-icon:hover {
  color: var(--md-ink, #111A2E);
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 16px rgba(22, 34, 70, 0.16);
}

/* Disabled close (X) — the Dashboard Design modal blocks dismissal until at least
   one element is selected for the chosen layout. Dim + inert; the extra class
   out-specifies the :hover lift above so it can never read as interactive. */
.shepherd-element .shepherd-cancel-icon.md-ds-cancel--blocked,
.shepherd-element .shepherd-cancel-icon.md-ds-cancel--blocked:hover {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: 0 1px 3px rgba(22, 34, 70, 0.05);
  background-color: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(70, 80, 95, 0.52);
}

/* Arrow — enlarged + recessed "notch" pointer. Bigger than Shepherd's
   default 16px (now 20px, re-offset to -10px per placement) so the
   pointer is clearly visible, with a cool tinted fill + an inset shadow
   that makes it read as an indent carved INTO the surface rather than a
   flat glass tab. Stronger hairline so the notch edges stay crisp. The
   per-placement offset overrides match our app.css source order so they
   win over Shepherd's vendor -8px rules at equal specificity. */
.shepherd-element .shepherd-arrow,
.shepherd-element .shepherd-arrow:before {
  width: 20px;
  height: 20px;
}

.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
  bottom: -10px;
}

.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
  top: -10px;
}

.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
  right: -10px;
}

.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
  left: -10px;
}

/* Breathing room between the popover and the element it points at — a 16px gap
   applied per placement so a clear band of the dark overlay sits between the
   spotlit target and the popover (element → dark scrim → popover).
   floating-ui anchors the popover by its computed `top`/`left`, so ONLY a margin
   on that anchored edge actually shifts it: `bottom`/`right` placements push
   away with a positive margin-top/-left, while `top`/`left` placements (anchored
   at the edge NEAREST the target) must pull away with a NEGATIVE margin on the
   same anchored edge. (A `margin-bottom`/`margin-right` here is a no-op — the
   opposite edge is `auto` — which is why top/left popovers used to sit tighter
   than bottom/right. All four now yield the same 16px gap.) */
.shepherd-element[data-popper-placement^=top] {
  margin-top: -16px;
}

.shepherd-element[data-popper-placement^=bottom] {
  margin-top: 16px;
}

.shepherd-element[data-popper-placement^=left] {
  margin-left: -16px;
}

.shepherd-element[data-popper-placement^=right] {
  margin-left: 16px;
}

/* Navbar steps (header overview + per-item) sit just under the fixed top bar —
   drop them lower (16 → 40) so the popover clears the bar with more air. */
.shepherd-element.md-tour__step--navbar[data-popper-placement^=bottom] {
  margin-top: 40px;
}

/* The whole-toolbar OVERVIEW card sits 16px higher than the per-item ones. */
.shepherd-element.md-tour__step--navbar-overview[data-popper-placement^=bottom] {
  margin-top: 24px;
}

.shepherd-element .shepherd-arrow:before {
  background: rgba(238, 242, 249, 0.95);
  border: 1px solid rgba(86, 110, 180, 0.32);
  box-shadow: inset 0 0 7px rgba(22, 34, 70, 0.2);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

/* — Tour spotlight glow — every step tags its highlighted element with
   `.shepherd-target`. A soft denim→verdigris glow behind it adds emphasis
   to the item being demonstrated. Uses `filter: drop-shadow` (not
   box-shadow): it follows the element's rounded shape, layers OVER targets
   that already carry their own box-shadow (e.g. nav pills), and is never
   clipped by an ancestor's overflow. The glow reads brightest inside the
   modal-overlay spotlight opening and softly fades into the surrounding
   scrim. No position/z-index change, so it can't disturb the target's
   layout or get trapped below the body-level overlay.

   `:not(body)` is REQUIRED: for a CENTERED step (welcome/outro, no attachTo)
   Shepherd falls back to `this.target || document.body` and tags `<body>`
   itself with `.shepherd-target` (shepherd.js setupTooltip → showStep). A
   `filter` on `<body>` blanks the whole page on any route whose body has an
   opaque background (e.g. /board-picker) — Chrome stops propagating the body
   background to the canvas and the white body box paints over everything. The
   glow on body is invisible anyway (it sits behind the dark modal overlay), so
   excluding body costs nothing and prevents the white-out. */
.shepherd-target:not(body) {
  /* Soft WHITE-ish highlight glow with only a faint teal hint (was a fuller
     verdigris, which read as too much teal). Two tight layers of a near-white
     teal-white against the dark scrim — bright + clean, clearly a highlight but
     no longer a saturated teal halo. (padding is 0, so the glow sits on the
     overlay.) */
  filter: drop-shadow(0 0 4px rgba(224, 247, 244, 0.95)) drop-shadow(0 0 12px rgba(214, 244, 240, 0.6));
}

/* — Tour active-pill spotlight — while a per-page step highlights a nav
   pill, Shepherd tags that pill with `.shepherd-target`. Mirror the
   `.md-pillnav__pill.is-active` treatment onto it so the showcased page
   reads as "active" as the user moves through the tour. This is a purely
   visual cue (home-tour.js never changes tabs). The :has() rule then
   neutralises the genuinely-active pill for the duration, so exactly one
   pill looks active at a time. (:has() is already used elsewhere in this
   file — e.g. the recolor-board modal.) */
.md-pillnav__pill.shepherd-target {
  background: linear-gradient(135deg, #46505F 0%, #1B365D 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.3), 0 6px 16px rgba(27, 54, 93, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.md-pillnav:has(.md-pillnav__pill.shepherd-target) .md-pillnav__pill.is-active:not(.shepherd-target) {
  background: transparent;
  /* matches the inactive .md-pillnav__pill muted ink — literal rgba used
     there, since no muted-ink token is defined for it. */
  color: rgba(75, 78, 92, 0.85);
  box-shadow: none;
}

/* — Motion polish — all opt-in (prefers-reduced-motion: no-preference).
   IMPORTANT: entrance animates the INDEPENDENT `translate`/`scale` CSS
   properties, NOT `transform`. Attached steps are positioned by Popper
   via an inline `transform`; animating `transform` here would clobber
   that and break tooltip placement. `translate`/`scale` compose on top,
   and the centered intro/outro steps (positioned via margin-top) are
   unaffected either way. */
@media (prefers-reduced-motion: no-preference) {
  /* NOTE: the per-step card entrance is intentionally NOT a keyframe animation.
     A slide/scale entrance (the old `md-tour-step-in`) reads as too much motion
     for AAC users, and its `fill:both` held opacity:1 which blocked the fade-out.
     The card now gently FADES out (old) and FADES in (new) via opacity transitions
     only — driven by guided-tour.js (hide hook + reveal) and the `.shepherd-element`
     opacity transition above. No translate/scale. */
  /* The intro illustration + orb glow drifts very slowly (ambient). */
  .shepherd-element.md-tour__step--intro::after {
    animation: md-tour-orb-drift 6s ease-in-out infinite alternate;
  }
  /* Active progress dot breathes (glow swells), reinforcing "live". */
  .shepherd-footer .md-tour__progress-dot.is-active {
    animation: md-tour-dot-pulse 2.4s ease-in-out infinite;
  }
  /* Eyebrow pill + heading slide in FROM THE LEFT on the centered
     intro/outro steps — the SAME keyframe the dashboard hero uses
     (la-hero-title-from-left: translateX(-36px) + fade), same 1s easing,
     with a short cascade so the eyebrow leads the heading. opacity:0 and
     the animation live together INSIDE this no-preference block, so
     reduced-motion users keep both fully visible with no animation. */
  .shepherd-element.md-tour__step--intro .md-tour__eyebrow {
    opacity: 0;
    animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
  }
  .shepherd-element.md-tour__step--intro .md-tour__heading {
    display: inline-block;
    /* inline-block sizes to its content (one line) — cap it to the card so a long
       heading wraps inside the popover instead of forcing it wider than the card
       (and off-screen) on narrow viewports. */
    max-width: 100%;
    opacity: 0;
    animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.24s forwards;
  }
}
@keyframes md-tour-orb-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: -6px 5px;
  }
}
@keyframes md-tour-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(140, 156, 196, 0.26), 0 0 0 4px rgba(140, 156, 196, 0.1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(140, 156, 196, 0.2), 0 0 0 6px rgba(140, 156, 196, 0.06);
  }
}
/* — Modal overlay — the dim is an SVG <path> (default black fill)
   rendered at the container's opacity. We tint it NAVY instead of
   black for a cinematic "paused" feel, and lift opacity to .5.
   Overriding `fill` on the path is a genuinely new rule (the element
   ships with no fill of its own — browser default black). */
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  opacity: 0.58;
}

.shepherd-modal-overlay-container path {
  fill: #111b3a;
}

/* — Tour makes the page INERT — only the popover buttons are clickable —
   While a guided-tour STEP is showing, nothing in the app shell may be clicked;
   the tour is driven solely by the popover's Back/Next/Skip. This is REQUIRED:
   Shepherd's modal overlay is visual only (pointer-events:none), and
   `canClickTarget:false` merely sets pointer-events:none on the spotlit target —
   which makes a click on it fall THROUGH to whatever sits behind (e.g. a
   board-picker card's pick_board → navigates into the board mid-tour, the exact
   bug this fixes). Block the whole ember root (#within_ember); Shepherd portals
   the popover + overlay to <body> OUTSIDE that root, so they stay live. The final
   live board-picker MODAL opens AFTER the tour completes (no .shepherd-enabled
   step), so it is unaffected. Applies to every tour built on this runner. */
body:has(.shepherd-element.shepherd-enabled) #within_ember {
  pointer-events: none;
}

/* Belt-and-suspenders: keep the popover interactive even if a future change
   portals it inside the root (pointer-events:auto on a descendant is hit-tested
   regardless of an ancestor's `none`). */
body:has(.shepherd-element.shepherd-enabled) .shepherd-element,
body:has(.shepherd-element.shepherd-enabled) .shepherd-element * {
  pointer-events: auto;
}

/* "Paused" background blur — scoped to the centered intro/outro steps
   only (body.md-tour--centered-step is toggled in home-tour.js). The
   attached steps (2-7) cut a spotlight hole in the overlay; blurring
   the whole SVG box there would also blur the highlighted card, so we
   deliberately leave those crisp and only soften the background for
   the full-screen intro/outro modals. */
body.md-tour--centered-step .shepherd-modal-overlay-container.shepherd-modal-is-visible {
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

/* System settings (emails + features) */
.la-system-settings__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--md-ink, #111A2E);
}

.la-system-settings__org-row {
  margin-bottom: 20px;
}

.la-system-settings__org-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}

.la-system-settings__org-select {
  width: 100%;
}

.la-system-settings__tabs {
  margin-bottom: 24px;
}

.la-system-settings__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.la-system-settings__search-label,
.la-system-settings__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.la-system-settings__search-label {
  flex: 1 1 220px;
}

.la-system-settings__search-input {
  width: 100%;
}

.la-system-settings__label-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-muted, #1B365D);
}

.la-system-settings__table {
  font-size: 1rem;
}

.la-system-settings__link {
  font-weight: 600;
}

.la-system-settings__textarea {
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  margin-bottom: 16px;
}

.la-system-settings__field {
  margin-bottom: 16px;
}

.la-system-settings__input {
  max-width: 640px;
}

.la-system-settings__tab {
  margin-right: 8px;
  margin-bottom: 8px;
}

.la-system-settings__tab--active {
  font-weight: 700;
}

.la-system-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.la-system-settings__scope-badge {
  margin: 0 0 1rem;
}

.la-system-settings__hint {
  font-size: 1rem;
  color: var(--md-muted, #1B365D);
  margin-bottom: 16px;
}

.la-system-settings__feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.la-system-settings__feature-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.la-system-settings__feature-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.la-system-settings__feature-key {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--md-muted, #1B365D);
}

.la-system-settings__feature-desc {
  font-size: 1rem;
  margin: 4px 0 8px;
  color: var(--md-muted, #1B365D);
}

.la-system-settings__preview {
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

.la-system-settings__preview-text {
  white-space: pre-wrap;
  font-size: 1rem;
  max-height: 320px;
  overflow: auto;
}

.la-system-settings__vars code {
  font-size: 1rem;
}

.la-system-settings__vars-heading {
  font-size: 1.15rem;
  margin: 1.25rem 0 0.5rem;
}

.la-system-settings__vars-detail {
  margin: 0 0 1rem;
}
.la-system-settings__vars-detail dt {
  font-size: 1rem;
  margin-top: 0.75rem;
}
.la-system-settings__vars-detail dd {
  font-size: 1.05rem;
  margin: 0.25rem 0 0 0;
}