/*
 * 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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  color: #6B7280;
}

.evq-card__link {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: #1A7B7A;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.evq-card__link:hover:not(:disabled) {
  text-decoration: none;
}
.evq-card__link:disabled {
  color: #6B7280;
  cursor: default;
  text-decoration: none;
}
.evq-card__link:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}

.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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
}

.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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  font-weight: 600;
}

.evq-report--full {
  margin: 0 0 28px;
}

.evq-report--full .evq-report__targeted-title,
.evq-report--full .evq-report__goals-title,
.evq-report--full .evq-report__missing-title {
  margin-top: 0;
}

.evq-report__modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.evq-report__mode-note {
  margin: 0;
  max-width: 68ch;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.72);
}

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

.evq-report__features-table {
  margin: 14px 0 0;
  background: #fff;
  font-size: 14px;
}
.evq-report__features-table th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(27, 54, 93, 0.65);
}

.evq-report__feature-label {
  font-weight: 700;
  color: #1B365D;
  white-space: nowrap;
}

.evq-report__feature-value {
  font-weight: 600;
  color: rgba(27, 54, 93, 0.88);
}

.evq-report__feature-evidence {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
}

.evq-workbook {
  display: block;
  background: rgba(242, 185, 90, 0.08);
  border: 1px solid rgba(242, 185, 90, 0.32);
  border-left: 3px solid #F2B95A;
  border-radius: 10px;
  overflow: hidden;
}

.evq-workbook__toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.evq-workbook__toggle:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: -3px;
}

.evq-workbook__toggle-text {
  flex: 1 1 auto;
  min-width: 0;
}

.evq-workbook__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
}

.evq-workbook__count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}

.evq-workbook__subtitle {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.72);
}

.evq-workbook__chevron {
  flex: 0 0 auto;
  margin-top: 2px;
  color: rgba(27, 54, 93, 0.55);
  transition: transform 0.15s ease;
}
.evq-workbook--open > .evq-workbook__toggle .evq-workbook__chevron {
  transform: rotate(180deg);
}

.evq-workbook__body {
  display: none;
  padding: 0 20px 18px;
  flex-direction: column;
  gap: 8px;
}
.evq-workbook--open > .evq-workbook__body {
  display: flex;
}

.evq-workbook__readonly {
  margin: 0 0 6px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.78);
}

.evq-workbook__section {
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.evq-workbook__section--open {
  border-color: rgba(42, 157, 143, 0.35);
}

.evq-workbook__section-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.evq-workbook__section-toggle:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: -3px;
}
.evq-workbook__section-toggle .evq-workbook__chevron {
  margin-top: 0;
}
.evq-workbook__section--open .evq-workbook__section-toggle .evq-workbook__chevron {
  transform: rotate(180deg);
}

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

.evq-workbook__section-badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
}
.evq-workbook__section-badge--empty {
  background: rgba(27, 54, 93, 0.06);
  color: rgba(27, 54, 93, 0.55);
}

.evq-workbook__section-body {
  display: none;
  padding: 0 14px 14px;
  flex-direction: column;
  gap: 12px;
}
.evq-workbook__section--open > .evq-workbook__section-body {
  display: flex;
}

.evq-workbook__section-hint {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.65);
}

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

.evq-workbook__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.evq-workbook__label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 54, 93, 0.6);
}

.evq-workbook__input {
  width: 100%;
  padding: 10px 12px;
  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;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.evq-workbook__input--long {
  resize: vertical;
  min-height: 90px;
}
.evq-workbook__input:focus, .evq-workbook__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-workbook__input:disabled {
  background: rgba(27, 54, 93, 0.03);
  color: rgba(27, 54, 93, 0.55);
  cursor: not-allowed;
}

.evq-workbook__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evq-workbook__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: rgba(27, 54, 93, 0.02);
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 8px;
}

.evq-workbook__row-remove,
.evq-workbook__add-row {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: #1A7B7A;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.evq-workbook__row-remove:hover,
.evq-workbook__add-row:hover {
  text-decoration: none;
}
.evq-workbook__row-remove:focus-visible,
.evq-workbook__add-row:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}

.evq-workbook__row-remove {
  align-self: end;
  padding-bottom: 10px;
  color: #C0392B;
}

.evq-workbook__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.evq-workbook__status {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
}
.evq-workbook__status--saved {
  color: #1A7B7A;
}
.evq-workbook__status--error {
  color: #C0392B;
}

@media print {
  .evq-report--full {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.25);
    break-inside: auto;
  }
  .evq-report__modes,
  .evq-report__actions,
  .evq-workbook__actions,
  .evq-workbook__add-row,
  .evq-workbook__row-remove,
  .evq-btn,
  .evq-card__link {
    display: none !important;
  }
  .evq-workbook__body {
    display: flex !important;
  }
  .evq-workbook__section--started > .evq-workbook__section-body {
    display: flex !important;
  }
  .evq-workbook__section:not(.evq-workbook__section--started) {
    display: none !important;
  }
  .evq-workbook__chevron,
  .evq-workbook__section-badge,
  .evq-workbook__section-hint,
  .evq-workbook__readonly,
  .evq-workbook__subtitle {
    display: none !important;
  }
  .evq-card,
  .evq-report__goals-cat,
  .evq-report__targeted-card,
  .evq-workbook__section,
  .evq-report__features {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .evq-workbook__input {
    border: 0 !important;
    padding-left: 0 !important;
  }
  .evq {
    min-height: 0 !important;
  }
}
.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, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !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: 60px 16px 0px !important;
  }
}
@media (max-width: 950px) {
  body.ll-layout-focused .md-shell--reports-view > .md-workspace {
    padding: 44px 16px 0px !important;
  }
}
body.ll-layout-focused .md-shell--reports-view .md-workspace > .md-pillnav {
  margin-top: 0 !important;
}

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

body.ll-layout-focused #within_ember #content.index.with_user.extras-page {
  background: var(--md-bg, #eef1f6) !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__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__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__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__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__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__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 oklab, color-mix(in oklch, #4C86D8, gray 22%) 90%, black) 0%, color-mix(in oklab, color-mix(in oklch, color-mix(in oklch, #4C86D8, gray 22%), black 14%) 90%, black) 100%) !important;
}
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__set-home-btn:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__set-home-btn:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__set-home-btn:focus-visible {
  background: linear-gradient(135deg, rgb(220.4914285714, 228.16, 235.8285714286) 0%, rgb(196.3555555556, 208.0844444444, 223.1644444444) 100%) !important;
  color: #1B365D !important;
  border-color: rgba(27, 54, 93, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14) !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: #1B365D !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: rgb(75, 78, 92) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-left: 1px solid rgba(27, 54, 93, 0.16) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li:first-child > a,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li:first-child > a {
  border-left-color: transparent !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li > a:hover,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__tabs--boards > li > a:focus-visible,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li > a:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li > a:focus-visible {
  background: rgba(0, 0, 0, 0.07) !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, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !important;
  color: #ffffff !important;
  border-left-color: transparent !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-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 {
  color: rgb(75, 78, 92) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-left: 1px solid rgba(27, 54, 93, 0.16) !important;
}
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:hover,
body.ll-layout-focused .md-user-summary .ub-boards-page__tabs--boards > li.dropdown > .dropdown-toggle:focus-visible {
  color: rgb(75, 78, 92) !important;
  background: rgba(0, 0, 0, 0.07) !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: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ll-layout-focused .md-shell--reports-view .report-kpi {
  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-color: rgba(76, 134, 216, 0.24) !important;
}
body.ll-layout-focused .md-shell--reports-view .report-trend,
body.ll-layout-focused .md-shell--reports-view .report-insights {
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 11%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 5%, white) 0%, color-mix(in oklch, #4C86D8 9%, white) 100%) !important;
  border-color: rgba(76, 134, 216, 0.18) !important;
}
body.ll-layout-focused .md-shell--reports-view .progress-highlight {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.55), rgba(188, 227, 221, 0.95) 58%, rgba(202, 219, 248, 0.95)) !important;
}
body.ll-layout-focused .md-shell--reports-view .progress-highlight--positive {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.55), rgba(168, 220, 211, 0.96) 58%, rgba(186, 230, 221, 0.95)) !important;
  border-color: rgba(42, 157, 143, 0.5) !important;
}
body.ll-layout-focused .md-shell--reports-view .progress-highlight--neutral {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.55), rgba(190, 213, 243, 0.96) 58%, rgba(205, 224, 249, 0.95)) !important;
  border-color: rgba(76, 134, 216, 0.42) !important;
}
body.ll-layout-focused .md-shell--reports-view .progress-highlight--negative {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.55), rgba(249, 206, 194, 0.96) 58%, rgba(251, 221, 211, 0.95)) !important;
  border-color: rgba(216, 77, 50, 0.44) !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-filter__compare,
body.ll-layout-focused .md-shell--reports-view .md-stats-filter__compare:hover,
body.ll-layout-focused .md-shell--reports-view .md-stats-filter__compare:focus-visible {
  background: linear-gradient(135deg, rgb(220.4914285714, 228.16, 235.8285714286) 0%, rgb(196.3555555556, 208.0844444444, 223.1644444444) 100%) !important;
  color: #1B365D !important;
  border: 1px solid rgba(27, 54, 93, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14) !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-main:not(:has(.communication-report)) .md-stats-main__focus-head {
  display: block !important;
}
body.ll-layout-focused .md-shell--reports-view .md-stats-main:not(:has(.communication-report)) .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, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !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-shell--caseload .md-pillnav__pill.active,
body.ll-layout-focused .md-shell--caseload .md-pillnav__pill.is-active {
  background: linear-gradient(135deg, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !important;
  border-color: rgba(76, 134, 216, 0.3) !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__hero {
  display: none !important;
}
body.ll-layout-focused .md-shell--caseload {
  padding-top: 0 !important;
}
body.ll-layout-focused #within_ember #content.modern-dashboard:has(.md-shell--caseload) {
  padding-top: var(--topbar-height) !important;
}
body.ll-layout-focused .md-shell--caseload > .md-workspace {
  padding-top: 32px !important;
  margin-top: 16px !important;
}
@media (max-width: 950px) {
  body.ll-layout-focused .md-shell--caseload > .md-workspace {
    margin-top: 0 !important;
  }
}
body.ll-layout-focused .md-shell--caseload .md-workspace > .md-pillnav {
  margin-top: 48px !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload {
  margin-top: 32px;
}
body.ll-layout-focused .md-shell--caseload .md-card--sup {
  padding-top: 0 !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-avatar {
  width: 72px;
  height: 72px;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-avatar--placeholder svg {
  width: 26px;
  height: 26px;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access.md-caseload__list-access--setup {
  color: #1B365D !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access.md-caseload__list-access--setup::before {
  background: #1B365D !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action {
  color: #0F172A !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-label {
  font-weight: 700;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action:not(.md-caseload__quick-action--empty) svg *:not([stroke=none]) {
  stroke: #0F172A !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--setup::before {
  background: currentColor !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access {
  min-height: 22px;
  padding: 0 8px;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-chevron,
body.ll-layout-focused .md-shell--caseload .md-caseload__list-chevron svg {
  color: #1B365D;
  stroke: currentColor;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-row::before {
  width: 8px;
  background: linear-gradient(180deg, rgb(33.6, 125.6, 114.4), rgb(41.7908256881, 103.9412844037, 191.8091743119)) !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-quick .md-caseload__quick-action:not(.md-caseload__quick-action--empty) svg *:not([stroke=none]) {
  stroke: currentColor;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-quick .md-caseload__quick-action:not(.md-caseload__quick-action--empty) svg *:not([fill=none]):not([fill]) {
  fill: none;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-quick .md-caseload__quick-action:not(.md-caseload__quick-action--empty) svg [fill]:not([fill=none]) {
  fill: currentColor;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--model {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #A1B9D8, #7D9EC7) !important;
  border-color: #547FB5 !important;
  color: #111A2E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(27, 54, 93, 0.1), 0 3px 7px rgba(27, 54, 93, 0.16) !important;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--model svg [stroke="#46505F"] {
  stroke: currentColor;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--model:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(27, 54, 93, 0.12), 0 5px 11px rgba(27, 54, 93, 0.22) !important;
  transform: none;
}
body.ll-layout-focused .md-caseload__list-quick .md-caseload__quick-action--speak:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #969FC3, #7681A9) !important;
  border-color: #57628B !important;
  color: #111A2E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 6px 12px rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(27, 54, 93, 0.14), 0 4px 10px rgba(27, 54, 93, 0.18) !important;
}
body.ll-layout-focused .md-caseload__list-quick .md-caseload__quick-action--speak:not(.md-caseload__quick-action--empty):hover {
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 7px 14px rgba(255, 255, 255, 0.36), inset 0 -2px 5px rgba(27, 54, 93, 0.16), 0 6px 14px rgba(27, 54, 93, 0.24) !important;
  transform: none;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--ideas:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #C7B891, #A99973) !important;
  border-color: #8C7C56 !important;
  color: #111A2E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 6px 12px rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(27, 54, 93, 0.14), 0 4px 10px rgba(27, 54, 93, 0.18) !important;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--ideas:hover:not(.md-caseload__quick-action--empty) {
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 7px 14px rgba(255, 255, 255, 0.36), inset 0 -2px 5px rgba(27, 54, 93, 0.16), 0 6px 14px rgba(27, 54, 93, 0.24) !important;
  transform: none;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--reports:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #91BBB5, #68988F) !important;
  border-color: #50756E !important;
  color: #111A2E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 6px 12px rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(27, 54, 93, 0.14), 0 4px 10px rgba(27, 54, 93, 0.18) !important;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--reports:hover:not(.md-caseload__quick-action--empty) {
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 7px 14px rgba(255, 255, 255, 0.36), inset 0 -2px 5px rgba(27, 54, 93, 0.16), 0 6px 14px rgba(27, 54, 93, 0.24) !important;
  transform: none;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--choose-board {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #A1B9D8, #7D9EC7) !important;
  border-color: #547FB5 !important;
  color: #111A2E !important;
  color: #1B365D !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(27, 54, 93, 0.1), 0 3px 7px rgba(27, 54, 93, 0.16) !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--choose-board:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(27, 54, 93, 0.12), 0 5px 11px rgba(27, 54, 93, 0.22) !important;
  transform: none;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--more:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 52%), linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(145deg, #B8C0CD, #98A3B3) !important;
  border-color: #76859A !important;
  color: #111A2E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 6px 12px rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(27, 54, 93, 0.14), 0 4px 10px rgba(27, 54, 93, 0.18) !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--more:hover:not(.md-caseload__quick-action--empty) {
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 7px 14px rgba(255, 255, 255, 0.36), inset 0 -2px 5px rgba(27, 54, 93, 0.16), 0 6px 14px rgba(27, 54, 93, 0.24) !important;
  transform: none;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--empty {
  --empty-tint: 72, 133, 170;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--empty.md-caseload__quick-action--speak {
  --empty-tint: 72, 112, 170;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--empty.md-caseload__quick-action--reports {
  --empty-tint: 104, 139, 116;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--empty.md-caseload__quick-action--ideas {
  --empty-tint: 153, 131, 89;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--empty.md-caseload__quick-action--more {
  --empty-tint: 110, 118, 133;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--view {
  background: rgba(27, 54, 93, 0.1) !important;
  border-color: rgba(27, 54, 93, 0.18) !important;
  color: #1B365D !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--setup {
  background: #D9E5F8 !important;
  border-color: #83A8DF !important;
  color: #234F9D !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--attention {
  background: #ECE1C8 !important;
  border-color: #C4B07E !important;
  color: #5F4B18 !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--attention svg,
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--attention svg * {
  stroke: #4A350A !important;
  color: #4A350A !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--edit {
  background: #D5E3E2 !important;
  border-color: #9AB8B5 !important;
  color: #315D5E !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--modeling {
  background: #D2DBF3 !important;
  border-color: #95ABE2 !important;
  color: #26407F !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-avatar {
  background: #F8F9FA !important;
  border-width: 3px !important;
  border-color: color-mix(in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%) 84%, white) 40%, white) !important;
  box-shadow: inset 0 0 0 3px color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, #E2E7EE 55%, black) 26%, color-mix(in oklab, color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) 40%, white)) 95%, white) !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-avatar--placeholder {
  background: radial-gradient(ellipse at center in oklab, rgb(238.36525, 241.685875, 246.33475) 0%, rgb(209.6831275, 218.72927125, 231.3938725) 100%) !important;
  color: #ffffff !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-avatar--placeholder svg * {
  stroke: #ffffff !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, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !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;
}

body.ll-layout-focused .md-grid.md-grid--hero-org .md-card.md-card--org-management {
  background: linear-gradient(180deg, rgb(224.86, 231.24, 239.6) 0%, rgb(202.94, 213.96, 228.4) 100%) !important;
}

body.ll-layout-focused .md-grid.md-grid--hero-org .md-card.md-card--caseload-as-button .md-card__icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !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;
}

body.ll-layout-focused .md-grid.md-grid--hero-org .md-card.md-card--caseload-as-button .md-card__icon > svg,
body.ll-layout-focused .md-grid.md-grid--hero-org .md-card.md-card--caseload-as-button .md-card__icon-glyph {
  width: 34px !important;
  height: 34px !important;
}

body.ll-layout-focused .md-card--org-management .md-room-card__icon {
  /* PLAIN url() FIRST as the fallback. `type()` inside image-set() needs Safari 17+ /
     Chrome 113+, and legacy -webkit-image-set() never supported type() at all — so on
     an older iPad or a pre-2023 Android WebView (a very common AAC device population)
     BOTH declarations below were dropped, the base rule's LIGHT artwork won, and
     `filter: none` still applied, stripping the saturate/brightness lift that light art
     was tuned with: exactly the washed-out tile the -dark variants exist to prevent.
     This also makes the PNG reachable at all — every engine that supports
     image-set()+type() also supports WebP, so the in-set PNG branch never wins. */
  background-image: url(/../images/organization-dark.png) !important;
  background-image: -webkit-image-set(url(/../images/organization-dark.webp) type('image/webp'), url(/../images/organization-dark.png) type('image/png')) !important;
  background-image: image-set(url(/../images/organization-dark.webp) type('image/webp'), url(/../images/organization-dark.png) type('image/png')) !important;
  filter: none !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--org-management .md-card__icon--org {
  /* PLAIN url() FIRST as the fallback. `type()` inside image-set() needs Safari 17+ /
     Chrome 113+, and legacy -webkit-image-set() never supported type() at all — so on
     an older iPad or a pre-2023 Android WebView (a very common AAC device population)
     BOTH declarations below were dropped, the base rule's LIGHT artwork won, and
     `filter: none` still applied, stripping the saturate/brightness lift that light art
     was tuned with: exactly the washed-out tile the -dark variants exist to prevent.
     This also makes the PNG reachable at all — every engine that supports
     image-set()+type() also supports WebP, so the in-set PNG branch never wins. */
  background-image: url(/../images/organizations-dark.png) !important;
  background-image: -webkit-image-set(url(/../images/organizations-dark.webp) type('image/webp'), url(/../images/organizations-dark.png) type('image/png')) !important;
  background-image: image-set(url(/../images/organizations-dark.webp) type('image/webp'), url(/../images/organizations-dark.png) type('image/png')) !important;
  filter: none !important;
}

body.ll-layout-focused .md-grid.md-grid--hero-org .md-card.md-card--org-management .md-room-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(237.9, 242.4, 250.5, 0.6) 0%, rgba(216.3, 223.5, 237.9, 0.55) 100%) !important;
}

/* Lift only — the surface itself does not change on hover, which is what makes
   these read as one material with the row buttons. */
/* Press settles the tile back down — same reading as the row's :active. */
/* 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. */
  /* Clearance for the FIXED navbar when an opened row is scrolled to the top
     (_scrollExpandedIntoView uses block: 'start'). This is only the FALLBACK:
     the controller measures the live header and overwrites scroll-margin-top
     inline, because no CSS token here reports the bar's real height —
     --topbar-height is 16px on authenticated layouts while the rendered bar is
     ~88px, which scrolled the card under the header and clipped its top.
     100px is a safe static approximation for the case where that measurement
     fails; erring high leaves a small gap rather than hiding the card header. */
  scroll-margin: 100px 0 20px;
  /* NO `overflow: hidden` here. It used to clip the flush left accent stripe to
     the card's rounded corners — the stripe now carries its own matching radius,
     so the clip is unnecessary AND harmful: it also clipped the locked buttons'
     upgrade tooltip, which has to escape below the row. */
  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;
  /* Lift off the tinted page: a directional shadow under the card's BOTTOM edge
     rather than an even halo, so the row reads as sitting on the surface behind
     it. Kept as a low-alpha NAVY rather than a light/white glow — the page
     behind is a cool grey, and a white shadow on grey renders as a pale smudge
     that reads like a rendering artefact instead of depth. Low alpha and a tight
     y-offset are what keep it from looking heavy on a light background; the
     inset white top rim is the light half of the same effect, catching the edge
     the shadow is falling away from. */
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 10px -4px rgba(27, 54, 93, 0.14), 0 10px 18px -12px rgba(27, 54, 93, 0.18);
  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;
  /* Rounds ITSELF to the row's left corners — this replaces the row's former
     `overflow: hidden`, which used to do the clipping. */
  border-radius: 12px 0 0 12px;
  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--highlighted::before,
.md-caseload__list-row:hover::before,
.md-caseload__list-row:has(:focus-visible)::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. */
/* Row layout — an explicit two-track arrangement, not "whatever the content
   does": IDENTITY (avatar + name + badges, absorbing all slack) then the ACTION
   TOOLBAR at its natural width. Because the toolbar is the same width in every
   row, pinning the slack to the identity side is what makes the toolbars start
   at the same x down the whole list, and it means a long communicator name
   ellipsises inside its own column instead of pushing the actions out of line.
   `flex-wrap` is kept so the toolbar drops to its own line AS A WHOLE when the
   row is genuinely too narrow — a grid track would have to overflow instead. */
.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). */
/* `:has(:focus-visible)`, NOT `:focus-within`. `:focus-within` is also true after a
   MOUSE click, and the More Actions button keeps focus when it is clicked — so
   collapsing a row left it stuck in the expanded/selected styling until focus moved
   elsewhere. `:focus-visible` is the browser's own "should this focus be shown"
   decision, which is exactly the keyboard case this rule was written for. */
.md-caseload__list-row--active,
.md-caseload__list-row--highlighted,
.md-caseload__list-row:hover,
.md-caseload__list-row:has(:focus-visible) {
  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);
}

/* Deep-link highlight — the row is NOT expanded (a modeling-only link, whose panel
   actions are gated), so the shared selected treatment above is all the row gets and
   there is nothing on screen to say "this is the one you came for". A single
   attention pulse on arrival does that, then settles into the plain selected look.
   One shot, not a loop: a persistent pulse next to real content is a distraction and
   an accessibility problem. Honoured only where motion is welcome — the
   prefers-reduced-motion block below drops it, leaving the static selected styling,
   which is already a sufficient non-motion cue. */
@keyframes md-caseload-highlight-pulse {
  0% {
    box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 0 0 1px rgba(42, 157, 143, 0.3), 0 0 0 0 rgba(42, 157, 143, 0.55);
  }
  100% {
    box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 0 0 1px rgba(42, 157, 143, 0.3), 0 0 0 14px rgba(42, 157, 143, 0);
  }
}
.md-caseload__list-row--highlighted {
  animation: md-caseload-highlight-pulse 1.1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .md-caseload__list-row--highlighted {
    animation: none;
  }
}
/* 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;
  /* No top padding: the panel opens directly under the header's hairline, and
     the ADDITIONAL ACTIONS block below carries its own leading space. */
  padding: 0 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;
  }
  /* Kill the MOTION, keep the STATE. The chevron still ends up rotated when the
     row is open — that flip is the visual half of aria-expanded, so removing it
     would cost information — but it snaps rather than springs. */
  .md-caseload__list-chevron {
    transition: none;
  }
  /* No hover translation anywhere in the caseload: the row buttons already hover
     with a tint instead of a lift, and these two families are the only remaining
     transform-on-hover surfaces. */
  .md-caseload__quick-action,
  .md-caseload__action--tile {
    transition: none;
  }
  .md-caseload__quick-action:hover,
  .md-caseload__action--tile:hover,
  .md-caseload__action--tile:focus-visible {
    transform: none;
  }
}
.md-caseload__list-trigger {
  /* Takes the row's slack (`1 1 auto`, was `0 1 auto`) so it acts as the
     identity column PLUS the flexible spacer, and the toolbar beside it keeps
     its natural width. `min-width: 0` lets it shrink below its content so a long
     name ellipsises here instead of shoving the actions rightward. */
  flex: 1 1 auto;
  min-width: 0;
  /* Explicit two-column grid — AVATAR | INFORMATION. A flex row would let the
     avatar's size vary the name's start position; fixed track + 12px gap means
     every communicator name in the list begins at exactly the same x. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* Column gap unchanged at 12px (avatar → name). Row gap is smaller and only
     ever applies when .md-caseload__list-status renders a second row; it matches
     the 9px `.md-caseload__list-name-row` uses between the name and its badge, so
     the badge block reads as one stack whichever row it lands on. */
  column-gap: 12px;
  row-gap: 9px;
  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;
}

/* Above the mobile breakpoint, make the trigger a pure flexible spacer: `flex-basis:
   0` instead of `auto`. A flex container collects items into lines using each item's
   HYPOTHETICAL main size, which for `basis: auto` is its max-content width — so with
   `auto` the trigger's own content could still be measured as wide enough to evict
   the quick-action toolbar to a second line, even after the status badges moved to
   their own grid row. At basis 0 the trigger contributes nothing to that decision:
   the toolbar keeps its natural width on row one and the trigger simply grows into
   whatever is left, which is exactly the "identity column PLUS flexible spacer" role
   the rule above already describes. The name ellipsises (it already does) and the
   badge rows wrap inside the space that remains.
   NOT applied at <=640px: there the toolbar is MEANT to drop to its own line (see the
   640px block below), and pinning it beside the name would crush both. */
@media (min-width: 641px) {
  .md-caseload__list-trigger {
    flex-basis: 0;
  }
}
.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 are the whole collapsed row — goals moved to the
   expanded panel, so this is the only block inside .md-caseload__list-identity.
   STACKED UP TO 1024px: the chip describes the person named above it, so it sits
   under the name rather than beside it, and no fixed-width name column is needed
   to keep the chips aligned. From 1025px the badges move BESIDE the name — see
   the min-width block below, which is where that fixed column comes back. */
.md-caseload__list-name-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 9px, was 3px — the badges were crowding the name. This gap is the ONLY
     spacing between them; `.md-caseload__list-identity`'s own `gap: 2px` does
     nothing, because this row is its only child. */
  gap: 9px;
  min-width: 0;
}

/* Name takes the identity's width and ellipsises rather than pushing the row
   wide; no fixed slot while the badges sit underneath it. */
.md-caseload__list-name-row .md-caseload__list-name {
  /* `min-width: 0` is what actually lets the box shrink inside its flex parent —
     without it a flex item refuses to go below its min-content width, which is
     the long-username overflow this rule exists to stop. */
  max-width: 100%;
  min-width: 0;
  /* `break-word`, not `anywhere`: the name carries explicit <wbr> break points
     after its separators (the `break-on-separators` helper — an underscore is not
     a break opportunity on its own, per UAX #14), and `anywhere` would let the
     browser fill greedily and split mid-word before reaching one. */
  overflow-wrap: break-word;
}

/* ≥1025px: badges move to the RIGHT of the name and line up in one column down
   the list. 1025 rather than 1024 so "1024 and smaller" keeps the stack.
   The alignment is the whole point, so the name needs a DEFINITE width — with
   `flex: 1` or auto the badges would start wherever each username happened to
   end, which is the ragged edge this layout exists to remove. 200px fits the
   common username at 15px/700 and ellipsises anything longer (the base rule
   above already handles that); short names simply leave the slot part-empty,
   which is what holds the column.
   Badges keep their own `flex-wrap`, so at the narrow end of this range a second
   badge drops to a new line INSIDE the badge column rather than pushing the row
   wide — still starting at the same x. */
@media (min-width: 1025px) {
  .md-caseload__list-name-row {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .md-caseload__list-name-row .md-caseload__list-name {
    flex: 0 0 200px;
    max-width: 200px;
  }
}
/* Badge row under the name — access level, then setup state when one applies.
   A wrapping row so a second badge sits BESIDE the first instead of starting a
   third line, and so a narrow column drops it cleanly rather than overflowing. */
/* STATUS BADGE ROW — the trigger's optional SECOND grid row ("Board needed",
   "<thing> needed"). Spans both tracks so it starts under the AVATAR, not indented
   under the name.
   WHY IT IS ITS OWN ROW: these badges used to sit beside the role badge inside
   `.md-caseload__list-name-row`. A flex container sizes its wrap decisions off each
   item's MAX-CONTENT width, and the trigger is a flex item of
   `.md-caseload__list-header` — so every extra badge widened the trigger's
   max-content and, past two badges, pushed the whole quick-action toolbar onto a
   second line. Moving them to their own grid row takes them out of that
   measurement, so the avatar/name/role line stays narrow and the toolbar keeps its
   place beside the name. */
.md-caseload__list-status {
  /* LEFT-ALIGNED, AND IN THE NAME'S TRACK — at every width (2026-08-16).
     This rule used to be `grid-column: 1 / -1` + `justify-content: flex-end`, which
     right-anchored the badges under the quick-action toolbar on full-size screens. The
     stated reason was that spanning from column 1 put them under the AVATAR, where
     left-aligned chips would float with nothing above them — but the fix for that is to
     stop spanning from column 1, not to push them to the far right. Column 2 is the
     name's own track, so they now sit directly beneath the username at every width and
     the two badge groups share one left edge instead of splitting to opposite margins.
     Every narrower breakpoint already did exactly this; only the full-size case was the
     odd one out, which is what made the alignment look inconsistent as the window grew.
     `grid-column: 2` auto-flows this to row 2 (641-768px re-places it into row 1 of a
     third track, and <=640px pins it to row 2 explicitly — both still left-aligned). */
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  /* Pulls the chip 4px left of the name's text edge so its rounded corner reads as
     flush with the name rather than inset by its own padding — the same nudge
     `.md-caseload__list-badges` carries, which is what lines the two groups up. */
  margin-left: -4px;
  /* Same gutter as the role badge row so both badge groups align. */
  gap: 10px;
  min-width: 0;
}

/* Collapse entirely when no status badge applies — most rows. `:empty` will not do:
   the template leaves whitespace and comment nodes inside the wrapper, so it is
   never truly empty. `:has()` tests for a real badge child instead, which also means
   adding a third status badge later needs no change here. Without this, every clean
   row would pay the grid's 9px row-gap for an invisible row. */
.md-caseload__list-status:not(:has(.md-caseload__list-access)) {
  display: none;
}

.md-caseload__list-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 10px, was 6px — the role badge now holds a fixed-width slot (see
     `--view/--edit/--modeling` below), so this gap is the visible gutter between
     two columns rather than incidental spacing between two chips. */
  gap: 10px;
  min-width: 0;
}

/* Stacked layout only: nudge the badges 4px left of the name's text edge so the
   chip's rounded corner reads as flush with the name rather than inset by its
   own padding. Scoped to <=1024px on purpose — from 1025px the badges sit in a
   fixed column beside the name, and a negative margin there would pull them out
   of the alignment that layout exists to create. */
@media (max-width: 1024px) {
  .md-caseload__list-badges {
    margin-left: -4px;
  }
  /* The `.md-caseload__list-status` override that used to live here — column 2,
     flex-start, -4px — was folded into the BASE rule on 2026-08-16, because those are
     now the values at EVERY width rather than a small-screen correction to a
     right-anchored default. Restating them here would be two rules that only happen to
     agree. See the base rule for the reasoning. */
}
/* (The avatar row-span that used to live here is now on the base rule.) */
/* <=768px ($aac-breakpoint-md): role badge AND status badges share the username's line,
   and the quick-action toolbar takes the next row on its own.
   The base layout keeps `.md-caseload__list-status` on its own full-width grid row
   specifically so extra badges cannot inflate the trigger's max-content width and shove
   the toolbar onto a second line (see the long note on that rule). At this width the
   toolbar is on its own line BY DESIGN, so that trade-off no longer applies and the
   badges can rejoin the name — which keeps the identity, role and any alert readable as
   one statement instead of spread over two lines in a narrow column.
   Rather than reordering the DOM, the trigger's grid gains a third track and the status
   block is placed into row 1 beside the identity. */
@media (max-width: 768px) {
  /* The base layout stacks the role badge UNDER the name (only >=1025px puts them on one
     line). Both stacked variants exist to protect the shared line with the toolbar — which
     is not shared at this width — so the name and its role badge go back onto one line.
     No fixed 200px name slot like the >=1025px rule: that exists to align badges into a
     column down the list, and there is not enough width here to spend on alignment. */
  .md-caseload__list-name-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .md-caseload__list-name-row .md-caseload__list-name {
    flex: 0 1 auto;
  }
  /* Full-width flex item — the toolbar always breaks to its own row here rather than
     only when the badges happen to push it. `margin-left: auto` on the base rule
     resolves to 0 once this item owns the whole line, so the buttons stay right-aligned
     via the toolbar's own `justify-content: flex-end`. */
  .md-caseload__list-header > .md-caseload__list-quick {
    flex: 0 0 100%;
  }
}
/* 641-768px: enough width for the attention/status badges to join the username line too,
   so identity, role and any alert read as one statement. A third grid track carries them,
   which avoids reordering the DOM. */
@media (max-width: 768px) and (min-width: 641px) {
  .md-caseload__list-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .md-caseload__list-status {
    grid-column: 3;
    grid-row: 1;
    /* Left-aligned now: it sits directly after the role badge on a shared line, so the
       right-anchoring the full-width row needed would open a gap mid-sentence. */
    justify-content: flex-start;
  }
}
/* <=640px: the alert badges drop BELOW the username. There is no longer room to carry
   name + role + "<thing> needed" on one line — the badge would squeeze the name to a few
   ellipsised characters — so it takes the row underneath.
   `grid-column: 2` (not the base's `1 / -1`): under the NAME, indented past the avatar,
   so it reads as belonging to the username rather than floating under the portrait. The
   trigger keeps its base two-track grid here, since the third track above is bounded to
   641px and up; placing the item in column 2 auto-flows it to row 2.
   Range-bounded against the block above rather than relying on source order — the same
   convention the gap rules in this file already follow. */
@media (max-width: 640px) {
  /* (Avatar row-span now on the base rule — it applies here too.) */
  .md-caseload__list-status {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
}
.md-caseload__list-access {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* 12px/650 with a 24px box: the old 11px/700 pill was below the size floor
     these badges are meant to be read at, and a badge that states a REQUIRED
     next step has to be legible at a glance. */
  min-height: 24px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}

.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);
}

/* ROLE SLOT — the three access badges share one width so whatever follows them
   ("Board needed") starts at the same x on every row. Without this the setup
   badge began wherever each role word happened to end, and the roles differ by
   ~15px ("Viewer"/"Editor" vs "Modeling"), so the column read as ragged down
   the list.
   Applied to the three ROLE variants only, never to `.md-caseload__list-access`
   itself — the setup badge shares that base class and must stay sized to its
   own text.
   `min-width`, not `width`: these are i18n strings across 13 locales, and a hard
   width would clip or overflow the first locale whose word is longer than
   English's. 84px fits "Modeling" — the longest English role, ~55px rendered at
   12px/650, plus 4px padding and 2px border — with ~23px of headroom for
   translations; a longer one simply grows the badge and loses alignment on that
   row rather than breaking the layout.
   Text is centred because at a shared width a left-aligned "Viewer" reads as a
   mis-sized pill rather than a deliberate column. */
.md-caseload__list-access--view,
.md-caseload__list-access--edit,
.md-caseload__list-access--modeling {
  min-width: 84px;
  justify-content: center;
  /* 2px sides, against the base badge's 9px. At the common labels this changes
     nothing visible — the 84px slot above already sets the width and the text is
     centred inside it — but it widens the text's room BEFORE the badge is forced
     past 84px, so more locales stay in the aligned column. */
  padding-left: 2px;
  padding-right: 2px;
}

/* "Board needed" — the textual half of the Choose Board signal, so the priority
   action is identifiable without perceiving its teal fill.
   Ink is #12615F, not the specified #1A7B7A: measured, #1A7B7A on this tint is
   4.54:1 over white but only 4.27:1 once the row carries its hover/selected
   verdigris wash — under the 4.5:1 floor exactly when a supporter is pointing at
   the row. #12615F measures 6.6:1 over white and 6.2:1 over the washed row, so it
   holds in every row state. Same hue, same badge, darker ink — which is the
   adjustment the brief calls for when the tint does not clear the ratio. */
.md-caseload__list-access--setup {
  color: #12615F;
  /* The Model button's denim ramp, poured lighter (.14/.20 against its
     .22/.30): the badge is a STATUS, so it should read as the quietest member
     of the row's material family, not as another control. */
  background: linear-gradient(160deg, rgba(76, 134, 216, 0.14) 0%, rgba(76, 134, 216, 0.2) 100%);
  border-color: rgba(26, 123, 122, 0.28);
  /* Room for the action dot, which is drawn as a ::before rather than added to
     the markup — it is pure decoration, and a text node or an <img> here would
     land inside the row trigger's accessible name. The label already says
     "Board needed". */
  gap: 7px;
}

.md-caseload__list-access--setup::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2A9D8F;
  /* The glow: two rings of the same verdigris, tight then soft, dialled back
     from the first pass so the dot reads as lit rather than as a lamp. Static —
     no pulse. A repeating animation on a status that can persist for weeks
     becomes noise, it is a known vestibular trigger, and the brief rules it
     out; the dot earns attention by being the only glowing element in the row. */
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.16), 0 0 4px 0 rgba(42, 157, 143, 0.38);
}

/* ACTION REQUIRED — the row-level attention badge (utils/dashboard_sections
   #attentionBadgeFor, rendered in templates/caseload.hbs). Wears the same badge
   chassis as the others (.md-caseload__list-access above), so only the colour
   family and the glyph differ.
   AMBER, not the setup badge's teal: both can appear on the SAME row, and a
   shared colour would make two different asks read as one repeated notice. The
   fill is the Ideas button's fawn ramp poured lighter (.16/.24 against its
   .16/.26) — the same "a badge is a STATUS, not a control" move --setup makes
   with the Model button's denim.
   Ink #6B4E0E measures 6.51:1 on the darkest stop (#F2EBDF over the white row).
   Re-measure if either the ramp or the ink moves; the ink does NOT follow the
   fill automatically. */
.md-caseload__list-access--attention {
  color: #6B4E0E;
  background: linear-gradient(160deg, rgba(201, 173, 122, 0.16) 0%, rgba(201, 173, 122, 0.24) 100%);
  border-color: rgba(107, 78, 14, 0.26);
  /* Close to --setup's 7px so a row carrying BOTH badges spaces them alike; 6px
     because the glyph is optically wider than that badge's 7px dot.
     No ::before dot here — this badge ships a real warning glyph in the markup,
     since "action required" needs a recognisable shape rather than a colour cue
     alone (a dot would leave amber-vs-teal as the only signal, which is exactly
     the distinction a red/green-deficient user cannot make). */
  gap: 6px;
}

/* Inherits `currentColor` from the badge, so the glyph can never drift from the
   ink the contrast above was measured against. */
.md-caseload__list-access-icon {
  flex: none;
  display: block;
}

.md-caseload__list-quick {
  /* Holds the full action set. `0 1 auto` (was `1 1 auto`): the identity column
     now absorbs the row's slack, so this toolbar sits at its natural width —
     the same width in every row, and therefore STARTING at the same x in every
     row. It must stay SHRINKABLE (the 1) and `min-width: 0`, or at narrow
     widths it would hold max-content and push the page into horizontal scroll
     instead of letting its own buttons wrap. As a single flex item it still
     drops to its own line as a WHOLE when the row is too narrow. */
  flex: 0 1 auto;
  min-width: 0;
  /* RIGHT-ALIGN WHEN WRAPPED. Enough badges on the identity line (e.g. an access
     badge + "Board needed" + an attention badge) push this toolbar onto its own
     line, where it would otherwise start hard against the left edge and read as a
     detached second row. `auto` pins it to the right instead, so it stays visually
     tied to the row above.
     Deliberately `margin-left` and NOT `align-self`/`justify-content` on the
     parent: on the SHARED line the identity column is `flex: 1 1 auto` and already
     eats every pixel of slack, so this auto margin resolves to 0 and the
     single-line layout — including the "same starting x in every row" alignment
     the note above depends on — is completely unchanged. It only has room to act
     on a line where this toolbar is the sole item. */
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  /* 11px, was 7px — with each rank now carrying its own tint, the buttons need a
     wider gutter to read as five separate controls rather than one banded strip.
     The <=640px rule below keeps its tighter 3px: at icon-only width the tiles
     are 44px and the row cannot afford the same air. */
  gap: 11px;
}

/* <=1024px: open the gutter to 14px. Below the desktop breakpoint the toolbar
   wraps onto its own line under the identity block, so it has the full row width
   to spend and the buttons can breathe.
   The range is bounded at 641px ON PURPOSE rather than written as a bare
   `max-width: 1024px`. The `<=640px` block further down sets `gap: 3px` for the
   icon-only 44px tiles, and a bare max-width rule here would tie it at (0,1,0)
   and be decided by source order alone — the same fragility that produced the
   Model press-state bug. Bounding the range makes the two mutually exclusive, so
   neither can override the other however the file is later reordered. */
@media (max-width: 1024px) and (min-width: 641px) {
  .md-caseload__list-quick {
    gap: 14px;
  }
}
/* Size to the label, don't stretch: the old `flex: 1 1 auto` + 92px clamp both
   grew buttons to fill a wrapped row AND clipped the longer captions once the
   label went to 14px. Heights are equal because the base sets min-height. */
.md-caseload__list-quick .md-caseload__quick-action {
  flex: 0 1 auto;
  min-width: 86px;
  max-width: none;
}

/* 641-768px: the toolbar owns its own full-width row here (see the <=768px block
   above), so the buttons SHARE that row equally instead of bunching at the right
   and leaving the left half empty. `flex-basis: 0` — not `auto` — is what makes the
   widths equal: with `auto` each tile would keep its label's natural width and only
   split the leftover, so "Modelling Ideas" would end up far wider than "Model".
   The 86px floor above still applies, so they wrap rather than squeeze if a row ever
   cannot fit them.
   RANGE BOUNDED AT 641 ON PURPOSE, matching the convention this file already sets for
   the gap rules: below 640 the toolbar is a deliberately different thing — icon-only
   44px tiles with labels hidden and Model/Reports dropped entirely — and stretching
   those would undo that design. Bounding makes the two mutually exclusive rather than
   leaving it to source order.
   SPECIFICITY (0,3,0) via the `.md-caseload__list-header` ancestor, rather than relying
   on source order: three tiles (`--model`, `--choose-board`, `--ideas`) are pinned to a
   definite `flex: 0 0 86px` FURTHER DOWN this file at (0,2,0), so an equal-specificity
   rule here loses to them and the row stretches unevenly — measured 86px for Model and
   Modelling Ideas against 155px for the rest. That 86px pin exists to hold the leading
   slot at one size down the list; equal `flex: 1 1 0` slots preserve that alignment on
   its own, because every row divides the same width by the same number of tiles. */
@media (max-width: 768px) and (min-width: 641px) {
  /* EQUAL GRID COLUMNS, not `flex: 1 1 0`. Flex was the obvious first move and it did
     fill the row, but not evenly: with every tile resolving to an identical
     `basis=0 grow=1 min=86px`, free-space distribution still produced 130px tiles beside
     a 118px one. `grid-auto-columns: 1fr` states the intent directly — one row, N equal
     columns — and cannot drift.
     The row is a fixed, small set of actions at this width, so losing flex's wrapping is
     not a real loss; the tiles have room to spare (~127px each against an 86px floor). */
  .md-caseload__list-header > .md-caseload__list-quick {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action {
    /* Grid items default to `min-width: auto`, which would let a long caption push its
       column past its 1fr share and unbalance the set again. */
    min-width: 0;
  }
}
/* Every tile whose label is too long for one line at the row's width is pinned
   to the same DEFINITE 86px basis — what Note measures — so the row stays one
   grid of equal tiles instead of a set of differently-sized buttons.
   `min-width: 86px` alone was NOT enough: `flex: 0 1 auto` resolves its base size
   from max-content, and the max-content of a wrapping label is still its full
   unwrapped line — so "Choose Board" sized itself to ~118px on one line and only
   shrank if the row ran out of room. A definite basis is what actually makes the
   label wrap instead of widening the slot.
   Model is here because it shares the leading slot with Choose Board (the two
   branches of "does this communicator have a home board yet") and that slot has
   to be one size down the whole list. */
.md-caseload__list-quick .md-caseload__quick-action--model,
.md-caseload__list-quick .md-caseload__quick-action--choose-board,
.md-caseload__list-quick .md-caseload__quick-action--ideas {
  flex: 0 0 86px;
}

/* Choose-Board slot — shown in place of Model when a communicator has no home
   board yet. It is the row's PRIMARY action (denim tile, above) because it is
   constructive: it sets the communicator up. Deliberately NOT dashed, coral or
   haloed any more — a dashed edge plus an inner outline plus a coloured glow
   read as three borders on one control. */
/* 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 {
  /* Unavailable, not merely faded: a distinct surface, border and ink rather
     than opacity — opacity alone dims the LABEL as much as the chrome and can
     drop it under the contrast floor. The element keeps its `title`, which is
     the accessible explanation of why the action is unavailable. */
  cursor: not-allowed;
  /* Anchors the lock badge that the modeling-only Speak placeholder carries;
     without it the absolutely-positioned badge would escape to whichever
     ancestor happens to be positioned. */
  position: relative;
  /* #464D5B — one ink across all five tints rather than a per-action one, so
     the placeholders read as a set. Measured on the darkest stop (0.34) of every
     tint below: Model 6.09:1, Speak 5.84:1, Reports 5.37:1, Ideas 6.59:1, More
     4.96:1 — all clear the 4.5:1 floor, and it still reads as clearly muted
     beside the navy of the live buttons. Re-measure if a tint or the ramp moves;
     the ink does NOT follow the fill automatically, which is how an earlier
     #626A79 ended up at 3.83:1 when the surface changed under it. */
  color: #464D5B;
  /* Each disabled placeholder wears its OWN action's hue at HALF saturation
     (HSL S x 0.5, hue and lightness held) — so it still reads as that action,
     just drained. The tint is the only thing that varies: the flat ramp, the
     absent gloss, the neutral border and the muted ink are identical across all
     five, and that shared treatment is what says "unavailable".
     Driven by one custom property so a new disabled rank is two lines, not a
     sixth copy of this block. The default is the desaturated MODEL blue, because
     the un-suffixed `--empty` is the Model slot's "No board" note.
     Ramp tops out at 0.34: at 0.46 the #464D5B ink falls to 3.96:1 on the More
     Actions tint, under the 4.5:1 floor. At 0.34 the worst is 4.96:1. */
  --empty-tint: 140, 181, 206;
  background: linear-gradient(160deg, rgba(var(--empty-tint), 0.22) 0%, rgba(var(--empty-tint), 0.34) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #98A1B0;
  /* INDENTED into the page, not raised off it. The live buttons carry an outer
     drop shadow and a bright top rim, which reads as a pane sitting ON the row;
     this inverts both — a soft dark inset from the top edge plus a white inset
     along the BOTTOM edge, so the light appears to come from above and fall into
     a recess. No outer shadow at all, or the tile would read as raised again. */
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.16), inset 0 1px 2px rgba(27, 54, 93, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.65);
}

/* ── UPGRADE TOOLTIP on a locked action ────────────────────────────────────
   Replaces the native `title` bubble, which cannot be styled and lands wherever
   the OS decides (it was covering the button labels).
   BELOW AND LEFT: anchored `top: 100%` and `right: -4px`, so it drops under the
   tile and grows LEFTWARD. Right-anchoring matters — More Actions is the last
   button in the row, and a left-anchored bubble there would run off the page.
   It escapes the row because `.md-caseload__list-row` no longer sets
   `overflow: hidden` (see that rule). If a clip is ever reinstated there, this
   tooltip is what breaks.
   Shown on :hover AND :focus-visible: the placeholder is a <span role="note">
   with no tabindex, so focus rarely lands on it, but keyboard users who do reach
   it get the same explanation rather than nothing. */
.md-caseload__quick-action--empty[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: -4px;
  z-index: 60;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2A4A7A 0%, #1B365D 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(27, 54, 93, 0.28), 0 1px 2px rgba(27, 54, 93, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  pointer-events: none;
}

.md-caseload__quick-action--empty[data-tip]:hover::after,
.md-caseload__quick-action--empty[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}

/* Raise the hovered tile so its bubble paints over the neighbouring buttons
   rather than under them — they are later siblings and would otherwise win. */
.md-caseload__quick-action--empty[data-tip]:hover,
.md-caseload__quick-action--empty[data-tip]:focus-visible {
  z-index: 60;
}

/* Motion is decoration here; the bubble must still appear. */
@media (prefers-reduced-motion: reduce) {
  .md-caseload__quick-action--empty[data-tip]::after {
    transition: none;
    transform: none;
  }
  .md-caseload__quick-action--empty[data-tip]:hover::after,
  .md-caseload__quick-action--empty[data-tip]:focus-visible::after {
    transform: none;
  }
}
.md-caseload__list-quick .md-caseload__quick-action--empty svg * {
  stroke: #464D5B;
}

/* Hover changes NOTHING — the surface, ink, border and shadow are all restated
   so the row's shared hover cannot tint a control that cannot be used. */
.md-caseload__list-quick .md-caseload__quick-action--empty:hover {
  transform: none;
  color: #464D5B;
  background: linear-gradient(160deg, rgba(var(--empty-tint), 0.22) 0%, rgba(var(--empty-tint), 0.34) 100%);
  border-color: #98A1B0;
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.16), inset 0 1px 2px rgba(27, 54, 93, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.65);
}

.md-caseload__list-quick .md-caseload__quick-action--empty:hover svg * {
  stroke: #464D5B;
}

/* Per-action disabled tints — 50% desaturated from each live button's fill.
   Two lines each: the surface, border, ink and lock badge all come from the
   shared `--empty` rule above, so these set ONLY the hue. Values are HSL S x 0.5
   of the live tint at the same hue and lightness:
     Speak    #3A83EA -> #668ABE      Reports  #48865E -> #587663
     Ideas    #D3B070 -> #BAA989      More     #495469 -> #515661
   (Model's #3AA6EA -> #669CBE is the default set on `--empty` itself.)
   Scoped with the action modifier so the un-suffixed `--empty` — the Model
   slot's "No board" note — keeps the default rather than matching one of these. */
.md-caseload__list-quick .md-caseload__quick-action--empty.md-caseload__quick-action--speak {
  --empty-tint: 140, 167, 206;
}

.md-caseload__list-quick .md-caseload__quick-action--empty.md-caseload__quick-action--reports {
  --empty-tint: 162, 185, 170;
}

.md-caseload__list-quick .md-caseload__quick-action--empty.md-caseload__quick-action--ideas {
  --empty-tint: 195, 180, 152;
}

.md-caseload__list-quick .md-caseload__quick-action--empty.md-caseload__quick-action--more {
  --empty-tint: 166, 171, 181;
}

/* 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. */
/* NOTE: the `.md-caseload__action--locked` tile rules that lived here are gone.
   Speak was the only tile that could be locked (modeling-only links), and Speak
   moved up to the row's top actions — where the locked placeholder now wears the
   row's own `--empty` treatment instead. The lock BADGE rule below is still live:
   the placeholder carries it into the row. */
/* Lock badge on an unavailable action — a small teal disc pinned to the tile's
   top-right corner. Two-tone like every other glyph in the caseload: the shackle
   is teal and the body slate (set on the paths in the markup), sitting on a
   verdigris-tinted disc with a teal hairline so the badge reads as a deliberate
   status marker rather than a stray glyph dropped on the corner.
   SOLID WHITE disc. The fill was never transparent — it was `#E4F2F0`, a pale
   verdigris that sits only a few steps off the placeholder's own `#F3F4F6`
   surface, so the disc dissolved into the tile and read as a wash rather than a
   badge. White is the one fill that separates from BOTH the grey placeholder and
   the teal/slate glyph on top of it. */
.md-caseload__action-lock {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 20px disc around a 9px glyph — 5.5px of clearance on every side. */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(26, 123, 122, 0.55);
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.16);
  pointer-events: none;
}

/* 11px inside a 20px disc. The body is an OUTLINE with a transparent interior
   and a light slate stroke — the solid slate fill it replaces was the heaviest
   mark in the whole row and pulled the eye straight to it.
   The size went UP to make that possible: an outlined body only reads as a
   rectangle if its interior survives, and at 9px a 1.8 stroke left barely 2px of
   hole. 11px keeps the interior open, which is also what stops the glyph
   collapsing back into the head-and-torso silhouette it had before. */
.md-caseload__action-lock svg {
  width: 11px;
  height: 11px;
  display: block;
}

/* The badge's two-tone has to be re-asserted HERE because the unavailable
   placeholder it sits on flattens every glyph inside itself to one grey
   (`.md-caseload__list-quick .md-caseload__quick-action--empty svg *`, (0,2,0) —
   which the markup's presentation attributes cannot outrank). Matched at (0,3,0)
   so the badge keeps its teal shackle and light-slate body while the ACTION icon
   beside it stays correctly greyed out. `fill: none` is restated because the
   body's interior must stay transparent — the disc shows through it. */
.md-caseload__list-quick .md-caseload__quick-action--empty .md-caseload__action-lock svg rect {
  fill: none;
  stroke: #8A93A3;
}

.md-caseload__list-quick .md-caseload__quick-action--empty .md-caseload__action-lock svg path {
  stroke: #2A9D8F;
}

/* The chevron is now the ICON inside the More Actions button rather than a bare
   glyph at the end of the row, so it drops its own 28x36 box and inherits the
   button's colour — it only has to flip. */
.md-caseload__list-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 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);
}

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

@media (max-width: 640px) {
  /* EQUAL COLUMNS ACROSS THE ROW. The toolbar owns its own line at this width (see the
     <=768px block), so the buttons divide it instead of bunching at the right and
     leaving the left half empty. `grid-auto-columns: 1fr` rather than flex `1 1 0` —
     flex free-space distribution does not come out exactly equal here (measured 130px
     tiles beside a 118px one at 768px), and this states "N equal columns" directly. */
  .md-caseload__list-header > .md-caseload__list-quick {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    /* MUST override the base toolbar's `align-items: center`, which was written for the
       flex layout. Under grid it centres each tile in its track at its own content
       height, so a two-line caption ("Modelling Ideas") stood 65px tall beside 52px
       neighbours. `stretch` makes every tile take the row's height, so the tallest
       caption sets one height for the whole set. */
    align-items: stretch;
  }
  /* ICON ABOVE CAPTION, and every tile the SAME HEIGHT. These were 44x44 icon-only
     squares — the row had no width for captions while the toolbar shared a line with the
     identity. Now that it owns a full row, each button carries its caption, which is what
     makes the controls self-describing rather than five unlabelled squares.
     Stacked rather than side-by-side: at ~100px a column there is not enough width to sit
     a caption beside a glyph without the two-word ones wrapping, and a mix of one- and
     two-line tiles reads as ragged.
     EQUAL HEIGHTS come from the grid: items default to `align-self: stretch`, so every
     tile takes the row's height — the tallest caption sets it and the rest follow. That
     is why `height` stays `auto` rather than being pinned; `min-height: 44px` is only the
     touch-target floor for the case where every caption is one line.
     Parent-scoped (0,3,0) so it beats the `--model/--choose-board/--ideas` tiles pinned
     to a definite `flex: 0 0 86px` at (0,2,0) further up this file. */
  .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 44px;
    max-width: none;
    padding: 6px 4px;
    border-radius: 10px;
  }
  /* Captions come back. Fluid and small — they share ~100px with a 20px glyph, so this
     is the one place in the row where sub-14px type is warranted. px not rem: bootstrap
     sets `html { font-size: 10px }`, so rem would render a tenth of the intended size.
     calc() around the mixed units is required — SassC cannot evaluate px + vw inside
     clamp() at compile time (docs/CSS_SCSS_GUIDELINES.md). */
  .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-label {
    display: inline;
    min-width: 0;
    /* Floor raised from 10px. Inside this <=640px query the old ceiling was
       unreachable (11.52px at 640px), so these five captions rendered at ~10px — about
       half this product's AAC legibility floor, which turns a labelled tile row back
       into five guessable icons. The row is `align-items: stretch`, so wrapping to two
       lines is already accommodated. */
    font-size: clamp(14px, 12px + 0.55vw, 16px);
    line-height: 1.15;
    text-align: center;
    /* MUST release the base label's `white-space: nowrap`. Only `--choose-board` and
       `--ideas` are given `normal` further down this file, which is why "Modelling Ideas"
       wrapped correctly while "More Actions" ran straight out of its tile. At ~100px a
       column, every two-word caption here needs to wrap, so this covers all of them.
       `overflow-wrap` alone cannot do it — that only breaks WITHIN a word once wrapping
       is permitted at all. */
    white-space: normal;
    overflow-wrap: break-word;
  }
  .md-caseload__quick-action--model,
  .md-caseload__quick-action--reports {
    display: none;
  }
  /* Choose Board needs NO exception here any more. It used to be the one
     icon-less button, so icon-only mode would have rendered it as an empty
     square and it was kept as a 12px text pill; now that its board-plus glyph
     is back it behaves like its neighbours — and that 12px label, the only
     sub-14px text in the row, is gone with it. It is still never hidden (unlike
     Model): the expanded panel's no-board branch is Setup, not the board
     picker, so this button is the row's only route to the picker. */
}
.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. */
  /* No top margin — the GOALS section sits flush under the actions block.
     NOTE: this declaration is duplicated in the second .md-caseload__bottom-row
     block further down (a leftover of the app.scss -> _caseload.scss migration);
     both must change together or the later one silently wins. */
  margin: 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;
  /* THE AVATAR SPANS BOTH TRIGGER ROWS, so the badge row sits directly under the name.
     Grid row 1 is otherwise sized by the tallest item in it — the 60px portrait (72px in
     Focused View), not the ~24px name — so the badges waited for the PORTRAIT to end and
     sat far below the name they belong to (measured at 1600px: 27px below the name
     against a 9px row-gap). Spanning takes the portrait out of row 1's height, leaving
     the name to size its own row and the badge to follow one row-gap later.

     `span 2`, NOT `1 / -1`. The trigger declares `grid-template-columns` only, so every
     ROW here is implicit, and `-1` resolves against the EXPLICIT grid, which has no row
     lines — `1 / -1` silently collapses to a single row and the span never happens.
     (Computed style still reports `1/-1`, which makes it look applied; the giveaway is
     that the layout does not move.)

     Declared ONCE here rather than per breakpoint: it was previously duplicated in the
     <=640px and 769-1024px blocks and simply absent above 1024px, which is why wide
     screens still showed the low badge. The single band that must NOT have it
     (641-768px, where the badges share the name's own line) opts out below. */
  grid-row: 1/span 2;
  align-self: center;
  /* 60px — doubled from 40, then pulled back 25% because 80 dominated the row.
     Applies to BOTH branches of the avatar — the photo <img> and the placeholder
     <span> share this class. */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #F8F9FA;
  border: 1px solid rgba(27, 54, 93, 0.08);
}

/* 641-768px opts OUT of the span above. There the badges sit on the name's OWN line (a
   third grid column, `grid-row: 1`), so the trigger has a single row and a 2-row span
   would create an implicit empty second track.
   PLACED HERE, AFTER the base rule, deliberately: the 641-768px block earlier in this
   file loses to the base rule on SOURCE ORDER (same 0,1,0 specificity), so an opt-out
   written up there is inert — verified by computed style, which still reported
   `1/span 2` at 700px. */
@media (max-width: 768px) and (min-width: 641px) {
  .md-caseload__list-avatar {
    grid-row: auto;
  }
}
.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;
}

/* Glyph scales with the disc — 33px in 60px keeps the 22-in-40 ratio the
   placeholder was drawn at, so the person icon does not shrink into a big empty
   circle. Overrides the markup's width/height attributes, which stay at 22 as
   the no-CSS fallback. */
.md-caseload__list-avatar--placeholder svg {
  width: 33px;
  height: 33px;
}

.md-caseload__list-name {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.25;
  /* WRAPS inside its own box — it must never run into the badge column beside
     it. `anywhere`, not the usual `break-word`: usernames are commonly
     underscore-joined ("daisy_johnson_classroom_two") and an underscore is NOT a
     break opportunity, so `break-word` would leave the whole name as one
     unbreakable run and it would spill out regardless. `anywhere` lets the break
     land mid-token when there is no better point.
     No `nowrap`/`text-overflow: ellipsis` any more: ellipsising a username hides
     which communicator the row belongs to, and the row has vertical room. */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Row action buttons — per-rank glass surfaces ──────────────────────────
     1a. Choose Board — teal→denim, the priority/setup action (halo + deepest ramp)
     1b. Model — azure          2. Speak — denim
     3. Reports — sage          4. Modeling Ideas — champagne
     5. More Actions — grey, quietest
   BORDERS ARE THE ONE THING CARRIED OVER from the token-system experiment: each
   rank's edge keeps the colour + 0.82 alpha that was measured against the row
   background (#FAFBFC), because the old alphas did not all clear the 3:1 that
   WCAG 1.4.11 puts on the component boundary — the fills here are ~1.3:1, so
   the border is what delimits the control. Measured: Model 3.89, Speak 4.18,
   Reports 3.95, Ideas 3.70, More 4.61, Choose Board 4.17 (at 0.92 — it is the
   priority action and gets the stronger edge).
   Alphas are NOT transferable between hues; re-measure if you change one. */
.md-caseload__quick-action,
a.md-caseload__quick-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 78px;
  padding: 9px 12px;
  color: #1B365D;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(27, 54, 93, 0.55);
  border-radius: 12px;
  /* GLASS at secondary weight — gloss sweep over a very light grey ramp. Inside
     the row this is now reached only by the unavailable Speak placeholder; every
     live button carries its own tint below.
     NO backdrop-filter here or on any rank — what sits behind these buttons is
     `.md-caseload__list-row`'s `linear-gradient(180deg, #ffffff,
     rgba($la-navy, 0.02))`: flat and opaque. Blurring flat white renders nothing
     and `saturate()` has no saturation to boost, so the filter was visually inert
     while forcing a compositing layer per button per row. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #FCFDFE 0%, #F2F4F7 55%, #EAEEF3 100%);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -6px 10px -6px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(27, 54, 93, 0.06), 0 5px 10px -7px rgba(27, 54, 93, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Icons are SIZED here but not COLOURED — the markup carries the two-tone
   treatment (slate shape + brand accent) as presentation attributes, and a
   blanket `svg * { stroke }` here would outrank them and flatten every glyph.
   Only the unavailable placeholder and More Actions set a single ink. */
.md-caseload__quick-action svg {
  width: 22px;
  height: 22px;
}

.md-caseload__quick-label {
  font-size: 14px;
  font-weight: 620;
  line-height: 1.15;
  color: inherit;
  white-space: nowrap;
}

/* ── 1a. SETUP PRIORITY: Choose Board. Shown only while a communicator has no
   home board. Deepest ramp in the row plus the leading slot's teal halo; the
   urgency is also carried by the board-plus icon and the "Board needed" badge,
   so it survives greyscale. Glass with NAVY ink — not the solid teal + white
   text an older comment here used to describe. */
.md-caseload__list-quick .md-caseload__quick-action--choose-board {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, rgba(44, 183, 176, 0.44), rgba(91, 141, 239, 0.38));
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  /* 0.92 — the priority action's stronger edge, 4.17:1 on the row. */
  border: 1px solid rgba(26, 123, 122, 0.92);
  /* Last two layers are the halo, shared with Model (it marks the SLOT, not the
     action). box-shadow does not cascade per layer, so every state rule below
     repeats the whole stack or the glow goes out. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.55), 0 2px 5px rgba(27, 54, 93, 0.1), 0 8px 16px -8px rgba(27, 54, 93, 0.2), 0 0 8px rgba(26, 123, 122, 0.22), 0 0 18px rgba(26, 123, 122, 0.3);
}

.md-caseload__list-quick .md-caseload__quick-action--choose-board:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.24) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, rgba(44, 183, 176, 0.56), rgba(91, 141, 239, 0.49));
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #1A7B7A;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.6), 0 2px 5px rgba(27, 54, 93, 0.1), 0 10px 20px -8px rgba(27, 54, 93, 0.24), 0 0 10px rgba(26, 123, 122, 0.3), 0 0 24px rgba(26, 123, 122, 0.42);
}

.md-caseload__list-quick .md-caseload__quick-action--choose-board:active {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.64), rgba(91, 141, 239, 0.56));
  border-color: #1A7B7A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1), 0 0 10px rgba(26, 123, 122, 0.28);
}

/* ── ROW TINTS ────────────────────────────────────────────────────────────
   The four hue-bearing ranks each take a caseload-LOCAL tint rather than the
   shared palette token they derive from. That is deliberate: these are +25%
   saturation variants (HSL S × 1.25, hue and lightness untouched), and
   $brand-dusty-denim / $color-sage-dark / $brand-soft-fawn are used across the
   whole app — saturating them at source would repaint unrelated surfaces. The
   BORDERS still use the shared AA tokens and are unchanged; only the fills moved.
   Model's azure is doubly derived: the palette has no entry at its hue.
   $brand-dusty-denim sits at 215° and every other blue token is FURTHER toward
   purple ($brand-smart-blue and $brand-dusty-denim-aa both 219°), so it is denim
   rotated -12° to 203° — bluer, less purple — and then saturated with the rest.
   Navy labels measure 6.9–10.9:1 on every stop of every ramp at these values. */
/* These five moved to _variables.scss (search `$caseload-model-blue`) so the
   Focused View overlay can derive its darkened ramp from the SAME source values
   instead of re-declaring the hexes. They arrive here via `@use "variables" as *`
   at the top of this file; nothing else about their use changed. */
/* ── 1b. WORKFLOW PRIMARY: Model. Shares the leading slot with Choose Board and
   wears the same halo one hue over; the ramp is what separates them. */
.md-caseload__quick-action.md-caseload__quick-action--model {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 166, 234, 0.28) 0%, rgba(58, 166, 234, 0.38) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  /* Measured border, 3.89:1 on the row. */
  border: 1px solid rgba(40, 96, 201, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(27, 54, 93, 0.08), 0 8px 16px -8px rgba(27, 54, 93, 0.18), 0 0 8px rgba(40, 128, 201, 0.22), 0 0 18px rgba(40, 128, 201, 0.3);
}

.md-caseload__quick-action.md-caseload__quick-action--model:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 166, 234, 0.36) 0%, rgba(58, 166, 234, 0.48) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #2860C9;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.55), 0 2px 5px rgba(27, 54, 93, 0.08), 0 10px 20px -8px rgba(27, 54, 93, 0.22), 0 0 10px rgba(40, 128, 201, 0.3), 0 0 24px rgba(40, 128, 201, 0.42);
}

/* A rank that overrides :hover MUST override :active too, at >= its own :hover
   specificity and placed after it — otherwise a mouse-down (which is also a
   hover) keeps showing hover, and keyboard activation falls through to the
   shared verdigris :active. */
.md-caseload__quick-action.md-caseload__quick-action--model:active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 166, 234, 0.42) 0%, rgba(58, 166, 234, 0.54) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #2860C9;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1), 0 0 10px rgba(40, 128, 201, 0.28);
}

/* ── 2. SPEAK — denim. The `:not(--empty)` guard is load-bearing: `--empty`'s
   flat grey is (0,2,0) about a thousand lines above, so a plain `--speak` at
   equal specificity would win on source order and tint the two unavailable
   placeholders. Same guard on both states. */
.md-caseload__list-quick .md-caseload__quick-action--speak:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.22) 0%, rgba(58, 131, 234, 0.3) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  /* Measured border, 4.18:1. NOTE: #4F4FC4 is a periwinkle-family edge kept from
     the token-system pass; the fill reverted to denim but the border did not. */
  border: 1px solid rgba(79, 79, 196, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(27, 54, 93, 0.08), 0 8px 16px -8px rgba(27, 54, 93, 0.18);
}

.md-caseload__list-quick .md-caseload__quick-action--speak:not(.md-caseload__quick-action--empty):hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.3) 0%, rgba(58, 131, 234, 0.4) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #4F4FC4;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.55), 0 2px 5px rgba(27, 54, 93, 0.08), 0 10px 20px -8px rgba(27, 54, 93, 0.22);
}

.md-caseload__list-quick .md-caseload__quick-action--speak:not(.md-caseload__quick-action--empty):active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.36) 0%, rgba(58, 131, 234, 0.46) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #4F4FC4;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1);
}

/* Two-word labels wrap inside the shared tile width instead of widening it. */
.md-caseload__quick-action--choose-board .md-caseload__quick-label,
.md-caseload__quick-action--ideas .md-caseload__quick-label {
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}

/* ── 4. MODELING IDEAS — warm champagne ($brand-soft-fawn, the palette's
   already-muted member of the honey family). Defined here, ahead of rank 3,
   because this selector already existed for the label-padding fix and the fill
   was added to it rather than stacked in a second rule.
   PADDING, unrelated to colour: "Modeling" is longer than either of Choose
   Board's words; 6px sides open the inner width enough for it to wrap as a WORD
   rather than hyphen-break. */
/* Padding is GEOMETRY, so it applies to the disabled placeholder too — it must
   be the same width as the live tile. Kept out of the guarded rule below. */
.md-caseload__quick-action.md-caseload__quick-action--ideas {
  padding-left: 6px;
  padding-right: 6px;
}

.md-caseload__quick-action.md-caseload__quick-action--ideas:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(211, 176, 112, 0.16) 0%, rgba(211, 176, 112, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  /* NOT the tint darkened: $color-sand-dark (#A07850) measures only 2.86:1 on
     the row. #84603C measures 3.70:1. Warm hues run light — a champagne border
     can look right and still fail the boundary floor. */
  border: 1px solid rgba(132, 96, 60, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(27, 54, 93, 0.08), 0 8px 16px -8px rgba(27, 54, 93, 0.18);
}

.md-caseload__quick-action.md-caseload__quick-action--ideas:hover:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(211, 176, 112, 0.24) 0%, rgba(211, 176, 112, 0.36) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #84603C;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.55), 0 2px 5px rgba(27, 54, 93, 0.08), 0 10px 20px -8px rgba(27, 54, 93, 0.22);
}

.md-caseload__quick-action.md-caseload__quick-action--ideas:active:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(211, 176, 112, 0.3) 0%, rgba(211, 176, 112, 0.42) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #84603C;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1);
}

/* ── 3. REPORTS — muted sage. The one green rank: it separates "look at what
   happened" from the blues above, which act on the communicator's session. */
.md-caseload__quick-action.md-caseload__quick-action--reports:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(72, 134, 94, 0.18) 0%, rgba(72, 134, 94, 0.28) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  /* Measured border, 3.95:1. */
  border: 1px solid rgba(61, 107, 78, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(27, 54, 93, 0.08), 0 8px 16px -8px rgba(27, 54, 93, 0.18);
}

/* Reports is a <LinkTo>, so it renders as <a> and the shared states match it via
   `a.md-caseload__quick-action:hover` at (0,2,1). These rules are (0,3,0), which
   outranks that on class count. */
.md-caseload__quick-action.md-caseload__quick-action--reports:hover:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(72, 134, 94, 0.26) 0%, rgba(72, 134, 94, 0.38) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #3D6B4E;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -7px 12px -7px rgba(255, 255, 255, 0.55), 0 2px 5px rgba(27, 54, 93, 0.08), 0 10px 20px -8px rgba(27, 54, 93, 0.22);
}

.md-caseload__quick-action.md-caseload__quick-action--reports:active:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(72, 134, 94, 0.32) 0%, rgba(72, 134, 94, 0.44) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: #3D6B4E;
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1);
}

/* ── 5. MORE ACTIONS: the quietest control in the row — overflow, not workflow.
   Grey fill, dimmer ink, no outer lift. Deliberately NOT dimmed to the point of
   looking disabled: its border is the strongest in the row at 4.61:1. */
.md-caseload__quick-action.md-caseload__quick-action--more:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.34) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #F6F8FA 0%, #EBEFF4 55%, #E2E7EE 100%);
  color: #374151;
  /* Measured border, 4.61:1 — the grey fill is ~1.05:1 against the row, so the
     edge is doing all of the delimiting here. */
  border-color: rgba(73, 84, 105, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 2px rgba(27, 54, 93, 0.04);
}

.md-caseload__quick-action.md-caseload__quick-action--more:not(.md-caseload__quick-action--empty) svg * {
  stroke: #374151;
}

.md-caseload__quick-action.md-caseload__quick-action--more:hover:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.32) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #EEF1F5 0%, #E2E7EE 55%, #D8DFE8 100%);
  border-color: #495469;
  color: #374151;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(27, 54, 93, 0.06);
}

/* Expanded state keyed off the aria-expanded the button already carries, so the
   visual state and the programmatic one can never disagree. */
.md-caseload__quick-action.md-caseload__quick-action--more[aria-expanded=true]:not(.md-caseload__quick-action--empty) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #E7ECF2 0%, #DCE3EB 55%, #D2DAE4 100%);
  border-color: #495469;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 1px 3px rgba(27, 54, 93, 0.1);
}

/* ── SHARED STATES — the FALLBACK, not a rank. Every rank overrides these, so
   nothing in the row actually reaches the verdigris tint below; it stays as the
   default for any `.md-caseload__quick-action` added without a rank, and it is
   the reason each rank must restate BOTH states. */
.md-caseload__quick-action:hover,
a.md-caseload__quick-action:hover {
  text-decoration: none;
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.42) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, rgba(42, 157, 143, 0.09) 0%, rgba(42, 157, 143, 0.17) 100%);
  border-color: rgba(26, 123, 122, 0.6);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 -6px 10px -6px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(27, 54, 93, 0.07), 0 6px 12px -7px rgba(27, 54, 93, 0.16);
}

.md-caseload__quick-action:active,
a.md-caseload__quick-action:active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 32%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, rgba(42, 157, 143, 0.15) 0%, rgba(42, 157, 143, 0.23) 100%);
  border-color: #1A7B7A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 3px rgba(27, 54, 93, 0.1);
}

/* Focus is a RING, never a border-colour change — a border swap is invisible to
   anyone who cannot see the hue shift and is indistinguishable from hover.
   CLIPPING: `.md-caseload__list-row` sets `overflow: hidden` (it clips the row's
   ::before accent bar to the rounded corners) — what saves the ring is
   `.md-caseload__list-header`'s `padding: 10px 14px`, which is wider than the
   5px the ring needs. Narrow that padding and focus gets clipped silently. */
.md-caseload__quick-action:focus-visible,
a.md-caseload__quick-action:focus-visible {
  outline: 3px solid #2860C9;
  outline-offset: 2px;
}

.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;
}

/* GOALS section. It used to be the wrapped last line of
   .md-caseload__card-top; it is now a direct child of the card, BELOW the
   actions section, so `flex-basis` is inert and `width: 100%` does the work.
   No top margin: the section sits flush under the actions block, which already
   carries its own bottom spacing. */
.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. */
  /* No top margin — the GOALS section sits flush under the actions block.
     NOTE: this declaration is duplicated in the second .md-caseload__bottom-row
     block further down (a leftover of the app.scss -> _caseload.scss migration);
     both must change together or the later one silently wins. */
  margin: 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;
  /* Geometry only — the SURFACE comes from the shared mixin below, the same one
     the collapsed row's buttons use. These tiles are bigger (5rem square, two
     lines of label) but they are the same material, not a second vocabulary. */
  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;
  line-height: 1.2;
  /* Surface shared with the collapsed row's quick actions — see the mixins at
     the top of this file. Was written out here; moved so the two families have
     one definition instead of two copies that drifted. */
  border: 1px solid rgba(76, 134, 216, 0.2);
  border-radius: 12px;
  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%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(76, 134, 216, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05), 0 0 8px rgba(76, 134, 216, 0.07);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.md-caseload__action--tile:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 2px 5px rgba(27, 54, 93, 0.06), 0 6px 14px rgba(27, 54, 93, 0.08), 0 0 12px rgba(76, 134, 216, 0.12);
  transform: translateY(-1px);
}

.md-caseload__action--tile:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(76, 134, 216, 0.08), 0 1px 2px rgba(15, 23, 42, 0.07);
}

/* Per-action colour identity lives in the ICONS, not the tile — IN THE PANEL.
   Every tile in this group previously carried its own gradient + border +
   coloured hover shadow (speak blue, setup violet, reports/ideas coral, eval
   honey, account verdigris, history slate, more navy). Those rules are gone: the
   six tiles share ONE surface (the caseload-action-surface mixins at the top of
   this file) and are told apart by icon accent and label alone.
   THE COLLAPSED ROW WENT THE OTHER WAY and no longer follows this principle —
   four of its five buttons carry a hue in the SURFACE, not just the icon. The
   two families are deliberately different now, so do not "restore consistency"
   by copying a row rank down here; the panel's job is a flat grid of peers, the
   row's is a ranked strip. */
.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 the accent paths too so they don't feel thinner
   than the now-bolder outline. ONE accent hue is listed now: the panel icons
   were re-drawn onto the same slate + teal pair the row's icons use (the denim,
   violet, coral and honey accents are gone), so the whole card reads as one
   icon set. Shapes are unchanged — only the stroke colours moved. */
.md-caseload__action--tile .md-caseload__action-tile__icon svg [stroke="#2A9D8F"] {
  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;
}

/* NOTE: a bare `.md-caseload__action:hover { box-shadow: 0 1px 4px … }` used to
   sit here. Every element carrying that class also carries `--tile`, and at
   equal specificity (0,2,0) it sat LATER in the file than
   `.md-caseload__action--tile:hover`, so it quietly won and flattened the tile's
   hover lift to a single hairline. Removed — the tile hover mixin is the one
   authoritative hover for this family. */
/* 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;
  }
  /* SHOW the goal / badge bottom row here (2026-08-16, requested). It used to be
     `display: none` at this width because the empty-state "No goal set | + Add goal" chip
     is `white-space: nowrap` and overflowed the narrowed card.
     THE OVERFLOW IS FIXED RATHER THAN HIDDEN, because hiding cost more than it saved:
     this row carries BOTH the goal and the achievement badge, so on a phone a supporter
     lost the goal entirely — and the caseload tour's badge step had no target to attach
     to, which is what surfaced this.
     Three things make it fit, none of which need a magic width:
       1. the row stacks, so the goal block and the badge each get the full card width
       2. `min-width: 0` on the goal chain — a flex item will NOT shrink below its content
          without it, which is the actual reason a nowrap chip overflowed instead of
          ellipsising. The chip already carries overflow:hidden + text-overflow:ellipsis;
          it simply never got the chance to use them.
       3. the goal row wraps, so "+ Add goal" (still nowrap, and it should stay that way —
          a button reading "+ Add\ngoal" is worse than one on its own line) drops below
          the label instead of forcing the row wider. */
  .md-caseload__bottom-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }
  .md-caseload__bottom-row__goal,
  .md-caseload__goal-row,
  .md-caseload__goal {
    min-width: 0;
    max-width: 100%;
  }
  .md-caseload__goal-row {
    flex-wrap: wrap;
  }
  .md-caseload__goal-add {
    align-self: flex-start;
  }
}
/* 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;
}

/* ── BADGE IN PROGRESS ─────────────────────────────────────────────────────
   Sits directly above GOALS in the expanded panel and deliberately REUSES the
   goals surface: the section wrapper is `.md-caseload__bottom-row` and the inner
   block `.md-caseload__bottom-row__goal`, so the badge inherits the same glass
   panel, padding, radius and eyebrow treatment rather than introducing a second
   card style two inches above it. Only the badge's own internals are new.
   `--badge` exists to separate it from the goals panel below; everything else
   the two share is intentional. */
.md-caseload__bottom-row--badge {
  margin-bottom: 12px;
}

/* The whole tile is one button (it opens the badge modal), so the native button
   chrome has to go and the content laid out as a row: medal left, details right. */
.md-caseload__badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 4px 2px 2px;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.md-caseload__badge:hover {
  background: rgba(42, 157, 143, 0.06);
}

.md-caseload__badge:focus-visible {
  outline: 3px solid #2860C9;
  outline-offset: 2px;
}

.md-caseload__badge-medal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
}

.md-caseload__badge-medal img {
  max-width: 100%;
  max-height: 100%;
  /* Badge art is user-supplied and arrives at wildly different aspect ratios —
     contain keeps a tall or wide image inside the medal slot instead of letting
     it set the row's height. */
  object-fit: contain;
}

/* Identity LEFT, progress RIGHT — a row, not a stack. `wrap` plus the flex
   bases below means the two columns collapse into one on a narrow card rather
   than squeezing the progress bar down to a stub. */
.md-caseload__badge-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 6px 18px;
}

.md-caseload__badge-headings {
  /* Shrinkable, with a basis wide enough for a two-word badge name on one or
     two lines; it gives way to the status column rather than the reverse,
     because a truncated progress bar is useless while a wrapped name is not. */
  flex: 0 1 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-caseload__badge-status {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.md-caseload__badge-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.25;
}

.md-caseload__badge-level {
  font-size: 13px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.62);
}

.md-caseload__badge-time {
  font-size: 14px;
  font-weight: 700;
  color: #1A7B7A;
}

/* Progress track + fill. The fill's width arrives as an inline style from the
   model's `progress_style` computed — the same one the modal uses — so the two
   presentations can never disagree about how far along the badge is. */
.md-caseload__badge-bar {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 10px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  border: 1px solid rgba(27, 54, 93, 0.14);
  overflow: hidden;
}

.md-caseload__badge-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2A9D8F 0%, #1A7B7A 100%);
}

.md-caseload__badge-pct {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 650;
  color: rgba(27, 54, 93, 0.62);
}

.md-caseload__badge-explain {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(27, 54, 93, 0.72);
}

.md-caseload__badge-explain-lead {
  display: block;
  font-weight: 650;
  color: rgba(27, 54, 93, 0.55);
}

@media (max-width: 560px) {
  /* Stack on phones: at this width the medal plus a wrapped explanation left the
     text column too narrow to read. */
  .md-caseload__badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .md-caseload__badge-body {
    flex-direction: column;
    align-items: center;
  }
  .md-caseload__badge-headings,
  .md-caseload__badge-status {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
  }
}
.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;
}

/* ---- Feature-unavailable notice -------------------------------------------
   Rendered INSTEAD of a page's content when the signed-in account cannot use
   that feature (components/modeling-only-notice.hbs, shown on Reports, Logs,
   Recordings, Goals and Badges for modeling-only accounts).

   Centred and card-framed because it stands in for the whole page body — the
   previous bare <h2> + <p> sat flush left at the top of an otherwise empty
   page and read like a rendering failure rather than an explanation. */
.md-feature-unavailable {
  max-width: 620px;
  margin: 48px auto;
  padding: 32px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 24px rgba(27, 54, 93, 0.1);
}

.md-feature-unavailable__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
}

.md-feature-unavailable__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  color: #1B365D;
}

.md-feature-unavailable__lead {
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.78);
}

/* Two columns on desktop, stacked on narrow. The lists themselves are LEFT
   aligned inside the centred card — centred list items are hard to scan. */
.md-feature-unavailable__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 22px;
  text-align: left;
}

@media (min-width: 560px) {
  .md-feature-unavailable__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.md-feature-unavailable__col {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(27, 54, 93, 0.04);
}

.md-feature-unavailable__col-title {
  margin: 0 0 8px;
  /* Was 12px at rgba($la-navy, 0.55) — about 3.14:1 on the #F5F6F8 panel, under AA for
     normal text, and below this product's legibility floor. These are the headings that
     tell a user WHY a feature is unavailable. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.75);
}

.md-feature-unavailable__list {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(27, 54, 93, 0.8);
}

.md-feature-unavailable__list li + li {
  margin-top: 4px;
}

.md-feature-unavailable__list--included {
  color: #1A7B7A;
}

.md-feature-unavailable__cta {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(27, 54, 93, 0.8);
}

.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;
}

.md-goal {
  max-width: 1040px;
  margin: 0 auto;
}

.md-goal__hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
  padding: 28px 30px;
  border-radius: 20px;
  background: linear-gradient(158deg, #ffffff 0%, rgba(240, 245, 252, 0.94) 60%, rgba(232, 240, 251, 0.92) 100%);
  border: 1px solid rgba(27, 54, 93, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(27, 54, 93, 0.09), 0 18px 40px rgba(27, 54, 93, 0.12), 0 14px 50px rgba(76, 134, 216, 0.24);
}

.md-goal__hero-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(242, 185, 90, 0.22), rgba(242, 185, 90, 0.1));
  border: 1px solid rgba(242, 185, 90, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(242, 185, 90, 0.22);
}

.md-goal__hero-badge-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.md-goal__hero-body {
  flex: 1 1 auto;
  min-width: 0;
}

.md-goal__hero-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

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

.md-goal__state-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(76, 134, 216, 0.12);
  color: #2860C9;
  border: 1px solid rgba(76, 134, 216, 0.22);
}

.md-goal__state-pill--past {
  background: rgba(27, 54, 93, 0.08);
  color: var(--md-muted, #1B365D);
  border-color: rgba(27, 54, 93, 0.12);
}

.md-goal__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8));
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 5px rgba(27, 54, 93, 0.06), 0 9px 24px rgba(27, 54, 93, 0.08);
}

.md-goal-stat {
  padding: 15px 16px;
  border-radius: 14px;
  background: linear-gradient(158deg, #ffffff 0%, rgba(234, 241, 250, 0.92) 100%);
  border: 1px solid rgba(27, 54, 93, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(27, 54, 93, 0.06);
}

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

.md-goal-stat__value {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--md-ink, #111A2E);
}

.md-goal-stat__sub {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--md-muted, #1B365D);
}

.md-goal-stat__sub a {
  color: #2860C9;
  font-weight: 600;
  text-decoration: none;
}

.md-goal-stat__sub a:hover {
  text-decoration: underline;
}

.md-goal__charts {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.md-goal__section {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 22px 24px 22px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.74));
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(27, 54, 93, 0.04), 0 3px 10px rgba(27, 54, 93, 0.05);
}

.md-goal__section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #4C86D8, #2A9D8F);
}

.md-goal__section-title {
  display: block;
  height: auto;
  margin: 0 0 16px;
  font-size: 18px !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-goal__description {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--md-ink, #111A2E);
}

.md-goal__description :where(p, ul, ol) {
  margin: 0 0 10px;
}

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

.md-goal__note {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--md-muted, #1B365D);
}

.md-goal__note em {
  color: var(--md-ink, #111A2E);
  font-style: italic;
}

.md-goal__video {
  margin-top: 14px;
  max-width: 100%;
  max-height: 400px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
}

.md-goal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.md-goal-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  width: 152px;
  padding: 20px 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.88));
  border: 1px solid rgba(27, 54, 93, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(27, 54, 93, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-goal-badge.is-earned {
  border-color: rgba(242, 185, 90, 0.5);
  background: linear-gradient(180deg, rgba(255, 249, 236, 0.95), rgba(255, 250, 240, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 5px 16px rgba(242, 185, 90, 0.24);
}

.md-goal-badge.is-locked {
  opacity: 0.72;
}

.md-goal-badge.is-clickable {
  cursor: pointer;
}

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

.md-goal-badge__img-wrap {
  position: relative;
  line-height: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.md-goal-badge__img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.md-goal-badge:not(.is-earned) .md-goal-badge__img {
  filter: grayscale(0.35);
  opacity: 0.85;
}

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

.md-goal-badge__level {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
}

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

.md-goal-badge__hint {
  font-size: 12.5px;
  color: var(--md-muted, #1B365D);
}

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

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

.md-goal-notes {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: transparent;
}

.md-goal-notes table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}

.md-goal-notes thead th {
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--md-muted, #1B365D);
  background: rgba(27, 54, 93, 0.04);
  border: none;
}

.md-goal-notes tbody td {
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--md-ink, #111A2E);
  border: none;
  border-top: 1px solid rgba(27, 54, 93, 0.07);
  vertical-align: top;
}

.md-goal-notes tbody tr:hover td {
  background: rgba(27, 54, 93, 0.03);
}

.md-goal-notes__empty td {
  color: var(--md-muted, #1B365D);
  font-style: italic;
}

.md-goal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.md-goal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  color: var(--md-ink, #111A2E);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(27, 54, 93, 0.12);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease, color 0.14s ease;
}

.md-goal-btn:hover {
  background: #fff;
  box-shadow: 0 3px 10px rgba(27, 54, 93, 0.1);
}

.md-goal-btn:active {
  transform: translateY(1px);
}

.md-goal-btn--primary {
  color: #1B365D;
  background: rgba(76, 134, 216, 0.3);
  border-color: rgba(76, 134, 216, 0.22);
}

.md-goal-btn--primary:hover {
  color: #1B365D;
  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);
}

.md-goal-btn--danger {
  color: #C0392B;
}

.md-goal-btn__uneditable {
  margin: 0;
  align-self: center;
  font-size: 14px;
  font-style: italic;
  color: var(--md-muted, #1B365D);
}

.md-goal-form {
  margin-top: 18px;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8));
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 5px rgba(27, 54, 93, 0.06), 0 9px 24px rgba(27, 54, 93, 0.08);
}

.md-goal-form__intro {
  margin: 0 0 20px;
  font-size: 14.5px;
}

.md-goal-form__intro a {
  color: #2860C9;
  font-weight: 600;
}

.md-goal-field {
  margin-bottom: 20px;
}

.md-goal-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--md-ink, #111A2E);
}

.md-goal-field__hint {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--md-muted, #1B365D);
}

.md-goal-form input.form-control,
.md-goal-form textarea.form-control {
  width: 100%;
  max-width: 460px;
  padding: 10px 13px;
  font-size: 15px;
  color: var(--md-ink, #111A2E);
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 11px;
  box-shadow: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.md-goal-form textarea.form-control {
  min-height: 96px;
  max-width: 620px;
}

.md-goal-form input.form-control:focus,
.md-goal-form textarea.form-control:focus {
  outline: none;
  border-color: #2860C9;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.16);
}

.md-goal-form select.form-control {
  width: 100%;
  padding: 9px 12px;
  font-size: 14.5px;
  color: var(--md-ink, #111A2E);
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 11px;
  box-shadow: none;
}

.md-goal-form select.form-control:focus {
  outline: none;
  border-color: #2860C9;
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.16);
}

.md-goal-form .form-control-static {
  margin: 0;
  padding-top: 9px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md-muted, #1B365D);
}

.md-goal-form .control-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
  padding-top: 8px;
}

.md-goal-form .checkbox {
  margin: 0;
  padding: 0;
}

.md-goal-form .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--md-ink, #111A2E);
  cursor: pointer;
}

.md-goal-form input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 auto;
  margin: 0;
  border: 1.5px solid rgba(27, 54, 93, 0.35);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.md-goal-form input[type=checkbox]:hover {
  border-color: rgba(27, 54, 93, 0.5);
}

.md-goal-form input[type=checkbox]:checked {
  background: #46505F;
  border-color: #46505F;
}

.md-goal-form input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.md-goal-form input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.6);
  outline-offset: 2px;
}

.md-goal-form a {
  color: #2860C9;
  font-weight: 600;
}

.md-goal-badge-editor {
  margin: 8px 0 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.12);
  box-shadow: 0 2px 10px rgba(27, 54, 93, 0.06);
}

.badge-level__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.055), rgba(27, 54, 93, 0.03));
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

.badge-level__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
}

.badge-level__delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #C0392B;
  background: transparent;
  border: 1px solid rgba(192, 57, 43, 0.28);
  cursor: pointer;
  transition: background 0.14s ease;
}

.badge-level__delete:hover {
  background: rgba(192, 57, 43, 0.08);
}

.badge-level__section {
  padding: 16px 20px;
}

.badge-level__section + .badge-level__section {
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

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

.badge-level__section-hint {
  margin: -6px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--md-muted, #1B365D);
}

.badge-level__body {
  display: flex;
  flex-wrap: wrap;
}

.badge-level__body .badge-level__section {
  border-top: none;
}

.badge-level__section--appearance {
  flex: 0 0 33%;
  min-width: 0;
  border-right: 1px solid rgba(27, 54, 93, 0.08);
}

.badge-level__criteria-col {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 720px) {
  .badge-level__body {
    display: block;
  }
  .badge-level__section--appearance {
    border-right: none;
    border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  }
}
.badge-assets {
  display: flex;
  flex-direction: column;
}

.badge-asset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.badge-asset + .badge-asset {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

.badge-asset__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--md-ink, #111A2E);
}

.badge-asset__preview {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(242, 185, 90, 0.18), rgba(242, 185, 90, 0.08));
  border: 1px solid rgba(242, 185, 90, 0.32);
}

.badge-asset__audio {
  height: 40px;
  max-width: 100%;
}

.badge-asset__empty {
  font-size: 13.5px;
  font-style: italic;
  color: var(--md-muted, #1B365D);
}

.badge-asset__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md-goal-form .badge-asset__btn.btn {
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2860C9;
  background: transparent;
  border: 1px solid rgba(27, 54, 93, 0.16);
  box-shadow: none;
}

.md-goal-form .badge-asset__btn.btn:hover {
  background: rgba(27, 54, 93, 0.05);
  box-shadow: none;
}

.badge-criteria {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.badge-criteria__select {
  min-width: 220px;
  max-width: 300px;
}

.badge-criteria__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--md-ink, #111A2E);
  cursor: pointer;
}

.badge-criteria__checkbox input[type=checkbox] {
  margin-top: 3px;
}

.md-goal-badge-editor .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 1px 20px;
  border-top: 0 !important;
}

.md-goal-badge-editor .form-group:first-of-type {
  margin-top: 4px;
}

.md-goal-badge-editor .form-control-static {
  margin: 0;
  padding-top: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--md-muted, #1B365D);
}

.md-goal-badge-editor [class*=col-sm-] {
  float: none;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  padding: 0;
}

.md-goal-badge-editor [class*=col-sm-]:has(.form-control-static) {
  flex: 0 0 210px;
}

.md-goal-badge-editor input.form-control {
  min-width: 64px;
}

.md-goal-badge-editor .bound-select {
  width: 240px;
  min-width: 0;
}

.md-goal-badge-editor .bound-select__list {
  min-width: 100%;
  width: max-content;
  max-width: 380px;
  z-index: 20;
}

.md-goal-badge-editor .bound-select__option {
  white-space: nowrap;
}

.md-goal-form .form-group {
  margin-bottom: 20px;
}

.md-goal-form .form-group img {
  border-radius: 10px;
  vertical-align: bottom;
}

.md-goal-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--md-ink, #111A2E);
  box-shadow: none;
  transition: background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}

.md-goal-form .btn:hover {
  background: #fff;
  box-shadow: 0 3px 10px rgba(27, 54, 93, 0.1);
}

.md-goal-form .btn-primary {
  color: #1B365D;
  background: rgba(76, 134, 216, 0.3);
  border-color: rgba(76, 134, 216, 0.22);
}

.md-goal-form .btn-primary:hover {
  color: #1B365D;
  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);
}

.md-goal-form .btn[disabled] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.md-goal-form__badges-title {
  height: auto;
  margin: 4px 0 16px;
  font-size: 17px;
  font-weight: 800;
  color: var(--md-ink, #111A2E);
}

.md-goal-form__group + .md-goal-form__group {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

.md-goal-form__group-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-ink, #111A2E);
}

.md-goal-field--video {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.08);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--md-muted, #1B365D);
}

.md-goal-field--video .md-goal-field__label {
  margin-bottom: 4px;
  font-size: 12px;
}

.md-goal-form__add-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  color: #2860C9;
  background: rgba(76, 134, 216, 0.05);
  border: 1px dashed rgba(76, 134, 216, 0.45);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.md-goal-form__add-level:hover {
  background: rgba(76, 134, 216, 0.1);
  border-color: rgba(76, 134, 216, 0.65);
}

.md-goal-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.md-goal-form__error {
  margin: 0;
  flex-basis: 100%;
  text-align: right;
  font-size: 13.5px;
  color: #C0392B;
}

.md-goal-btn[disabled] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* ============================================================================
   Find Boards page (search route) — board-detail "My Board Collection" two-pane
   mirror: static board PREVIEW on the left, collection-style board PANEL on the
   right. No speak-mode top bar. Reuses the .md-board-collection__* row styles.
   ============================================================================ */
/* Mirror the original .search-page layout model: a flex child that fills the app
   content area with the same margin-top: 5rem that pushed the header down. (Using
   a fixed 100dvh height instead had ridden the header up under the navbar.) */
/* `.ub-find-board-page.ub-boards-page` (0,2,0) beats the base `.ub-boards-page`
   (0,1,0) on max-width/margin, so this wins by SPECIFICITY (not source order) —
   which lets this file be a proper @use module emitted before app.scss's rules. */
.ub-find-board-page.ub-boards-page {
  margin-top: 0; /* flush under #inner_header (only the global #content padding offsets it) */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  box-sizing: border-box;
  /* Transparent: the bento gradient is painted on the full-viewport
     #within_ember:has(.ub-find-board-page) (app.scss) so it fills the ENTIRE
     page height. Painting it here only reached content height, leaving a bare
     strip below (LEARNINGS "auth-page bg not full height"). */
  background: transparent;
}

/* Restored page header — compact vertical footprint so the two-pane below keeps
   room, but the la-hero-title / eyebrow keep their entrance movement + styling. */
/* `.la-section-header` compound (0,2,0) beats the base `.la-section-header`
   (0,1,0) padding, so this wins by specificity (order-independent → @use-safe).
   Keeps la-section-header's `margin: 0 auto` centring. */
.ub-find-board__page-header.la-section-header {
  flex: 0 0 auto;
  padding: 10px 16px 6px;
  margin: 0 auto;
}

/* Drop "(Page-Sets & Vocabularies)" onto its own row beneath "Search for Boards",
   and paint it the dark-slate-gray brand color (override the base gradient text-fill). */
/* High specificity (0,4,0) to beat the base gradient rule
   `.ub-search-page .ub-search-page__header .ub-search-page__title-boards` (0,3,0),
   which otherwise keeps -webkit-text-fill-color: transparent (the gradient clip).
   padding-bottom (not margin) spaces it off the search row without collapsing
   through the <h1>. */
/* Tighten the title↔subtitle spacing (no negative-margin hacks): zero the h1's
   bottom margin AND pull the line boxes in with a tight line-height. */
/* Center the title block on the page. The base `.la-hero-title-wrap` is
   `max-width: 590px` with NO auto margins, so it pins to the left of the 640px
   `.la-section-header` and drags both lines off the page center — center the
   wrap so the h1 + subtitle sit on the header's (and page's) center axis. */
.ub-find-board__page-header .la-hero-title-wrap {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ub-find-board__page-header .la-hero-title {
  margin-bottom: 0;
  line-height: 1.05;
  padding-top: 20px; /* breathing room above the hero title */
}

.ub-find-board__page-header .ub-find-board__subtitle {
  margin: 0;
  line-height: 1.05;
}

.ub-find-board-page .ub-find-board__page-header .ub-search-page__title-boards.ub-search-page__title-boards--note {
  display: inline-block;
  /* Cancel the 0.25em left padding inherited from `.ub-search-page__title-boards`
     (meant to space "Boards" off "Search for" in the h1). On this standalone
     inline-block subtitle that padding sits inside the centered box and nudges
     the text off the h1's center axis. */
  padding-left: 0;
  background: none;
  -webkit-text-fill-color: #374151;
  color: #374151;
  /* Subtitle slides in from the RIGHT (same as the home hero md-hero__sub--from-right). */
  opacity: 0;
  animation: md-hero-from-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

/* Space the subtitle off the search row via the form-wrap's top margin (a direct
   child of the header) — padding on the note span sat inside the <h1> and didn't
   push the form below it. Keeps the wrap's `margin: 0 auto` centering. */
.ub-find-board-page .ub-find-board__page-header .ub-search-page__form-wrap {
  margin-top: 30px; /* more space between the subheader and the search row below */
  max-width: 820px; /* wider than the base 640px so the "Find a board…" search is roomier */
}

/* Partial "< Home" pill-nav in the header — reuse the md-pillnav pill look but
   shrink the container from the full-width bar to a compact, centered chip
   (the header's text-align:center centers the inline-flex nav). */
.ub-find-board__homenav.md-pillnav {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-self: center; /* seat it beside the search input in the form row */
  /* Drop the pillnav "slim bar" chrome — only the slate-blue pill should show. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Slate-blue brand-color gradient pill (override the pillnav's transparent bg). */
.ub-find-board__homenav .md-pillnav__pill,
.ub-find-board__homenav .md-pillnav__pill:hover,
.ub-find-board__homenav .md-pillnav__pill:focus {
  background: linear-gradient(135deg, #5A6A85, #46505F) !important;
  color: #fff !important;
}

.ub-find-board__homenav .md-pillnav__pill svg {
  color: #fff;
}

/* Clear-filter affordance — icon + "Clear filter" label seated to the RIGHT of
   the language field in the filter row. Rendered only while a search query is
   active (this.has_active_filter). A quiet text button that tints on hover. */
.ub-search-page__clear-filter {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #5A6A85;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ub-search-page__clear-filter:hover,
.ub-search-page__clear-filter:focus-visible {
  background: rgba(90, 106, 133, 0.12);
  color: #374151;
  outline: none;
}

.ub-search-page__clear-filter-icon {
  flex-shrink: 0;
}

.ub-find-board {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr); /* panel (left) | preview (right) */
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  padding: 4px 16px 16px;
  box-sizing: border-box;
}

.ub-find-board__panel {
  order: 1;
} /* left */
.ub-find-board__preview {
  order: 2;
} /* right */
/* ── Left: board preview pane ── */
.ub-find-board__preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(27, 54, 93, 0.07);
  overflow: hidden;
}

.ub-find-board__preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.08);
  background: rgba(255, 255, 255, 0.6);
}

.ub-find-board__preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(27, 54, 93, 0.06);
}

.ub-find-board__preview-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.ub-find-board__preview-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ub-find-board__preview-owner {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
  line-height: 1.2;
}

.ub-find-board__preview-grid-size {
  font-size: 12px;
  color: rgba(27, 54, 93, 0.6);
  font-weight: 600;
}

.ub-find-board__preview-open {
  flex-shrink: 0;
}

.ub-find-board__preview-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  position: relative;
}

/* Empty / loading / error states */
.ub-find-board__preview-empty,
.ub-find-board__preview-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(27, 54, 93, 0.6);
}

/* Loading / error states: vertically centred, but pulled to the RIGHT edge of the
   preview so the "Loading board…" message sits just left of the board that was
   clicked in the panel, rather than lost in the middle of the empty pane. */
.ub-find-board__preview-state {
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 32px 40px;
}

/* Empty state: TOP-aligned in the pane, message inside an outlined card. */
.ub-find-board__preview-empty {
  justify-content: flex-start;
  padding: 28px 24px;
}

.ub-find-board__preview-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 30px 34px;
  max-width: 440px;
  width: 100%;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 16px;
  /* Double-outline effect: the border is the inner line; an offset outline draws a
     second, lighter line just outside it with a small gap between. */
  outline: 2px solid rgba(27, 54, 93, 0.1);
  outline-offset: 5px;
  background: transparent; /* no fill — the empty state should read as empty */
}

.ub-find-board__preview-empty-icon {
  color: rgba(27, 54, 93, 0.28);
  margin-bottom: 4px;
}

.ub-find-board__preview-empty-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.75);
}

.ub-find-board__preview-empty-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.55);
  max-width: 320px;
}

/* ── Right: collection-style board panel ── */
.ub-find-board__panel {
  min-height: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.08);
  overflow: hidden;
}

.ub-find-board__panel .md-board-collection__header {
  padding: 14px 14px 10px;
}

.ub-find-board__panel .md-board-collection__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ub-find-board__search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.ub-find-board__search-row > *:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.ub-find-board__locale-wrap {
  flex: 0 0 auto;
  min-width: 120px;
}

.ub-find-board__create {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

/* Primary action buttons (Create a New Board, Open Board): keep the shared
   .md-btn--primary.md-btn--pill look untouched (the original lighter wash, text,
   and blur all inherit from the base) — only swap the base's light hairline for
   a small dark outline so the buttons read with a bit more definition against
   the pale panel.
   SPECIFICITY: the base rule is (0,2,0) with !important; !important vs
   !important is decided by specificity, so this override MUST include both
   button classes to win. The :hover/:focus-visible selectors are listed too
   ((0,4,0)) so the base :hover ((0,3,0), which resets border-color) can't drop
   the dark outline on hover. */
.ub-find-board__create.md-btn--primary.md-btn--pill,
.ub-find-board__preview-open.md-btn--primary.md-btn--pill,
.ub-find-board__create.md-btn--primary.md-btn--pill:hover,
.ub-find-board__preview-open.md-btn--primary.md-btn--pill:hover,
.ub-find-board__create.md-btn--primary.md-btn--pill:focus-visible,
.ub-find-board__preview-open.md-btn--primary.md-btn--pill:focus-visible {
  border: 1px solid rgba(27, 54, 93, 0.4) !important;
}

/* Selected row highlight (mirrors the collection hover tint) */
.md-board-collection__item--selected {
  background: rgba(27, 54, 93, 0.1);
  color: #1B365D;
}

/* ≤900px: stack the two panes (panel first, preview below) */
@media (max-width: 900px) {
  .ub-find-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(320px, 1fr);
  }
}
/* ==============================================================
   BOARD PICKER — page chrome + compact board rows
   ==============================================================
   Owns everything the standalone home-board picker adds on top of the shared
   `md-home-boards-picker__*` layout that also serves setup and /search/home.
   Kept in its own partial (rather than appended to app.scss) so the compact and
   detailed views stay separable and neither becomes a pile of overrides.

   Two naming families live here on purpose:
     bp-*                              NEW page chrome — heading, toolbar,
                                       search, segmented control. Nothing else
                                       in the app uses these names.
     .ll-boards-grid--compact …        COMPACT-ONLY modifiers on the existing
                                       card markup. Every one is scoped inside
                                       that modifier, so the detailed view keeps
                                       its current appearance untouched.
                                       SHARED, not picker-only (2026-08-16): the
                                       Boards page reuses the identical compact
                                       rows, so these rules key off the neutral
                                       `.ll-boards-grid--compact` modifier and the
                                       `.simple_board_holder` wrapper that BOTH
                                       pages already put around <BoardIcon>,
                                       rather than the picker's own class names.

   Palette comes from _variables.scss ($la-navy #1B365D, $brand-verdigris
   #2A9D8F, $brand-verdigris-aa #1A7B7A, $brand-dusty-denim-aa #2860C9,
   $brand-charcoal-dark #374151). Verdigris is used for borders, dots and fills
   only — never for body text on white, where the AA-dark variants are used.
   ============================================================== */
/* Minimum interactive target. AAC users include people with significant motor
   differences — this floor is not negotiable at any breakpoint. */
/* --------------------------------------------------------------
   0. Shell background stability
   --------------------------------------------------------------
   The page background visibly CHANGED when switching Compact <-> Detailed. It is not a
   toggle bug: the background declaration is byte-identical in both states (verified —
   same image, size and colour). `.md-shell`'s mesh is six radial-gradients positioned in
   PERCENTAGES, and the shell's height is content-driven — measured 1269px in compact vs
   2550px in detailed. Percentage positions resolve against the painting area, so the
   whole mesh re-positions and re-stretches when the list gets shorter.
   `background-attachment: fixed` resolves that area against the VIEWPORT instead, so the
   mesh is identical regardless of how tall the content is.
   SCOPED TO THIS PAGE: fixed attachment is known to be expensive to repaint while
   scrolling on some mobile browsers, so it is not applied app-wide — only here, where a
   control flips the content height dramatically in place.

   `!important` IS REQUIRED here, not decoration: `.md-shell`'s background is declared as
   an `!important` SHORTHAND (app.scss ~44170), and a shorthand resets every sub-property
   — so it sets `background-attachment: scroll !important` and silently outranked a plain
   longhand. Verified: without it the computed value stayed `scroll`.

   SPECIFICITY IS ALSO REQUIRED: this partial is `@use`d, so it emits BEFORE app.scss. At
   equal specificity (0,1,0) with both sides `!important`, source order decided and
   app.scss still won — verified, the computed value stayed `scroll` even with the flag.
   `.md-shell.md-shell--board-picker` is (0,2,0) and wins outright. */
.md-shell.md-shell--board-picker {
  background-attachment: fixed !important;
}

/* --------------------------------------------------------------
   1. Page heading
   -------------------------------------------------------------- */
/* Left-aligned, not centred: everything below it — the category rail, the
   results panel, the board rows — starts on the same left edge, and a centred
   title made the top of the page read as a separate introductory band.
   A ROW, not a block: the supervisor flow puts an "OR / Create My Own Board"
   aside opposite the heading (see .bp-page-head__aside). With no aside — the
   self flow — a single flex child lays out exactly as the block did. */
.md-shell--board-picker .bp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* Heading column. The 340px basis is the wrap trigger: narrower than that and
   the aside drops to its own row rather than squeezing the title. */
.md-shell--board-picker .bp-page-head__text {
  flex: 1 1 340px;
  min-width: 0;
}

.md-shell--board-picker .bp-page-head__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Way back to the entry overlay (.bp-options), which owns the quick-assign and
   create-a-board shortcuts. Deliberately a LINK, not one of the page's pills:
   the shortcuts themselves live in the overlay, and a second pill up here read
   as a third competing action. A <button> underneath — it reopens an overlay,
   it does not navigate — so the button chrome is stripped back to link
   appearance while the 44px target floor is kept. */
.md-shell--board-picker .bp-page-head__options-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #1A7B7A;
  font-size: 15px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.md-shell--board-picker .bp-page-head__options-link:hover {
  color: #1B365D;
}

.md-shell--board-picker .bp-page-head__options-link: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) {
  .md-shell--board-picker .bp-page-head__options-link:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Only the box fixes live here. Size / weight / colour / alignment are set in
   app.scss on `.md-shell--board-picker .md-card--board-picker .md-hero--home-boards
   .md-hero__title` (~5220) — that rule carries `!important` to beat the global
   `.md-hero__title`, so any type declaration here would be dead weight.
   `display` and `height` undo the legacy `h1 { display: inline-block;
   height: 60px }` (app.scss ~1826, written for the old nav-header logo row).
   Nothing else on this page sets an h1 height, so that bare element rule was
   winning: it pinned the heading box to 60px with the text at the top, and the
   ~37px of dead space below it read as a gap before the subtitle. The
   title→subtitle gap is the SUBTITLE's margin-top — the global
   `.md-hero__title { margin: 0 !important }` (~44534) kills any margin here. */
.md-shell--board-picker .bp-page-head__title {
  display: block;
  height: auto;
  margin: 0;
  letter-spacing: -0.01em;
}

.md-shell--board-picker .bp-page-head__subtitle {
  /* Owns the title→subtitle gap (the h1's own margin is pinned to 0 by a global
     !important — see .bp-page-head__title above). This element carries only the
     bp-* class, so nothing competes for its margin. */
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: #374151;
}

/* --------------------------------------------------------------
   2. Supervisor entry overlay (.bp-options)
   Shown to a supporter opening the picker for a communicator, before they
   engage with the grid: browse, quick-assign, or create.

   RELATIONSHIP TO .nb-create-chooser (app.scss ~54560): same SHAPE on purpose —
   scrim, one panel, title, hairline separator, stacked options with OR between
   them — because it is the same kind of decision. Everything that carries
   identity is different on purpose, so a supporter never mistakes this for the
   create-board chooser:
     scrim    verdigris -> navy, not navy -> navy
     panel    wider (520), accent bar across the top, LEFT-aligned copy
     eyebrow  a task chip ("Home board setup") the chooser does not have
     options  left-aligned with a fixed icon well; the chooser centres its pairs
   -------------------------------------------------------------- */
.bp-options {
  position: fixed;
  inset: 0;
  /* BELOW Bootstrap's modal layer (.modal-backdrop 1040 / .modal 1050), not
     above it. This scrim was 5900 — chosen only against the create-board
     chooser's 6000 — which put it over every dialog its own buttons can open:
       • "Create New Board" runs appState.check_for_needing_purchase(), whose
         promise settles ONLY when the user dismisses the premium-required
         modal. Painted behind the scrim it was invisible and unclickable, so
         for an expired or modeling-only supporter the flow hung with no way
         out but a page reload.
       • Quick Assign's failure paths call modal.error(...) — the message
         landed under the scrim, so the button just re-enabled in silence.
     1030 keeps it over the page and its chrome (navbar ~1000-1001) while both
     the backdrop and the dialog clear it. Still below the create-board
     chooser's 6000, so that ordering is unchanged. */
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 38%, rgba(26, 123, 122, 0.55), rgba(27, 54, 93, 0.82));
  backdrop-filter: blur(7px) saturate(0.92);
  -webkit-backdrop-filter: blur(7px) saturate(0.92);
}

.bp-options__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 24px 32px 32px;
  border-radius: 20px;
  overflow: hidden; /* clips the accent bar to the rounded corner */
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 24px 60px rgba(27, 54, 93, 0.3), 0 4px 12px rgba(27, 54, 93, 0.14);
  text-align: left;
}

/* Accent bar — the fastest read that this is not the create-board chooser. */
.bp-options__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #1A7B7A 0%, rgba(40, 96, 201, 0.85) 100%);
}

.bp-options__close {
  position: absolute;
  top: 16px;
  right: 16px;
  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;
}

.bp-options__close:hover {
  background: rgba(27, 54, 93, 0.09);
  color: #1B365D;
}

.bp-options__close: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) {
  .bp-options__close:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.bp-options__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bp-options__title {
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1B365D;
}

.bp-options__subtitle {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: #374151;
}

/* The app's modern divider: verdigris→navy hairline fading at both ends. Same
   recipe as .nb-create-chooser__separator, left-anchored rather than centred to
   match this panel's alignment. */
.bp-options__separator {
  height: 2px;
  margin: 16px 0 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(26, 123, 122, 0.55) 0%, rgba(27, 54, 93, 0.32) 45%, rgba(27, 54, 93, 0) 100%);
}

.bp-options__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.bp-options__btn {
  display: flex;
  align-items: center;
  /* The icon + label travel together as one CENTRED group, the same way the
     create-board chooser sets its options — the row is the target, so the label
     reads as the middle of it rather than as a list item hanging off a rail. */
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  color: #1B365D;
  font-size: 17px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bp-options__btn:hover:not([disabled]) {
  border-color: rgba(26, 123, 122, 0.45);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.1);
  transform: translateY(-1px);
}

.bp-options__btn: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) {
  .bp-options__btn:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

.bp-options__btn[disabled] {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* Fixed well so the three glyphs read as one set however wide each path is. */
.bp-options__btn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.1);
  color: #1A7B7A;
}

.bp-options__btn-label {
  min-width: 0;
}

/* Quick assign is the shortcut, not the default — a warmer well marks it as the
   different KIND of action without promoting it above browsing. */
.bp-options__btn--quick .bp-options__btn-icon {
  background: rgba(76, 134, 216, 0.14);
  color: #2860C9;
}

/* In-flight ellipsis: three dots fading in sequence. A copy of a full board set
   runs for minutes, and a static "…" makes a working page look hung. */
.bp-options__dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  margin-left: 4px;
  /* Reserve the full width up front so the label doesn't jitter as dots fade. */
  min-width: 21px;
}

.bp-options__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: bp-options-dot 1.2s ease-in-out infinite;
}

.bp-options__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.bp-options__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bp-options-dot {
  0%, 70%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
/* What the wait is FOR. 14px keeps it clearly secondary to the 17px option
   labels while staying readable. */
.bp-options__progress-note {
  margin: 8px 0 0;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
  text-align: center;
}

.bp-options__or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(27, 54, 93, 0.45);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.bp-options__or::before,
.bp-options__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(27, 54, 93, 0.12);
}

/* --------------------------------------------------------------
   3. Results panel head + toolbar
   The panel reads top to bottom as: WHICH boards (head) -> what they are
   (description) -> controls (toolbar) -> the boards. The head and the toolbar
   were one row until this pass, which put the controls above the description
   and gave the panel a second introduction.
   -------------------------------------------------------------- */
/* Title and count on one baseline-aligned row, separated by a middot. */
.bp-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin: 0 0 7px;
}

.bp-results-head__title {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  color: #1B365D;
}

.bp-results-head__sep {
  /* Big and solid enough to actually read as a separator — at 16px/0.30 the
     middot was nearly invisible against the panel. `line-height: 1` keeps the
     taller glyph from growing the baseline-aligned row. */
  color: rgba(27, 54, 93, 0.55);
  font-size: 24px;
  line-height: 1;
}

.bp-results-head__count {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #374151;
}

/* Controls only. Shares the board grid's left edge; the search field goes
   full-width once the row wraps rather than shrinking below the touch floor. */
.bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin: 0 0 15px;
}

.bp-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Grow to fill the toolbar line so the two controls can sit at opposite ends.
     Without this the block is content-sized, and once the toolbar wraps it is
     the only item on its line — where the parent's `space-between` parks it
     left with all the slack stranded to its right. `space-between` here (rather
     than an auto margin on the switcher) keeps ONE alignment mechanism, and it
     is what puts search first / switcher second on every line. */
  flex: 1 1 auto;
  min-width: 0;
}

/* --------------------------------------------------------------
   4. Search
   -------------------------------------------------------------- */
.bp-search {
  position: relative;
  display: flex;
  align-items: center;
  /* Grows with the toolbar up to a readable ceiling — past ~450px a search
     field is mostly empty space. */
  width: min(100%, 450px);
  flex: 1 1 280px;
}

.bp-search__icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: rgba(27, 54, 93, 0.55);
  pointer-events: none;
}

.bp-search__input {
  width: 100%;
  /* 46px: matches the segmented control beside it (44px segments + its 1px
     borders), so the two read as one toolbar row. */
  height: 46px;
  padding: 0 40px 0 42px;
  /* A visible edge, not a hairline — this is an input, and it has to look like
     one against the panel behind it. */
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 12px;
  background: #FFFFFF;
  color: #1B365D;
  font-size: 15px;
  line-height: 1.3;
  appearance: none;
}

.bp-search__input::placeholder {
  color: rgba(27, 54, 93, 0.55);
  opacity: 1;
}

.bp-search__input: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) {
  .bp-search__input:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}
.bp-search__input:focus-visible {
  border-color: #1A7B7A;
}

.bp-search__clear {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #374151;
  cursor: pointer;
}

.bp-search__clear:hover {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
}

.bp-search__clear: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) {
  .bp-search__clear:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* --------------------------------------------------------------
   5. Segmented control (board display style)
   -------------------------------------------------------------- */
/* Visually matched to the page's top pill-nav (`.md-pillnav` /
   `.md-pillnav__pill` in app.scss ~:43927) so the two controls read as one
   family: fully rounded shell, near-white fill, hairline border, whisper
   shadow, `overflow: hidden` so the active pill's corners clip to the shell,
   and the same 135deg blue-grey -> charcoal-blue gradient on the active pill.

   NOT reusing the `.md-pillnav` classes directly: that rule set is
   `!important` throughout and carries `max-width: 1120px` + `margin: 42px auto`,
   which would have to be unwound with a stack of counter-overrides inside a
   toolbar. Mirroring the recipe with the same tokens is the smaller change.

   One deliberate divergence: the nav's pills are 32px tall, below the $bp-target
   touch floor this page is held to. Each segment is a full 44px here, and with
   the shell's 1px border that puts the control at 46px — the same height as the
   search field beside it, so the toolbar reads as one row. The segments fill the
   shell (no inner padding), so `overflow: hidden` clips the active pill's
   corners to the shell's radius. */
.bp-segmented {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.bp-segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SLIM, matching the pill-nav's 32px pills (2026-08-16, requested).
     NOTE this reverses the deliberate divergence documented above: the control no longer
     meets this page's 44px `$bp-target` floor, and it is no longer the same height as the
     search field beside it, so the toolbar reads as two heights rather than one. 32px
     still clears the WCAG 2.2 AA 24px minimum target size — it is the AAA 44px guidance
     that is given up. Restore `min-height: $bp-target` to undo. */
  min-height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(75, 78, 92, 0.85);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.bp-segmented__option:hover:not(.bp-segmented__option--active) {
  background: rgba(27, 54, 93, 0.05);
  color: #1B365D;
}

/* ACTIVE OPTION — shares the LAYOUT selector's surface (2026-08-16, requested).
   Same gradient, ink and lift as `.ub-boards-page__layout-toggle-btn--active`
   (app.scss ~50931), so the two segmented controls on the Boards page read as one
   component rather than as a dark pill beside a light card.
   SHAPE AND DIRECTION ARE DELIBERATELY UNCHANGED: this keeps its 999px pill radius,
   32px height, 16px padding and horizontal run — only the surface is borrowed.
   The hairline is an INSET RING, not a border: the base rule sets `border: 0`, so a real
   border would only exist in the active state and each toggle would jump 2px wider when
   selected.
   INK: navy, not the white this carried on the old dark fill — white measures 1.29:1 on
   this ramp. Navy is 11.39:1 on the light stop and 9.38:1 on the dark one.
   Change both rules together if the surface is ever restyled. */
.bp-segmented__option--active {
  background: linear-gradient(135deg, #f6f8fa 0%, #dce3ec 100%);
  color: #1B365D;
  box-shadow: inset 0 0 0 1px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14);
}

.bp-segmented__option: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) {
  .bp-segmented__option:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* --------------------------------------------------------------
   6. Compact board rows
   Every rule below is scoped inside `--compact`; the detailed cards are
   untouched.

   BOTH grid classes are chained on the container rule. The `.md-shell--board-picker`
   ancestor alone only TIES the page's own grid rule (app.scss ~5259, also
   (0,2,0)) — and that one is emitted later (`@use "board_picker"` is line 13 of
   app.scss), so it was quietly winning and this whole rule was inert. Chaining
   `.md-home-boards-picker__grid.ll-boards-grid--compact` makes it
   (0,3,0), which wins on merit rather than on source order.
   -------------------------------------------------------------- */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact {
  /* One column, two from 1024px up (see the media query below). Fixed column
     counts rather than `auto-fit`: auto-fit re-flows at whatever width the
     tracks happen to reach, so the count could change by one between two similar
     viewports — for scanning and for switch/eye-gaze users a predictably 1-up or
     2-up list is worth more than an opportunistic extra track. */
  grid-template-columns: 1fr;
  justify-content: stretch;
  /* A quarter tighter than the 10px it replaced — compact rows read as one list,
     not as separate cards floating apart. */
  gap: 8px;
  /* Each card is its own height. The default `stretch` made every card in a row
     as tall as the tallest — one two-line title dragged all its neighbours up to
     ~96px, which is what made "compact" read as "detailed". */
  align-items: start;
}

@media (min-width: 1024px) {
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Same reason: the holder must not stretch either (the page's own rule sets
   `align-self: stretch` at (0,2,0), so this answers at (0,3,0)).

   Padding 0: the holder carries `padding: 5px` from the legacy
   `.simple_board_holder` (app.scss ~10320), which the detailed gallery cards
   want as breathing room inside their grid cell. On a compact row it is a
   second, invisible gutter stacked on the grid's own 8px — it made the real
   spacing 18px and inset every card from the panel edges by 5px. The grid gap
   is the one thing that should control the rhythm here. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder {
  align-self: start;
  padding: 0;
}

/* Card shell: one border, one restrained shadow — no halo.
   SINGLE row. The Preview pill is suppressed in compact (board-icon.hbs
   @compactRow), so the second grid row it used to occupy was empty and only
   added height. One row also means `align-items: center` centres the title
   against the icon rather than baseline-ing it to a phantom row.
   Height: 48px icon + 8px top + 8px bottom = 64px for a single-line title — 8px
   off the previous 72px. The icon had to come down with it: at 54px it alone set
   a 72px floor no padding change could get under. A two-line title grows that
   card and only that card.

   DEPTH. Three surfaces, each a step above the one behind it: the flat panel,
   the card lifted off it by a two-layer shadow (a tight contact shadow plus a
   wider ambient one — one blurred shadow alone reads as a smudge), and the
   thumbnail tile lifted off the card by its own hairline shadow. The card's
   background is a barely-there vertical gradient rather than flat white, which
   is what keeps a 64px row from looking like a rectangle of paper.

   !important THROUGHOUT, and not by preference: the shared `board-card-modern`
   mixin (app.scss ~94, included at `.md-home-boards-picker__board
   .btn.simple_board_icon`) declares radius / border / background / box-shadow /
   transition with !important. Plain declarations here lose to it no matter how
   specific they are, which is why the compact rows still carried the gallery
   card's 28px radius and 0 8px 20px + 0 24px 48px hover shadow. `height: auto`
   answers the same rule's `height: 100%`. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 64px;
  height: auto;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.09) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFD 100%) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.07), 0 4px 12px rgba(27, 54, 93, 0.08) !important;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

/* The mixin paints a 2px gradient hairline across the top of every card. On a
   gallery tile it reads as a highlight; on a 72px row it is just noise. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon::before {
  display: none;
}

/* Hover raises the same two layers rather than swapping in a different shadow,
   so the card reads as lifting off the panel instead of changing material. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:hover {
  border-color: rgba(42, 157, 143, 0.42) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.08), 0 8px 20px rgba(27, 54, 93, 0.13) !important;
  transform: translateY(-1px);
}

/* Pressed: back down onto the panel — contact shadow only. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:active {
  transform: none;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.1) !important;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon: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) {
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Standardised thumbnail frame — one size, one padding, never cropped.
   The shared board-card-modern mixin forces width/height/padding with
   !important, so these must answer in kind at (0,5,0). */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon img {
  grid-column: 1;
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 5px !important;
  margin: 0 !important;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: #FFFFFF;
  /* Its own hairline shadow — the tile sits ON the card, the card sits on the
     panel. That third step is most of what "dimension" means at this size. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.08);
  object-fit: contain;
  align-self: center;
}

/* Title: two intentional lines before clamping, left aligned. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .name {
  grid-column: 2;
  width: 100% !important;
  margin: 0 !important;
  align-self: center;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  color: #1B365D !important;
  max-height: 2.5em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Long names step down a size. Set by measurement, not by CSS — board-icon.js
   #_syncCompactNameSize adds this class only when the name actually overflows
   the two-line clamp, so 14px is spent on the names that need it and every
   other row keeps the 16px reading size. `max-height` is in em, so the clamp
   box follows the smaller size automatically. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .name.board-icon__name--clamped {
  font-size: 14px !important;
}

/* Directional affordance — the whole row is the target, this just points. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .board-icon__row-chevron {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  /* 26px + the grid's 12px column-gap = 38px reserved at the right edge, so a
     clamped two-line title runs out of room before it reaches the chevron. */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Third in the card's hierarchy — title, then thumbnail, then this. A shallow
     well rather than a bare glyph: it gives the right edge a defined affordance
     without competing with the name. */
  background: rgba(27, 54, 93, 0.04);
  color: rgba(27, 54, 93, 0.42);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:hover .board-icon__row-chevron {
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
}

/* Suppressed in compact: size chip, language marker, CC-By credit, byline.
   `.author` needs the full chain — the board-card-modern mixin declares
   `display: flex !important` for it at (0,4,0).

   The size/info chip is suppressed in compact EVERYWHERE, including the Boards page.
   It is absolutely-positioned chrome sized for a full tile; a compact ROW has no space
   for it and it lands on top of the board name. Un-hiding it there to make the preview
   (and so delete) reachable skewed every compact row — see the note in
   available-boards-section.hbs about where deleting a board lives instead. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .board-icon__info,
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .board-icon__lang-marker,
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .board-icon__credit {
  display: none !important;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder {
  align-self: start;
  padding: 0;
}

/* Card shell: one border, one restrained shadow — no halo.
   SINGLE row. The Preview pill is suppressed in compact (board-icon.hbs
   @compactRow), so the second grid row it used to occupy was empty and only
   added height. One row also means `align-items: center` centres the title
   against the icon rather than baseline-ing it to a phantom row.
   Height: 48px icon + 8px top + 8px bottom = 64px for a single-line title — 8px
   off the previous 72px. The icon had to come down with it: at 54px it alone set
   a 72px floor no padding change could get under. A two-line title grows that
   card and only that card.

   DEPTH. Three surfaces, each a step above the one behind it: the flat panel,
   the card lifted off it by a two-layer shadow (a tight contact shadow plus a
   wider ambient one — one blurred shadow alone reads as a smudge), and the
   thumbnail tile lifted off the card by its own hairline shadow. The card's
   background is a barely-there vertical gradient rather than flat white, which
   is what keeps a 64px row from looking like a rectangle of paper.

   !important THROUGHOUT, and not by preference: the shared `board-card-modern`
   mixin (app.scss ~94, included at `.md-home-boards-picker__board
   .btn.simple_board_icon`) declares radius / border / background / box-shadow /
   transition with !important. Plain declarations here lose to it no matter how
   specific they are, which is why the compact rows still carried the gallery
   card's 28px radius and 0 8px 20px + 0 24px 48px hover shadow. `height: auto`
   answers the same rule's `height: 100%`. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 64px;
  height: auto;
  padding: 8px 14px;
  border: 1px solid rgba(27, 54, 93, 0.09) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFD 100%) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.07), 0 4px 12px rgba(27, 54, 93, 0.08) !important;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

/* The mixin paints a 2px gradient hairline across the top of every card. On a
   gallery tile it reads as a highlight; on a 72px row it is just noise. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon::before {
  display: none;
}

/* Hover raises the same two layers rather than swapping in a different shadow,
   so the card reads as lifting off the panel instead of changing material. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:hover {
  border-color: rgba(42, 157, 143, 0.42) !important;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.08), 0 8px 20px rgba(27, 54, 93, 0.13) !important;
  transform: translateY(-1px);
}

/* Pressed: back down onto the panel — contact shadow only. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:active {
  transform: none;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.1) !important;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon: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) {
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* Standardised thumbnail frame — one size, one padding, never cropped.
   The shared board-card-modern mixin forces width/height/padding with
   !important, so these must answer in kind at (0,5,0). */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon img {
  grid-column: 1;
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 5px !important;
  margin: 0 !important;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: #FFFFFF;
  /* Its own hairline shadow — the tile sits ON the card, the card sits on the
     panel. That third step is most of what "dimension" means at this size. */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.08);
  object-fit: contain;
  align-self: center;
}

/* Title: two intentional lines before clamping, left aligned. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .name {
  grid-column: 2;
  width: 100% !important;
  margin: 0 !important;
  align-self: center;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  color: #1B365D !important;
  max-height: 2.5em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Long names step down a size. Set by measurement, not by CSS — board-icon.js
   #_syncCompactNameSize adds this class only when the name actually overflows
   the two-line clamp, so 14px is spent on the names that need it and every
   other row keeps the 16px reading size. `max-height` is in em, so the clamp
   box follows the smaller size automatically. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .name.board-icon__name--clamped {
  font-size: 14px !important;
}

/* Directional affordance — the whole row is the target, this just points. */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .board-icon__row-chevron {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  /* 26px + the grid's 12px column-gap = 38px reserved at the right edge, so a
     clamped two-line title runs out of room before it reaches the chevron. */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Third in the card's hierarchy — title, then thumbnail, then this. A shallow
     well rather than a bare glyph: it gives the right edge a defined affordance
     without competing with the name. */
  background: rgba(27, 54, 93, 0.04);
  color: rgba(27, 54, 93, 0.42);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:hover .board-icon__row-chevron {
  background: rgba(42, 157, 143, 0.12);
  color: #1A7B7A;
}

/* Suppressed in compact: language marker, CC-By credit, byline.
   `.author` needs the full chain — the board-card-modern mixin declares
   `display: flex !important` for it at (0,4,0). */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .board-icon__lang-marker,
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .board-icon__credit {
  display: none !important;
}

/* The "i" + grid-size chip is suppressed only where the WHOLE CARD is the preview
   target — the picker's compact rows. `ll-boards-grid--compact` is shared with the
   Boards page grid, whose cards OPEN the board instead, so hiding it there removed the
   only route to the preview and, with the hover trash gone, the only delete affordance
   on the page. Excluded by the grid's own class rather than by adding a competing
   rule (CLAUDE.md 0.7). */
.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact:not(.ub-boards-page__board-grid) .board-icon__info {
  display: none !important;
}

.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .author {
  display: none !important;
}

/* --------------------------------------------------------------
   7. Motion + responsive
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* !important to match the shell rule, which has to out-shout the mixin. */
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon {
    transition: none !important;
  }
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon:hover {
    transform: none;
  }
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon .board-icon__row-chevron {
    transition: none;
  }
  .bp-options__btn {
    transition: none;
  }
  .bp-options__btn:hover:not([disabled]) {
    transform: none;
  }
  /* Hold the dots at full strength rather than animating them — the label and
     the progress note still say the work is running. */
  .bp-options__dot {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 900px) {
  .bp-toolbar__controls {
    width: 100%;
  }
  /* Search takes the slack once the toolbar wraps, up to its own ceiling — the
     switcher stays its natural size at the right end of the row. */
  .bp-search {
    flex: 1 1 240px;
  }
}
@media (max-width: 640px) {
  /* (The phone size for the page title lives in app.scss beside the rule that
     sets its desktop size — at (0,2,0) it could not win from here, media query
     or not.) */
  .bp-toolbar__controls {
    gap: 8px;
  }
  /* Each control takes a full row rather than shrinking below a usable size. */
  .bp-search {
    flex: 1 1 100%;
    width: 100%;
  }
  .bp-segmented {
    flex: 1 1 100%;
    width: 100%;
  }
  .bp-segmented__option {
    flex: 1 1 50%;
    padding: 0 12px;
  }
  .ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder .btn.simple_board_icon img {
    width: 50px !important;
    height: 50px !important;
  }
}
.report-panel {
  --report-navy: #1B365D;
  --report-ink: #10182f;
  --report-muted: #53627d;
  --report-verdigris: #2A9D8F;
  --report-verdigris-aa: #1A7B7A;
  --report-denim: #4C86D8;
  --report-denim-aa: #2860C9;
  --report-coral: #d84d32;
  --report-positive: #167866;
  --report-negative: #b33a2b;
  --report-neutral: #8593ad;
  --report-border: rgba(76, 134, 216, 0.2);
  --report-surface: rgba(255, 255, 255, 0.78);
  --report-surface-strong: rgba(255, 255, 255, 0.92);
  --report-chart-card-height: 443px;
  width: 100%;
  max-width: 1792px;
  margin: 0 auto;
  padding: clamp(18px, 2vw, 32px);
}

.report-details {
  margin-top: -8px;
  margin-bottom: 0;
}

.report-details > .md-stats-section-head:first-child {
  margin-top: 0;
}

.communication-report {
  position: relative;
  color: var(--report-ink);
  isolation: isolate;
}

.communication-report::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.communication-report__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.communication-report__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.communication-report__heading h1 {
  display: block;
  height: auto;
  margin: 0;
  color: var(--report-ink);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.communication-report__date-range {
  margin: 6px 0 0;
  color: var(--report-muted);
  font-size: 17px;
  font-weight: 550;
}

.communication-report__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.communication-report__controls .md-stats-filter {
  padding: 0;
}

.communication-report__controls > .ember-view {
  min-width: 0;
}

.communication-report__controls .md-stats-filter__form {
  justify-content: flex-end;
}

.communication-report__controls .md-stats-filter__period-bar {
  align-items: flex-end;
}

.progress-highlight,
.report-kpi,
.report-trend,
.report-insights,
.report-secondary,
.communication-report__empty {
  border: 1px solid var(--report-border);
  background: var(--report-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 13px 29px rgba(27, 54, 93, 0.08);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.progress-highlight {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: clamp(16px, 1.8vw, 24px);
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.9), rgba(232, 247, 245, 0.72) 58%, rgba(237, 243, 255, 0.78));
}

.progress-highlight--positive {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.92), rgba(222, 244, 240, 0.82) 58%, rgba(236, 249, 246, 0.8));
  border-color: rgba(42, 157, 143, 0.34);
}

.progress-highlight--neutral {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 252, 0.8) 58%, rgba(244, 248, 255, 0.78));
  border-color: rgba(76, 134, 216, 0.26);
}

.progress-highlight--neutral .progress-highlight__icon {
  color: var(--report-denim-aa);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(226, 236, 250, 0.9));
  border-color: rgba(76, 134, 216, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 8px 18px rgba(40, 96, 201, 0.12);
}

.progress-highlight--negative {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 236, 0.78) 58%, rgba(255, 246, 242, 0.8));
  border-color: rgba(216, 77, 50, 0.28);
}

.progress-highlight__icon,
.report-kpi__icon,
.report-insight__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--report-verdigris-aa);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(218, 242, 238, 0.88));
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 8px 18px rgba(26, 123, 122, 0.14);
}

.progress-highlight--negative .progress-highlight__icon {
  color: var(--report-negative);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 228, 222, 0.9));
  border-color: rgba(216, 77, 50, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 8px 18px rgba(179, 58, 43, 0.14);
}

.progress-highlight__icon {
  width: 76px;
  height: 76px;
}

.progress-highlight__icon svg {
  width: 36px;
  height: 36px;
}

.report-kpi__icon svg {
  width: 29px;
  height: 29px;
}

.report-insight__icon svg {
  width: 22px;
  height: 22px;
}

.progress-highlight__content {
  min-width: 0;
}

.report-panel-heading__eyebrow {
  margin: 0 0 6px;
  color: var(--report-muted);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.communication-report .progress-highlight h2 {
  margin: 0 !important;
  color: var(--report-ink);
  font-size: clamp(18px, 1.9vw, 22px) !important;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.progress-highlight__description {
  margin: 8px 0 0;
  color: var(--report-navy);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.report-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 100px;
  padding: 16px 18px;
  border-radius: 22px;
}

.report-kpi__icon {
  width: 56px;
  height: 56px;
}

.report-kpi--sessions .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(77, 184, 196, 0.16) 0%, rgba(77, 184, 196, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(77, 184, 196, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--total-sessions .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(77, 184, 196, 0.16) 0%, rgba(77, 184, 196, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(77, 184, 196, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--total-words .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(77, 184, 196, 0.16) 0%, rgba(77, 184, 196, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(77, 184, 196, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--utterances .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.16) 0%, rgba(58, 131, 234, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(58, 131, 234, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--total-utterances .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.16) 0%, rgba(58, 131, 234, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(58, 131, 234, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--total-buttons .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(58, 131, 234, 0.16) 0%, rgba(58, 131, 234, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(58, 131, 234, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--words-per-utterance .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(72, 134, 94, 0.16) 0%, rgba(72, 134, 94, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(72, 134, 94, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--words-per-minute .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(72, 134, 94, 0.16) 0%, rgba(72, 134, 94, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(72, 134, 94, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--utterances-per-minute .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(211, 176, 112, 0.16) 0%, rgba(211, 176, 112, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(211, 176, 112, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi--buttons-per-minute .report-kpi__icon {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 58%), linear-gradient(160deg, rgba(211, 176, 112, 0.16) 0%, rgba(211, 176, 112, 0.26) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(211, 176, 112, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(27, 54, 93, 0.1);
}

.report-kpi__content {
  min-width: 0;
}

.report-kpi__value {
  margin: 0;
  color: var(--report-ink);
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1;
}

.report-kpi__label {
  margin: 6px 0 0;
  color: var(--report-muted);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}

.report-kpi__change {
  align-self: start;
  justify-self: end;
  margin: 0;
  text-align: right;
}

.report-kpi__change-value {
  display: block;
  font-size: 16px;
  font-weight: 750;
  white-space: nowrap;
}

.report-kpi__change-caption {
  display: block;
  margin-top: 2px;
  color: var(--report-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.report-kpis__basis {
  margin: 32px 2px 0;
  color: var(--report-muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.report-kpi__change--positive {
  color: var(--report-positive);
}

.report-kpi__change--negative {
  color: var(--report-negative);
}

.report-kpi__change--neutral {
  color: var(--report-denim-aa);
}

.report-kpis--compare {
  --report-ink: #10182f;
  --report-muted: #53627d;
  --report-verdigris-aa: #1a7b7a;
  --report-border: rgba(76, 134, 216, 0.2);
  --report-surface: rgba(255, 255, 255, 0.78);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.report-kpi--compact {
  min-height: 76px;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  grid-template-columns: auto minmax(0, 1fr);
}

.report-kpi--compact .report-kpi__icon {
  width: 40px;
  height: 40px;
}

.report-kpi--compact .report-kpi__icon svg {
  width: 21px;
  height: 21px;
}

.report-kpi--compact .report-kpi__value {
  font-size: clamp(20px, 1.9vw, 24px);
}

.report-kpi--compact .report-kpi__label {
  margin-top: 3px;
  font-size: 14px;
}

@media (max-width: 576px) {
  .report-kpis--compare {
    grid-template-columns: minmax(0, 1fr);
  }
}
.report-analysis {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(288px, 0.95fr);
  gap: 12px;
  margin-top: 12px;
}

.report-trend,
.report-insights {
  min-width: 0;
  border-radius: 24px;
}

.report-trend {
  padding: clamp(20px, 2vw, 28px);
}

.report-insights {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 24px);
}

.report-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.report-panel-heading > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.communication-report .report-panel-heading h2 {
  margin: 0 !important;
  color: var(--report-ink);
  font-size: 21px !important;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.report-trend__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 650;
  list-style: none;
}

.report-trend__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-trend__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 5px;
}

.report-trend__legend-swatch--primary {
  background: var(--report-denim-aa);
}

.report-trend__legend-swatch--secondary {
  background: var(--report-verdigris-aa);
}

.report-trend__chart {
  width: 100%;
  min-height: 288px;
}

.report-trend__unavailable {
  display: grid;
  place-items: center;
  min-height: 192px;
  margin: 0;
  padding: 24px;
  color: var(--report-muted);
  text-align: center;
  border: 1px dashed var(--report-border);
  border-radius: 16px;
  font-size: 16px;
}

.report-trend__data {
  margin-top: 0;
}

.report-trend__data-summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 0;
  color: var(--report-denim-aa);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: right;
  list-style-position: inside;
}

.report-trend__data-scroll {
  max-height: 288px;
  overflow: auto;
}

.report-trend__data table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.report-trend__data caption {
  padding-bottom: 8px;
  color: var(--report-muted);
  font-size: 15px;
  text-align: left;
}

.report-trend__data th,
.report-trend__data td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--report-border);
  color: var(--report-navy);
  text-align: right;
}

.report-trend__data th:first-child,
.report-trend__data td:first-child {
  text-align: left;
}

.report-trend__data thead th {
  position: sticky;
  top: 0;
  background: var(--report-surface-strong);
  color: var(--report-ink);
}

.report-insights__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(76, 134, 216, 0.16);
}

.report-insight:first-child {
  padding-top: 4px;
}

.report-insight:last-child {
  border-bottom: 0;
}

.report-insight__icon {
  width: 44px;
  height: 44px;
}

.communication-report .report-insight__content h3 {
  margin: 0;
  color: var(--report-ink);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
}

.report-insight__content p,
.report-insights__empty {
  margin: 5px 0 0;
  color: var(--report-muted);
  font-size: 15px;
  line-height: 1.45;
}

.report-chart-card {
  display: flex;
  flex-direction: column;
  height: var(--report-chart-card-height);
  padding: 16px 18px 18px;
  border: 1px solid var(--report-border);
  border-radius: 20px;
  background: var(--report-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 13px 29px rgba(27, 54, 93, 0.08);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.report-chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-chart-card .report-chart-card__title {
  margin: 0;
  color: var(--report-ink);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.report-chart-card__head--stacked {
  flex-wrap: wrap;
  row-gap: 10px;
}

.report-chart-card__head--stacked .report-chart-card__title,
.report-chart-card__head--stacked .report-chart-card__actions {
  flex: 1 0 100%;
}

.report-chart-card__head--stacked .report-chart-card__actions {
  justify-content: flex-start;
}

.report-chart-card__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 18px;
  row-gap: 6px;
}

.report-chart-card .report-chart-card__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--report-denim-aa);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.report-chart-card .report-chart-card__action:hover {
  color: var(--report-navy);
}

.report-chart-card__body {
  flex: 1 1 auto;
  min-height: 0;
}

.report-chart-card__body--scroll {
  overflow-y: auto;
}

.report-chart-card .md-stats-chart--word-usage {
  height: 100%;
}

.report-proportion {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}

.report-proportion__figure {
  margin: 0;
  line-height: 1.1;
}

.report-proportion__value {
  display: block;
  color: var(--report-ink);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.report-proportion__unit {
  display: block;
  margin-top: 4px;
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 650;
}

.report-proportion__track {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: rgba(76, 134, 216, 0.12);
  overflow: hidden;
}

.report-proportion__segment {
  height: 100%;
}

.report-proportion__segment--core {
  background: var(--report-denim-aa);
  box-shadow: 2px 0 0 0 #fff;
}

.report-proportion__segment--fringe {
  background: var(--report-neutral);
}

.report-proportion__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}

.report-proportion__legend-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.report-proportion__legend dt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 650;
}

.report-proportion__legend dd {
  margin: 0;
  color: var(--report-navy);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.report-proportion__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.report-proportion__swatch--core {
  background: var(--report-denim-aa);
}

.report-proportion__swatch--fringe {
  background: var(--report-neutral);
}

.report-bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-bar-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 5px;
  align-items: baseline;
}

.report-bar-list__label {
  color: var(--report-navy);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.report-bar-list__value {
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.report-bar-list__track {
  grid-column: 1/-1;
  display: block;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: rgba(76, 134, 216, 0.12);
}

.report-bar-list__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--report-verdigris-aa);
}

.md-stats-vocab-row {
  --report-chart-card-height: 472px;
}

.report-chart-card__empty {
  color: var(--report-muted);
  font-size: 15px;
}

.report-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.report-chart-table th,
.report-chart-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--report-border);
  color: var(--report-navy);
  text-align: right;
  font-weight: 600;
}

.report-chart-table th:first-child,
.report-chart-table td:first-child {
  text-align: left;
}

.report-chart-table thead th {
  position: sticky;
  top: 0;
  background: var(--report-surface-strong);
  color: var(--report-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-chart-table tbody tr:last-child th,
.report-chart-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-chart-table__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--report-navy);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.report-chart-table__link:hover {
  color: var(--report-denim-aa);
  text-decoration: underline;
}

.report-word-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding-bottom: 4px;
}

.report-chart-card .report-word-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--report-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--report-navy);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.report-chart-card .report-word-chip.weight_3,
.report-chart-card .report-word-chip.weight_4,
.report-chart-card .report-word-chip.weight_5 {
  border-color: rgba(76, 134, 216, 0.3);
  background: rgba(76, 134, 216, 0.12);
  color: var(--report-navy);
  font-size: 15px;
  font-weight: 650;
}

.report-chart-card .report-word-chip.weight_6,
.report-chart-card .report-word-chip.weight_7,
.report-chart-card .report-word-chip.weight_8 {
  border-color: rgba(40, 96, 201, 0.36);
  background: rgba(76, 134, 216, 0.2);
  color: var(--report-navy);
  font-size: 16px;
  font-weight: 700;
}

.report-chart-card .report-word-chip.weight_9,
.report-chart-card .report-word-chip.weight_10 {
  border-color: rgba(40, 96, 201, 0.46);
  background: rgba(76, 134, 216, 0.28);
  color: var(--report-navy);
  font-size: 17px;
  font-weight: 750;
}

.report-chart-card .report-word-chip.weight_0 {
  border-style: dashed;
  border-color: rgba(83, 98, 125, 0.42);
  background: none;
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 500;
}

.report-chart-card .report-word-chip:hover {
  border-color: rgba(40, 96, 201, 0.55);
  background: rgba(76, 134, 216, 0.34);
  color: var(--report-navy);
}

.report-chart-card :is(button, a, select):focus-visible {
  outline: 3px solid rgba(40, 96, 201, 0.48);
  outline-offset: 3px;
}

.report-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 24px;
  margin: 16px 0 0;
  padding: 16px clamp(16px, 2vw, 24px);
  border-radius: 20px;
}

.report-secondary__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.report-secondary__label {
  margin: 0;
  color: var(--report-muted);
  font-size: 15px;
  font-weight: 600;
}

.report-secondary__value {
  margin: 0;
  color: var(--report-navy);
  font-size: 18px;
  font-weight: 750;
}

.communication-report__empty {
  padding: 48px 24px;
  border-radius: 24px;
  text-align: center;
}

.communication-report .communication-report__empty h2 {
  margin: 0 !important;
  color: var(--report-ink);
  font-size: 23px !important;
}

.communication-report__empty p {
  max-width: 576px;
  margin: 10px auto 0;
  color: var(--report-muted);
  font-size: 17px;
  line-height: 1.55;
}

.communication-report :is(button, select, a, summary, [role=button]):focus-visible {
  outline: 3px solid rgba(40, 96, 201, 0.48);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .report-analysis {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 864px) {
  .communication-report__header {
    align-items: stretch;
    flex-direction: column;
  }
  .communication-report__controls {
    justify-content: flex-start;
  }
  .communication-report__controls .md-stats-filter__form {
    justify-content: flex-start;
  }
  .communication-report__controls .md-stats-filter__period-bar {
    align-items: flex-start;
  }
  /* `:not()`-guarded because compare mode carries BOTH classes. A media query
     adds no specificity, and these sit later in the file than
     `.report-kpis--compare` / `.report-kpi--compact`, so an unguarded rule at
     equal specificity silently won: compare mode lost its two-column grid from
     864px down (not 576px as authored, which made the 576px compare block below
     dead code) and every compact card grew 28px — ~224px per column over eight. */
  .report-kpis:not(.report-kpis--compare) {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-kpi:not(.report-kpi--compact) {
    min-height: 104px;
  }
}
@media (max-width: 576px) {
  .report-panel {
    padding: 16px;
  }
  .communication-report::before {
    border-radius: 24px;
  }
  .progress-highlight {
    align-items: flex-start;
    flex-direction: column;
  }
  .progress-highlight__icon {
    width: 64px;
    height: 64px;
  }
  .report-kpi {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .report-kpi__change {
    grid-column: 2;
  }
  .report-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-trend__legend {
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .communication-report *,
  .communication-report *::before,
  .communication-report *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* 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. */
/* Shared board-card LAYOUT (flex column + bottom-anchored Preview pill).
   `@include` inside surface rules that already set display:flex on
   `.simple_board_icon`; the base `.simple_board_icon` rule below
   includes this by default. Cosmetics stay in `board-card-modern`. */
*, *: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.

   EVERY selector here must carry BOTH the `#within_ember` scope AND the same
   `:not(.md-board-detail-edit-toolbar__search-input)` the global rule above uses — for
   exactly the reason spelled out in the forced-colors block below. The global navy rule is
   `#within_ember *:focus-visible:not(…)` = (1,2,0) and is `!important`; `!important` does
   NOT beat `!important`, so specificity alone decides. Written without the scope, 7 of the
   9 selectors below were (0,2,0) or (1,1,1) and silently LOST — including
   `.md-board-category-order`, which is why the Categorize takeover (which paints
   $brand-charcoal-dark unconditionally, regardless of the board's dark_mode, and that
   defaults false) shipped with a navy #1B365D ring on #374151 at 1.17:1 against the 3:1
   WCAG 1.4.11 minimum. With the scope every selector here is at least (1,3,0) and wins
   outright rather than by source order.

   The search-input carve-out is not just specificity padding — that input styles its own
   :focus-visible (see .md-board-detail-edit-toolbar__search-input:focus-visible), so it
   opts out of the global ring treatment in both light and dark contexts. */
#within_ember.board-detail-view:has(.md-board-detail--dark) *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-detail--dark *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-category-order *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember header:has(#speak) *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember #inner_header:has(#speak) *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-detail-sentence-bar *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-detail-header *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-detail-board-actions *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
#within_ember .md-board-detail-board-actions__btn:focus-visible:not(.md-board-detail-edit-toolbar__search-input) {
  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),
#within_ember:has(.page-footer):has(.md-shell--board-picker) {
  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%);
}

/* Search / Find Boards page: same recurring "short background" bug as
   login/register/board-picker — /search is a top-level route, so its #content is
   NOT `.index.with_user` and never gets the fill-painted bento gradient (line
   ~579). Painting the gradient on the inner `.ub-find-board-page` wrapper only
   reached content height, leaving a bare strip below. FIX (per LEARNINGS
   "auth-page bg not full height"): paint the SAME bento gradient the home page
   uses (line ~579) on the fixed full-viewport #within_ember so it fills the
   entire page height behind the (transparent) #content + wrapper. Compound
   `:has()` (1,2,0) out-specifies the `:has(.page-footer)` transparent reset. */
#within_ember:has(.page-footer):has(.ub-find-board-page) {
  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%);
}

/* Keep this page's #content transparent so the full-viewport mesh above shows
   through the whole height (mirrors the login/register #content reset). Scoped
   to the search page; padding/flex are left to the existing #content rules. */
#within_ember:has(.page-footer) #content:has(.ub-find-board-page) {
  background: transparent;
}

/* 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;
}
#within_ember.color_black .board-load-error__message {
  color: rgba(255, 255, 255, 0.92);
}
#within_ember.color_black .board-load-error__retrying {
  color: rgba(255, 255, 255, 0.65);
}
#within_ember.color_black .board-load-error__retry-link {
  color: rgba(255, 255, 255, 0.7);
}
#within_ember.color_black .board-load-error__retry-link:hover,
#within_ember.color_black .board-load-error__retry-link:focus-visible {
  color: rgba(255, 255, 255, 0.95);
}

/* Classic / board-alt load failure: escape hatches (Home / Back / Exit Speak).
   Mirrors board-detail's error recovery so Try Again is not the only exit. */
.board-load-error .board-load-error__actions,
.board_status .board-load-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 8px;
  max-width: 640px;
}
.board-load-error .board-load-error__action,
.board_status .board-load-error__action {
  font-size: 1.05rem;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
}
.board-load-error .board-load-error__retry-link,
.board_status .board-load-error__retry-link {
  appearance: none;
  background: none;
  border: none;
  display: inline-block;
  margin-top: 8px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: underline;
  cursor: pointer;
}
.board-load-error .board-load-error__retry-link:hover,
.board-load-error .board-load-error__retry-link:focus-visible,
.board_status .board-load-error__retry-link:hover,
.board_status .board-load-error__retry-link:focus-visible {
  color: rgba(0, 0, 0, 0.9);
}

.board-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  padding: 48px 24px;
  text-align: center;
}

.board-load-error__message {
  font-size: 1.15rem;
  margin: 0;
  max-width: 520px;
}

.board-load-error__retrying {
  font-size: 1rem;
  margin: 0;
  font-style: italic;
}

/* ==========================================================================
   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 {
  /* Breathing room under the sentence row. The grid's fixed height
     (calc(100dvh - 120px), base rule ~L75201) reserves ~120px of top chrome
     while the actual sentence bar + padding is only ~90px, so ~30px of slack
     pools UNDER the grid (dead space at the page bottom). This margin pushes
     the grid DOWN into that slack — opening a gap beneath the sentence row —
     rather than leaving it flush at the top. Stays within the 120px headroom
     (90 + 12 < 120), so it consumes bottom slack instead of adding overflow.
     32px (the base .board.speak rule above) over-shot and clipped; 0 was flush. */
  margin-top: 6px !important;
}

/* Shorter OR narrower viewports: reclaim the top breathing room. The 6px margin + the grid's 4px
   inset read as wasted vertical space when height is tight (≤820px tall) or width is small
   (≤768px — phones/small tablets, per request) — pull the board up snug under the sentence bar.
   (The folder-tab reserve inside the cells already scales down with the smaller buttons, so the
   tabs stay clear of the bar.) */
@media (max-height: 820px), (max-width: 768px) {
  .md-board-detail-grid.board.speak {
    margin-top: 0 !important;
    /* Through `--bd-compact-top` so a mode that needs its own top offset can supply one
       without out-specifying this rule. Only compact defines it (the categorised
       non-scrolling board, which is shifted down deliberately); every other mode leaves
       it unset and keeps the 1px hairline this rule has always applied.
       This is (0,3,0) and was silently winning over the compact rule's own padding — the
       16px shift measured as 1px on any viewport ≤820px tall, which is most laptops. */
    padding-top: var(--bd-compact-top, 1px);
    /* This rule drops the grid's 6px top margin, so compact's reserve drops with it. */
    --bd-compact-reserve: 107px;
  }
}
/* 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__stop-masquerade {
  animation: nav-btn-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 100ms !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. It sits ON TOP of the
   highlighted button, so it must stay transparent: the base `.highlight` rule sets
   a 0.35 black background (for the dimming masks), which would otherwise tint the
   target button dark and hard to see. Only the border + glow should show here. */
.highlight.box {
  background: transparent;
  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%;
}

/* Board picker route (/board-picker): same card + picker as /search/home, with CTAs above */
/* The whole page introduction is now the h1 + one sentence, so this is the only
   gap between the introduction and the two-column layout. */
.md-card--board-picker__header {
  margin-bottom: 26px;
}

.md-card--board-picker .md-card--board-picker__actions {
  margin-bottom: 2rem;
  padding-top: 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--md-line, rgba(17, 26, 46, 0.08));
}

.md-card--board-picker .board-picker-page__assign {
  margin-bottom: clamp(28px, 4vh, 40px);
}

.md-card--board-picker .board-picker-page__divider {
  margin-bottom: 0;
}

/* The shared boards card clips with `overflow: hidden` (~5170) so a fixed-column
   grid can't poke out of its rounded corner. This page's grids are auto-fit /
   auto-fill and never overflow, but the clip DOES crop the compact rows' hover
   shadow flat against the card edge. Scoped to this page only. */
.md-shell--board-picker .md-card--board-picker {
  overflow: visible;
  /* Even padding all round. The shared rule (~5165) reserves 24px top / 2rem
     bottom for a centred title band this page no longer has. */
  padding: 28px;
}

.md-shell--board-picker .md-card--board-picker .md-hero--home-boards {
  padding: 0 !important;
  text-align: left;
  margin-bottom: 0;
}

/* The authoritative type for the page h1 — !important because the global
   `.md-hero__title` (~44534) sets its size that way, and (0,4,0) so the weight
   beats `.md-hero--home-boards .md-hero__title { font-weight: 900 }` (~4901).
   $la-navy rather than the inherited --md-ink: the same navy the section
   heading used, which is the reading colour for headings on this page. */
.md-shell--board-picker .md-card--board-picker .md-hero--home-boards .md-hero__title {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.2;
  color: #1B365D;
  text-align: left;
}

/* (No phone override needed: 24px at every width is exactly where the ≤640 rule
   used to bring this title down to.) */
/* The title reads as a decorative PILL rather than bare text. Deliberately
   RECESSED, not raised: it is a label, not a control, so the lighting is
   inverted from the usual raised-pill recipe — shadow cast INWARD from the top
   edge, a light catch on the bottom lip, and a veil that darkens at the top
   instead of the bottom. No outer drop shadow, which is what would read as a
   pressable button. Stays inline-block so the pill hugs the text and still
   carries the hero's from-left entrance. */
.md-shell--board-picker .md-card--board-picker .md-hero--home-boards .md-hero__title .md-hero__title--from-left {
  display: inline-block;
  max-width: 100%;
  padding: 0.45em 1.15em;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.22);
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.07) 0%, rgba(255, 255, 255, 0.35) 100%), linear-gradient(135deg, rgba(42, 157, 143, 0.14) 0%, rgba(76, 134, 216, 0.12) 100%);
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.14), inset 0 1px 1px rgba(27, 54, 93, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.65);
  font-size: inherit;
  opacity: 0;
  animation: la-hero-title-from-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Outer page container. Wider ceiling than the shared 1200px so the two columns
   have room at desktop widths, and a real outer gutter (the base rule's
   `calc(100% - 24px)` left ~12px a side). Internal side padding drops from the
   shared 40px to 28px; the ≤1280 and ≤1024 rules below step it down further
   rather than squeezing the cards. */
.md-shell--board-picker > .md-workspace {
  margin-top: 0 !important;
  max-width: min(1440px, 100% - 56px) !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  /* 40px of workspace padding plus the pill-nav's own 42px top margin put 82px
     of nothing above the first control; 24 + 16 took that to 40 and read as
     cramped. 32 + 24 = 56px is the middle. THESE TWO NUMBERS ARE COUPLED to the
     supervising pill's offset — see the `#within_ember:has(.md-shell--board-picker)
     .ll-supervising-pill` rule (~98040), which keeps the pill's vertical centre
     on the step control's. Change one, redo the other. */
  padding-top: 32px !important;
}

/* `> .md-workspace > .md-pillnav`, not `.md-shell--board-picker .md-pillnav`:
   the generic `.md-workspace > .md-pillnav { margin-top: 0; margin-bottom: 12px }`
   (~1540080 in the compiled sheet) is ALSO (0,2,0) and lands later, so the flat
   two-class form silently lost and this nav kept a 0 top margin. (0,3,0) wins on
   merit. Bottom margin doubled from that rule's 12px. */
.md-shell--board-picker > .md-workspace > .md-pillnav {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 1280px) {
  .md-shell--board-picker > .md-workspace {
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
.md-shell--board-picker .md-card--home-boards__picker {
  margin-top: 1.25rem;
}

/* Board cards: fixed ~280px tiles that wrap to the next row when the content
   area is too narrow (same pattern as setup Board Category + legacy
   .board-picker-page). Overrides the base grid's fixed column counts, which
   forced three columns and clipped the right edge inside .md-card--home-boards
   (overflow: hidden). */
.md-shell--board-picker .md-home-boards-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}

.md-shell--board-picker .md-home-boards-picker__board {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

/* Stretch the board-icon tile to the full grid cell so PREVIEW can anchor
   to the card bottom (same pattern as ub-boards-page__board-grid).
   The "HOME BOARD" pill is excluded: it is an absolutely-positioned
   sibling of the tile, and `width: 100%` here would resolve against the
   wrapper and defeat its `left: 50% / translateX(-50%)` centering. */
.md-shell--board-picker .md-home-boards-picker__board > *:not(.board-picker__home-badge) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.md-shell--board-picker .md-home-boards-picker__grid-message {
  grid-column: 1/-1;
  width: 100%;
}

/* Bottom margin as well as top: this is the last thing in the results panel, so
   it owns the gutter between the final control and the panel's bottom edge (on
   top of the panel's own 24px padding). */
.md-shell--board-picker .md-home-boards-picker__load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 1.5rem;
  margin-bottom: 8px;
}

/* Where the "load more to see additional public boards" note now lives — it was
   in the panel's intro paragraph, three lines above the grid it describes. */
.md-shell--board-picker .md-home-boards-picker__load-more-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #374151;
  text-align: center;
}

.md-shell--board-picker .md-home-boards-picker__load-more-btn {
  min-width: 10rem;
  /* px, not `1rem`: the root font-size is 10px (bootstrap's `html { font-size:
     10px }`), so `1rem` here was rendering at 10px. Matches the hint below it. */
  font-size: 14px;
}

/* Category sidebar — icon + label cards matching board-picker mockup */
.md-shell--board-picker .md-home-boards-picker__layout {
  gap: 1.25rem 2.5rem;
}

.md-shell--board-picker .md-home-boards-picker__section-header {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0.25rem;
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1B365D;
  text-align: center;
  text-transform: uppercase;
}

.md-shell--board-picker .md-home-boards-picker__nav-inner.setup_setting {
  margin: 0;
}

.md-shell--board-picker .md-home-boards-picker__nav,
.md-shell--board-picker .md-home-boards-picker__content {
  align-self: flex-start;
}

/* Right column: one callout panel wrapping explainer, filter, and board grid. */
/* Results surface: a quiet ground for the board cards, not a nested app. Flat
   near-white (the old 135deg tint gradient put a bright hotspot in one corner),
   one verdigris edge accent, no outer shadow and no second border — the cards
   carry the elevation. The 24px padding is also the bottom gutter after the
   last card / Load More. */
.md-shell--board-picker .md-home-boards-picker__category-panel {
  padding: 24px 26px 26px;
  border-radius: 16px;
  border-left: 4px solid rgba(44, 183, 176, 0.55);
  background: rgba(240, 246, 248, 0.55);
  box-shadow: none;
}

.md-shell--board-picker .md-home-boards-picker__category-panel .category_explainer {
  margin-bottom: 17px;
  padding: 0;
  border: 0;
  border-left: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* One short line of context, not a paragraph block: 720px measure so it fits on
   a single line at desktop widths and wraps at most twice on a phone. */
.md-shell--board-picker .md-home-boards-picker__category-panel .category_explainer p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--md-ink);
  margin: 0;
  font-weight: 500;
}

.md-shell--board-picker .md-home-boards-picker__category-panel .category_explainer.full p {
  max-height: 500px;
}

.md-shell--board-picker .md-home-boards-picker__category-panel .category_explainer .more_link {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(44, 183, 176, 0.06) 70%);
}

.md-shell--board-picker .md-home-boards-picker__category-panel .md-home-boards-picker__search--inline {
  margin-bottom: 1.25rem;
}

.md-shell--board-picker .md-home-boards-picker__nav-label {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1B365D;
}

.md-shell--board-picker .md-home-boards-picker__categories {
  gap: 10px;
}

/* min-height, not height: "Functional Communication" wraps to two lines and that
   row grows; every single-line row stays at the floor. */
.md-shell--board-picker .md-home-boards-picker__category--iconic {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 12px;
  box-shadow: none;
}

.md-shell--board-picker .md-home-boards-picker__category--iconic:hover {
  background: #fff;
  border-color: rgba(26, 123, 122, 0.35);
  color: #1B365D;
}

/* Selection is carried by the border and the left accent, not by a tint strong
   enough to compete with the restrained board cards. The accent is an INSET
   shadow rather than a border-left so the label doesn't shift 3px when a row
   becomes active — it is an accent, not the elevation the spec rules out. */
.md-shell--board-picker .md-home-boards-picker__category--iconic.is-active {
  background: rgba(42, 157, 143, 0.06);
  border-color: rgba(26, 123, 122, 0.55);
  color: #1B365D;
  box-shadow: inset 3px 0 0 #1A7B7A;
}

.md-shell--board-picker .md-home-boards-picker__category-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(42, 157, 143, 0.08);
}

.md-shell--board-picker .md-home-boards-picker__category--iconic.is-active .md-home-boards-picker__category-icon {
  background: rgba(42, 157, 143, 0.16);
}

.md-shell--board-picker .md-home-boards-picker__category-label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.25;
  text-align: left;
}

/* ---------- 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%;
  /* The category column is the only fixed-width track in this flex row; the
     board-preview column beside it is `flex: 1 1 420px` (see
     .md-home-boards-picker__content), so every pixel taken off this max-width
     goes straight to the preview area. 280px -> 265px = 15px moved across. */
  max-width: 265px;
}

.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));
  align-items: stretch;
  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;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 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;
  height: auto;
  min-height: 0;
}
.md-home-boards-picker__board .btn.simple_board_icon .author {
  order: 97;
  margin-top: 0;
  margin-bottom: 4px;
}
.md-home-boards-picker__board .btn.simple_board_icon .board-icon__lang-marker {
  order: 98;
  margin: 0 0 8px;
}
.md-home-boards-picker__board .btn.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;
  margin-bottom: 0;
}
.md-home-boards-picker__board .btn.simple_board_icon {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 18px 18px 16px;
  color: var(--md-ink);
  font-size: 15px;
}

.md-shell--board-picker .md-home-boards-picker__board .btn.simple_board_icon {
  /* Equal-height rows come from grid stretch + height:100% — not a fixed floor. */
  min-height: 0;
}

.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;
  order: 97;
  margin: 0 0 4px;
  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 + language badge: footer stack pinned to the card bottom. */
.md-home-boards-picker__board .btn.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;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 11px;
}

.md-home-boards-picker__board .btn.simple_board_icon .board-icon__lang-marker {
  order: 98;
  margin: 0 0 6px;
}

.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__layout--search-top .md-home-boards-picker__search--inline {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-top: 0;
  border-top: none;
  display: flex;
  justify-content: center;
  width: 100%;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.625rem;
  width: auto;
  max-width: 100%;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-input.form-control {
  flex: 0 0 auto;
  width: min(22rem, 100vw - 10rem);
  min-width: 14rem;
  min-height: 44px;
  height: auto;
  padding: 0 14px;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.25;
  box-sizing: border-box;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-input.form-control::placeholder {
  font-size: 14px;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-input.form-control::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: rgba(27, 54, 93, 0.06);
  color: #46505F;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-clear:hover,
.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-clear:focus-visible {
  background: rgba(27, 54, 93, 0.12);
  color: #1B365D;
  outline: none;
}

.md-home-boards-picker__layout--search-top .md-home-boards-picker__search-submit {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  min-height: 44px;
  height: auto;
  align-self: stretch;
}

.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;
  align-items: stretch;
  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%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 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. Standalone /board-picker now reuses the
   /search/home shell (md-shell--home-boards) with sidebar category nav. */
/* --- Immersive glass workspace panel (tour modal / legacy tabbed picker only;
       standalone /board-picker uses md-shell--home-boards instead). --- */
.md-shell--board-picker:not(.md-shell--home-boards) > .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__context {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(43, 52, 69, 0.82);
}

.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: 100% !important;
  min-height: 0 !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;
}

/* 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;
  align-items: stretch;
  gap: 1.5rem;
}

.board-picker-page .md-home-boards-picker__board {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* --- 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;
  /* Above board-detail chrome (sentence bar / hamburger ~2000) and below
     dwell/alerts (~9999). The old z-index:3 sat under the modern grid. */
  z-index: 4000;
}
#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 is published by board/index.js computeHeight as --sidebar-width: it
     tracks the button size when buttons are small (~10% wider than a button,
     capped at 100px). Fallback 100px = the pre-JS / non-skinny width. The JS
     board-width reservation reads the same value, so grid + sidebar stay flush. */
  width: var(--sidebar-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.
     CLASSIC RENDERER ONLY. This whole @media block is classic board-alt CSS
     (.button-label / .button-label-holder / the JS-positioned img_holder), but
     `.button img.symbol` is generic and the modern board-detail card carries
     `.button` too — so it was silently shrinking every board-detail symbol on
     any viewport under 800px tall (0.968x at 768px, 0.6x at 400px), directly
     fighting that page's "fill the holder" sizing. The modern card has no
     JS-sized img_holder to protect: its symbol is a flex child that already
     gives up space to the label, so the compensation is not just unnecessary
     there, it is harmful. Excluded by class rather than moved so the classic
     board keeps this behavior byte-for-byte. */
  .button:not(.md-board-detail-symbol-card) 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;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.simple_board_holder > .btn.simple_board_icon,
.simple_board_holder > .simple_board_icon {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.simple_board_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
}
.simple_board_icon .author {
  order: 97;
  margin-top: 0;
  margin-bottom: 4px;
}
.simple_board_icon .board-icon__lang-marker {
  order: 98;
  margin: 0 0 8px;
}
.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;
  margin-bottom: 0;
}
.simple_board_icon {
  width: 100%;
  border-radius: 20px;
  border-width: 5px;
  font-size: 25px;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
  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 via in-flow flex (`order: 99`, `margin-top: auto`) so
     equal-height rows keep the pill at the same spot on every card.
     Silver-glass chrome inherited here; surface-specific overrides
     may shift padding/font-size but should not revert to absolute
     positioning (that breaks row alignment when titles differ). */
  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 (`order: 98`; PREVIEW is `order: 99`).
     Tight under the author line; PREVIEW owns `margin-top: auto`. */
}
.simple_board_icon .board-icon__lang-marker {
  align-self: center;
  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;
  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 {
  min-height: 180px;
  height: auto;
  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 {
  min-height: 150px;
  height: auto;
  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 {
  min-height: 120px;
  height: auto;
  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;
}

/* Gradient divider under the pinned "Quick Actions" tab. */
#button_settings .nav-pills.nav-stacked > .md-bs-nav-sep {
  padding: 0 6px;
}

#button_settings .nav-pills.nav-stacked > .md-bs-nav-sep .md-bs-card__sep {
  margin: 8px 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 {
  /* Same silvery-glass verdigris→denim tint as the "Create editable copy"
     button; navy label keeps WCAG AA on the light gradient (>6:1). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(135deg, rgba(42, 157, 143, 0.5), rgba(76, 134, 216, 0.52)), #fff;
  color: #1B365D;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 3px rgba(27, 54, 93, 0.08);
}

/* 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) — same brushed-silver glass as the Preview
   button in the Action section. */
#button_settings .btn-group-vertical .btn {
  border-radius: 10px !important;
  border: 1px solid rgba(27, 54, 93, 0.16);
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 240, 245, 0.9) 50%, rgba(210, 217, 227, 0.85) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 3px rgba(27, 54, 93, 0.08);
  text-align: left;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease, border-color 0.12s ease;
  margin-bottom: 6px;
}

#button_settings .btn-group-vertical .btn:hover {
  background: linear-gradient(150deg, #ffffff 0%, rgba(233, 238, 244, 0.96) 50%, rgba(200, 209, 221, 0.92) 100%);
  border-color: rgba(27, 54, 93, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 8px rgba(27, 54, 93, 0.14);
  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;
  /* Same SILVERY-GLASS verdigris→denim tint as the active side-panel tab (per
     request) instead of the darker solid gradient — one shared "primary" look
     across the modal. Navy label keeps AA contrast on the light gradient. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(135deg, rgba(42, 157, 143, 0.5), rgba(76, 134, 216, 0.52)), #fff;
  border: none;
  color: #1B365D;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 3px rgba(27, 54, 93, 0.08);
  transition: box-shadow 0.12s ease, transform 0.1s ease;
}

#button_settings .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(76, 134, 216, 0.22);
  transform: translateY(-1px);
}

/* Content area headings */
#button_settings h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 12px;
}

/* The header form-group inherits `.content .form-group { margin-bottom: 16px }`
   (higher specificity), which is the gap under "Button Settings". Override it at
   matching specificity + zero the h4 margin so "QUICK ACTIONS" sits just below. */
#button_settings .content .form-group.md-bs-help__head {
  margin-bottom: 6px;
}

#button_settings .md-bs-help__head h4 {
  margin-bottom: 0;
}

/* Image search results / options grid */
#button_settings .options {
  border-radius: 10px;
}

/* ── Action-tab guided cards (ACTION / DESTINATION / per-action config) ──
   Turns the Action tab into a stacked, card-based flow: a lightly-tinted
   glass card per step, an uppercase eyebrow label, helper text, and
   labels-above controls. Verdigris = selected/primary/focus; dusty-denim
   = secondary (browse / create / change). */
#button_settings .md-bs-card {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.035), rgba(76, 134, 216, 0.03)), #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.05);
}

#button_settings .md-bs-card:last-child {
  margin-bottom: 0;
}

/* The ACTION card holds a single control — keep it compact so the destination
   step sits higher on the page. */
#button_settings .md-bs-card--action {
  padding: 13px 20px 15px;
  margin-bottom: 18px;
}

#button_settings .md-bs-card--action .md-bs-card__hint {
  margin-bottom: 10px;
}

#button_settings .md-bs-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: #2860C9;
  margin-bottom: 6px;
}

/* Modern gradient hairline between a card header and its body. */
#button_settings .md-bs-card__sep {
  height: 2px;
  margin: 10px 0 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(42, 157, 143, 0.4) 25%, rgba(76, 134, 216, 0.4) 75%, transparent);
}

#button_settings .md-bs-card__hint {
  font-size: 15px;
  color: #6B7280;
  margin: 0 0 14px;
}

#button_settings .md-bs-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 16px 0 6px;
}

/* Give every control in these cards a comfortable touch target */
#button_settings .md-bs-card .form-control,
#button_settings .md-bs-card .bound-select__trigger {
  min-height: 50px;
}

/* Link/video action controls (modern) — checkbox rows, YouTube preview, time controls.
   Shares the card's brand palette so the ported video-popup section reads as native. */
#button_settings .md-bs-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

#button_settings .md-bs-check input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: #2A9D8F;
  cursor: pointer;
}

/* 16:9 YouTube preview pane, rounded to match the card surfaces */
#button_settings .md-bs-video-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 14px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #374151;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(27, 54, 93, 0.14);
}

#button_settings .md-bs-video-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Text-link affordance (e.g. "set thumbnail as button image") as a real <button> */
#button_settings .md-bs-linkish {
  display: inline-block;
  margin: 2px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: #2860C9;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

#button_settings .md-bs-linkish:hover,
#button_settings .md-bs-linkish:focus-visible {
  color: rgb(29.8423236515, 71.6215767635, 149.9576763485);
}

#button_settings .md-bs-video__times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

#button_settings .md-bs-video__time-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

#button_settings .md-bs-video__time-fields .md-bs-field-label {
  margin: 0;
}

#button_settings .md-bs-video__time-input {
  width: 90px;
  flex: none;
}

#button_settings .md-bs-video__time-unit {
  font-size: 14px;
  color: #6B7280;
}

/* Selected-board card (verdigris "chosen" state) */
#button_settings .md-bs-dest__selected {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(42, 157, 143, 0.35);
  background: rgba(42, 157, 143, 0.06);
  border-radius: 12px;
}

#button_settings .md-bs-dest__icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  flex: 0 0 auto;
}

#button_settings .md-bs-dest__meta {
  flex: 1 1 auto;
  min-width: 0;
}

#button_settings .md-bs-dest__name {
  font-size: 17px;
  font-weight: 600;
  color: #1B365D;
  word-break: break-word;
}

#button_settings .md-bs-dest__change {
  flex: 0 0 auto;
}

/* "Selected" / state label above the status component */
#button_settings .md-bs-status__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 6px;
}

/* Secondary line inside the selected-board card (owner / breadcrumb slot) */
#button_settings .md-bs-dest__owner {
  display: block;
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* "Choose how to use this board" confirmation: a clean vertical preview card
   (thumbnail → title / grid / preview) on the left, and the explanation + two
   clearly-differentiated choices on the right. */
#button_settings .md-bs-choose {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

#button_settings .md-bs-choose__status {
  font-size: 15px;
  color: #374151;
  margin: 0;
}

/* "Change Board" — reset the pending board and go back to the collection.
   Pushed to the bottom of the content column so it sits flush with the preview
   card's bottom edge. */
#button_settings .md-bs-choose__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 16px;
}

/* Sleek modern pill */
#button_settings .md-bs-choose__change,
#button_settings .md-bs-dest__change,
#button_settings .md-bs-help__skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(76, 134, 216, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.07) 100%);
  color: #2860C9;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.08);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease, border-color 0.14s ease;
}

#button_settings .md-bs-choose__change:hover,
#button_settings .md-bs-dest__change:hover,
#button_settings .md-bs-help__skip:hover {
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.14) 100%);
  border-color: rgba(76, 134, 216, 0.55);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 3px 10px rgba(76, 134, 216, 0.22);
  transform: translateY(-1px);
}

#button_settings .md-bs-choose__change-icon,
#button_settings .md-bs-dest__change-icon {
  flex: 0 0 auto;
  opacity: 0.9;
}

/* Help tab: the skip/enable pill sits centered below the quick-action list. */
#button_settings .md-bs-help__skip-wrap {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* Color tab: live button preview + swatch palette + revert pill. */
#button_settings .md-bs-color__preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#button_settings .md-bs-color__preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 3px solid #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.1);
}

#button_settings .md-bs-color__preview-img {
  max-width: 62px;
  max-height: 62px;
  object-fit: contain;
}

#button_settings .md-bs-color__preview-label {
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}

/* Label on top (text-position preference) — flip the column so the label sits ABOVE
   the symbol. Id-scoped to match the base `#button_settings .md-bs-color__preview`
   specificity. "Text only" omits the <img> in the template, so no rule needed. */
#button_settings .md-bs-color__preview.md-bs-preview--text-top {
  flex-direction: column-reverse;
}

#button_settings .md-bs-color__field-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
}

/* Fitzgerald color swatches — labeled tiles (color chip + name + category). */
#button_settings .md-bs-color__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

#button_settings .md-bs-color__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  /* Brushed-silver glass, same as the quick-action buttons. */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 240, 245, 0.9) 50%, rgba(210, 217, 227, 0.85) 100%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 3px rgba(27, 54, 93, 0.08);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

#button_settings .md-bs-color__swatch:hover {
  transform: translateY(-2px);
  background: linear-gradient(150deg, #ffffff 0%, rgba(233, 238, 244, 0.96) 50%, rgba(200, 209, 221, 0.92) 100%);
  border-color: rgba(27, 54, 93, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 3px 8px rgba(27, 54, 93, 0.14);
}

#button_settings .md-bs-color__swatch.is-selected {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.4);
}

#button_settings .md-bs-color__swatch-chip {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
}

#button_settings .md-bs-color__swatch-name {
  font-size: 13px;
  font-weight: 600;
  color: #1B365D;
  line-height: 1.1;
}

#button_settings .md-bs-color__swatch-hint {
  font-size: 11px;
  color: #6B7280;
  text-transform: capitalize;
  line-height: 1.1;
}

#button_settings .md-bs-color__field-label--custom {
  margin-top: 22px;
}

#button_settings .md-bs-color__custom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#button_settings .md-bs-color__custom-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#button_settings .md-bs-color__custom-label {
  flex: 0 0 56px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

#button_settings .md-bs-color__picker {
  flex: 0 0 auto;
  width: 46px;
  height: 40px;
  padding: 2px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

#button_settings .md-bs-color__value {
  flex: 1 1 auto;
  min-width: 0;
}

#button_settings .md-bs-color__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

/* Vertical preview card */
#button_settings .md-bs-choose__preview {
  flex: 0 0 auto;
  width: 230px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(27, 54, 93, 0.06);
}

#button_settings .md-bs-choose__thumb {
  padding: 16px;
  background: rgba(27, 54, 93, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

#button_settings .md-bs-choose__thumb img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  display: block;
}

#button_settings .md-bs-choose__preview-info {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  text-align: center;
}

#button_settings .md-bs-choose__preview-name {
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#button_settings .md-bs-choose__preview-owner {
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#button_settings .md-bs-choose__preview-grid {
  font-size: 13px;
  color: #6B7280;
  margin: 2px 0 10px;
}

#button_settings .md-bs-choose__preview-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  /* Same brushed-silver glass as the "Use original board" button. */
  border: 1px solid rgba(27, 54, 93, 0.16);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 240, 245, 0.9) 50%, rgba(210, 217, 227, 0.85) 100%);
  color: #2860C9;
  font-weight: 600;
  font-size: 14px;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 3px rgba(27, 54, 93, 0.08);
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

#button_settings .md-bs-choose__preview-btn:hover {
  background: linear-gradient(150deg, #ffffff 0%, rgba(233, 238, 244, 0.96) 50%, rgba(200, 209, 221, 0.92) 100%);
  border-color: rgba(27, 54, 93, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 8px rgba(27, 54, 93, 0.14);
}

/* Decision content */
#button_settings .md-bs-choose__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#button_settings .md-bs-choose__explain {
  font-size: 15px;
  color: #374151;
  margin: 0 0 16px;
}

#button_settings .md-bs-choose__note {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 16px;
}

#button_settings .md-bs-choose__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#button_settings .md-bs-choose__actions .md-bs-or {
  margin: 2px 0;
}

#button_settings .md-bs-choose__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

#button_settings .md-bs-choose__btn-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

#button_settings .md-bs-choose__btn-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.9;
}

/* Recommended action: light verdigris→denim tint gradient with dark navy text.
   Navy (#1B365D) on this light gradient clears WCAG AA (>7:1); the sub uses
   charcoal (#374151, ~8:1). */
#button_settings .md-bs-choose__btn--primary {
  /* Silvery glass shine: a glossy top sheen over the verdigris→denim tint,
     with inset highlights + backdrop blur. The sheen only lightens the top, so
     the dark navy label keeps (and gains) contrast. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(135deg, rgba(42, 157, 143, 0.5), rgba(76, 134, 216, 0.52)), #fff;
  border: 1px solid rgba(27, 54, 93, 0.18);
  color: #1B365D;
  backdrop-filter: blur(8px) saturate(155%);
  -webkit-backdrop-filter: blur(8px) saturate(155%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(27, 54, 93, 0.06), 0 1px 3px rgba(27, 54, 93, 0.08);
}

#button_settings .md-bs-choose__btn--primary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(135deg, rgba(42, 157, 143, 0.58), rgba(76, 134, 216, 0.6)), #fff;
  border-color: rgba(27, 54, 93, 0.26);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 10px rgba(27, 54, 93, 0.14);
}

#button_settings .md-bs-choose__btn--primary .md-bs-choose__btn-sub {
  color: #374151;
  opacity: 1;
}

/* Secondary: brushed-silver glass — cool white→silver gradient with inset
   highlights + backdrop blur, navy label. */
#button_settings .md-bs-choose__btn--secondary {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 240, 245, 0.9) 50%, rgba(210, 217, 227, 0.85) 100%);
  border-color: rgba(27, 54, 93, 0.16);
  color: #1B365D;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(27, 54, 93, 0.05), 0 1px 3px rgba(27, 54, 93, 0.08);
}

#button_settings .md-bs-choose__btn--secondary:hover {
  background: linear-gradient(150deg, #ffffff 0%, rgba(233, 238, 244, 0.96) 50%, rgba(200, 209, 221, 0.92) 100%);
  border-color: rgba(27, 54, 93, 0.24);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 2px 8px rgba(27, 54, 93, 0.14);
}

#button_settings .md-bs-choose__btn--secondary .md-bs-choose__btn-sub {
  color: #6B7280;
}

/* Status panel — the empty (no-board) state, styled as its own component.
   Recessed/inset look: sunken background + inner shadow so it reads as a
   "nothing here yet" well rather than a raised card. */
#button_settings .md-bs-status {
  padding: 12px 14px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 10px;
  background: #F0F4F8;
  box-shadow: inset 0 2px 4px rgba(27, 54, 93, 0.1);
}

#button_settings .md-bs-status__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#button_settings .md-bs-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(27, 54, 93, 0.25);
  flex: 0 0 auto;
}

#button_settings .md-bs-status__text {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

#button_settings .md-bs-status__hint {
  font-size: 13px;
  color: #6B7280;
  margin: 6px 0 0;
}

/* Method groups (search / browse / create) with tiny "or …" headers — the
   separators make the three alternative paths read as distinct choices. */
#button_settings .md-bs-group {
  margin-top: 16px;
}

#button_settings .md-bs-group-label {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 6px;
}

#button_settings .md-bs-dest__results:empty {
  display: none;
}

/* Search row: input is the dominant path, Search button beside it */
#button_settings .md-bs-dest__search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#button_settings .md-bs-dest__search-field {
  flex: 1 1 auto;
  display: block;
}

#button_settings .md-bs-dest__search-input {
  width: 100%;
}

#button_settings .md-bs-dest__search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Card buttons (primary = verdigris, secondary = dusty-denim, outline = quiet) */
#button_settings .md-bs-btn {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

#button_settings .md-bs-btn--primary {
  background: linear-gradient(135deg, #2A9D8F, #4C86D8);
  border: none;
  color: #fff;
}

#button_settings .md-bs-btn--primary:hover {
  box-shadow: 0 2px 10px rgba(42, 157, 143, 0.3);
}

#button_settings .md-bs-btn--secondary {
  background: rgba(76, 134, 216, 0.08);
  border-color: rgba(76, 134, 216, 0.3);
  color: #2860C9;
}

#button_settings .md-bs-btn--secondary:hover {
  background: rgba(76, 134, 216, 0.14);
}

/* Quiet secondary: white with a blue outline, so it reads as an alternative
   action rather than competing with the primary Search button. */
#button_settings .md-bs-btn--outline {
  background: #fff;
  border-color: rgba(76, 134, 216, 0.45);
  color: #2860C9;
}

#button_settings .md-bs-btn--outline:hover {
  background: rgba(76, 134, 216, 0.06);
  border-color: #4C86D8;
}

#button_settings .md-bs-btn--outline .glyphicon {
  color: #2860C9;
}

/* Wrapper card grouping the three destination methods (search / browse /
   create) so they read as one "choose a board" unit inside the card. */
#button_settings .md-bs-methods {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  /* Recessed/inset well so the white board-section cards sit proud of it. */
  background: #F0F4F8;
  box-shadow: inset 0 2px 5px rgba(27, 54, 93, 0.1);
}

#button_settings .md-bs-methods > .md-bs-group:first-child {
  margin-top: 0;
}

/* Board-collection picker inside the destination card: reuses the Find Boards
   page's .md-board-collection markup/styles (light base theme outside a
   .md-board-detail--dark ancestor). Cap the height so the sectioned list scrolls
   inside the card instead of stretching the modal. */
#button_settings .md-bs-collection {
  margin-bottom: 4px;
}

#button_settings .md-bs-collection__header {
  padding: 0 0 10px;
}

#button_settings .md-bs-collection__body {
  max-height: 340px;
  overflow-y: auto;
}

/* "OR" separator between the three destination methods — mirrors the
   create-board-new chooser (.nb-create-chooser__or): centered uppercase OR
   with a short rule on each side. */
#button_settings .md-bs-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 4px;
  color: rgba(27, 54, 93, 0.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#button_settings .md-bs-or::before,
#button_settings .md-bs-or::after {
  content: "";
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: rgba(27, 54, 93, 0.14);
}

/* Raised "choice" card — matches the create-board-new chooser buttons
   (.nb-create-chooser__btn): top-lit gradient, layered ambient shadow, and a
   glassy icon chip, so Create reads as a pressable key rather than a plain
   button. */
#button_settings .md-bs-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(90, 106, 133, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  color: #1B365D;
  font-size: 16px;
  font-weight: 700;
  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;
}

#button_settings .md-bs-choice:hover,
#button_settings .md-bs-choice: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;
}

#button_settings .md-bs-choice: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);
}

#button_settings .md-bs-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  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);
}

#button_settings .md-bs-choice__icon .glyphicon {
  color: #5A6A85;
  top: 0;
}

#button_settings .md-bs-choice__label {
  flex: 0 0 auto;
}

/* 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;
}

/* ── Picture tab — modern, spacious layout ──────────────────────────────────
   The picture content was legacy float/inline markup (cramped rows, tiny inline
   thumbnails). This adds breathing room and a professional modern feel: a larger
   rounded search field, modern icon buttons, a framed current-picture card, and a
   spaced grid of uniform rounded thumbnail cards with a hover lift. */
.md-bs-picture {
  padding: 2px 2px 14px;
  font-size: 14px;
  color: #374151;
}

.md-bs-picture .options {
  margin-top: 14px;
}

/* Search-term hint — quieter + centered. */
.md-bs-picture .text-muted {
  font-size: 13px;
  color: rgba(27, 54, 93, 0.55);
  text-align: center;
  margin-top: 12px;
}

/* Search input — larger, rounded, modern focus ring. */
.md-bs-picture #find_picture {
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  padding: 11px 16px;
  font-size: 15px;
  height: auto;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-bs-picture #find_picture:focus {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

/* Search / camera / upload / options buttons — modern rounded, consistent. */
.md-bs-picture .btn-default {
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: #ffffff;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-bs-picture .btn-default:hover {
  border-color: #2A9D8F;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
}

/* Current-picture card. */
.md-bs-picture .button_image {
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(27, 54, 93, 0.08);
  background: #ffffff;
}

/* Results — a spaced grid of uniform rounded thumbnail cards with a hover lift. */
.md-bs-picture__results {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.md-bs-picture__result {
  width: 68px;
  height: 68px;
  padding: 5px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.md-bs-picture__result img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.md-bs-picture__result:hover,
.md-bs-picture__result:focus-visible {
  transform: translateY(-2px);
  border-color: #2A9D8F;
  box-shadow: 0 5px 14px rgba(27, 54, 93, 0.16);
  outline: none;
}

/* Section header — navy eyebrow + subtitle, centered (matches the Action tab). */
.md-bs-picture__head {
  text-align: center;
  margin-bottom: 18px;
}

.md-bs-picture__head .md-bs-card__eyebrow {
  justify-content: center;
}

.md-bs-picture__subtitle {
  margin: 4px 0 0;
  font-size: 15px;
  color: rgba(27, 54, 93, 0.62);
}

/* "Find a picture" card. */
.md-bs-picture__find {
  display: block;
  padding: 18px 20px 20px;
  margin-bottom: 22px;
}

.md-bs-picture__field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.55);
  margin: 14px 0 6px;
}

.md-bs-picture__find > .md-bs-card__eyebrow + .md-bs-picture__field-label {
  margin-top: 4px;
}

.md-bs-picture__library {
  max-width: 320px;
}

.md-bs-picture__library-static {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.md-bs-picture__premium-note {
  font-size: 12.5px;
  margin-top: 6px;
}

/* Search row — input grows, Search button fixed. */
.md-bs-picture__search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}

.md-bs-picture__search-row .picture_search_field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.md-bs-picture__search-btn {
  flex: 0 0 auto;
}

/* Progressive-disclosure "Search options". */
.md-bs-picture__disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 2px;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #1A7B7A;
  cursor: pointer;
}

.md-bs-picture__disclosure-chevron {
  transition: transform 0.15s ease;
}

.md-bs-picture__disclosure.is-open .md-bs-picture__disclosure-chevron {
  transform: rotate(90deg);
}

.md-bs-picture__options-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.03);
}

.md-bs-picture__options-body .form-control {
  max-width: 240px;
}

.md-bs-picture__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* Own-image sources — labeled buttons (icon + text). */
.md-bs-picture__sources-label {
  margin-top: 18px;
}

.md-bs-picture__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.md-bs-picture__source-file {
  position: relative;
  display: inline-flex;
}

.md-bs-picture__source-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.15);
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.md-bs-picture__source-btn:hover:not(:disabled),
.md-bs-picture__source-btn:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.1);
  outline: none;
}

.md-bs-picture__source-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.md-bs-picture__source-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.md-bs-picture__source-icon--wordart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #1A7B7A;
}

/* Compact CURRENT PICTURE card — small thumbnail + label, horizontal. */
.md-bs-picture__current-eyebrow {
  margin: 6px 0 8px;
}

.md-bs-picture__current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.md-bs-picture__current-thumb {
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.08);
}

.md-bs-picture__current-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.md-bs-picture__current-meta {
  min-width: 0;
}

.md-bs-picture__current-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.md-bs-picture__current-sub {
  font-size: 14px;
  color: rgba(27, 54, 93, 0.55);
  margin-top: 3px;
}

/* SEARCH RESULTS — eyebrow + count, subtitle, glass surface around the grid. */
.md-bs-picture__results-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.md-bs-picture__results-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(27, 54, 93, 0.5);
  text-transform: none;
}

.md-bs-picture__results-sub {
  margin: 4px 0 12px;
  font-size: 14px;
  color: rgba(27, 54, 93, 0.55);
}

.md-bs-picture__results-surface {
  padding: 16px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.05), rgba(76, 134, 216, 0.05));
  border: 1px solid rgba(27, 54, 93, 0.07);
  border-radius: 16px;
}

.md-bs-picture__results-surface .md-bs-picture__results {
  margin: 0;
  justify-content: flex-start;
}

/* Search section — groups the "Search" header + the search options (skin / safe
   search filters) + the results into one block, set off from the "Hide label"
   row and webcam above it. The inner results surface keeps its own card. */
.md-bs-picture__search-section {
  margin-top: 20px;
}

/* Per-button picture/label options under the Find a Picture card
   (hide_label + text_only / stretch_text_only). */
.md-bs-picture__label-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
}

.md-bs-picture__hide-label,
.md-bs-picture__text-only {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.03);
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.md-bs-picture__hide-label input[type=checkbox],
.md-bs-picture__text-only input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}

/* 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);
}

/* Full punctuation set in one row (single-tap reach, no "More" submenu). 7 across
   only while the targets stay comfortably hittable — see the narrow-screen wrap below. */
.md-speak-menu__row--7 {
  grid-template-columns: repeat(7, 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);
  }
  /* 7 punctuation targets across is too small to hit reliably on a phone --
     wrap to 4+3 so each stays a comfortable touch target (AAC motor accuracy). */
  .md-speak-menu__row--7 {
    grid-template-columns: repeat(4, 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 {
    /* Same --sidebar-width var as the base rule; JS caps it at 75 on ≤768px,
       so this fallback only applies to the pre-JS paint on small screens. */
    width: var(--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;
}

/* Stop Masquerading: same pill chrome as Upgrade, warm accent so the active session is obvious */
.app-navbar .md-pillnav__stop-masquerade {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 107, 71, 0.18) !important;
  border: 1px solid rgba(255, 107, 71, 0.35) !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;
  transform: translateY(-2px) !important;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif !important;
  font-weight: 500 !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__stop-masquerade:hover,
.app-navbar .md-pillnav__stop-masquerade:focus-visible {
  background: rgba(255, 107, 71, 0.28) !important;
  border-color: rgba(255, 107, 71, 0.5) !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__stop-masquerade: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;
}

#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__stop-masquerade,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__stop-masquerade {
  color: #374151 !important;
  background: rgba(255, 107, 71, 0.16) !important;
  border-color: rgba(255, 107, 71, 0.4) !important;
}

#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__stop-masquerade:hover,
#within_ember header:not(.header--unauthenticated) .app-navbar .md-pillnav__stop-masquerade:focus-visible,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__stop-masquerade:hover,
#within_ember header:not(.header--unauthenticated) #identity .md-pillnav__stop-masquerade:focus-visible {
  color: #374151 !important;
  background: rgba(255, 107, 71, 0.26) !important;
  border-color: rgba(255, 107, 71, 0.55) !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;
  align-items: stretch;
}

.ll-bento-board-grid__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ultra-modern board cards: large radius, image-first, scale + shadow on hover */
.ll-bento-board-grid .simple_board_icon {
  flex: 1 1 auto;
  height: 100%;
  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 0 4px;
  padding: 0 14px;
}
.ll-bento-board-grid .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;
  margin-bottom: 8px;
  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--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: 0;
  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.

   SPECIFICITY (0,3,0), via the redundant-looking `.md-ds-modal` in the selector:
   this step also carries `md-tour__step--intro`, and the SHORT-VIEWPORT rule
   `@media (max-height: 800px) .shepherd-element.md-tour__step--intro`
   (app.scss ~97049) re-imposes `transform: translateX(-50%) !important` + a
   `top: 12px` meant for the CENTERED tour cards. At (0,2,0) that rule tied with
   this one and won on source order, so on any viewport 1024px wide or less AND
   800px tall or less the modal got `left: 0` from the media block below AND a
   translateX(-50%) on top — sliding it half its own width (50vw) off the LEFT
   edge. Going to (0,3,0) here settles it by specificity at every viewport size,
   and leaves the intro/outro ranking that rule's own comment documents intact.
   (The "Customize" step never showed the bug because its `:has()` rule below is
   already (0,3,0).) */
.shepherd-element.md-ds-modal.md-ds-modal--display {
  /* FULL-BLEED: the whole viewport, both axes. Every step of this modal now shows
     page previews, which need all the room available — at 80vw the two previews had
     to be cropped to fit and could not show the whole page.
     Previously this was 80vw with two extra rules layering on top (a
     `max-width: 1024px` media block and a `:has(.md-ds-preview--with-toggles)` rule
     for the customize step) that each re-declared the same full-width values. Those
     are folded in here so there is ONE authoritative size rule — per the
     edit-in-place convention, rather than three rules competing. */
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !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;
}

/* Style-chooser step ONLY: make the text region a flex column so the two preview rows
   can divide its height between them. `height: 100%` cannot do this — the region's own
   height comes from flex-growing inside .shepherd-content, so a percentage child has no
   definite height to resolve against. Scoped with :has() to the previews variant so the
   "Customize your dashboard" step, which shares this element's other rules, keeps its
   existing block layout. */
.shepherd-element.md-ds-modal--display .shepherd-text:has(.md-ds-options--with-previews) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.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;
  }
}
/* The two layout-style cards sit SIDE-BY-SIDE with the OR divider between them.
   `nowrap` keeps the divider from being stranded on a wrapped row — the narrow
   fallback is the explicit column stack in the media query near the end of this
   file, not flex wrapping. */
/* Width of the card+button column in the previews layout. Shared by the column itself
   and the OR divider, so the divider stays centred over the cards rather than over the
   full-width row — they must not drift apart. */
.md-ds-options {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  margin: 8px auto 0;
  max-width: 920px;
}

/* With per-style page previews the pair STACKS: each style card sits on its own row
   beside a `→` and a preview of the current page in that style, so the two rows read
   as "this choice → this result". Wider max-width because each row now carries a card
   AND a preview. */
.md-ds-options--with-previews {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* Full-bleed modal: use the width, and claim the leftover height so the two preview
     rows can share it. Without this the rows collapse to their content and the previews
     stay small however tall the modal is. Grows inside the flex column set on
     .shepherd-text above.
     The base rule's `margin: 8px auto 0` must be neutralised horizontally: `auto` side
     margins on a FLEX ITEM shrink-wrap and centre it, which pinned both rows to their
     content width and left the previews narrow and portrait-shaped. */
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* This variant is a column at EVERY width, so the OR divider needs its horizontal
   "— OR —" form always — not only under the 800px stacking query further down, which
   is what governs the no-preview layout. Declared here (on the variant) rather than by
   overriding .md-ds-options__or, so each layout keeps one authoritative rule. */
.md-ds-options--with-previews > .md-ds-options__or {
  flex-direction: row;
  /* Sits over the CHOICE COLUMN, not the full row: the two things it divides are the
     Gentle and Focused cards on the left, so centring it across the whole width (which
     includes the previews) floated it away from what it separates. Same width as that
     column, pinned to the start, and centred within itself. */
  align-self: flex-start;
  width: 380px;
  max-width: 100%;
  justify-content: center;
}

.md-ds-options--with-previews > .md-ds-options__or::before,
.md-ds-options--with-previews > .md-ds-options__or::after {
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  min-height: 0;
}

/* Rows size to their CONTENT rather than splitting the column height equally. Equal
   splitting capped each preview at half the leftover height, which forced the fit to be
   height-constrained and left the panels well short of the right edge. The preview is now
   scaled to fill the width instead, and the roster cap (PREVIEW_MAX_ROSTER_ROWS) is what
   keeps the resulting height in bounds; the modal scrolls if it ever does not. */
.md-ds-optionrow {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* The card keeps a readable measure; the preview takes the rest of the row. `min-width:
   0` so a long label shrinks the flex item instead of overflowing. Centred rather than
   stretched: the cards hold only a heading and two bullets, so stretching them to the
   preview's full height left a large blank area under the text. */
.md-ds-optionrow > .md-ds-optionrow__choice {
  flex: 0 1 380px;
  min-width: 0;
  align-self: center;
}

/* Card stacked over its Select button. `align-items: center` shrinks the button to its
   own content width instead of stretching it to the card's. */
.md-ds-optionrow__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.md-ds-optionrow__choice > .md-ds-option {
  align-self: stretch;
  /* MUST override the base `flex: 1 1 0`. That basis was written for the side-by-side ROW
     (where it equalises WIDTH); in this column it resolves against the cross axis and
     gives the card a height basis of 0, which — with the card's `overflow: hidden` —
     clipped the description away and left only the title showing. */
  flex: 0 0 auto;
}

.md-ds-optionrow__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(27, 54, 93, 0.42);
}

/* Preview figure. `:empty` on the viewport collapses the whole figure when there was
   no page shell to photograph, so the chooser degrades to plain cards rather than
   showing an empty frame. */
.md-ds-stylepreview {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-ds-stylepreview:has(.md-ds-stylepreview__viewport:empty) {
  display: none;
}

/* The preview window. The iframe inside renders at full viewport size and is scaled to
   fit this box ENTIRELY (see _fitStylePreview) so the whole page is visible — nothing is
   cropped. The box takes whatever height the row gives it; `min-height` keeps the page
   legible if the modal is very short. */
.md-ds-stylepreview__viewport {
  position: relative;
  overflow: hidden;
  /* BOTH dimensions are set inline by _fitStylePreviews, to the scaled size of the
     page's actual content — so the panel hugs the page rather than letterboxing it, and
     a short layout produces a short panel instead of a blank tail. `flex: 0 0 auto` so
     the column does not stretch it back out to fill the row.
     Left-aligned in the leftover space (not centred): the figure keeps a full-width flex
     basis so _fitStylePreviews has a stable box to measure against — centring the
     shrunken panel inside it opened a ~270px gap after the arrow and broke the
     "card → preview" adjacency the whole row is meant to convey. */
  flex: 0 0 auto;
  width: 100%;
  margin-inline: 0 auto;
  /* Floor only for the moment before the fit runs; the inline height supersedes it. */
  min-height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  background: #fff;
  box-shadow: 0 2px 10px rgba(27, 54, 93, 0.1);
}

.md-ds-stylepreview__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  /* Decorative screenshot — never interactive, so pointer + touch go to the card. */
  pointer-events: none;
}

/* Centred UNDER ITS OWN PANEL, not under the figure. The panel is left-aligned in the
   figure's leftover space, and those two are only the same width while the scale is
   below 1:1 — once it clamps (a viewport wider than the page renders at), the panel is
   narrower than the figure and a figure-centred caption drifts off to the right. So
   _fitStylePreviews stamps the caption with the panel's width and this centres within
   that. */
.md-ds-stylepreview__caption {
  font-size: 15px;
  font-weight: 600;
  /* Was rgba($la-navy, 0.62) — ~3.89:1 on white and lower again on the tour's
     translucent glass, under AA for 15px. This caption names the style being chosen. */
  color: rgba(27, 54, 93, 0.78);
  text-align: center;
}

/* The selected style's preview is the one the user is committing to — give it the
   same accent treatment the selected card gets, so the pair reads as one unit. */
.md-ds-optionrow:has(.md-ds-select.is-selected) .md-ds-stylepreview__viewport {
  border-color: rgba(78, 205, 196, 0.55);
  box-shadow: 0 3px 14px rgba(78, 205, 196, 0.22);
}

.md-ds-optionrow:has(.md-ds-select.is-selected) .md-ds-optionrow__arrow {
  color: rgba(78, 205, 196, 0.9);
}

/* Narrow: each option becomes a COLUMN — card, Select button, arrow, preview stacked —
   and the arrow rotates to point down at the preview so the "choice → result" reading
   survives the reflow.
   Side by side, proximity alone makes it obvious which preview belongs to which card.
   Stacked, everything is in one vertical line and that grouping is lost, so the row
   becomes a visible GROUP CONTAINER: its own surface, border and padding, drawing a box
   around all of one view's content. */
@media (max-width: 900px) {
  .md-ds-options--with-previews {
    /* Wider gap than the in-row spacing, so the break BETWEEN the two groups reads as
       larger than the spacing inside either one. */
    gap: 18px;
  }
  .md-ds-optionrow {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 20px;
    border: 1px solid rgba(27, 54, 93, 0.1);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  /* The chosen group is tinted so the selection is still obvious once the cards are no
     longer beside each other for comparison. */
  .md-ds-optionrow:has(.md-ds-select.is-selected) {
    border-color: rgba(78, 205, 196, 0.45);
    background: rgba(78, 205, 196, 0.06);
  }
  /* Was `> .md-ds-option`, which stopped matching when the card gained its `__choice`
     wrapper — the card is no longer a direct child of the row. */
  /* Pass-through: the card and its Select button stop being wrapped and become direct
     flex items of the row, so `order` can place them independently. Stacked, the reading
     order is card → arrow → preview → caption → BUTTON: you look at the option, see what
     the page becomes, and only then commit. Side by side the button stays tucked under
     its card, where the whole choice column is taken in at once.
     `order` alone cannot do this — the button is nested inside `__choice`, and order only
     sorts siblings. `__choice` carries no background or border of its own, so dropping its
     box costs nothing. */
  .md-ds-optionrow__choice {
    display: contents;
  }
  /* Centred, and the 420px reading-measure cap lifted a little: stretched-with-a-max-width
     pins the box to the START of the cross axis, which left the card hugging the group's
     left edge instead of sitting in the middle of it. */
  .md-ds-optionrow__choice > .md-ds-option {
    order: 1;
    align-self: center;
    width: 100%;
    max-width: 560px;
  }
  .md-ds-optionrow__arrow {
    order: 2;
    transform: rotate(90deg);
  }
  /* MUST stretch. The row is `align-items: center` here, which makes the figure
     shrink-to-fit — and `_fitStylePreviews` derives the preview scale from
     `figure.clientWidth`, so a shrink-wrapped figure collapsed the preview to a fraction
     of the width available (measured ~220px inside a ~756px group). */
  .md-ds-stylepreview {
    order: 3;
    align-self: stretch;
    height: auto;
  }
  .md-ds-select {
    order: 4;
  }
  /* Full width and centred: pinning it to a 380px column only makes sense while the
     cards occupy that column, which they no longer do here. */
  .md-ds-options--with-previews > .md-ds-options__or {
    align-self: center;
    width: 100%;
  }
}
/* Stylized OR divider between the two layout-style buttons, so the pair reads as
   an either/or choice. Side-by-side (the default) it's a VERTICAL rule: the word
   OR with a hairline running the full card height above and below it. Stacked
   (narrow screens) the same element rotates into the horizontal "— OR —" between
   the two cards — see the media query at the end of this file. */
.md-ds-options__or {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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: "";
  /* Grow to fill the card height as a vertical hairline; `min-height` keeps a
     visible tick even when the cards are short. */
  flex: 1 1 auto;
  width: 2px;
  min-height: 18px;
  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 {
  /* Side-by-side: the two cards share the row EQUALLY (`flex: 1 1 0` ignores the
     differing content widths) and stretch to equal HEIGHT (container align-items
     defaults to stretch). `min-width: 0` lets them shrink instead of overflowing;
     the cap keeps a long line from stretching a card past a readable measure.
     Stacked (narrow screens) they hug their content again — see the media query
     at the end of this file. */
  flex: 1 1 0;
  min-width: 0;
  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);
  /* No `cursor: pointer`: the card is presentational now, and the Select button inside it
     is the control. A pointer cursor over non-clickable text would promise an action the
     card no longer performs. */
  transition: box-shadow 180ms ease-out, transform 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

/* Select button — the actual control. Sits at the bottom of its card, pushed there by
   `margin-top: auto` so both buttons line up even when the two descriptions differ in
   length.
   Each button is styled as the PRIMARY CTA of the view it selects, so the pair doubles as
   a swatch of what the buttons look like in each style: "Select Gentle View" wears the
   Gentle Done button, "Select Focused View" wears the Focused one. The per-view fills are
   below and are keyed off `data-gst-layout`, NOT off the live `body.ll-layout-focused` —
   both must be visible at once regardless of which view is currently active.
   Shape mirrors `.shepherd-element .shepherd-button` (pill, 1.5px border, 600 weight) so
   these read as the same family of control. */
.md-ds-select {
  /* Shrinks to its own content — it sits under the card, not across it. */
  align-self: center;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Padding scales with the type so the pill stays proportionate as it shrinks.
     calc() around the mixed units is REQUIRED — SassC cannot evaluate px + vw at compile
     time inside clamp() (docs/CSS_SCSS_GUIDELINES.md). */
  padding: clamp(8px, 6px + 0.35vw, 11px) clamp(14px, 10px + 0.8vw, 22px);
  font-family: inherit;
  /* Fluid and deliberately smaller than the footer CTA: this is a choice, not the
     page's primary action, and two of them sit in a narrow column. px not rem —
     bootstrap sets `html { font-size: 10px }`, so rem here would render tiny. */
  font-size: clamp(13px, 11px + 0.32vw, 15px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* GENTLE — mirrors `.shepherd-element .md-tour__btn--primary`: verdigris glass fill,
   navy text, illuminated bevel. */
.md-ds-select[data-gst-layout=gentle] {
  background: rgba(44, 183, 176, 0.22);
  border-color: rgba(76, 134, 216, 0.28);
  color: #1B365D;
  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);
}

.md-ds-select[data-gst-layout=gentle]:hover {
  background: rgba(44, 183, 176, 0.32);
  border-color: rgba(76, 134, 216, 0.4);
  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);
}

.md-ds-select[data-gst-layout=gentle]:focus-visible {
  /* Keep a REAL outline. `outline: none` plus a 0.45-alpha ring composited to roughly
     1.69:1 — under the 3:1 non-text floor — and this modal is portalled outside
     `#within_ember`, so the global focus-ring and forced-colors safety nets there do not
     apply to it. The solid ring below carries the visible focus. */
  outline: 3px solid #4C86D8;
  outline-offset: 2px;
  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);
}

/* FOCUSED — mirrors the focused-view primary: glossy desaturated-navy radial fill, white
   text, raised bevel. Same values as the `body.ll-layout-focused …md-tour__btn--primary`
   rule further down this file. */
.md-ds-select[data-gst-layout=focused] {
  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);
}

.md-ds-select[data-gst-layout=focused]:hover {
  border-color: rgba(255, 255, 255, 0.2);
  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);
  /* No lift — matches the focused primary, which deliberately drops the translateY. */
  transform: none;
}

.md-ds-select[data-gst-layout=focused]: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);
}

/* Chosen state is carried by the CHECK MARK plus the card/preview accent (via `:has()`),
   deliberately NOT by changing the fill — the fill is now information in its own right
   (it shows what that view's primary button looks like) and must stay put. */
.md-ds-select__check {
  display: none;
  align-items: center;
}

.md-ds-select.is-selected .md-ds-select__check {
  display: inline-flex;
}

/* Label swap: "Select Gentle View" → "Selected…". Both are in the DOM; only one is ever
   displayed, so the accessible name changes with the visual label and no JS rewrites copy.
   `display: none` (not `visibility`) so the pill re-shrinks to whichever label is showing
   — the button is sized by its content now. */
.md-ds-select__label--done {
  display: none;
}

.md-ds-select.is-selected .md-ds-select__label--idle {
  display: none;
}

.md-ds-select.is-selected .md-ds-select__label--done {
  display: inline;
}

/* Lift on hovering the CARD is kept (the card and its button read as one unit), but the
   focus ring below moved to the button — the card is a <div> now and never takes focus. */
.md-ds-option:hover,
.md-ds-optionrow__choice:has(.md-ds-select:focus-visible) .md-ds-option {
  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-optionrow__choice:has(.md-ds-select:active) .md-ds-option {
  transform: translateY(0.5px);
}

.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-optionrow__choice:has(.md-ds-select.is-selected) .md-ds-option {
  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-optionrow__choice:has(.md-ds-select.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 fallback — stack the two options into a centered COLUMN (Gentle,
   the OR on its OWN centered row, then Focused) once there is no longer room for
   them side-by-side. Threshold from the cards' measured natural width, not a
   round guess: each card's widest line is its longest bullet ("Prefer a softer,
   more relaxed interface", 14px Lexend) which makes the card 331px at max-content;
   two equal-width cards + the 24px OR column + two 12px gaps need ~711px of
   content. The display modal is 100vw at <=1024px with 28px of side padding
   (56px) and a ~15px scrollbar, so the row stops fitting just under ~782px of
   viewport — 800px stacks with a little slack. Above 1024px the modal is 80vw
   (>=820px of panel), which always clears the row. `align-items: center` centers
   both the cards and the OR row horizontally. */
@media (max-width: 800px) {
  .md-ds-options {
    flex-direction: column;
    align-items: center;
  }
  /* Stacked, the cards hug their content again (equal-width sharing only makes
     sense across a row; in a column `flex: 1 1 0` would equalize HEIGHTS). */
  .md-ds-option {
    flex: 0 1 auto;
  }
  /* Divider rotates back to the horizontal "— OR —" rule between the two cards. */
  .md-ds-options__or {
    flex-direction: row;
    align-self: center;
  }
  .md-ds-options__or::before,
  .md-ds-options__or::after {
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    min-height: 0;
  }
}
.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;
}

/* AI-sparkle SVG (AI-driven badge) — sized like the ☁/$ glyphs, inherits their
   charcoal color via fill:currentColor so it sits consistently in the circle. */
.la-hero-badge-icon__svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}

/* 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 {
  /* No margin-top: the section sits directly under the spotlight and supplies its own
     top spacing via padding-top. (.la-section sets no margin, so this resolves to 0.) */
  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-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,
#la-mission .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 {
  /* Landing-alt body copy tracks .la-hero-subtitle's fluid size (see the
     .la-wrapper--landing .la-plan-subtitle rule, which keeps the spotlight/plan
     bodies identical to this). clamp() min/max are the hero's; the ≤640px floor
     lives with that rule. This class is landing-alt-only, so it's set in place. */
  font-size: clamp(1.25rem, 0.65rem + 1.38vw, 1.755rem);
  font-weight: 400;
  color: rgba(27, 42, 74, 0.9);
  /* Same container width as the spotlight bodies (.la-slp-spotlight__body /
     .la-devices-spotlight__body are max-width: 720px, centred, at both breakpoints)
     so the two read as one column. Was 558.72px. */
  max-width: 720px;
  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;
}

/* Compact variant — the Privacy Commitment paragraph reads at 16px rather than the
   22px display size the Accessibility Statement keeps. Both share
   .la-a11y-display-text, so this modifier is what separates them.

   DOUBLED SELECTOR ON PURPOSE (.la-a11y-display-text.la-a11y-display-text--compact,
   specificity 0,0,2,0): the responsive rules further down the file set
   `.la-a11y-display-text { font-size: 20px }` at <=md and `18px` at <=sm. Those are
   0,0,1,0 but appear LATER, so a lone `.la-a11y-display-text--compact` would tie on
   specificity and lose on source order below 768px. The compound wins at every width
   without needing !important (see the app.scss cascade note in LEARNINGS.md).

   clamp() keeps it responsive instead of hard-pinning 16px: 16px down to ~470px wide,
   then easing to a 15px floor so it stays legible on the narrowest phones — the same
   15px floor .la-wrapper--landing .la-plan-subtitle uses. Single-unit vw in the middle
   arm, so no calc() wrapper is needed (mixed-unit clamp math would require one). */
.la-a11y-display-text.la-a11y-display-text--compact {
  font-size: clamp(15px, 3.4vw, 16px);
}

/* 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,
.la-slp-spotlight .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,
.la-slp-spotlight .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. */
/* Only the DEVICES spotlight is still rendered twice (mobile copy inside the parallax
   zone, desktop copy outside it). The SLP spotlight is now a single section above
   Features at all widths, so it is NOT hidden here. */
.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-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 {
  /* aac-user.jpg (1536x1024). JPEG, not PNG: it's a photograph, so PNG only
     compressed to ~1.9MB while q85 JPEG is ~200KB at the same visual quality.
     Kept landing-instructor.png in public/images for later use. */
  background-image: url(/images/aac-user.jpg);
}

.la-devices-spotlight__image {
  /* JPEG for the same reason as aac-user.jpg: it's a photo, so the source PNG
     (devices-new.png) was ~2.26MB while q85 JPEG is ~251KB at the same visual
     quality. Served from both public/images (Rails) and app/frontend/public/images
     (Ember). */
  background-image: url(/images/devices-new.jpg);
}

/* Desktop (>1024px): let both spotlight images render at full height using their
   natural aspect ratios (image dimensions: aac-user 1536×1024, devices 1000×667). */
@media (min-width: 1025px) {
  .la-slp-spotlight__image {
    background-image: url(/images/aac-user.jpg);
    /* aspect-ratio matches aac-user.jpg's natural 1536x1024 (3:2), so the div is
       exactly the image's shape and `background-size: cover` (inherited) fills it
       edge-to-edge. That's what makes the radius below clip the IMAGE's own corners
       rather than empty letterbox strips — same reasoning as the devices image. */
    aspect-ratio: 1536/1024;
    min-height: 0;
    /* Rounded corners, matching the base rule and the devices spotlight. */
    border-radius: 16px;
    /* "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 previously used -48px to cancel the parent flex gap
       ($aac-spacing-48) and sit flush against the paragraph, which left no breathing
       room under the body copy. Now zero, so the parent's 48px gap stands on its own
       as the copy-to-image spacing. */
    /* Must track devices-new.jpg's natural size (1729x910). It previously read
       1000/667 (1.50) against a ~1.90 image, so `contain` letterboxed it
       and the radius rounded the empty strips -- the exact failure the note above
       warns about. */
    aspect-ratio: 1729/910;
    min-height: 0;
    width: 78.125%;
    margin: 0 auto;
    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;
    /* margin-bottom: 0 removes the dead band under the image. The base
       `.la-slp-spotlight .la-parallax-card-outer` rule applies margin-bottom: 5rem,
       and since the section has padding the margin can't collapse through it — so
       that 80px renders INSIDE the section's content box, between the image and the
       section's own padding. Same reason the devices card zeroes it below. */
    margin-bottom: 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 is no longer display:none by default (single copy, all widths),
     so only the devices mobile mirror needs re-showing here. */
  .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.jpg);
    /* Tracks landing-classroom.jpg's natural size (1535x1024). It previously read
       850/638 (1.33) against a 1535x1024 (1.50) image, so `contain` letterboxed it
       and the radius rounded the empty strips -- the same mismatch that was wrong on
       the devices image. */
    aspect-ratio: 1535/1024;
    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 {
    /* Tracks devices-new.jpg's natural size (1729x910); see the desktop rule. */
    aspect-ratio: 1729/910;
    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,
#la-mission .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;
}

/* Landing-alt body copy reads at the same size as .la-hero-subtitle, scaling with the
   viewport exactly as it does (same clamp min/max, same ≤640px floor).
   Scoped to .la-wrapper--landing on purpose: .la-plan-subtitle is SHARED with
   about.hbs, which is not part of this change. It covers the plan + SLP + devices
   bodies together, preserving the "all three subtitles scale identically" intent noted
   on the spotlight rules (those override layout only, never font-size).
   .la-section-subtitle carries the same clamp at its own definition. */
.la-wrapper--landing .la-plan-subtitle {
  font-size: clamp(1.25rem, 0.65rem + 1.38vw, 1.755rem);
}

/* Floor at 15px on small screens so it stays legible where the clamp would go smaller
   — mirrors the .la-hero-subtitle rule. */
@media (max-width: 640px) {
  .la-wrapper--landing .la-plan-subtitle,
  .la-wrapper--landing .la-section-subtitle {
    font-size: 15px;
  }
}
/* Compact variant — the "Included in every plan" intro reads at 16px rather than the
   clamped display size above. .la-plan-subtitle is shared by the SLP and devices
   spotlight bodies on this page AND by about.hbs, so only this one paragraph carries
   the modifier.

   Selector is .la-wrapper--landing + doubled class (specificity 0,0,3,0) so it beats
   BOTH `.la-wrapper--landing .la-plan-subtitle` (0,0,2,0) above and the <=640px rule
   directly above it, which ties on specificity and would otherwise win on source
   order. No !important needed.

   Same clamp as the privacy paragraph so the two 16px bodies stay in step: 16px down
   to ~470px, easing to the same 15px floor this section already uses at <=640px. */
.la-wrapper--landing .la-plan-subtitle.la-plan-subtitle--compact {
  font-size: clamp(15px, 3.4vw, 16px);
}

.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;
}

/* Privacy card content matches the Accessibility card's content width
   (.la-a11y-display = 1008px) so the two sibling parallax cards read at the same
   width. The .la-plan-text cluster otherwise caps its title/subtitle at 90%, which
   is narrower than the a11y block. */
.la-testimonial-section .la-plan-text {
  max-width: 1008px;
  margin-left: auto;
  margin-right: auto;
}
.la-testimonial-section .la-plan-text .la-plan-title,
.la-testimonial-section .la-plan-text .la-a11y-display-text {
  max-width: 100%;
}

.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 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--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-header-label--regular {
  font-weight: 700;
}

.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 {
  /* WCAG AA: this link sits on the near-white terms/AI disclosure modal surface. */
  color: #1A7B7A;
  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;
}

.la-ai-disclosure-modal-wrap .la-btn {
  min-height: 64px;
}

.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 Stop Masquerading visible at this breakpoint — exit path must not hide with Upgrade. */
  .header-index-with-dark-toggle .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__stop-masquerade,
  #inner_header .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__stop-masquerade,
  .app-navbar .app-navbar-auth-nav--desktop .md-pillnav__stop-masquerade {
    display: inline-flex !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;
  }
  /* No .la-section-subtitle font-size override here on purpose: it now tracks
     .la-plan-subtitle (the spotlight/plan body), which is a single size at every
     width. Shrinking it here would re-introduce the mismatch below $aac-breakpoint-md. */
  .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,
  #la-mission .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 radios — one labelled row per type, large tap
   target, brand-smart-blue active state for the chosen type. */
.register-supporter-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.register-supporter-type {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(27, 54, 93, 0.03);
  color: #1B365D;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.register-supporter-type input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid rgba(27, 54, 93, 0.4);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  align-self: center;
}

.register-supporter-type input[type=radio]:checked {
  border-color: #3A6BC7;
  background: radial-gradient(circle, #3A6BC7 0 5px, #fff 6px);
}

.register-supporter-type input[type=radio]:focus-visible {
  outline: 2px solid #3A6BC7;
  outline-offset: 2px;
}

.register-supporter-type span {
  line-height: 1;
}

.register-supporter-type:hover,
.register-supporter-type:focus-within {
  border-color: rgba(58, 107, 199, 0.5);
  background: rgba(58, 107, 199, 0.06);
}

.register-supporter-type--active {
  background: rgba(58, 107, 199, 0.1);
  border-color: #3A6BC7;
}

.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;
  /* Field captions only. Radio option rows (.register-supporter-type)
     are also <label>s and need flex + their own type size. */
}
.register-card .form-group label:not(.register-supporter-type) {
  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;
  padding-left: 14px; /* extra breathing room between the search icon and the "Find a board…" text */
  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-jump__panel {
  /* Match the trigger's helper-text indent — push the live input's
     "Find a board…" placeholder off the search icon. Scoped to this panel
     so the shared speak-mode drawer field is untouched. */
}
.ub-search-page .ub-search-jump__panel .md-board-collection__search-input {
  padding-left: 8px;
}
.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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .author {
  order: 97;
  margin-top: 0;
  margin-bottom: 4px;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.simple_board_icon .board-icon__lang-marker {
  order: 98;
  margin: 0 0 8px;
}
.ub-search-page .ub-search-page__board-grid.ub-boards-page__board-grid .btn.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;
  margin-bottom: 0;
}
.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: 1 1 auto;
  height: 100%;
  min-height: 0;
  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;
}

/* Registration confirmation screen (user.confirm_registration). Mirrors the
   .login-card auth treatment — centered, soft dual-radial gradient, teal top
   border, Maitree title — with a success/error status badge and a single Home
   CTA. Lives in the user outlet below the Home/Account/Logs pill-nav. */
.la-reg-confirm {
  display: flex;
  justify-content: center;
  padding: 40px 24px;
}

.la-reg-confirm__card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  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.95);
  border-radius: 16px;
  padding: 40px 32px;
  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);
}

.la-reg-confirm__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.la-reg-confirm__icon--success {
  color: #2A9D8F;
  background: rgba(42, 157, 143, 0.12);
}

.la-reg-confirm__icon--error {
  color: #C0392B;
  background: rgba(192, 57, 43, 0.1);
}

.la-reg-confirm__title {
  font-family: "Maitree", serif;
  font-size: 26px;
  font-weight: normal;
  color: #1b2a4a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
@media (max-width: 480px) {
  .la-reg-confirm__title {
    font-size: 22px;
  }
}

.la-reg-confirm__message {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 18px;
  color: #374151;
  line-height: 1.5;
  max-width: 40ch;
  margin: 0 auto 28px;
}

.la-reg-confirm__cta {
  display: inline-flex;
  align-items: center;
}

/* Success celebration: a party-popper badge with confetti bursting from behind
   it. The badge sits centered; the celebrate wrapper owns the bottom spacing
   (the plain --error badge keeps its own auto margin). */
.la-reg-confirm__celebrate {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}

.la-reg-confirm__celebrate .la-reg-confirm__icon {
  margin: 0;
}

/* Party-popper icon pops in on entry. */
.la-reg-confirm__icon--success svg {
  animation: la-reg-pop 0.5s ease-out both;
}

/* Confetti pieces burst outward on a gentle loop. Each carries its own
   direction (--tx/--ty in px), spin (--rot), color and delay. Pieces are
   pre-centered on the badge's midpoint via negative margins, so the keyframe
   translate stays pure-px (no mixed %+px calc for SassC to choke on). */
.la-reg-confirm__confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3.5px 0 0 -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  opacity: 0;
  animation: la-reg-confetti 2.6s ease-out infinite;
}

.la-reg-confirm__confetti--a {
  --tx: -40px;
  --ty: -26px;
  --rot: 200deg;
  background: #2A9D8F;
  animation-delay: 0s;
}

.la-reg-confirm__confetti--b {
  --tx: 38px;
  --ty: -32px;
  --rot: -220deg;
  background: #4C86D8;
  animation-delay: 0.12s;
}

.la-reg-confirm__confetti--c {
  --tx: -30px;
  --ty: 30px;
  --rot: 160deg;
  background: #F4A259;
  animation-delay: 0.24s;
}

.la-reg-confirm__confetti--d {
  --tx: 34px;
  --ty: 28px;
  --rot: -160deg;
  background: #E76F92;
  animation-delay: 0.36s;
}

.la-reg-confirm__confetti--e {
  --tx: -6px;
  --ty: -44px;
  --rot: 260deg;
  background: #F6C453;
  animation-delay: 0.5s;
}

.la-reg-confirm__confetti--f {
  --tx: 8px;
  --ty: 42px;
  --rot: -120deg;
  background: #6C5CE7;
  animation-delay: 0.62s;
}

@keyframes la-reg-pop {
  0% {
    transform: scale(0) rotate(-14deg);
  }
  60% {
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes la-reg-confetti {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot));
    opacity: 0;
  }
}
/* Respect reduced-motion: no burst or pop; the party-popper badge stays static. */
@media (prefers-reduced-motion: reduce) {
  .la-reg-confirm__icon--success svg {
    animation: none;
  }
  .la-reg-confirm__confetti {
    animation: none;
    opacity: 0;
  }
}
.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;
  /* `clip`, not `hidden` — this governs whether `position: sticky` works ANYWHERE
     inside the shell. Per CSS spec an `overflow` of `hidden` on one axis makes the
     other compute to `auto`, so `overflow-x: hidden` silently turned .md-shell into
     a scrolling box on Y (verified in-browser: computed overflowY "auto", with
     scrollHeight === clientHeight === 2138 — it never actually scrolls). Sticky
     binds to the nearest scrolling box, so every sticky element on a shell page was
     pinned inside a scrollport that never moves, and rendered at its natural offset:
     inert. `clip` still prevents horizontal overflow but does NOT establish a scroll
     container, so overflow-y stays `visible` and sticky resolves against the real
     scroller (#content).

     Two declarations on purpose: `clip` is unsupported before Safari 16, where the
     second line is dropped as invalid and the first still contains horizontal
     overflow. Those browsers keep the old (sticky-inert) behaviour rather than
     losing containment and gaining a horizontal scrollbar.

     Was previously scoped to `#content:has(.md-preferences) .md-shell--user` while
     the global change awaited a regression pass; the narrow override is removed.
     `scripts/md-shell-sticky-qa.mjs` covers 7 routes across 5 viewports. That is
     NOT every `.md-shell--*` variant — there are ~25 — so read it as the routes
     actually exercised, not as a whole-app clearance. The first version of that
     harness ran a single 1280x800 viewport and reported this green while it was
     cancelled outright below 1024px (see the companion `clip` in the ≤1024
     scroll-guard block, ~60656); one viewport could not see it. */
  overflow-x: hidden !important;
  overflow-x: clip !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;
}

/* (The preferences-only `overflow-x: clip` override that used to live here is
   gone — the fix is now on `.md-shell` itself, with a `hidden` fallback for
   pre-16 Safari. See the comment on that rule.) */
.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, rgb(94.0910144928, 117.5584944841, 148.3089855072), rgb(53.4708256881, 105.943570118, 180.1291743119)) !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 {
  /* This panel now carries the report's glass surface: the treatment that used
     to sit on `.communication-report::before` (verdigris + denim corner blooms
     over a white-to-ice diagonal, white hairline, deep soft drop) moved out here
     so the page reads as ONE card instead of a card inside a card. That
     pseudo-element is now fully transparent (see _reports.scss).
     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: radial-gradient(circle at 12% 4%, rgba(42, 157, 143, 0.1), transparent 432px), radial-gradient(circle at 94% 8%, rgba(76, 134, 216, 0.12), transparent 480px), linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.76)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
  backdrop-filter: blur(24px) saturate(125%) !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 32px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 24px 64px rgba(27, 54, 93, 0.1) !important;
  /* The panel's own inset. `.md-stats-main` inside carries no margin or padding,
     so this is the only gutter between the panel edge and the report content.
     No top inset — the report heading sits flush to the top of the panel. */
  padding: 0 clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px) !important;
  /* Clears the page hero above it. */
  margin-top: 24px !important;
  min-height: auto !important;
  color: var(--md-ink) !important;
}

/* Compare mode is a different STATE, not an override of the rule above: it has no
   report header sitting flush to the panel top (the side-by-side period filters
   start the content instead), so the top inset comes back. */
.md-workspace .md-stats-page:has(.md-stats-compare-row) {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
}

.md-workspace .md-stats-main {
  /* No padding — the bottom-navbar clearance this used to reserve now comes from
     the workspace's own bottom padding, not an inset on the report column. */
  padding: 0 !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;
}

/* ORG USERS — the three headline cards share a 24px title (2026-08-16, requested).
   My Organizations was 22px, My Caseload 28px, and Speak Mode inherited 24px from the
   badge-action as-button rule (~52323) — so on an org dashboard the three stacked cards
   announced themselves at three different sizes. One size makes them read as peers, which
   is what they now are: Organizations is the hero, the other two are ordinary cards.
   SPECIFICITY: each selector carries five classes (0,5,0) so it beats the badge-action
   rule at the same weight on source order, and the caseload rule at (0,3,0) outright.
   BOUNDED BY `min-width: 475px` ON PURPOSE. Below 474px a responsive rule (~62755) drops
   every dashboard title to 18px so headings fit a phone; an unbounded rule here would
   outrank it and force 24px onto a 375px screen. This keeps the org sizing to the widths
   it was asked for and leaves the small-screen behaviour intact. */
@media (min-width: 475px) {
  .md-grid.md-grid--hero-org .md-card.md-card--org-management .md-card__title,
  .md-grid.md-grid--hero-org .md-card.md-card--caseload.md-card--caseload-as-button .md-card__title,
  .md-grid.md-grid--hero-org .md-card.md-card--speak.md-card--speak-as-button .md-card__title {
    font-size: 24px !important;
  }
}
/* ORG USERS — 10px more breathing room between rows (2026-08-16, requested).
   `row-gap` ONLY, not the `gap` shorthand: widening the column gap too would narrow the
   utility cards that share a row.
   THE BASE IS 14px, NOT 28. `.md-grid { gap: 28px }` is overridden for this view by
   `.md-grid.md-grid--layout-focused { gap: 14px !important }` (~1.99M chars into the
   compiled sheet). The first cut of this rule read 28 + 10 = 38 and ALSO lost the cascade:
   it matched that rule's (0,2,0) + !important exactly, and lost on source order because
   the focused rule is emitted ~260k characters later — its `gap` SHORTHAND then reset the
   `row-gap` entirely. Measured on the page: 14px, i.e. the whole rule was inert.
   Both problems are fixed by chaining `.md-grid--layout-focused` here: (0,3,0) wins
   outright, and the value is now 14 + 10 = 24.
   THE BOARDS CARD IS EXEMPT, as asked — its trailing space stays at the original 28px.
   A grid row-gap cannot be varied per row, so the extra 10px is cancelled underneath that
   one card with a matching negative margin. Verified there is no existing margin on
   `.md-card--boards` (base rule ~50306) for this to overwrite, so the two compose cleanly:
   38 - 10 = 28.
   Scoped to `.md-grid--hero-org`, applied on the home tab only. */
.md-grid.md-grid--layout-focused.md-grid--hero-org {
  row-gap: 24px !important;
}

.md-grid.md-grid--hero-org .md-card.md-card--boards {
  margin-bottom: -10px !important;
}

/* ORG USERS — the Caseload|Speak pair: LEVEL with each other, and set down from the row
   above (2026-08-16, requested "more space above the caseload and speak button row").
   THE AUTHORITATIVE RULE for this pair's vertical placement — put any further adjustment
   HERE rather than in a competing selector.

   A grid `row-gap` cannot be varied per row, so the extra space above this ONE row comes
   from a margin on the two cards in it, the same mechanism the boards exemption above uses
   in the other direction. 24px row-gap + 16px = 40px above the pair.

   BOTH cards carry the SAME margin, which is what keeps them level: under the grid's
   default `align-items: stretch` each item is sized so its MARGIN box fills the row, so an
   equal margin moves both tops down together and leaves the two the same height — the
   "Speak must match Caseload's height" requirement still holds.
   RECORDED so the earlier 10px LIFT is not reintroduced casually: `margin-top: -10px` alone
   made the card 10px TALLER rather than higher (same stretch behaviour, opposite sign), and
   then needed either a cancelling `margin-bottom` or `align-self: start` + `height: 100%` to
   restore equal heights. See the LEARNINGS entry "align-items: stretch absorbs a negative
   margin by GROWING the item". A POSITIVE margin on both is the well-behaved direction. */
.md-grid.md-grid--layout-focused.md-grid--hero-org .md-card.md-card--caseload.md-card--caseload-as-button,
.md-grid.md-grid--layout-focused.md-grid--hero-org .md-card.md-card--speak.md-card--speak-as-button {
  margin-top: 16px !important;
}

/* ORG USERS — a quieter halo (2026-08-16, requested). On an org dashboard the
   Organizations card is the hero, so My Caseload is a peer card rather than the showcase
   action; at the shared 38px/0.32 verdigris halo it competed with the hero for attention.
   Reduced to 24px/0.18 resting and 32px/0.26 hover — roughly a third off each, keeping the
   hover step proportional so the card still visibly responds.
   THE WHOLE STACK IS RESTATED, not just the halo, because the base rule declares its six
   layers as ONE atomic `box-shadow` (see the note there): a second declaration listing only
   the halo would replace the bevels and lift as well, flattening the card. The first five
   layers are therefore identical to the base by design — change them together.
   Scoped to `.md-grid--hero-org`, which is only applied on the home tab, so this cannot
   reach the Caseload card anywhere else. */
.md-grid.md-grid--hero-org .md-card.md-card--caseload-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 24px rgba(42, 157, 143, 0.18) !important;
}

.md-grid.md-grid--hero-org .md-card.md-card--caseload-as-button:hover,
.md-grid.md-grid--hero-org .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 32px rgba(42, 157, 143, 0.26) !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 {
  /* !important to beat the shared `.md-hero { position: static !important }`
     (app.scss ~42670) — this card MUST be the positioning context so the absolute
     AAC chip (.md-hero--user__aac) anchors to the card's bottom-right, not the page. */
  position: relative !important;
  padding: 36px 24px 32px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  /* !important so this actually paints — the shared `.md-hero { background:
     transparent !important }` (app.scss ~42675) was overriding it, leaving the
     card fully transparent (it only looked light because the page behind is).
     Alpha bumped up so the card reads as a solid, ~15%-less-transparent surface. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9)) !important;
  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;
}

/* Current AAC solution — an action chip pinned to the hero card's bottom-right.
   Shows the app/device the user currently uses; opens the Current AAC Solution
   modal. Absolute so it doesn't disturb the avatar+body flex row. */
.md-hero--user__aac {
  position: absolute;
  right: 24px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.08);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.md-hero--user__aac:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.14);
  transform: translateY(-1px);
}

.md-hero--user__aac-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(90, 106, 133, 0.16), rgba(70, 80, 95, 0.1));
  color: #46505F;
}

.md-hero--user__aac-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
}

.md-hero--user__aac-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.md-hero--user__aac-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(27, 54, 93, 0.5);
}

.md-hero--user__aac-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1025px) {
  /* Match the hero's wider side padding at this width. */
  .md-hero--user__aac {
    right: 88px;
  }
}
@media (max-width: 768px) {
  /* Column layout — flow the chip below the content instead of overlapping. */
  .md-hero--user__aac {
    position: static;
    margin: 14px auto 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 {
  /* `relative`, not `static`. Static was chosen to keep the list IN FLOW so it
     pushes siblings down and the card grows — that part is right and is kept
     (relative does not remove an element from flow). But a static element cannot
     take a z-index, so an open dropdown whose options reach the bottom of the
     scrollport painted BEHIND the pinned Save bar (`.md-preferences__actions`,
     `z-index: 2`). Recoverable by scrolling, but on the page where voice,
     language and scanning are configured, options you cannot see are options you
     do not know exist. Relative keeps the flow behaviour and lets the list win
     the stacking order. No clipping risk from the accordion cards' `overflow:
     hidden`: the card grows to fit an in-flow list, so there is nothing to clip. */
  position: relative;
  z-index: 3;
}

.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;
}

/* Pinned to the bottom of the viewport while the form scrolls. With only the
   Basics section expanded the form runs ~2,025px, so a statically-placed bar
   puts Save two and a half screens below the fold and a user cannot tell their
   edits were ever committed. Mirrors the board editor's always-visible
   Cancel/Save toolbar. NOTE: this declaration alone is inert — `.md-shell`'s
   `overflow-x: hidden` makes the shell a scrolling box that never scrolls, and
   sticky binds to that. See the `overflow-x: clip` rule under
   `.md-shell.md-shell--user` (~43833); both are required. */
.md-preferences__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 24px;
  /* Flat `--md-bg` is the FALLBACK, not the intent. It was chosen to stop form
     content ghosting through a translucent bar, which it does — but this page's
     shell is `background: transparent !important` (~43836) over the multi-radial
     mesh painted on `#content:has(.md-shell--user)` with
     `background-attachment: fixed` (~43815). A flat #eef1f6 band matches neither
     the mesh nor the stone gradient under it, so it reads as a rectangle pasted
     across the bottom of Settings that does not move with the background.
     Frosted glass solves both: the blur makes scrolling content unreadable
     rather than ghosted, and the translucency lets the mesh through so the bar
     belongs to the page. Same treatment as the rest of the md-* surfaces. */
  background: var(--md-bg, #eef1f6);
  border-top: 1.5px solid rgba(17, 26, 46, 0.12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .md-preferences__actions {
    background: var(--md-surface, rgba(255, 255, 255, 0.76));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Unpin on short viewports. The bar costs ~88px of scrollport (20+20 padding,
   a 48px-min-height button, 24px margin), on top of a fixed 70px topbar and the
   page footer. On a landscape phone (~360px CSS height) or at 200% zoom — WCAG
   1.4.4 — that leaves almost no form to scroll, and the fix for "Save is below
   the fold" turns into "there is no room for anything else". Below this
   threshold the form is short enough that Save is reachable by scrolling
   normally, which is what it did before D-series. */
@media (max-height: 560px) {
  .md-preferences__actions {
    position: static;
  }
}
/* 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: stretch;
  /* 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;
  height: auto;
  min-height: 0;
}
.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 {
  order: 97;
  margin-top: 0;
  margin-bottom: 4px;
}
.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 {
  order: 98;
  margin: 0 0 8px;
}
.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 {
  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;
  margin-bottom: 0;
}
.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 {
  align-items: center;
  width: 100%;
  height: 100%;
  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 {
  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 density toggle (Compact / Detailed) — the picker's own `.bp-segmented`
   control, reused. Sits BELOW the tabs row's divider, right-aligned, shrunk to its
   content.
   `width: fit-content` + `margin-left: auto` is what right-aligns it: the parent is a
   block, so `margin-left: auto` alone would do nothing without an intrinsic width, and
   `inline-flex` alone would leave it on the left.
   The `.bp-segmented.ub-boards-page__density` pairing is deliberate — (0,2,0) beats
   _board_picker.scss's own `@media (max-width: 800px) { .bp-segmented { width: 100% } }`
   (0,1,0), which was written for the picker's toolbar and would otherwise stretch this
   copy across the full width. */
/* The tabs row's own 18px bottom margin STACKS on the flex container's 12px gap, which
   is what put the density control ~42px below the divider. Dropped only where the
   control directly follows it, so the container's gap is the single source of spacing
   and the tabs row keeps its margin everywhere else it is used. */
.ub-boards-page__boards-summary-body > .ub-boards-page__tabs-row:has(+ .bp-segmented.ub-boards-page__density) {
  margin-bottom: 0;
}

.bp-segmented.ub-boards-page__density {
  display: flex;
  width: fit-content;
  flex: 0 0 auto;
  /* NO vertical margin. The parent `.ub-boards-page__boards-summary-body` is a flex
     column with `gap: 12px`, so the container owns the spacing — this used to carry a
     -22px top margin, which pulled the control up independently of the layout and would
     have drifted the moment that gap or the surrounding margins changed. The stacked
     margin it was fighting is removed at its source below.
     `margin-left: auto` stays: that is not a nudge, it is how a `fit-content` block
     right-aligns itself. */
  margin: 0 0 0 auto;
}

/* ==========================================================================
   Boards page — LAYOUT SELECTOR (side-by-side vs top-down)
   ==========================================================================
   Renders only behind the `boards_side_by_side_layout` feature flag
   (templates/user/boards.hbs).

   ABSOLUTE, NOT FIXED — it scrolls away with the page rather than following the
   viewport. Absolute (rather than in-flow) because the template renders it AFTER
   <UserPillNav>: in normal flow it would sit a full row BELOW the pill-nav, and moving
   it earlier in the template would push the pill-nav down and break the cross-page
   pill-nav alignment. Out of flow, it can sit level with the top of the workspace
   without moving anything.
   `top: 8px` is the workspace's own top edge, which is directly under the navbar.
   `right: 16px` matches the reports-view workspace's horizontal padding, so the control
   lines up with the right edge of the page CONTENT rather than the raw shell edge. */
/* IN FLOW as the workspace's FIRST child, but `height: 0` so it occupies no vertical
   space and therefore pushes nothing — the pill-nav below keeps the cross-page alignment
   established earlier. Still not `fixed`: it scrolls away with the page.
   `align-self: flex-end` is the point of this arrangement. The previous version was
   absolutely positioned with a hardcoded `right` that had to match the workspace's
   padding — 40px in Gentle, 16px in Focused — and it drifted the moment a breakpoint
   changed that padding (measured 24px off at 950px, 28px at 800px). Aligning to the flex
   line instead resolves against the workspace's CONTENT box, so the control tracks the
   right edge of the page content at every width and in both views, with nothing to keep
   in sync.
   `top` is a relative nudge from that flow position, which is the top of the workspace
   content box — i.e. directly under the navbar. */
/* ANCHORED TO #content, NOT to the workspace. Measured across both views and 1600 ->
   800px, `#content`'s top edge is a CONSTANT 70px above the navbar's bottom in every
   case, whereas the workspace's own offset changes with view (its padding-top is 40px in
   Gentle, 16px in Focused) and again at 1024px. Anchoring to the workspace is what made
   the control sit in a different place in each view; anchoring here makes 12px mean 12px
   everywhere. (+14 not +12: `--topbar-height` is 68px while the navbar's painted bottom
   measures 70px, so 2px covers its border.)
   HORIZONTALLY it spans #content and pushes the control to the right with
   `justify-content: flex-end`, while reproducing the workspace's own sizing —
   `max-width: min(1200px, 100% - 24px)` + `margin: 0 auto` — so its right edge lands on
   the same line as the page content. `padding-right` is the one value that must track the
   workspace's own horizontal padding, which differs by view and by breakpoint. */
/* IN FLOW as the workspace's first child, `height: 0` so it pushes nothing (the pill-nav
   below keeps its cross-page alignment). `align-self: flex-end` resolves against the
   workspace's CONTENT box, which is what keeps the right edge on the content line at
   every width and in both views with no padding value to keep in sync.
   (An attempt to anchor this to `#content` instead — to make the vertical offset
   view-independent — put the control 40px BEHIND the navbar and broke the right edge; it
   was reverted rather than patched.)

   `top` is a relative nudge from the flow position, which is the top of the workspace
   CONTENT box. That box sits lower in Gentle than in Focused because the workspace's own
   padding-top differs (40px vs 16px) — so the two views need different nudges to land at
   the same 12px below the navbar. Both values are measured, not derived. */
.ub-boards-page__layout-toggle {
  position: relative;
  /* LEFT-ALIGNED (2026-08-16, requested) — was `flex-end`, i.e. pinned to the right edge
     of the workspace's content box. `align-self` places the control itself; `align-items`
     below places its contents, and both have to move or the control sits left while its
     options stay right-aligned inside it.
     This is the SHARED base rule, so it applies in Gentle AND Focused. Scope it to
     `body:not(.ll-layout-focused)` if Focused should stay right-aligned. */
  align-self: flex-start;
  height: 0;
  /* Gentle: flow position is 66px below the navbar, so -54 landed it at 12.
     MOVED DOWN 130px ("8rem" then "another 5rem" — `html { font-size: 10px }` in this
     codebase, so 1rem is 10px; see the rem trap in
     docs/task-management/LEARNINGS.md): -54 + 80 + 50 = 76.
     GENTLE ONLY. The Focused offsets below are deliberately left at their originals
     (-30 / -14), so the two views no longer sit at a matching distance below the navbar —
     that was the point of the request, not an oversight. */
  top: 76px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  /* Above the boards panel's own stacking so the control is never overlapped by the
     section card's shadow. */
  z-index: 3;
}

/* Focused: flow position is 42px below the navbar (its workspace padding-top is 16px, not
   40px), so -30 lands it at the same 12. */
body.ll-layout-focused .ub-boards-page__layout-toggle {
  /* Focused is at its ORIGINAL offset — the 2026-08-16 "8rem"/"5rem" shifts were meant
     for Gentle only and were rolled back here. Flow position is 42px below the navbar
     (its workspace padding-top is 16px, not 40px), so -30 lands it at 12. */
  top: -30px;
}

/* FULL-SIZE SCREENS, GENTLE ONLY (2026-08-16). Down 60px total ("5rem" then "1rem") from
   the shared base's 76px, and right 30px ("2rem" then "1rem") — 10px root, so 1rem is
   10px.
   THREE THINGS MAKE THIS ITS OWN RULE rather than an edit to the base:
   1. `min-width: 1025px` — the request was scoped to full-size screens, and every other
      breakpoint rule here is `max-width`, so >1024 has no existing home.
   2. `body:not(.ll-layout-focused)` — the base rule is shared, and Focused only ever
      overrides `top`. A `left` on the base would drag the Focused control right as well.
   3. `left`, not `right` — the control is left-aligned (`align-self: flex-start`), so a
      rightward nudge is an inset from the edge it is anchored to.
   The base's 76px still applies to Gentle at 769-1024px via the max-width blocks below. */
@media (min-width: 1025px) {
  body:not(.ll-layout-focused) .ub-boards-page__layout-toggle {
    /* 76 + 50 + 10 */
    top: 136px;
    /* 20 + 10 */
    left: 30px;
  }
  /* FOCUSED, full-size screens: right 5rem (2026-08-16, requested).
     50px, NOT 80px — `html { font-size: 10px }` in this codebase, so 1rem is 10px. That is
     the rem trap recorded in docs/task-management/LEARNINGS.md and already applied by the
     Gentle values above; converting at the browser default would have moved this 30px too
     far.
     `left`, not `right`, for the same reason as the Gentle rule: the control is
     left-aligned (`align-self: flex-start` on the shared base), so a rightward nudge is an
     inset from the edge it is anchored to.
     ONLY `left` is set here. Focused's `top` stays at the base rule's -30px — the earlier
     vertical shifts were explicitly Gentle-only and were rolled back for this view, and
     re-stating a top here would quietly re-open that. */
  body.ll-layout-focused .ub-boards-page__layout-toggle {
    left: 50px;
  }
}
/* Below these widths the page's own top padding shrinks, so the same nudge would drag the
   control up BEHIND the navbar (measured -32 / -20 / -4). Each value below re-lands it at
   12px. They are measured offsets, not a formula — the workspace's padding-top is not
   readable from here, and it does not vary monotonically (Gentle runs 40 -> 52 -> 40).
   If these drift, re-measure with scripts/focused-layout-qa.mjs rather than guessing. */
@media (max-width: 1024px) {
  body:not(.ll-layout-focused) .ub-boards-page__layout-toggle {
    /* -10 + 80 + 50 */
    top: 120px;
  }
}
@media (max-width: 950px) {
  body:not(.ll-layout-focused) .ub-boards-page__layout-toggle {
    /* -22 + 80 + 50 */
    top: 108px;
  }
  body.ll-layout-focused .ub-boards-page__layout-toggle {
    /* Original — Gentle-only shifts rolled back here too. */
    top: -14px;
  }
}
/* 820px, NOT 800px. Gentle's workspace padding-top drops from 52px back to 40px at 820 —
   that is the codebase's established breakpoint here (15 other rules use it; 800px was an
   invented one). With the correction at 800 the padding had already changed while this
   had not, so the control sat 12px high across 801-820px. Matching the real breakpoint
   closes that band. */
@media (max-width: 820px) {
  body:not(.ll-layout-focused) .ub-boards-page__layout-toggle {
    /* -10 + 80 + 50 */
    top: 120px;
  }
}
/* HIDDEN at 768px and below, where it cannot do anything: the side-by-side grid itself
   falls back to stacked at this width (see the layout block below), so both options would
   render the same page and the control would read as broken rather than unavailable.
   This is NOT the earlier <=1024px hide that made the feature invisible on ordinary
   windows — the grid still works down to 769px, so the control is shown wherever it has
   an effect and hidden only where it genuinely has none. */
@media (max-width: 768px) {
  .ub-boards-page__layout-toggle {
    display: none;
  }
}
/* `.ub-boards-page__layout-toggle-label` was removed with the visible "LAYOUT" caption
   (2026-08-16). The group keeps its accessible name via `aria-label` on the radiogroup —
   see the note in boards-layout-toggle.hbs. */
/* VERTICAL segmented control — the two options stack instead of sitting side by side.
   The page is short on horizontal room (the pill-nav occupies the centre and a wide
   control collided with it) and has room to spare vertically, so the control turns 90
   degrees. This is the standard stacked "view switcher" pattern — a bordered card with
   the selected row filled — the same shape used for layout/appearance pickers in common
   design tools, so it reads as a choice between two options rather than as two buttons.
   `align-items: stretch` is what makes both rows the same width, which is what makes the
   group read as ONE control; `inline-flex` with centred items would leave ragged edges. */
.ub-boards-page__layout-toggle-options {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  /* Re-enables clicks: the full-width positioning strip above is `pointer-events: none`
     so it cannot swallow clicks meant for the page behind it. */
  pointer-events: auto;
  gap: 3px;
  /* Vertical padding 4px -> 3px (1px off top and bottom); sides unchanged. */
  padding: 3px 4px;
  /* Rounded CARD, not a 999px pill: a pill radius on a tall stacked control bows the
     long sides. 12px keeps the soft feel without distorting. */
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 54, 93, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(27, 54, 93, 0.08);
}

/* Each row: icon then label, LEFT-aligned so the two labels form a readable column.
   Centring them would make the stack read as two unrelated buttons. */
.ub-boards-page__layout-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  color: rgba(27, 54, 93, 0.78);
  cursor: pointer;
  /* Keeps both rows the same width regardless of label length, so the selected fill is a
     consistent block rather than hugging each label. */
  width: 100%;
  white-space: nowrap;
  text-align: left;
}

.ub-boards-page__layout-toggle-btn:hover {
  background: rgba(76, 134, 216, 0.1);
  color: #1B365D;
}

.ub-boards-page__layout-toggle-btn:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.55);
  outline-offset: 2px;
}

/* The SELECTED option. It also carries `aria-checked="true"`, so this is presentation
   for sighted users only — the state itself is announced from the markup.
   LIGHT GRAY, not the active pill-nav gradient it used to reuse: sharing that blue made
   this read as a second pill-nav sitting under the real one. Gray keeps it legible as a
   segmented control without competing with the page's primary navigation.
   Stops are the palette's existing neutral ramp (the same #F6F8FA / #E2E7EE pair the
   caseload More Actions button is built from) rather than new hexes.
   INK RETURNS TO NAVY. White was only viable on the blue fill; on this ramp it measures
   1.29:1. Measured navy-on-gray: 11.39:1 on the light stop, 9.38:1 on the dark stop. */
.ub-boards-page__layout-toggle-btn--active {
  background: linear-gradient(135deg, #f6f8fa 0%, #dce3ec 100%);
  border-color: rgba(27, 54, 93, 0.18);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14);
}

/* Sized here rather than trusting the SVG's width/height attributes, so the icon has one
   authoritative size. The markup attributes are kept in step (14) for the no-CSS case. */
.ub-boards-page__layout-toggle-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* VISIBLE AT EVERY WIDTH. An earlier version hid this below 1024px, on the reasoning
   that the grid stacked there anyway so the control could do nothing — but that made the
   whole feature invisible on any window narrower than 1024, which is the common case.
   The grid's own fallback now sits at 768px (see the block below), so the choice is
   honoured everywhere this control is shown. */
/* Narrow-folders header reflow, shared. The [+ New folder] / [Tag a board] pills drop
   to their own row below the FOLDERS title/chevron row.
   Extracted to a mixin because this is now needed in TWO different conditions that
   cannot share a media query: the <=640px viewport case (which already had it), and the
   side-by-side layout, where the COLUMN is ~200px while the VIEWPORT is >1024px.
   Grid + explicit `grid-template-areas` rather than flex-wrap: grid honours the area
   assignment regardless of source order, so the actions <div> that sits between the
   toggle and the chevron in the DOM still lands on row 2 while the chevron stays on
   row 1's right edge. */
/* `$actions-justify` is a PARAMETER rather than something each caller overrides
   afterwards: the <=640px viewport case keeps the pills left-aligned under the title,
   while the side-by-side column centres them in its narrow track. Passing it in keeps one
   authoritative `justify-content` per context instead of a second competing declaration. */
/* ==========================================================================
   Boards page — FOLDERS COLUMN at side-by-side width
   ==========================================================================
   A CONTAINER query, not a media query. In side-by-side the folders column is
   ~170-250px while the VIEWPORT is >1024px, so every existing narrow-width rule in this
   file is inert — which is why the folder header, toolbar and filter all rendered
   squashed and clipped. The column is the thing that got narrow, so the column is what
   has to be queried. `@container` is already used elsewhere in this file.
   The container is established on the folders section ONLY inside the side-by-side grid
   (see the block below), so none of this can reach the stacked layout. */
@container boards-folders (max-width: 420px) {
  /* Pills CENTRED in this narrow column — they wrap to one per row here, and left-aligned
     rows of differing width read as ragged against the centred folder tiles below. */
  .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;
    /* Cancel the side-by-side flex rule's `margin-left: auto` (~51422). That rule's
       comment reasons it is "inert at <=420px" because the header hoists to
       `display: contents` — but this mixin sets `display: grid !important` on the
       header, so the hoist never happens at this width and these are grid items of the
       HEADER. The comment is half right: `order` and `flex` genuinely do not apply to
       grid items, but an AUTO MARGIN does — it is the standard way to align one — so
       that single declaration survived and shrink-to-fit the row against the right
       edge. Measured: 314px inside a 376px header, spanning "actions actions".
       Zeroed here so the row fills the area it already spans. */
    margin-left: 0 !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    justify-content: center !important;
    border-top: 1px solid rgba(17, 26, 46, 0.06) !important;
  }
  /* Both action pills on one cramped row is what clipped "Tag a board". */
  .ub-boards-page__folders-actions--header,
  .ub-boards-page__folders-toolbar {
    flex-wrap: wrap !important;
  }
  /* The hoist that puts the caret and the action pills outside the header band lives in
     the SIDE-BY-SIDE rule near the boards-page layout block, NOT here.
     WHY IT CANNOT LIVE HERE: `.ub-boards-page__folders-section` IS this query's container
     (`container-type: inline-size`), and a @container block styles the container's
     DESCENDANTS — never the container element itself. The section's `display: grid` was
     therefore silently inert while the header's `display: contents` (a descendant, so it
     did apply) took effect, leaving the three hoisted children stacking in BLOCK flow with
     the caret dumped below the heading. Measured, not deduced: scripts/folders-caret-qa.mjs
     reported section display:block against header display:contents at a 252px column. */
  /* Toolbar only — the actions row gets its centring from the mixin argument above, so
     restating it here would be two declarations fighting over one element. */
  .ub-boards-page__folders-toolbar {
    justify-content: center !important;
  }
  /* The filter row is a flex ROW whose label is `white-space: nowrap`, so the label
     took its full width and the input collapsed to a ~20px circle. Stack them. */
  .ub-boards-page__folder-filter-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ub-boards-page__folder-filter-input {
    max-width: 100% !important;
  }
}
/* Folder COUNTS hidden at <=1024px in SIDE-BY-SIDE only — both the header chip and the
   per-row count pill (2026-08-20, requested for the rows).
   The header divider is `.ub-boards-page__folders-count::before` — a pseudo-element OF
   the count — so hiding the count removes both; a second rule for the divider would be
   redundant.
   Gated on `body[data-boards-layout='side-by-side']` so the stacked layout, which has the
   full page width for its header AND its rows, keeps them. Side-by-side only exists down
   to 769px (it falls back to stacked below that), so this effectively covers 769-1024px,
   where the folders column is at its narrowest and has to give up its optional pieces.
   The row's NAME is the part that must survive: it is the control's label, and at this
   width it is what the truncation budget should be spent on.
   ONE rule for one decision — the header chip and the row pill are the same call about
   the same column at the same breakpoint, so they are not split across two blocks. */
@media (max-width: 1024px) {
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-count,
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folder-row-count {
    display: none;
  }
}
/* SIDE-BY-SIDE: the two column headers are the same height (2026-08-16, requested).
   MEASURED, not guessed: FOLDERS renders 60px and BOARDS 72px at 1440 / 1280 / 1100 / 900
   — a constant 12px gap. They already share a top edge, so only the height differed, and
   with the two cards side by side that read as a misalignment down the whole column.
   BOARDS is the taller one because its header carries the "Change Home Board" button and
   the stat pills; FOLDERS has only its toggle and chevron (both pad 14px/18px).
   Applied as a MIN-height to BOTH rather than a fixed height on the short one: the
   number is stated once, and if the boards header ever grows past 72 it pushes its own
   row rather than silently re-opening the gap. `align-items: stretch` on the folders
   header (its base rule) means the toggle fills the new height, so the label stays
   vertically centred instead of hugging the top.
   Scoped to side-by-side only — stacked has the full page width and the two headers are
   never adjacent, so matching them there would just make the folders header taller for
   no reason. */
/* EVERY SIDE-BY-SIDE FOLDERS RULE IS GATED AT 769px (2026-08-16, requested).
   Below 768px the layout toggle is hidden and the page renders stacked — but the BODY
   ATTRIBUTE does not change: `data-boards-layout` still says `side-by-side`, because it
   records the user's CHOICE, not the width. Every rule below keys off that attribute, so
   without this gate the folders card kept its hoisted heading row, its caret placement and
   its divider while the rest of the page had already fallen back to stacked — a card
   styled for a two-column layout that was no longer on screen.
   769px, not 768px: the hide rule for the toggle is `max-width: 768px`, so this picks up
   exactly where that leaves off with no overlapping band.
   The companion behaviour — collapsing the folders card on the way down — lives in
   components/available-boards-section.js (`_syncNarrowFoldersCollapse`), because a
   collapsed/expanded state is a property of the component, not something CSS should fake. */
@media (min-width: 769px) {
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-header,
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-summary-header {
    min-height: 72px;
  }
  /* SIDE-BY-SIDE folders card: the heading row owns the caret; the action pills and the
     body get their own rows (2026-08-16, requested).
     `display: contents` on the header stops it generating a box, so its three children become
     grid items of the SECTION and the caret can sit next to the FOLDERS label instead of in a
     band below it. Safe because the header owns no chrome — background, border and radius all
     live on `&__folders-section`; if the header ever gains a background this needs a real
     markup move instead.
     `auto 1fr` puts the slack to the RIGHT of the caret so it hugs the label, and
     `justify-self: start` stops the button stretching across that slack and centring its icon
     in the middle of it.
     SCOPED TO THE LAYOUT, NOT TO A COLUMN WIDTH, and applied from outside the @container
     block on purpose — see the note in that block: the section is the container, so it cannot
     be styled from within it. */
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-section {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "toggle chevron" "actions actions" "body body";
    /* The heading and actions rows keep their content height; the BODY row absorbs
       whatever extra height the stretch above hands the section. Without this the
       three rows stay `auto` and the section simply ends early, leaving the gained
       height as empty space under the card. */
    grid-template-rows: auto auto 1fr;
    align-items: center;
  }
  body[data-boards-layout=side-by-side] #content.boards-page {
    /* `align-items: center` above is right for the heading and the action pills; the
       body must fill its row instead of sitting centred in it. */
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-body {
    align-self: stretch;
  }
  body[data-boards-layout=side-by-side] #content.boards-page {
    /* The panel the user actually sees. `__folders-body` is a flex column
       (padding/display authored at ~68179) holding the toolbar and then either the
       folder LIST or, when drilled in, the folder context — so whichever of those is
       present takes the slack and the card's own background reaches the bottom.
       `__folder-list` is the rows container that REPLACED the tile strip. It was missed
       when the strip was swapped out, so the panel silently stopped growing and the card
       floated above ~183px of dead space at 1920px — measured, and the cause of this
       file's long-red "card fills rather than floating above dead space" check.
       `min-height: 0` because a flex item's default `min-height: auto` refuses to
       shrink below its content, which would push the card past the row it is meant to
       fit when the folder list is long. */
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folder-list,
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folder-context {
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-header {
    display: contents;
    /* Span the section when `display: contents` does NOT win.
       `boards-folders-narrow-header` (~51117) sets `display: grid !important` from
       `@container boards-folders (max-width: 420px)`, and the folders column is 378px
       even at full screen — so in practice the mixin wins here and the header IS a
       real grid item again. Auto-placed, it lands in column 1, which is sized `auto`
       by the toggle: measured 314px inside a 376px card, capping the actions row and
       everything else in the header at the toggle's width.
       Spanning both tracks makes the header full-width in that state, so the actions
       row reaches the card edges. Inert when `display: contents` does apply — a
       `contents` box generates no grid item for `grid-column` to act on — so this is
       safe in both states rather than tied to whichever currently wins. */
    grid-column: 1/-1;
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-toggle {
    grid-area: toggle;
    /* Matches the BOARDS header's pinned height so the two columns start level now that
       the header box itself is gone. */
    min-height: 72px;
  }
  body[data-boards-layout=side-by-side] #content.boards-page {
    /* NO EXPAND/COLLAPSE CONTROL IN SIDE-BY-SIDE (2026-08-20, requested). The folders
       card owns its own column here, so collapsing it does not buy the boards grid any
       room — it just leaves a third of the row empty, which is the same reasoning
       `_syncSideBySideFoldersExpand` (components/available-boards-section.js) already
       encodes by auto-expanding the card on entry to this layout.
       The `chevron` grid area named in `grid-template-areas` above simply goes unused;
       an empty named area is legal, and the `auto 1fr` columns leave the slack exactly
       where it already sat to the caret's right.
       Positioning declarations (grid-area/justify-self/padding-left) were REMOVED
       rather than left behind the `display: none` — they cannot take effect and would
       read as live layout to the next person.
       GATED AT 769px by the enclosing media query, which is load-bearing: the body
       attribute keeps saying `side-by-side` below 768px even though the page has fallen
       back to STACKED, and down there the caret is the only expand control the user
       has — `_syncNarrowFoldersCollapse` collapses the card on the way down and they
       need a way back. */
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-chevron-btn {
    display: none;
  }
  body[data-boards-layout=side-by-side] #content.boards-page {
    /* THE FOLDERS ROW GETS THE SAME UNDER-SHADOW THE BODY DRAWS (2026-08-16, requested).
       The card's one divider treatment — hairline + highlight + tight inner shadow + wide
       falloff — is authored on `&__folders-body`'s TOP edge (~66137). Before the hoist that
       edge sat directly beneath the whole header, so the header appeared to cast it. Now the
       actions row sits between them, and the FOLDERS row had no separation at all.
       DRAWN ON THE ACTIONS ROW'S TOP EDGE, because that edge IS the underside of the FOLDERS
       row — the two are adjacent grid rows. Styling the toggle's own bottom instead would
       only cover column 1: the caret column is `1fr` with the button justified to its start,
       so the slack beside it is empty grid space with nothing to paint.
       Values mirror the body rule deliberately rather than being re-invented, so the card has
       ONE divider look. If that rule changes, this must change with it — the alternative
       (a shared mixin) is not worth it for a single duplicate, but the coupling is real.
       Replaces the mixin's lighter 0.06 hairline for this layout; when the actions row is
       absent (collapsed, or no edit permission) the body's own edge still separates the
       heading exactly as before. */
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-actions--header {
    grid-area: actions;
    border-top: 1px solid rgba(13, 36, 56, 0.12);
    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);
    /* Nothing of its own behind the pills — the card's gradient reads straight through, so
       the actions row is a strip of the card rather than a panel sitting on it. Stated
       explicitly (2026-08-16, requested) rather than relied on: the row inherits no
       background today, and this pins that so a future panel treatment cannot creep in
       unnoticed. The shading across it comes from the insets above, which belong to the
       FOLDERS row's underside, not to this row. */
    background: transparent;
  }
  body[data-boards-layout=side-by-side] #content.boards-page {
    /* NO SECOND DIVIDER (2026-08-16, requested). The body's own top edge — hairline plus the
       three insets — is what used to separate the header from the content, and it now sits
       under the ACTIONS row, giving the card two parallel dividers a few pixels apart.
       The FOLDERS row's underside (above) is the one that was asked for, so this one is
       switched off IN THIS LAYOUT ONLY. The base rule is untouched, so the stacked layout —
       where the actions row still lives inside the header band and the body's edge is the
       only divider there is — keeps exactly the separation it has today.
       `box-shadow: none` alongside `border-top: none` because all three insets in that stack
       exist to carry the hairline's shadow downward; leaving them would keep a shaded band
       with no line to justify it. The body's background gradients are NOT touched. */
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-body {
    grid-area: body;
    border-top: none;
    box-shadow: none;
  }
  /* SIDE-BY-SIDE: the expand/collapse caret sits BESIDE the FOLDERS heading (2026-08-16,
     requested), not pinned to the far right of the header band.
     The header is a flex row of three items in DOM order: toggle (the heading), the action
     pills, then the caret. The toggle's base rule takes `flex: 1 1 auto`, so it eats the free
     space and pushes the caret to the far edge with the pills stranded between the two.
     Two declarations fix that, both scoped to this layout:
       • the toggle shrinks to its content (`0 1 auto` — still allowed to SHRINK, and it keeps
         the base rule's `min-width: 0`, so a long heading cannot overflow the column)
       • `order` re-sequences the row to heading -> caret -> pills, and the pills take
         `margin-left: auto` so they stay at the right edge rather than trailing the caret
     INERT AT <=420px BY DESIGN: the container query below hoists this header to
     `display: contents`, which makes these three grid items of the SECTION, where the grid
     areas already place the caret on the heading's row. Flex `order`/`flex` do not apply to
     grid items, so the narrow column is untouched by this rule — no second behaviour to
     reconcile. */
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-toggle {
    flex: 0 1 auto;
    order: 0;
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-chevron-btn {
    order: 1;
    /* The toggle already pads 18px on its right; the caret's own 18px left pad on top of
       that read as detached from the heading it belongs to. */
    padding-left: 0;
  }
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__folders-actions--header {
    order: 2;
    margin-left: auto;
  }
}
/* The SECOND "+ New Board" button — the one pinned in the tabs row — is redundant beside
   the section header's own New Board button, and side-by-side has markedly less
   horizontal room for the tabs row. Focused View already dropped it for the same reason
   (_focused-view.scss); this extends that to side-by-side in BOTH views. The section
   header button remains the single Boards-page CTA. */
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-summary-new-btn {
  display: none;
}

/* The board-count pills ("N in folders" - "N in this section", plus the home-board
   info affordance) are hidden in SIDE-BY-SIDE. In this layout the folders column is
   already on screen beside the grid, so the counts restate what the user can see
   directly, and the boards column has markedly less horizontal room — the pills wrap
   under the BOARDS title and cost a row of header height for information the layout
   itself provides. Same reasoning, and the same treatment, as the redundant second
   New Board button immediately above.

   Hiding `&__boards-summary-stats` (the wrapper) rather than the individual pills is
   deliberate: the separator, the leading `::before` divider and the `(i)` popover
   trigger are all its children, so hiding the parent takes the whole group and cannot
   leave an orphaned divider behind. TOP-DOWN is untouched and keeps the counts.

   No `!important` needed: this is (0,4,0) against the narrow-width layout rule at the
   bottom of this file, which sets alignment on the same element but never `display`. */
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-summary-stats {
  display: none;
}

/* COMPACT results centred in their container. The compact grid lays out fixed-width
   tracks (2 up from 1024px), so in the side-by-side boards column they came to ~568px
   inside a ~709px container — left-aligned, with ~141px of dead space down the right.
   Centring balances that instead of leaving a ragged edge.
   Specificity: the shared rule in _board_picker.scss sets `justify-content: stretch` at
   (0,3,0) — the tripled modifier — so this needs the grid class ON TOP of it, (0,4,0),
   to win. Scoped to the Boards page; the picker's own compact grid is untouched. */
.ub-boards-page__board-grid.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact {
  justify-content: center;
}

/* HOME BOARD badge sits 6px higher in COMPACT (2026-08-16, requested in three steps of
   2px). The base rule
   (`&__board-item-home-badge`, ~68922) pins every density at `top: 8px`; compact tiles are
   shorter, so the same offset reads lower on the card relative to its content.
   A DENSITY-SCOPED rule rather than an edit to that base value on purpose — changing the
   8px there would move the badge in DETAILED view too, which was not asked for and is
   already correct.
   Specificity (0,3,0) against the base rule's (0,1,0), so it wins on weight alone —
   no `!important` needed, and the base stays the single source for everything else about
   the badge (fill, radius, shadow, centring). */
.ub-boards-page__board-grid.ll-boards-grid--compact .ub-boards-page__board-item-home-badge {
  top: 2px;
}

/* Side-by-side at <=1024px reclaims the workspace's horizontal padding, dropping it to
   the 14px the next breakpoint down (`@media (max-width: 820px)`, ~44326) already uses.
   The two columns are tight at this width and the 40px gutters cost more than they give.
   `!important` mirrors the rule it is overriding, which is itself `!important`. */
@media (max-width: 1024px) {
  body[data-boards-layout=side-by-side] #content.boards-page .md-workspace {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
/* Side-by-side on a WIDE screen reclaims 64px of gutter on each side.
   The lever is `max-width`, NOT `margin`. The base rule (~44236) centres the
   workspace with `margin: 40px auto`, so the visible left/right margin is simply the
   leftover viewport gutter — a function of how wide the box is allowed to be. Setting
   a margin here would fight `auto` and de-centre the page. Widening by 2 x 64px gives
   back exactly 64px per side: 1200 + 128 = 1328px.

   The `min(..., calc(100% - 24px))` form is copied from the base rule rather than
   invented, so the 24px viewport safety inset still applies and the value self-limits:
   below roughly 1352px of viewport the `calc()` term already wins and this changes
   NOTHING, which is why "full screen" needs no separate width test beyond the
   breakpoint below.

   `min-width: 1025px` picks up exactly where the <=1024px padding rule above leaves
   off, with no overlapping band — the same no-overlap pattern used at 769px earlier in
   this file. TOP-DOWN is untouched and keeps the 1200px cap.

   `!important` mirrors the base rule it overrides, which is itself `!important`. */
@media (min-width: 1025px) {
  body[data-boards-layout=side-by-side] #content.boards-page .md-workspace {
    max-width: min(1328px, 100% - 24px) !important;
  }
  /* ...and let the page CONTENT actually take that space. Without this the widening
     above is invisible: `.ub-boards-page` (~66518) is capped at `max-width: 1120px`
     with `margin: 0 auto`, so a wider workspace just centres the same 1120px column
     inside it and adds 64px of dead space per side. Measured before this rule — the
     whole inner chain was byte-identical between the two layouts at vw=1920:
     .ub-boards-page 1120, __content 1120, __boards-section 1072, __boards-body 1022.

     `none` rather than a hard 1248px: the page then fills whatever the workspace's
     content box happens to be, so this does not have to be re-derived if the
     workspace padding or cap is ever retuned. The ≤1024px variants of this selector
     already set their own `max-width: 100%`, and are untouched — as is TOP-DOWN,
     which keeps the 1120px column. No `!important`: the base rule does not use one
     and this selector is far more specific. */
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page {
    max-width: none;
  }
}
/* ==========================================================================
   Boards page — FOLDERS (1/4, left) beside BOARDS (3/4, right)
   ==========================================================================
   No markup change is needed. The two subsections are ALREADY siblings in
   available-boards-section.hbs, and that component sets `tagName: ''`, so they
   land as direct children of `.ub-boards-page__boards-body` (boards-browser.hbs).
   That parent carried no rules of its own before this, so this is a new rule
   rather than an override of an existing layout.

   SCOPED TO THE BOARDS PAGE ONLY. `<BoardsBrowser>` also renders on the ACCOUNT
   page (templates/user/index.hbs ~502) and the dashboard card embeds
   `<AvailableBoardsSection>` directly (components/dashboard-user-boards.hbs ~147);
   both keep the stacked layout. `#content.boards-page` is unique to the
   user/boards route (measured: `boards-page with_user new_index`).

   Applies in BOTH Gentle and Focused View — deliberately a base rule here, not
   an addition to _focused-view.scss.

   THE `:has()` GATE IS LOAD-BEARING, not defensive dressing. Two real states
   would break a naive two-column grid:
     • drilled into a folder — `{{#unless mineTagFolderDrillIn}}` drops the boards
       subsection, so folders would sit alone in a 1/4 column with 3/4 empty;
     • `mineFoldersEnabled` false — no folders subsection, so boards would be
       pushed to column 2 leaving column 1 blank.
   Requiring BOTH children means every other state (drill-in, folders disabled,
   loading, error, empty) keeps today's block layout untouched.

   OPT-IN, AND OFF BY DEFAULT. `body[data-boards-layout='side-by-side']` is written by
   components/boards-layout-toggle.js, which only renders behind the
   `boards_side_by_side_layout` feature flag. With the flag off the component never
   mounts, the attribute is never set, and this rule never matches — so the page keeps
   the TOP-DOWN stacked layout it has today. That is the "old view" half of the
   comparison the selector exists to make. */
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) {
  display: grid;
  /* 1/3 folders : 2/3 boards at EVERY width this layout exists at (2026-08-20,
     requested). One value, no breakpoint: side-by-side runs from 769px up (below that
     the `max-width: 768px` fallback at the foot of this block switches to `display:
     block` and these column values go inert), so this single declaration covers the
     whole range.

     This replaces a 1fr 3fr base with a `min-width: 1025px` override to 1fr 2fr. The
     quarter column was kept below 1025px on the reasoning that a third of a ~570-770px
     workspace comes straight out of the board grid — but it made the folders column
     ~185-220px, where folder names truncate hard and the column reads as a different
     component than the one on a wide screen. Holding the ratio steady keeps the
     proportion the user chose recognisable at every size.

     Pairs with the wide-screen workspace widening (~51432), which gives the folders
     column its third WITHOUT the boards grid losing width above 1024px. */
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  /* Folders is far shorter than the board grid. Without this it stretches to the
     full row height and its panel floats above a tall band of dead space. */
  align-items: start;
  /* Anything else that can appear in here — the sub-result back-bar, the
     loading/error line — spans BOTH columns instead of being auto-placed into
     whichever cell happens to be free. */
}
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) > * {
  grid-column: 1/-1;
}
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) > .ub-boards-page__folders-section {
  grid-column: 1;
  /* Stretch to the BOARDS column's height (2026-08-17, requested). The grid's
     `align-items: start` above stays for everything else in this row — the
     loading/error line and the sub-result back-bar have no business growing — so
     this is an align-SELF override on the one child that should.
     On its own this would only stretch the outer box and leave the card's inner
     panel floating above dead space, which is exactly what the `align-items: start`
     comment above warns about. The three rules below carry the height down to the
     visible panel, so the card fills rather than the box. */
  align-self: stretch;
  /* Establishes the query container the block above targets. Scoped HERE, inside the
     side-by-side grid, so the stacked layout never becomes a container and none of
     those rules can apply to it. `inline-size` (not `size`) — the column's height is
     content-driven and must stay that way. */
  container-type: inline-size;
  container-name: boards-folders;
}
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) > .ub-boards-page__boards-summary-section {
  grid-column: 2;
}
body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) {
  /* Automatic fallback to stacked, at 768px rather than 1024px. It sat at 1024
     originally, but that silently overrode an EXPLICIT choice across the most common
     window sizes — the selector would read "Side by side" while the page stayed
     stacked. 768px is where the folders header's own rules take over (it re-flows to
     `grid-template-areas` with the action pills on their own row further down this
     file), so below that a quarter column genuinely cannot hold its contents.
     Between 769 and 1024 the column is ~185-220px: tight, but it is what the user
     asked to see, which is the point of a comparison control.
     The `grid-column` values above go inert under `display: block`. */
}
@media (max-width: 768px) {
  body[data-boards-layout=side-by-side] #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) {
    display: block;
  }
}

/* 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. */
/* Boards-section loading state — the ONLY loading affordance on this page.
   It replaces the full-viewport `.ll-premium-progress` "Preparing your
   workspace" overlay that used to cover the whole page (navbar included)
   until the Mine list resolved. The page now paints immediately and just
   this section reports that its contents are still arriving.
   `min-height` roughly matches a first row of board cards so the section
   holds its space instead of collapsing and then jumping when the grid
   mounts. Also serves the "Failed to load" message, which carries the same
   class and benefits from the same centring. */
.ub-boards-page__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* `color` and `font-size` folded in from a byte-equivalent `&__loading` that used to
     sit ~18k lines below inside `.ub-boards-page` — same selector, same specificity, so
     source order silently won and THIS block's padding was dead. One authoritative rule
     now (CLAUDE.md 0.7). */
  color: #8a9ab8;
  font-size: 14px;
  padding: 32px 16px;
  text-align: center;
}

/* The tall reserve is BOARDS-PAGE ONLY. `<AvailableBoardsSection>` also renders
   in the dashboard boards card (components/dashboard-user-boards.hbs ~147) and on
   the account page via `<BoardsBrowser>` (templates/user/index.hbs ~502), where a
   180px hold would dominate a small card. `#content.boards-page` is the existing
   boards-route-only hook used elsewhere in this file for exactly this reason. */
#content.boards-page .ub-boards-page__loading {
  min-height: 180px;
}

/* ~30% above a typical web default, per the AAC legibility floor this app
   applies to user-facing copy. */
.ub-boards-page__loading-label {
  margin: 0;
  /* px, NOT rem: bootstrap sets `html { font-size: 10px }` in this codebase, so
     `calc(0.92rem * 1.3)` rendered 11.96px — about 40% under the AAC legibility floor
     this line was written to meet, and smaller than its own container's 14px. */
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  color: #5A6A85;
}

.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,
.md-grid .md-card.md-card--caseload-focused {
  display: none !important;
}

/* Focused: show the hero bar (the whole thing is the button), hide the standard
   card it replaces. WHICH card is the hero comes from md-grid--hero-<key>
   (focusedHeroKey: 'caseload' for supervisors, 'speak' for communicators).
   The speak selectors are scoped with :not(.md-grid--hero-caseload) rather than a
   positive .md-grid--hero-speak, because gridClassString — and therefore the hero
   class — is only applied on the home tab (see authenticated-view.hbs), so a
   positive scope would silently drop the Speak hero everywhere else. */
.md-grid.md-grid--layout-focused:not(.md-grid--hero-caseload):not(.md-grid--hero-org) .md-card.md-card--speak-focused,
.md-grid.md-grid--layout-focused.md-grid--hero-caseload .md-card.md-card--caseload-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;
  /* The Caseload hero is a <LinkTo> (the Speak one is a <button>), so kill the
     anchor underline here rather than in a separate override. */
  text-decoration: none !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:not(.md-grid--hero-caseload):not(.md-grid--hero-org) .md-card.md-card--speak-focused:hover,
.md-grid.md-grid--layout-focused.md-grid--hero-caseload .md-card.md-card--caseload-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:not(.md-grid--hero-caseload):not(.md-grid--hero-org) .md-card.md-card--speak-focused:active,
.md-grid.md-grid--layout-focused.md-grid--hero-caseload .md-card.md-card--caseload-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;
}

/* Each hero replaces its own standard card. Speak Mode has NO non-hero presentation
   in Focused View: when it is the hero the bar above replaces it, and when it is not
   (a supervisor, whose hero is Caseload) it is dropped from the dashboard entirely —
   an SLP works from their caseload here, and gridLayoutState drops the `speak` key
   from the packed order too so no empty grid row/gap is left behind. The standard
   Caseload card is hidden only when the Caseload hero is showing. */
/* NO IMPLICIT COLUMNS. Any card rendered into this grid WITHOUT a matching name in the
   inline `grid-template-areas` is placed outside the explicit grid, and the browser
   invents columns to hold it. Measured on /example/home in Focused View: the inline style
   correctly said `repeat(4, 1fr)` and named four tokens per row, but the computed columns
   came back as SIX — `97.7px 97.7px 97.7px 97.7px 0px 493.1px`. The Speak hero had been
   auto-placed into a new 493px column and Extras into a 0px one, squeezing every named
   card into the four leftovers. That is the "squished into two weird columns" report.
   Forcing these two to span the explicit grid (`1 / -1`) puts Speak on its own full-width
   row and stops either card creating a track.
   WHY CSS AND NOT THE LAYOUT ENGINE: which cards get an area is per-user (the areas string
   is built from the visible section list), so a card can be renderable for one account and
   unnamed for another. This makes the grid resilient to that mismatch for the two cards it
   affects, rather than assuming every account produces a complete areas string.
   ORG DASHBOARDS ARE EXCLUDED FOR SPEAK (2026-08-16). There, Speak now has a REAL grid
   area — it shares the bottom row with Caseload (utils/dashboard_sections.js
   `focusedLayout`, the `orgPair` branch) — so forcing `1 / -1` here would override that
   pairing and stretch it back across the row. The safety net still covers Speak on every
   other hero (a supervisor's dashboard drops it from the areas the same way an org
   dashboard used to), and still covers Extras everywhere.
   SCOPED TO THE DASHBOARD GRID, NOT JUST FOCUSED. Gentle was MEASURED as already correct
   for this account — its areas name every card (`"speak speak"`, `"extras extras"`), so it
   has no implicit tracks and both cards are already full width. `1 / -1` is therefore a
   NO-OP there today; it is included so the same per-user mismatch cannot produce the bug
   in Gentle for an account whose section list differs. At <=950px Gentle switches the grid
   to flex, where `grid-column` is simply inert.
   `1 / -1` resolves to the explicit grid's first and last lines, so it cannot itself
   create a track. */
/* Speak is rendered but has NO grid area (utils/dashboard_sections.js#gridLayoutState
   emits this when `vis.speak` is true and 'speak' appears in no area row) — an org
   dashboard whose owner hid My Caseload is the case that surfaced it. Without this the
   browser auto-places the card into an implicit track and the whole grid distorts. */
.md-grid.md-grid--speak-unplaced > .md-card.md-card--speak,
.md-grid.md-grid--speak-unplaced > .md-card.md-card--speak-focused {
  display: none !important;
}

.md-grid.md-grid--dashboard:not(.md-grid--hero-org) > .md-card.md-card--speak-focused,
.md-grid.md-grid--dashboard:not(.md-grid--hero-org) > .md-card.md-card--speak,
.md-grid.md-grid--dashboard > .md-card.md-card--extras {
  grid-column: 1/-1 !important;
}

/* The plain Speak card is hidden only where Speak IS the hero — mirroring the caseload
   rule on the next line, which hides its plain card only under `.md-grid--hero-caseload`.
   ORG USERS (2026-08-16): their hero is the Organizations card (`focusedHeroKey` returns
   'org' for admins), so Speak is NOT their hero and renders as an ordinary card — the same
   treatment the Caseload card already gets on their dashboard. Before this it matched the
   `:not(.md-grid--hero-caseload)` hero scope above and rendered as the big glossy hero
   bar, so an org user saw two heroes competing.
   NEGATIVE scoping (`:not(hero-org)`), not a positive `.md-grid--hero-speak`, for the
   reason given above the hero rule: the hero class is only applied on the home tab, so a
   positive scope would silently drop the Speak hero everywhere else. */
.md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-as-button {
  display: none !important;
}

.md-grid.md-grid--layout-focused.md-grid--hero-caseload .md-card.md-card--caseload-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:not(.md-grid--hero-caseload):not(.md-grid--hero-org) .md-card.md-card--speak-focused,
  .md-grid.md-grid--layout-focused.md-grid--hero-caseload .md-card.md-card--caseload-focused {
    padding-left: 24px !important;
    padding-right: 40px !important;
  }
}
.md-card--speak-focused__icon,
.md-card--caseload-focused__icon {
  color: #ffffff;
  line-height: 0;
}

/* Caseload badge — same 126px display box as the Speak badge above, so the two
   heroes carry identical visual weight. object-fit keeps the source's 247x252
   aspect inside the box. */
.md-card--caseload-focused__img {
  width: 126px;
  height: 126px;
  display: block;
  object-fit: contain;
}

/* 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,
.md-card--caseload-focused__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.md-card--speak-focused__title,
.md-card--caseload-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,
.md-card--caseload-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,
.md-card--caseload-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,
.md-card--caseload-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;
}

/* ── Account page (user/index) action row ─────────────────────────────────
   SELF-CONTAINED card system for the account/profile action row. Deliberately does
   NOT reuse the dashboard/home `.md-card` classes, so the account cards and the
   home-page cards can be restyled independently and never share a selector. The
   visual language (frosted surface, tinted 64px icon tile, arrow affordance, hover
   lift) mirrors the dashboard but lives entirely under `.md-acct-*`. */
.md-acct-actions {
  display: grid;
  /* Two EQUAL columns → four cards form a 2×2 block. The grid shrinks to its content
     (`width: fit-content`), so all four cards take the width of the WIDEST card rather
     than stretching edge-to-edge; `1fr` inside a fit-content grid resolves the two
     columns to the same width. `margin-inline: auto` then centers the block on the page. */
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 6px;
  /* Breathing room before the boards section below. */
  margin-bottom: 24px;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex: 0 1 auto;
}

/* Narrow screens: one card per row. */
@media (max-width: 640px) {
  .md-acct-actions {
    grid-template-columns: 1fr;
  }
}
.md-acct-card {
  box-sizing: border-box;
  position: relative; /* positioning context for the right-aligned arrow */
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 84px; /* icon 64 + 10+10 padding → all cards uniform height */
  /* Extra right padding reserves the arrow's column so title/sub text never runs
     under it (the arrow is absolutely positioned, so it's out of the content flow).
     Left padding stays at 14px (icon position unchanged); the extra width comes from
     the right padding + min-width. */
  padding: 10px 56px 10px 14px;
  min-width: 360px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: #16324f;
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 242, 245, 0.95));
  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);
  transition: box-shadow 180ms ease-out, transform 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.md-acct-card:hover,
.md-acct-card:focus-visible {
  transform: translateY(-2px);
  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);
}

.md-acct-card:focus-visible {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 3px;
}

.md-acct-card:active {
  transform: translateY(0.5px);
}

/* Icon tile — 64px square, blue by default; verdigris via `--green`. */
.md-acct-card__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  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%);
  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 4px 12px rgba(15, 23, 42, 0.14), 0 0 16px rgba(76, 134, 216, 0.16);
}

.md-acct-card--green .md-acct-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%);
  border: 1px solid rgba(42, 157, 143, 0.2);
  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);
}

.md-acct-card__glyph {
  display: block;
  width: 30px;
  height: 30px;
}

.md-acct-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.md-acct-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.1px;
  line-height: 1.25;
  color: #16324f;
}

/* Arrow / dropdown caret affordance. */
.md-acct-card__arrow {
  /* Pinned to the card's right edge so the arrows line up in a column across all
     four equal-width cards, regardless of title length. */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  font-weight: 900;
  color: #4C86D8;
  transition: transform 140ms ease-out;
}

.md-acct-card:hover .md-acct-card__arrow,
.md-acct-card:focus-visible .md-acct-card__arrow {
  transform: translate(4px, -50%);
}

.md-acct-card__sub {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #3A506E;
}

@media (prefers-reduced-motion: reduce) {
  .md-acct-card,
  .md-acct-card__arrow {
    transition: none;
  }
  .md-acct-card:hover,
  .md-acct-card:focus-visible {
    transform: none;
  }
  /* Keep the arrow vertically centered (no horizontal slide) with motion reduced. */
  .md-acct-card:hover .md-acct-card__arrow,
  .md-acct-card:focus-visible .md-acct-card__arrow {
    transform: translateY(-50%);
  }
}
/* Extras: the whole card is the dropdown toggle; the `.dropdown-menu` is a sibling
   inside the `.btn-group` cell (its positioning context). */
.md-acct-extras {
  position: relative;
  display: block;
}

.md-acct-extras > .md-acct-card {
  width: 100%;
}

.md-acct-extras > .dropdown-menu {
  top: 100%;
  margin-top: 6px;
}

/* 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;
  /* 14px, against the base `.md-grid`'s 28px. The four action cards share one
     row here, so every px removed from the three gutters is returned to the
     columns — 42px reclaimed, ~10px wider per card. That is what keeps the
     title's trailing arrow on the SAME line as the title text: at 28px the
     longer labels ("Create a Board", "Edit Dashboard") ran out of room and
     orphaned the arrow onto a second line, so the four headers sat at different
     heights. Matches the 16px the <=1024px flex fallback already uses. */
  gap: 14px !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 uses the same shape as the board-detail 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;
}

/* Cursive/combining scripts are emitted as ONE span with no animation
   (helpers/letter-stagger.js). `display: inline` is the load-bearing part: the
   inline-block above forces Arabic letters into isolated forms and severs the joining
   that makes the word legible. Same specificity (0,2,0) as the base rule and declared
   after it, so no !important is needed. */
.nb-generate-ai-btn__title .ub-letter--plain,
.ub-boards-page .ub-letter--plain {
  display: inline;
  animation: none;
  opacity: 1;
  transform: none;
}

.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) ── */
/* Sits at the foot of the Basics section (AI pre-generation only). RIGHT-ALIGNED
   and tight to the content above it: the 32px block padding it used to carry was
   for a centred hero treatment with a lead paragraph under the button, both of
   which are gone. No bottom padding at all — the section body supplies its own,
   and anything here read as dead space under the button. */
.nb-ai-generate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 0;
  text-align: right;
}

/* The over-limit / error banners keep full width and left-aligned prose — only the
   BUTTON is right-aligned. A right-ragged paragraph of warning text is hard to read
   and the banners are explanations, not actions. */
.nb-ai-generate > .nb-alert {
  align-self: stretch;
  text-align: left;
}

.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);
}

/* Soft glow once the button is ACTIONABLE. `:not(:disabled)` is exactly the right
   condition without a new class binding: ai_generate_disabled is true until a
   description is entered, while the grid is over the 112-button limit, and while
   generating — so the glow appears precisely when pressing it would do something,
   and is absent while it is working (where it would fight the "Generating Labels…"
   label). Static, not a pulse: a looping animation on the primary action is noise
   for AAC users and would need its own reduced-motion carve-out. */
.nb-ai-generate__btn.btn.btn-primary:not(:disabled) {
  box-shadow: 0 0 0 5px rgba(44, 183, 176, 0.12), 0 6px 20px rgba(44, 183, 176, 0.3), 0 2px 6px rgba(13, 36, 56, 0.1);
  transition: box-shadow 0.25s ease, background 0.2s ease;
}

.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));
  box-shadow: 0 0 0 6px rgba(44, 183, 176, 0.18), 0 8px 26px rgba(44, 183, 176, 0.38), 0 2px 8px rgba(13, 36, 56, 0.12);
}

/* 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. */
/* Shared surface for the Basics-header controls — the Rows/Cols steppers and the
   grid-size picker's toggle sitting beside them. Matches the workspace's
   Focused-View surface (white sheen over the blue-white focus tint on a white
   base) so the whole group reads as one band rather than three unrelated chips.
   Extracted the moment it had a second consumer; change it here, not in either
   caller. */
/* Focus treatment that goes with it — verdigris ring, same on both controls. */
.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);
  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. It is also above Bootstrap .modal
   (1050), so a system modal opened while this overlay is visible paints behind
   it — hide the chooser first (see _requestEnterAiMode / choose_paste_html). */
.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);
}

/* Secondary create methods. Only "Create My Own Board" and "Generate with AI"
   get a full chooser key; every other method (file import, Paste HTML, JSON
   bundle) stacks here as a small slate-gray text link under the closing OR.
   Column rather than a wrapped row because "Import Board from Another Platform"
   is long enough to wrap unpredictably once the paste_html flag is on. */
.nb-create-chooser__alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  animation: nb-chooser-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Extends the shared `.md-link-btn` reset (button semantics, link appearance)
   with the chooser's demoted scale. #5A6A85 on the panel's white base is
   5.34:1 — WCAG AA for normal text at 14px. */
.nb-create-chooser__alt-link {
  padding: 3px 6px;
  border-radius: 6px;
  color: #5A6A85;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration-color: rgba(90, 106, 133, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Underline removal on hover comes from `.md-link-btn:hover` (the app-wide link
   convention), so only the ink darkens here. */
.nb-create-chooser__alt-link:hover,
.nb-create-chooser__alt-link:focus-visible {
  color: #1B365D;
}

.nb-create-chooser__alt-link:focus-visible {
  outline: 2px solid rgba(26, 123, 122, 0.75);
  outline-offset: 2px;
}

@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__alt,
  .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;
}

/* The preview speak bar's surface is NOT set here. Light mode comes from the
   shared board-detail light rule (app.scss ~72528, which this preview scope was
   added to) and dark from `.md-board-detail--dark .md-board-detail-sentence-bar`
   (~81481, never shell-scoped, so it already reached the preview). A local
   `background` here would shadow the light-mode glass surface and put the two
   surfaces back out of sync. */
/* Left inset for the preview bar's content ("Tapped words will appear here" and
   the tapped-word chips), which otherwise starts hard against the bar's left
   edge. Set HERE rather than on the shared light rule, because the two modes
   inherit DIFFERENT left padding and neither is what this bar wants:
     light -> 18px  (shared board-detail speak-light rule, `padding: 2px 18px`)
     dark  ->  4px  (base .md-board-detail-sentence-bar, `2px 10px 2px 4px`)
   One preview-scoped rule normalises both to the same inset AND leaves the live
   board-detail bar untouched. An intentional divergence from board-detail's
   spacing; the surface treatment still matches exactly.

   The selector is four levels deep on purpose, not padding for its own sake. The
   light rule is `.new-board-mockup-wrap:not(.md-board-detail--dark)
   .md-board-detail-sentence-bar` = (0,3,0) — `:not()` contributes its argument's
   specificity — and it sets `padding` as a SHORTHAND, so it overwrites
   padding-left wholesale. A (0,2,0) or tying (0,3,0) selector loses (this rule
   sits earlier in the file), and !important is not the answer. This chain is
   (0,4,0) and mode-agnostic, so it beats the light rule and the dark base alike.
   Every class in it is a real ancestor: stage > wrap > row > bar. */
.nb-preview-stage .new-board-mockup-wrap .nb-preview-sentence-row .md-board-detail-sentence-bar {
  padding-left: 30px;
}

/* 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;
}

/* Dark mode: navy-on-navy is unreadable once the bar becomes the dark
   translucent slab, so the chip flips to a light-on-dark pair matching the way
   `.md-board-detail--dark` treats the bar's other inline content. */
.md-board-detail--dark .nb-preview-sentence-bar__word {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

/* 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;
}

/* The preview wrap is the create page's stand-in for board-detail's
   `.md-board-detail-main` (the board canvas), so it carries that element's SURFACE
   in both modes rather than a create-page-specific panel treatment. It was a light
   recessed "labels div" gradient, which is why the preview read as a washed-out
   panel while the real board reads as a dark canvas. Geometry (max-width, radius,
   the squared seam against the Edit Tools rail) stays create-page-specific — those
   are layout, not theme, and the rail seam depends on them. */
.new-board-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 850px;
  max-height: 700px;
  margin: 0 auto;
  padding: 14px 0;
  border-radius: 18px;
  /* LIGHT: matches `.md-board-detail-main` (app.scss ~68455) — the brand
     dark-charcoal slate canvas the board grid sits on in speak mode. The
     `:not(.md-board-detail--dark)` board-detail rule also strips that element's
     border/shadow, so the wrap carries neither. */
  background: #374151;
  border: none;
  box-shadow: none;
}

.new-board-mockup-wrap--dark {
  /* DARK: matches `.md-board-detail--dark .md-board-detail-main` (app.scss ~81460)
     — the translucent navy gradient + backdrop-blur, NOT the page canvas. It
     previously mirrored `.md-shell--board-detail`'s atmospheric halo background,
     which is the surface *behind* the board rather than the board surface itself. */
  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: 1px solid 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);
}

/* 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;
}

/* ARIA row wrapper (grid → row → gridcell). `display: contents` generates no
   layout box, so the cells keep auto-placing into the .new-board-preview CSS grid
   unchanged; the wrapper exists only to carry role="row". */
.new-board-preview__row {
  display: contents;
}

.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);
  }
}
/* Height matches the left card — that is just the grid's `align-items: stretch`
   (app.scss ~56898) doing its job, so there is nothing to set here.

   DO NOT re-add an `align-self: start` shrink. There used to be one, keyed on the
   toggle reading "No"
   (`:has(.new-board-for-collapse:not(.new-board-for-collapse--open))`, with
   `padding-bottom: 9px`), to stop the space under the toggle row looking loose.
   Removed 2026-08-17 by request: two side-by-side cards of visibly different
   heights read as a layout bug, which costs more than the loose space saved. */
.nb-basics-grid__col--right {
  justify-content: flex-start;
}

/* 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;
}

/* Rows/Cols steppers + grid picker, pinned to the TOP-RIGHT of the Basics header.
   `margin-left: auto` pushes the group to the right of the title/hint pair;
   `align-self: flex-start` keeps it on the header's top line when the hint wraps
   to a second line on a narrow column. */
.nb-section__header-inline .nb-section__header-dimensions {
  margin-left: auto;
  align-self: flex-start;
}

/* Narrow: the header is already `flex-wrap: wrap`, so the group drops to its own
   line — centre it there rather than leaving it hard against the right edge. */
@media (max-width: 640px) {
  .nb-section__header-inline .nb-section__header-dimensions {
    margin-left: 0;
    align-self: center;
    justify-content: center;
    width: 100%;
  }
}
/* ---- Grid-size picker (components/grid-size-picker) ---------------------------
   Sits to the right of the Rows/Cols steppers. Closed it is a single square
   button; open it drops a 20x20 grid whose filled region IS the current board
   size, and sweeping across it sets rows x columns in one gesture. */
.nb-grid-picker {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.nb-grid-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Geometry matched to .nb-stepper-mini — same 36px height and pill radius — and
     the SAME surface via the shared mixin, so the three controls read as one band. */
  height: 36px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  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);
  color: #1B365D;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Open or focused, it takes the steppers' verdigris ring rather than a treatment
   of its own. */
.nb-grid-picker__toggle:focus-visible,
.nb-grid-picker--open .nb-grid-picker__toggle {
  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-grid-picker__toggle-icon {
  color: #1A7B7A;
}

.nb-grid-picker__toggle-chevron {
  opacity: 0.6;
}

.nb-grid-picker--open .nb-grid-picker__toggle-chevron {
  transform: rotate(180deg);
}

/* FIXED, and placed by JS (grid-size-picker#_positionPanel) rather than anchored
   here. The new-board card is `.new-board--modern { overflow: hidden !important }`
   — deliberate, it clips content to the card's rounded corners — and an absolutely
   positioned panel is clipped by it, which cut the bottom off the grid. A fixed
   element escapes ancestor overflow. `top`/`left` are placeholders; the component
   right-aligns the panel to the toggle, flips it above when there is no room below,
   and clamps it into the viewport. */
.nb-grid-picker__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.18), 0 2px 6px rgba(27, 54, 93, 0.08);
}

.nb-grid-picker__grid {
  display: grid;
  grid-template-columns: repeat(15, 14px);
  gap: 2px;
}

/* Keeps the ARIA grid > row > gridcell structure while letting all 400 cells
   auto-place into the single CSS grid above (same trick as
   .md-board-detail-grid__row). */
.nb-grid-picker__row {
  display: contents;
}

.nb-grid-picker__cell {
  /* Explicit min/max as well as width/height: these are <button>s, and a stray
     global button rule with a min-width would otherwise inflate the cell. */
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 2px;
  background: rgba(27, 54, 93, 0.04);
  cursor: pointer;
  /* No transition: sweeping the pointer repaints up to 400 cells at once, and a
     per-cell fade turns that into visible lag. */
}

.nb-grid-picker__cell--on {
  background: #2A9D8F;
  border-color: #1A7B7A;
}

.nb-grid-picker__cell:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: 1px;
}

/* Footer: the live readout on the left, Cancel / OK on the right. Present because
   a cell click STAGES a size rather than committing it — the panel stays open so
   the choice can be compared or abandoned. */
.nb-grid-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.nb-grid-picker__readout {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1B365D;
  white-space: nowrap;
}

.nb-grid-picker__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nb-grid-picker__btn {
  min-height: 32px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: #1B365D;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nb-grid-picker__btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(27, 54, 93, 0.24);
}

.nb-grid-picker__btn--ok {
  background: #2A9D8F;
  border-color: #1A7B7A;
  color: #fff;
}

.nb-grid-picker__btn--ok:hover {
  background: #1A7B7A;
  border-color: #1A7B7A;
}

/* Narrow: shrink the cells so 15 columns still fit a phone. Placement needs no
   media rule — _positionPanel clamps the panel into the viewport at every width. */
@media (max-width: 640px) {
  .nb-grid-picker__grid {
    grid-template-columns: repeat(15, 12px);
  }
  .nb-grid-picker__cell {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    max-width: 12px;
    max-height: 12px;
  }
}
.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);
}

.md-strip__owner {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.55);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 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;
  /* No margin or padding — the report's own cards carry their spacing. `auto` is
     kept on the horizontal axis ONLY so the 1120px column stays centred in the
     workspace; it contributes no fixed inset. */
  margin: 0 auto;
  padding: 0;
}

/* 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;
}

/* 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);
}

/* 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. */
/* Row 1 (primary): deeper shadow + slightly larger value. */
/* Row 2 (rates): quieter surface, flatter shadow, smaller muted value. */
/* 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;
  }
}

/* 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%;
  /* `min-width: auto` would size this to the widest line its period row can
     make and let it spill past the header column on a phone. Zeroed so the row
     inside is the thing that gives, not the layout around it. */
  min-width: 0;
  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). */
/* 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. */
/* Controls pair — the period select + compare button, inline after the label.
   `nowrap` + `min-width: 0`: the pair holds one line at every width, and the
   space that runs out comes off the controls' own widths (the compare caption
   wraps inside the button) rather than dropping one of them to a new line. */
.md-stats-filter__period-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  min-width: 0;
  max-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 {
  /* 44px, not 42: this is the report's comparison action and has to clear the
     44x44 minimum target size, so "compact" is spent on horizontal padding and
     type size rather than height. The period-select trigger below matches it.
     A FLOOR rather than a fixed height, because the caption wraps to two lines
     in the narrow widths where the row would otherwise have to break — at every
     width that fits one line this still resolves to exactly 44px. */
  height: auto !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* A flex item's default `min-width: auto` is its longest line, which would
     make this button refuse to narrow and push the row off-screen instead of
     wrapping its caption. */
  min-width: 0;
  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 {
  /* Matched to the 44px compare button above (44x44 minimum target size). */
  height: 44px;
  min-height: 44px;
  /* 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;
  /* The wrap owns the select's width (the trigger below fills it), so shrinking
     this box actually narrows the control instead of letting it overflow and sit
     on top of the "Report period:" label. 92px is the floor at which the longest
     period name is still readable. */
  flex: 1 1 auto;
  min-width: 92px;
}

/* The label, the period select and the compare action stay on ONE row at every
   width — they read as a single sentence ("Report period: <last 2 months>
   <compare…>"), and splitting them across lines lost that. Nothing stacks them
   at a breakpoint any more; instead the two controls shrink and the compare
   button's caption wraps inside itself. */
@media (max-width: 600px) {
  .md-stats-filter__period-controls .md-stats-filter__compare {
    justify-content: center;
  }
  /* Phone: ~296px of column has to hold the label, the period pill and the
     compare action side by side. The type steps down one notch and the gaps
     tighten so all three stay on the line and stay legible; the compare
     caption takes the remaining width and wraps inside its own button. */
  .md-stats-filter__period-bar .md-stats-filter__period-stack,
  .md-stats-filter__period-bar .md-stats-filter__period-controls {
    gap: 6px;
  }
  .md-stats-filter__period-bar .md-stats-filter__period-title {
    font-size: 13px;
  }
  .md-stats-filter__period-bar .md-stats-period-select__trigger {
    padding: 0 10px;
    font-size: 13px;
  }
  .md-stats-filter__period-bar .md-stats-filter__compare {
    flex: 1 1 auto;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}
/* 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%;
  min-width: 0;
}

.md-stats-filter__row--stacked {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.md-stats-filter__period-stack {
  display: flex;
  /* One inline row: "Report period:" label, then the select and the compare
     action beside it. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.md-stats-filter__period-title {
  display: inline;
  width: auto;
  /* Never the thing that wraps or shrinks: it is the row's label, so the space
     comes out of the controls beside it. */
  flex: 0 0 auto;
  white-space: nowrap;
  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-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;
  /* Compact: 128px min (was 160) and tighter padding. Height is set to the 44px
     target minimum by the period-bar rule above. */
  /* No intrinsic floor: the trigger fills whatever width its wrap is given
     (`.md-stats-filter__period-wrap` carries the 92px floor in the period row),
     so it can never overflow its own box and land on the label beside it. */
  min-width: 0;
  width: 100%;
  height: 26px;
  min-height: 26px;
  padding: 0 24px 0 10px;
  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;
}

/* "Switch Communicators", relocated out of the stats body into the hero.
   ABSOLUTELY positioned rather than made a flex sibling of the title on
   purpose: this hero centres its title and subtitle, and turning it into a
   flex row would push that centred block off-centre by half the button's
   width. Pinning the button to the right edge leaves the existing hero
   composition untouched and simply hangs the control beside it. */
.md-shell--reports-view .md-hero--reports-dashboard {
  position: relative !important;
}

.md-shell--reports-view .md-reports-hero__action {
  position: absolute;
  right: 16px;
  /* Aligned to the TITLE's optical centre rather than the hero's, so the button
     sits beside the name it acts on instead of drifting down beside the meta
     line under it. */
  top: 34px;
  z-index: 2;
  white-space: nowrap;
}

/* Below this width the centred title and the pinned button would collide, so
   the button returns to the flow underneath the hero text and centres itself. */
@media (max-width: 900px) {
  .md-shell--reports-view .md-reports-hero__action {
    position: static;
    display: block;
    margin: 14px auto 0;
  }
}
/* Supporter "Select Communicator" picker — sits between the hero and
   .md-stats-page (so the stats content starts below it) and is styled as a
   closed dropdown, because that is what it behaves like: it opens the
   switch-communicators modal to pick whose report to view. Centred and capped so
   it reads as one deliberate control rather than a full-bleed bar. Communicators
   never see it (template gates on supporter_role) and keep the hero button. */
.md-shell--reports-view .md-reports-picker {
  display: flex;
  justify-content: center;
  padding: 4px 16px 0;
}

.md-shell--reports-view .md-reports-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 12px 18px;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 12px;
  background: #F8F9FA;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.04), 0 4px 12px rgba(27, 54, 93, 0.06);
  color: #1B365D;
  /* ~30% above a typical web control, per the AAC legibility floor. */
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.md-shell--reports-view .md-reports-picker__trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 157, 143, 0.45);
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.06), 0 8px 20px rgba(27, 54, 93, 0.1);
}

/* The control opens a dialog, so it must show a visible keyboard focus ring. */
.md-shell--reports-view .md-reports-picker__trigger:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.55);
  outline-offset: 2px;
}

/* CSS chevron rather than an inline SVG: the trigger is decorative-only here and
   this keeps the markup to a single span. */
.md-shell--reports-view .md-reports-picker__chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(27, 54, 93, 0.55);
  border-bottom: 2px solid rgba(27, 54, 93, 0.55);
  transform: translateY(-2px) rotate(45deg);
}

.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--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 {
    /* `clip` companion, same reasoning as the base `.md-shell` rule (~43788):
       `overflow-x: hidden` makes the other axis compute to `auto`, turning every
       one of these into a scrolling box, and `position: sticky` binds to the
       NEAREST such box. None of these has a height constraint, so none of them
       can ever actually scroll — a sticky element bound to one renders at its
       natural offset, i.e. inert.

       This block is the whole ancestor chain above `.md-shell`, and it sits
       ~17,000 lines below the base rule at identical (0,1,0) `!important`
       specificity, so without this line it silently re-broke the base fix at
       every viewport ≤1024px — tablets, phones, and desktop at ≥125% zoom,
       which is exactly where WCAG 1.4.10 Reflow / 1.4.4 Resize text apply.
       Keep BOTH declarations: `clip` is unsupported before Safari 16, where the
       second line is dropped as invalid and the first still contains horizontal
       overflow (those browsers keep the old, sticky-inert behaviour rather than
       gaining a horizontal scrollbar).

       Safe to apply to the whole list, including `#content`, because the change
       is self-limiting by spec: when one axis is `auto`/`scroll`, a `clip` on
       the other computes back to `hidden`. `#content` is the app's intentional
       and only scroll container (`overflow-y: auto !important` at ~890, with the
       flex/min-height chain above it), so it keeps `hidden` and keeps scrolling.
       The line only bites on the boxes whose overflow-y is `visible` — which is
       precisely the set that was capturing sticky by accident. */
    overflow-x: hidden !important;
    overflow-x: clip !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;
  }
  /* Board-picker only: give the picker the full narrow-viewport width by
     dropping the workspace's 40px side padding (base rule, app.scss ~43647).
     The category column + board grid are already inset by the card and panel
     padding inside, so the outer gutter is dead space here. Vertical padding
     is left alone. */
  .md-shell--board-picker > .md-workspace {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Same reasoning one level in: `.md-main` carries `padding: 18px 16px 24px
     !important` (~44554), which on a narrow viewport is a second dead gutter
     inside the workspace's. Vertical padding is left alone; (0,2,0) + !important
     is what it takes to beat that base rule. */
  .md-shell--board-picker .md-main--home-boards {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Narrow viewports: take 16px off the category rail and hand it to the
     results column. One declaration does both — the results column is
     `flex: 1 1 420px` (a grower) next to a fixed-width rail, so every pixel off
     the rail's max-width lands there. The base is 265px (~5423); 249px still
     holds "Functional Communication" on two lines. */
  .md-shell--board-picker .md-home-boards-picker__nav {
    max-width: 249px;
  }
  /* The small-screen `.md-shell` background override was REMOVED here (2026-08-16).
     It swapped the base linear gradient from the desktop stone ramp to a near-white
     #fefefe -> #f7f7f7 and shrank every radial, so the whole app changed background at
     1024px — which read as a bug when resizing. The identical block was duplicated in
     the <=950px media query; both are gone, and every width now inherits the single
     authoritative `.md-shell` background defined near the top of this file. */
}
@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;
  }
  /* The small-screen `.md-shell` background override was REMOVED here (2026-08-16).
     It swapped the base linear gradient from the desktop stone ramp to a near-white
     #fefefe -> #f7f7f7 and shrank every radial, so the whole app changed background at
     1024px — which read as a bug when resizing. The identical block was duplicated in
     the <=950px media query; both are gone, and every width now inherits the single
     authoritative `.md-shell` background defined near the top of this file. */
  .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;
    /* `clip` companion — see the base `.md-shell` rule (~43788) and the ≤1024
       scroll-guard block. The intent here is CLIPPING (it pairs with the
       border-radius above to round off the full-bleed workspace), not scrolling,
       but `overflow: hidden` also makes this a scroll container, and
       `position: sticky` binds to the nearest one. Measured 2026-08-24: at 768px
       and 390px wide the Preferences Save bar rendered at its natural offset
       (y=1936 in a 1024px viewport) because THIS rule captured it, while 1024px
       — where only the ≤1024 block applies — pinned correctly at y=685..768.
       `overflow: clip` clips both axes exactly as before and establishes no
       scroll container. `hidden` stays first as the pre-Safari-16 fallback. */
    overflow: hidden !important;
    overflow: clip !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,
  #within_ember:has(.md-shell--board-picker) .md-shell--board-picker {
    min-height: 100vh !important;
  }
  #within_ember:has(.board-picker-page) .md-shell--board-picker > .md-workspace,
  #within_ember:has(.md-shell--board-picker) .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.

     `:first-child` is in the SAME list for the same reason, and is the
     case that was missed: `.md-pillnav__pill:first-child` (app.scss
     ~44212) also hard-sets `padding-left: 18px !important`, and at
     (0,2,0) it outranks the plain `.md-pillnav__pill` (0,1,0) that
     applies the 12px above — so the FIRST pill in every nav kept an
     18px left inset while all its siblings tightened to 12px. Most
     visible on the caseload page, where Caseload is the first pill.
     Listed here at equal (0,2,0) and later in source, so it wins. */
  .md-pillnav__pill:first-child,
  .md-pillnav__pill.is-active:not(:first-child),
  a.md-pillnav__pill.active:not(:first-child),
  .md-pillnav--user a.md-pillnav__pill: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;
    /* `clip` companion — see the base `.md-shell` rule (~43788) and the ≤1024
       scroll-guard block. The intent here is CLIPPING (it pairs with the
       border-radius above to round off the full-bleed workspace), not scrolling,
       but `overflow: hidden` also makes this a scroll container, and
       `position: sticky` binds to the nearest one. Measured 2026-08-24: at 768px
       and 390px wide the Preferences Save bar rendered at its natural offset
       (y=1936 in a 1024px viewport) because THIS rule captured it, while 1024px
       — where only the ≤1024 block applies — pinned correctly at y=685..768.
       `overflow: clip` clips both axes exactly as before and establishes no
       scroll container. `hidden` stays first as the pre-Safari-16 fallback. */
    overflow: hidden !important;
    overflow: clip !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;
  }
  .ub-boards-page__getting-started-actions {
    justify-content: center !important;
  }
}
/* PRIMARY NAV: PILL ROW -> DROPDOWN. Two breakpoints, by MENU LENGTH (2026-08-16,
   requested), not by view — nothing here is scoped to Gentle/Focused, so both behave
   identically.
     • SLP (no org management): 460px. Five pills fit until then.
     • ORG MANAGER: 550px. Their menu carries an extra Organizations item, so it runs out
       of room sooner and has to collapse earlier.
   The org rule is the WIDER of the two, so at <=460 both match and the org branch simply
   restates the same swap — harmless, and it keeps each user type readable as one rule
   rather than a rule plus an exception.

   WAS 375px FOR EVERYONE, which is the bug this replaces: between 376 and 550 the pills
   merely WRAPPED (measured: 5 pills over 3 rows at 460/440), and at <=375 the row was
   hidden. On the Boards / Caseload / Reports nav that hid the navigation outright, because
   UserPillNav had no dropdown to reveal — it now has one (components/user-pill-nav.hbs).
   Measured before and after with scripts/pillnav-narrow-qa.mjs. */
@media (max-width: 460px) {
  .md-pillnav:not(.md-pillnav--org-menu) {
    display: none !important;
  }
  .md-pillnav-dropdown:not(.md-pillnav-dropdown--org-menu) {
    display: block !important;
    width: 40% !important;
    /* 40px, i.e. the original 20px + 2rem (2026-08-16, requested). 1rem is 10px in this
       codebase (`html { font-size: 10px }`), so 2rem is 20px — see the rem trap in
       docs/task-management/LEARNINGS.md. The ACCOUNT-pages nav
       (`.md-pillnav-dropdown--user` further down) keeps its original 20px: it is a
       different surface and was not part of this request. */
    margin: 40px auto 0 !important;
  }
}
@media (max-width: 550px) {
  .md-pillnav--org-menu {
    display: none !important;
  }
  .md-pillnav-dropdown--org-menu {
    display: block !important;
    width: 40% !important;
    /* 40px, i.e. the original 20px + 2rem (2026-08-16, requested). 1rem is 10px in this
       codebase (`html { font-size: 10px }`), so 2rem is 20px — see the rem trap in
       docs/task-management/LEARNINGS.md. The ACCOUNT-pages nav
       (`.md-pillnav-dropdown--user` further down) keeps its original 20px: it is a
       different surface and was not part of this request. */
    margin: 40px auto 0 !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;
  }
  /* Supervisor-only list cards. focusedLayout() emits each as its OWN full-width
     grid row, so they must keep that full width once `display:flex` above makes the
     inline grid-template inert — without an explicit basis they fall back to
     `flex: 0 1 auto` and shrink to their content, rendering narrower than the
     Caseload hero above them. */
  .md-grid--layout-focused > .md-card--rooms {
    order: var(--ord-rooms, 2) !important;
    flex: 1 1 100% !important;
  }
  .md-grid--layout-focused > .md-card--attention {
    order: var(--ord-attention, 3) !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;
  }
  /* The PLAIN Speak card needs an order here too (2026-08-16). Until Speak began rendering
     as an ordinary card on org dashboards, Focused always hid `--speak-as-button`, so only
     the hero variant above needed a rule. Without one it fell back to `order: 0` and TIED
     with My Organizations (whose `--ord-org` is 0 when Organizations leads the areas) — and
     a flex `order` tie is broken by DOM position, which put Speak first and pushed the hero
     down. Measured at 1024/900/640: both cards reported order=0.
     The fallback is 7, i.e. behind the full-width cards, matching where Speak sits in the
     org areas (last row). `flex: 1 1 100%` for the same reason as its siblings above: once
     `display:flex` makes the inline grid-template inert, a card with no basis shrinks to
     its content. */
  .md-grid--layout-focused > .md-card--speak-as-button {
    order: var(--ord-speak, 7) !important;
    flex: 1 1 100% !important;
  }
  /* ORG DASHBOARDS keep the Caseload | Speak pair SIDE BY SIDE here, matching the wide
     layout (2026-08-16, requested). The rules above give every full-width card
     `flex: 1 1 100%`, which would stack this pair — so the org case overrides the basis to
     a half, exactly like the four utility tiles in this block already do.
     Order comes from the areas and needs no help: Caseload is index 6 and Speak 7 in the
     org packing, so they are adjacent and land left-then-right on their own row.
     `calc(50% - 12px)` matches the utility tiles' basis rather than the container's exact
     16px gap, so the row's two halves and the four tiles above them share one measurement.
     Both `--caseload-as-button` and `--caseload` are named: which variant renders depends
     on whether Caseload is the hero, and on an org dashboard it is the ordinary card. */
  .md-grid--layout-focused.md-grid--hero-org > .md-card--caseload-as-button,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--caseload,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--speak-as-button {
    flex: 1 1 calc(50% - 12px) !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,
  .md-card--caseload-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 {
  /* -aa, not the raw token: white on $brand-verdigris is 3.36:1, under AA for this
     14px/600 label. $brand-verdigris-aa is 5.05:1 and is already used for the border. */
  background: #1A7B7A;
  border-color: #1A7B7A;
  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;
}

/* SEGMENTED BAR, mirroring the pill-nav (`.md-pillnav`, ~L44499) rather than the row of
   separate floating bubbles this used to be: one rounded white container that seats the
   tabs tightly, with no gap between them. Container values are the pill-nav's own —
   `padding: 4px 2px`, `gap: 0`, `border-radius: 999px`, the same near-opaque white and
   the same soft shadow — so the two controls read as the same component family.
   The tabs KEEP THEIR OWN COLOURS: the item rules below only drop each pill's individual
   border and outer shadow (what made them read as separate bubbles); fills and text
   colour are untouched, and Focused View's denim gradients still apply on top.
   HUGS ITS CONTENT — `flex: 0 0 auto` instead of `1 1 auto` so the bar is only as wide
   as its tabs, not stretched across the row; `align-self: center` handles the cross
   axis. Horizontal placement is the media rule below. */
.ub-boards-page__tabs.ub-boards-page__tabs--boards {
  background: rgba(255, 255, 255, 0.98);
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 4px 2px;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
  align-self: center;
  gap: 0;
  position: relative;
}

/* Centre the bar on the PAGE at full width. `margin-inline: auto` on a `flex: 0 0 auto`
   item is what does it — `justify-content` on the bar only moves tabs INSIDE it, which
   is why the bar itself needs the auto margins.

   ≥768px, not unconditional: the New Board button in this row is `position: absolute;
   right: 0` (`&__boards-summary-new-btn--in-tabs-row`), so it is out of flow and a
   centred bar can slide underneath it on a narrow desktop. The bar is ~400px and the
   button ~140px, so they start to overlap below roughly 680px of row width. Between
   641px (where the pill row is swapped for the mobile picker) and 768px the bar
   therefore stays left-aligned, clear of the button. Focused View hides that button
   entirely, so it is unaffected either way.

   Scoped to `> .ub-boards-page__tabs-row` ON PURPOSE. The board-picker page's strip
   carries the same `.ub-boards-page__tabs--boards` classes (board-picker.hbs:13) but
   sits in its own `.md-home-boards-picker__tabs-row` — deliberately not this row, see
   app.scss ~6175 — and is a wrapping, internally-centred strip whose layout auto
   margins would disturb. The parent selector keeps this to the boards page. */
@media (min-width: 768px) {
  .ub-boards-page__tabs-row > .ub-boards-page__tabs.ub-boards-page__tabs--boards {
    margin-inline: auto;
  }
}
/* ≤640px boards-section picker — at this width the styled
   `.ub-boards-page__tabs--boards` pill row collapses into a single dropdown so
   the section picker fits comfortably next to the New Board button on a
   phone-width viewport. It fires the same `set_selected` / `set_tag` actions as
   the desktop pills, so the wiring is identical.

   This is a <ModernSelect>, not a native <select>. A native select's popup is
   OS-rendered — `option` padding is ignored, the highlight row is the browser's
   — so it could never match the page however the trigger was styled. All of the
   LOOK comes from the shared `.md-modal-modern-select` skin (~app.scss:86009);
   this class handles only when the control is shown, how it sits in the row, and
   the AAC type scale. Do not re-add trigger chrome (fill, border, radius,
   chevron, focus ring) here, or this and the shared skin will drift.

   BOTH visibility rules chain `.modern-select` deliberately. The base
   `.modern-select` rule (app.scss ~85792) sets `display: inline-block` at the
   same (0,1,0) specificity and is LATER in the file, so an unchained
   `.ub-boards-page__tabs-mobile-picker { display: none }` loses the tie and the
   picker renders at every width, next to the desktop pill row. Chaining makes
   it (0,2,0) and wins on merit rather than on source order. */
.modern-select.ub-boards-page__tabs-mobile-picker {
  display: none;
}

@media (max-width: 640px) {
  .ub-boards-page__tabs-row > .ub-boards-page__tabs.ub-boards-page__tabs--boards {
    display: none !important;
  }
  .modern-select.ub-boards-page__tabs-mobile-picker {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* AAC type scale. The shared skin is sized for dense modal forms (14px, 44px
     target); this is the primary navigation control on a phone, where the house
     rule is ~30% above the usual web default. Type and touch target only — the
     chrome still comes from the skin. */
  .ub-boards-page__tabs-mobile-picker .modern-select__trigger {
    font-size: 17px;
    min-height: 48px;
  }
  .ub-boards-page__tabs-mobile-picker .modern-select__option {
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .ub-boards-page__tabs-mobile-picker .modern-select__group-label {
    font-size: 12px;
  }
  /* New Board button drops to its own row beneath the picker.
     The tabs-row already has the picker 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-picker {
    flex: 1 1 100% !important;
  }
  .ub-boards-page__boards-summary-new-btn--in-tabs-row {
    /* Back into flow at phone width so it stacks below the picker
       (desktop pins it absolutely to page-center the tabs). */
    position: static !important;
    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. */
  /* Same reflow the side-by-side folders column needs; defined once as
     `boards-folders-narrow-header` near the boards-page layout block above. Declarations
     are unchanged from what was written inline here. */
  .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;
    /* Cancel the side-by-side flex rule's `margin-left: auto` (~51422). That rule's
       comment reasons it is "inert at <=420px" because the header hoists to
       `display: contents` — but this mixin sets `display: grid !important` on the
       header, so the hoist never happens at this width and these are grid items of the
       HEADER. The comment is half right: `order` and `flex` genuinely do not apply to
       grid items, but an AUTO MARGIN does — it is the standard way to align one — so
       that single declaration survived and shrink-to-fit the row against the right
       edge. Measured: 314px inside a 376px header, spanning "actions actions".
       Zeroed here so the row fills the area it already spans. */
    margin-left: 0 !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, pinned to the RIGHT
     edge. `align-self: flex-end` is the lever here, not a margin: the header is a
     column at this width, so the cross axis is horizontal and `margin-left: auto`
     (the ≤768px rule) has nothing to push against. The two have to agree — a
     centred `align-self` here would win over the right-pinned margin above and the
     button would sit centred on this tier only. */
  .ub-boards-page__boards-summary-section > .ub-boards-page__boards-summary-header > .ub-boards-page__set-home-btn {
    align-self: flex-end !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 {
  /* SEGMENTS inside the bar above, not free-floating pills. The individual border,
     outer shadow and white fill are gone — those are what made each tab read as its own
     bubble; the bar now provides the surface. Text colour, size, weight and the 999px
     radius are unchanged, so the tabs keep their own look and the ACTIVE state below
     still paints its fill.
     Padding trimmed 10px -> 6px vertically to match the pill-nav's slim bar; horizontal
     stays 22px so the labels keep their breathing room and the touch target stays wide. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: #1B365D !important;
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
  box-shadow: none !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 segment — the only one that paints a fill, exactly as the pill-nav marks its
     current page. The inactive tabs are now transparent against the bar, so this reads as
     selected on contrast alone rather than needing the old free-floating-pill chrome.
     Keeps its own colours (soft white gradient + verdigris glow, navy ink); the glow is
     what separates it from the near-white bar behind it. */
  background: linear-gradient(180deg, #fff, rgba(245, 247, 250, 0.92)) !important;
  border: none !important;
  color: #1B365D !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(42, 157, 143, 0.22), 0 4px 12px rgba(26, 123, 122, 0.14), 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-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 — 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, uppercase
   "HOME BOARD" pill pinned inside its top edge.

   Applied as a MODIFIER on whatever wrapper a surface already uses —
   the base `.board-picker__item` block below belongs to the My Boards
   modal removed in 26b4b4426. The live consumer is the home-board
   picker (`components/board-picker.hbs`), whose tiles carry
   `.md-home-boards-picker__board`; it adds `--home` and the badge span
   without the base class so the wrapper keeps its own flex layout. */
.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;
  /* Sits INSIDE the tile's top edge, not crowning it. The original -10px was
     written for the removed My Boards modal, whose tiles had their own card
     chrome and outer margin to overhang; on the picker's grid it read as
     floating above the tile.
     Landed at 8px by eye over two passes (-10 → 6 → 8), which turns out to be
     EXACTLY the boards page's own home badge offset
     (`.ub-boards-page__board-item-home-badge`, top: 8px). Keep the two in step:
     they mark the same board on two surfaces a user moves between. */
  top: 8px;
  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;
}

/* --- Card-width-driven badge offset — board-picker page, COMPACT rows only ---
   Compact rows are `grid-template-columns: 1fr` (two columns from 1024px up,
   _board_picker.scss ~626), so a card's width tracks the content column, not the
   viewport: at one wide column a card can be 700px while at two columns on the
   same screen it is ~450px. A @media breakpoint measures the wrong box — this has
   to be a container query (see LEARNINGS, "when a COLUMN is narrow but the
   viewport is wide, media queries are inert").

   THE `:not(:has(…))` GUARD IS LOAD-BEARING — DO NOT DROP IT.
   `container-type: inline-size` also applies LAYOUT containment, which makes the
   element a containing block for `position: fixed` descendants. board-icon.hbs
   renders the full-screen `.ll-premium-progress` preview loader INSIDE this tile
   and documents "position:fixed so the overlay covers the viewport regardless of
   where this component is rendered". Containing it unconditionally would clip that
   overlay into a single grid cell. Dropping the container while the overlay is
   mounted keeps that invariant; the badge falls back to its 8px base for exactly
   as long as a full-screen overlay is covering it, so the change is unobservable.

   Scoped to the home tile because it is the only tile with a badge — this avoids
   putting containment on every card in the grid. */
.md-shell--board-picker .ll-boards-grid--compact .md-home-boards-picker__board.board-picker__item--home:not(:has(.ll-premium-progress)) {
  container-type: inline-size;
  container-name: ll-picker-home-tile;
}

/* Wide card: the pill has room to sit clear of the row's top edge.
   22px, tuned by eye on the real compact picker (8px base → 24 → 22). */
@container ll-picker-home-tile (width >= 465px) {
  .board-picker__home-badge {
    top: 22px;
  }
}
/* Narrow card: the row is short, so the pill rides flush with the top edge
   rather than colliding with the board name beneath it. */
@container ll-picker-home-tile (width < 465px) {
  .board-picker__home-badge {
    top: 0;
  }
}
/* 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;
}

/* Folder GLYPH TILE — the rounded, gradient-lit square the layered folder glyph sits
   on. Defined once and shared by the folder DETAIL identity icon (60px) and the
   miniature in each folder ROW (32px) on the boards page, so the two cannot drift
   apart: the row is meant to read as the same object as the detail header, just
   smaller.

   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.

   The navy-tinted hairline border (not white) defines the edge reliably regardless of
   the card background; the inset top highlight still catches light on the upper rim.

   $lift scales the two OUTER shadows with the tile: a 60px tile carries a 6px/14px
   drop, but the same drop under a 32px tile reads as a smudge. The inset hairlines are
   1px at both sizes by design — they are edge definition, not depth. */
/* ============================================================
   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 — pulled OUT of the flex flow and
     pinned to the row's right edge so the tab strip (.tabs--boards,
     flex: 1 1 auto + justify-content: center) spans the full row width and
     its pills center on the PAGE rather than only within the space left of
     this button. `bottom: 1rem` keeps the original 1rem lift off the layered
     divider (the ::after hairline at the row's bottom). The tabs-row is
     position: relative, so this anchors to it. Reset to static ≤640px, where
     the button stacks below the mobile <select>. */
}
.ub-boards-page__boards-summary-new-btn--in-tabs-row {
  position: absolute;
  right: 0;
  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 {
  /* 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;
  text-decoration: none;
  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 — the button stays RIGHT-ALIGNED, same as the base rule.
     It used to be re-centred here with symmetric auto margins (and `align-self:
     center` in the ≤640px block). Centring made it read as a heading rather than
     as the action it is, and it no longer lined up with the right-hand edge every
     other control on the page sits on. `margin-right: 0` is written explicitly
     rather than dropping the block: the ≤640px rule below still needs a matching
     `align-self`, and an empty override here would leave the two tiers describing
     different intents. 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: 0;
  }
}
.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 {
  /* 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 {
  /* ── FOLDER ROWS ──────────────────────────────────────────────────────────
     One row per folder — icon, name, count — replacing the tile strip that used to
     sit here. Rows because tiles wrapped into a block that pushed the board grid
     off-screen once a user had more than a handful of folders, and a folder name in
     a fixed-width tile truncates.
     A row NAVIGATES to the folder view; it is not a disclosure, so there is no open
     state and the chevron does not rotate. Deliberately keeps the old tile's palette
     so the object still reads as the same thing: white surface at 10px radius, name
     in $indigo, count as the same teal pill. */
}
.ub-boards-page__folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* Hover suppressed for the duration of a board drag and briefly after a drop, so
     the cursor travelling back across the list does not fire the lift on every row
     it passes. Set from JS (boardDragStart / folderDrop). Beats the plain :hover on
     specificity alone — no !important needed. */
}
.ub-boards-page__folder-list--no-hover .ub-boards-page__folder-row, .ub-boards-page__folder-list--no-hover .ub-boards-page__folder-row:hover, .ub-boards-page__folder-list--no-hover .ub-boards-page__folder-row:focus-visible {
  border-color: rgba(27, 54, 93, 0.1);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
  transition: none;
}
.ub-boards-page__folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ub-boards-page__folder-row:hover {
  box-shadow: 0 6px 18px rgba(27, 54, 93, 0.12);
  border-color: rgba(27, 54, 93, 0.18);
}
.ub-boards-page__folder-row {
  /* Drag-hover drop target. The tile version lifted its layered card; a row has no
     layers, so the "you can drop here" signal is the teal border + tint used for
     active state elsewhere in the folders UI. */
}
.ub-boards-page__folder-row--dropping {
  border-color: #147F82;
  background: rgba(20, 127, 130, 0.08);
  box-shadow: 0 0 0 3px rgba(20, 127, 130, 0.25);
}
.ub-boards-page__folder-row {
  /* Post-drop confirmation on the row that just received the board. */
}
.ub-boards-page__folder-row--animating {
  animation: folder-row-full 0.6s ease-out forwards;
  transition: none;
}
.ub-boards-page__folder-row--animating .ub-boards-page__folder-row-count {
  animation: folder-count-full 0.5s ease-out forwards;
}
.ub-boards-page {
  /* Miniature of the folder-detail identity icon — same gradient tile, same two-tone
     layered glyph, scaled down. Shares ub-folder-glyph-tile so the two stay in step. */
}
.ub-boards-page__folder-row-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  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%);
  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 0.5px 1px rgba(27, 54, 93, 0.1), 0 3px 7px rgba(27, 54, 93, 0.1);
}
.ub-boards-page__folder-row-name {
  flex: 1 1 auto;
  min-width: 0;
  /* 16px, not the tile's 14px: a row has the width for it, and this is the primary
     label of the control (AAC legibility floor).

     Scales DOWN below 850px, never past 14px (2026-08-20, requested). Expressed as
     one clamp rather than a media query because the max term already pins 16px at
     every width above 850: `2vw - 1px` only drops under 16px once the viewport does.

     Two fixed points were specified: 16px at 850px and 15px at 800px. That sets the
     slope at (16 - 15) / (850 - 800) = 0.02px per px of viewport, and 0.02 * vw IS
     2vw, so the fluid term is `2vw - 1px`. It keeps shrinking as the window does and
     meets the 14px floor at 750px, below which the floor holds.

     calc() around the mixed-unit term is REQUIRED, not decorative — see
     docs/CSS_SCSS_GUIDELINES.md: px + vw inside clamp() cannot be evaluated at
     compile time and fails without it.

     Viewport units, not container units: the ask was about SCREEN width, and the
     folders column already changes width with the viewport anyway. */
  font-size: clamp(14px, 2vw - 1px, 16px);
  font-weight: 600;
  color: #1b2a4a;
  /* WRAPS AT ANY WIDTH whenever the name exceeds its column (2026-08-20, requested).
     No breakpoint and no truncation: this replaces `white-space: nowrap` +
     `text-overflow: ellipsis`, which ended long names in an ellipsis at every width
     and only wrapped below 850px. A folder name is the row's label — the row has
     vertical room to give, and two readable lines beat one line with the words cut
     off. `overflow: hidden` went with them: it existed to clip for the ellipsis, and
     leaving it would silently cut a wrapped name instead.
     `break-word` and NOT `anywhere`: the two differ on when they may split a word.
     `anywhere` breaks mid-word even when the word would have fitted on the next line,
     which shreds ordinary multi-word names in a narrow column — measured at 5 lines
     for a name that needs 2. `break-word` splits only a word that cannot fit on a
     line of its own, so normal names keep whole words. */
  overflow-wrap: break-word;
}
.ub-boards-page {
  /* Same pill as the tile's count, and like the tile it shows the bare NUMBER — the
     row's own label already says what is being counted, so "3 boards" repeated down
     the list is noise. min-width keeps one- and two-digit counts the same width so the
     pills line up vertically down the column. */
}
.ub-boards-page__folder-row-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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-row-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(27, 54, 93, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .ub-boards-page__folder-row {
    transition: none;
  }
}
.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". */
  /* Top row of the folder card: breadcrumb left, exit link centred, on ONE row.
     `1fr auto 1fr` centres the middle track on the wrapper itself, so the link is
     centred on the CARD no matter how long the folder name in the breadcrumb runs —
     which `justify-self: center` inside the card's own `auto 1fr auto` could not
     guarantee, since that middle column is only centred when the two auto flanks match. */
}
.ub-boards-page__folder-context-toprow {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  /* Narrow cards: stack instead of letting the two collide, with both centred. */
}
@media (max-width: 640px) {
  .ub-boards-page__folder-context-toprow {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }
}
.ub-boards-page__folder-context-breadcrumb {
  /* Column 1 of `&__folder-context-toprow`, not the card. It used to span the card
     (`1 / -1`) when it was the only thing in its row; the Back link now shares that
     row, so spanning would push the link out of the wrapper's tracks. */
  grid-column: 1;
  justify-self: start;
  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 {
  /* "Back to Folders" — a stylized LINK at the TOP of the folder-context card,
     centred across its full width.
     PLACEMENT: the card is a 3-column grid (`auto 1fr auto`) whose breadcrumb already
     spans `1 / -1`. This is the card's first child and spans the same way, so it takes
     row 1 and pushes the breadcrumb and the identity/menu/actions row down one — none
     of which carry an explicit `grid-row`, so they reflow intact (the boards menu keeps
     its `grid-column: 2`).

     COLOUR: `$brand-verdigris-aa`, not `$brand-verdigris`. _variables.scss:66-71 is
     explicit that the AA variants exist for "body text and links on white/light
     backgrounds, where the brand swatches only achieve ~3.1-3.5:1". This is a text link
     on the card's light surface — exactly that case — so the accessible tone of
     verdigris is the correct one here (4.73:1 vs ~3.1:1), which matters more than usual
     in an AAC product.

     Link affordance, but a 44px minimum target: it reads as a link and still satisfies
     the touch-target floor, since this is the primary way out of the view. */
}
.ub-boards-page__folder-context-back {
  /* Middle track of `&__folder-context-toprow` — the flanking 1fr columns do the
     centring, so no `justify-self` is needed. */
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  color: #1A7B7A;
  /* px, not rem — 10px root (see the note on __loading-label). This is the primary
     exit from a drilled-in folder; at 12.35px it was the smallest thing in its row. */
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.ub-boards-page__folder-context-back .ub-boards-page__folder-context-back-label {
  /* Underline on the LABEL only, so the arrow does not get a stray rule under it.
     Offset keeps it clear of the descender-free caps at this weight. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.ub-boards-page__folder-context-back {
  /* The arrow steps left on hover — a small directional cue that the control moves
     you back, rather than a generic colour shift. */
}
.ub-boards-page__folder-context-back .ub-boards-page__folder-context-back-icon {
  transition: transform 0.15s ease;
}
.ub-boards-page__folder-context-back:hover, .ub-boards-page__folder-context-back:focus-visible {
  color: #14615F; /* one step darker than the AA token; literal because this sheet
   does not use darken() (2 uses in 88k lines) */
}
.ub-boards-page__folder-context-back:hover .ub-boards-page__folder-context-back-icon, .ub-boards-page__folder-context-back:focus-visible .ub-boards-page__folder-context-back-icon {
  transform: translateX(-3px);
}
.ub-boards-page__folder-context-back:focus-visible {
  outline: 3px solid #2A9D8F;
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .ub-boards-page__folder-context-back .ub-boards-page__folder-context-back-icon {
    transition: none;
  }
  .ub-boards-page__folder-context-back:hover .ub-boards-page__folder-context-back-icon {
    transform: none;
  }
}
.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 {
  /* Recipe lives in ub-folder-glyph-tile so the row miniature stays identical. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  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%);
  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.
     Both sizes, one rule. */
}
.ub-boards-page__folder-context-identity-icon .ub-boards-page__folder-context-identity-icon-svg, .ub-boards-page__folder-row-icon .ub-boards-page__folder-glyph-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, .ub-boards-page__folder-glyph-back {
  fill: rgba(90, 106, 133, 0.95);
}
.ub-boards-page__folder-context-identity-icon-front, .ub-boards-page__folder-glyph-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;
  /* Card column 3, on the identity row — swapped with Delete (2026-08-17, requested).
     Bottom-aligned against the identity block, matching the treatment Delete used to
     have in this slot.
     `position: relative` stays — the dropdown panel is absolutely positioned against
     this box, so moving the box must never reparent that containing block. */
  grid-column: 3;
  justify-self: end;
  align-self: end;
  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;
  /* Right track of `&__folder-context-toprow` — swapped with the boards dropdown
     (2026-08-17, requested), so Delete now ends the top row and centres vertically
     with the breadcrumb and the exit link.
     Placement is STATED rather than left to auto-placement: this row previously
     relied on landing in the card's column 3 by luck, and slid silently into column 2
     the moment the dropdown moved out of it. */
  grid-column: 3;
  justify-self: end;
  align-self: center;
}
.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;
  height: auto;
  min-height: 0;
}
.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 {
  order: 97;
  margin-top: 0;
  margin-bottom: 4px;
}
.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 {
  order: 98;
  margin: 0 0 8px;
}
.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 {
  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;
  margin-bottom: 0;
}
.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 {
  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: auto !important;
  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__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-count-full {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
/* Row equivalent of folder-full: the tile flashed its whole layered body, a row
   flashes its border and surface instead. */
@keyframes folder-row-full {
  0% {
    border-color: #147F82;
    background: rgba(20, 127, 130, 0.18);
  }
  60% {
    border-color: #147F82;
    background: rgba(20, 127, 130, 0.1);
  }
  100% {
    border-color: rgba(27, 54, 93, 0.1);
    background: #fff;
  }
}
@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;
  }
  /* Direction is NOT overridden here: the label stays on the same row as the
     period select and the compare action at every width (see the base rule). */
  .md-stats-filter__period-stack {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  /* The compare button's caption wraps to two lines in this range, so the bar is
     taller than one control — the base 999px pill radius would read 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;
    /* `clip` companion — see the base `.md-shell` rule (~43788) and the ≤1024
       scroll-guard block above. `hidden` alone makes the workspace a scrolling
       box on Y that can never scroll, which captures every `position: sticky`
       inside it. */
    overflow-x: hidden !important;
    overflow-x: clip !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):not(.md-board-detail--dark) {
  padding-top: 2px !important;
  /* Published for .md-board-detail-layout's min-height calc below. That calc sizes
     the layout to the full viewport, but the layout sits INSIDE this padding — so
     without subtracting it the page is always exactly this much taller than the
     screen and scrolls by 2px. Declared here, next to the padding it mirrors, so
     the two cannot drift apart. Unset (→ 0px fallback) in edit/dark, which have
     padding-top: 0. */
  --bd-shell-pad-top: 2px;
  /* SPEAK mode: flatten the atmospheric shell gradient (defined on
     .md-shell--board-detail below) to the SAME flat surface as
     .md-board-detail-main. The main is now $brand-charcoal-dark (design pass) —
     this rule used to match an OLDER main color (color.adjust($surface-200,-15%)),
     so after the main went dark, the shell's 2px top strip + side surround stayed
     light and read as a thin lighter seam at the top. Match the shell to the main's
     ACTUAL color so every surface behind/around the board is one flat surface (no
     seam). EDIT mode is excluded so it keeps its atmospheric page bg; dark mode is
     excluded so its atmospheric canvas rule (.md-board-detail--dark.md-shell--board-detail,
     !important) still wins. !important is REQUIRED here: the global app-shell rule
     `.md-shell { background: <gradient> !important }` (~L42990, shared by every
     authenticated view — do NOT edit it) paints the shell via !important, so only an
     !important on this higher-specificity board-detail-scoped selector can override it. */
  background: #374151 !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 is flush with the
     shell so the board/sentence bar reaches the top; keep 2px at the bottom. */
  padding: 0 0 2px;
  /* 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.
     `--bd-shell-pad-top` is the shell's own top padding (2px in speak mode,
     declared next to that padding above). The layout is nested INSIDE it, so
     without subtracting it the page is always exactly that much taller than the
     viewport — a permanent 2px scrollbar with nothing to scroll to, which on a
     375px-tall phone reads as "the board doesn't fit". This is the authoritative
     height for speak mode: it outranks both the `height: auto` and the
     `min-height` in the ≤820px block, so the subtraction has to happen HERE. */
  height: calc(100dvh - var(--topbar-height, 68px) - var(--bd-shell-pad-top, 0px));
  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-top: 8px;
  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;
}

/* EDIT page center panel — SAME dark surface as speak mode (per request): the
   $brand-charcoal-dark board surface lives on .md-board-detail-main (its base rule),
   flush (no border/radius/shadow via the broadened `:not(.md-board-detail--dark)
   .md-board-detail-main` rule below). The LAYOUT carries that SAME dark surface (per
   request) so the whole edit canvas — center board + the side-panel gutters — reads
   as one continuous dark surface (main is flush, so it blends into the layout).
   Light-scoped; dark mode keeps its own main treatment. */
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-detail-layout {
  background: #374151;
}

/* ── 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;
}

/* The error is presented as a discrete CARD on the board canvas rather than bare
   centred text, so it reads as a considered state instead of a failure dump. */
.md-board-detail-error__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  padding: 36px 32px 32px;
  border-radius: 20px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.04), 0 12px 32px rgba(27, 54, 93, 0.1);
}

/* Icon disc — RED, not the brand verdigris. A green badge on a failure state
   reads as "all good" at a glance and contradicts the message underneath, which
   is the one thing this page must not do. $brand-danger (#C0392B) measures
   5.44:1 on the card, well past the 3:1 non-text floor. Still a NON-TEXT accent
   only: no copy on this page is tinted, so the 4.5:1 text floor never applies. */
.md-board-detail-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #C0392B;
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.22);
  /* Anchors the slash below, and clips it to the disc so the bar reads as a
     chord across the whole badge rather than a rectangle poking out of it. */
  position: relative;
  overflow: hidden;
}

/* The "unavailable" slash, drawn across the ENTIRE badge rather than just the
   board glyph. It lives here, not in the SVG, because the badge (68px) is bigger
   than the icon's 24x24 viewBox — a line long enough to cross the disc would be
   clipped at the SVG viewport. Over-sized to 130% and rotated about the centre,
   so after the circular clip the visible bar spans the full diameter at any size.
   2px matches the glyph's rendered stroke (1.6 at 34/24 scale ≈ 2.3px). */
.md-board-detail-error__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -15%;
  width: 130%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}

.md-board-detail-error__title {
  /* AAC legibility floor — roughly 30% above a typical web heading at this level. */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  /* Full navy on the white card = 12.12:1. */
  color: #1B365D;
  margin: 0;
  max-width: 480px;
}

.md-board-detail-error__message {
  font-size: 19px;
  line-height: 1.5;
  /* navy @85% over the card = 7.71:1 — comfortably past the 4.5:1 AA floor. */
  color: rgba(27, 54, 93, 0.85);
  margin: 0;
  max-width: 520px;
}

.md-board-detail-error__retrying {
  font-size: 16px;
  /* WAS navy @60% = 3.70:1 on the card — an AA FAIL for normal-size text.
     @75% measures 5.67:1. Italic dropped too: it cost legibility at this size
     for no semantic gain, and the spinner already signals "in progress". */
  color: rgba(27, 54, 93, 0.75);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Activity ring for the retry state. Deliberately NEUTRAL navy rather than a
   status colour: green would repeat the "all good" mis-signal the red badge
   exists to avoid, and red would imply the retry itself had failed. */
.md-board-detail-error__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(27, 54, 93, 0.2);
  border-top-color: #1B365D;
  animation: md-board-detail-error-spin 0.7s linear infinite;
}

@keyframes md-board-detail-error-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Respect a reduced-motion preference — this is an AAC app and spinning motion
   is a known trigger; the text alone still communicates the state. */
@media (prefers-reduced-motion: reduce) {
  .md-board-detail-error__spinner {
    animation: none;
    border-top-color: rgba(27, 54, 93, 0.2);
  }
}
.md-board-detail-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 640px;
}

/* px, NOT rem: this stylesheet inherits bootstrap's `html { font-size: 10px }`
   (app.scss:5366), so the `1.05rem` these carried rendered at 10.5px and the
   retry link's `1rem` at 10px — both under the 14px floor, and far under this
   app's AAC type requirement. See LEARNINGS "rem is a trap in this codebase". */
.md-board-detail-error__action {
  font-size: 17px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
}

.md-board-detail-error__action--primary {
  font-weight: 600;
}

.md-board-detail-error__retry,
.md-board-detail-error__retry-link {
  font-size: 15px;
  padding: 10px 24px;
}

.md-board-detail-error__retry-link {
  appearance: none;
  background: none;
  border: none;
  /* WAS navy @65% = 4.24:1 on the card — just under the 4.5:1 AA floor for
     normal-size text. @75% measures 5.67:1. */
  color: rgba(27, 54, 93, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
  border-radius: 8px;
}

.md-board-detail-error__retry-link:hover,
.md-board-detail-error__retry-link:focus-visible {
  color: rgba(27, 54, 93, 0.95);
}

/* Dark board surface: the navy card + text would be unreadable against the dark
   canvas, so the whole card flips. Measured on a ~#16202E canvas: white @95%
   title = 14.9:1, @85% body = 12.2:1, @70% retry text = 8.6:1 — all well past AA. */
.md-board-detail--dark .md-board-detail-error__card {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.md-board-detail--dark .md-board-detail-error__icon {
  /* Lightened danger red — #C0392B is only ~2.2:1 on the dark canvas, under the
     3:1 non-text floor, so it lifts to #E86B5E (5.23:1) rather than staying the
     light-mode value. */
  color: #E86B5E;
  background: rgba(232, 107, 94, 0.14);
  border-color: rgba(232, 107, 94, 0.32);
}

.md-board-detail--dark .md-board-detail-error__title {
  color: rgba(255, 255, 255, 0.95);
}

.md-board-detail--dark .md-board-detail-error__message {
  color: rgba(255, 255, 255, 0.85);
}

.md-board-detail--dark .md-board-detail-error__retrying {
  color: rgba(255, 255, 255, 0.8);
}

.md-board-detail--dark .md-board-detail-error__spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-error__retry-link {
  color: rgba(255, 255, 255, 0.7);
}

.md-board-detail--dark .md-board-detail-error__retry-link:hover,
.md-board-detail--dark .md-board-detail-error__retry-link:focus-visible {
  color: rgba(255, 255, 255, 0.95);
}

/* ── 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;
  /* Glassy glossy scroll surface (2026-07) — same recipe as the speak bar, so the
     sidebar scroll area reads as one glass panel. LIGHT mode; the dark override
     below keeps dark transparent. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(238, 244, 251, 0.64) 100%);
  backdrop-filter: blur(20px) saturate(185%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 14px 22px -16px rgba(255, 255, 255, 0.65), inset 0 -10px 22px -18px rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 12px 30px rgba(27, 54, 93, 0.12);
  margin: 4px 8px 4px 4px;
}

.md-board-detail--dark .md-board-detail-sidebar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.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 {
  /* The sidebar CONTAINER (.md-board-detail-sidebar) now carries the glass, so
     the sections are quiet groupings ON that one glass surface — NOT their own
     glass panels. No second backdrop-filter (which would frost the container
     instead of the board and read as glass-on-glass); just a faint white tint +
     hairline to delineate the grouping. */
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 10px 10px 8px;
  margin-bottom: 12px;
  box-shadow: none;
  transition: background 0.18s ease;
}

.md-board-detail-sidebar__section:hover {
  background: rgba(255, 255, 255, 0.3);
}

.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;
  /* Brand dark-charcoal slate surface behind the board (design pass 2026-07-23) —
     replaces the earlier light-gray wash so the board grid reads with strong
     contrast against a solid dark canvas (matches the classic board-alt speak
     surface). LIGHT mode only — dark mode overrides this background (see
     `.md-board-detail--dark .md-board-detail-main`). This is the SPEAK-mode page
     surface (also inherited by the non-edit integration/collection board views);
     EDIT mode keeps the centered board panel at $surface-200 and moves its surface
     onto .md-board-detail-layout instead (see the
     `.md-shell--board-detail-edit:not(.md-board-detail--dark)` rules below). */
  background: #374151;
  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 **and EDIT** 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. Now scoped to BOTH modes (light) so edit mode
   matches speak (per request — was speak-only); dark keeps its own treatment. The
   0,2,0 selector beats the base .md-board-detail-main (0,1,0) regardless of source
   order — the same mode-scoping pattern the dark variants use, not a patch. */
.md-shell--board-detail: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. */
.md-shell--board-detail-edit .md-board-detail-grid-sidebar-wrap {
  /* Match speak mode: NO recessed "well" — transparent so the dark board surface
     on .md-board-detail-main shows through exactly like speak+light. Keeps only the
     spacing; the light bg / border / radius / shadow that made it a distinct panel
     are removed so edit and speak read identically. */
  /* Left/right padding + margin removed (were 12px pad / 4px margin) so the board
     grid runs edge-to-edge to the side rails in edit mode — reclaims ~16px each
     side. Top/bottom kept (0 top; bottom pad 10 / margin 4). */
  padding: 0 0 10px;
  margin: 0 0 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* "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. */
.md-shell--board-detail-edit.md-board-detail--dark .md-board-detail-grid-sidebar-wrap {
  /* Match speak mode in dark too: no recessed "well" — transparent so the dark
     board surface shows through (per request, edit always matches speak). */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* "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. */
/* The modeling button shares this surface verbatim — it is the same control
   family sitting directly under Home. Only its INK differs (verdigris, set in
   .md-board-detail-modeling-btn below), because it is a state indicator rather
   than navigation. Joined here rather than copied so the two cannot drift. */
.md-board-detail-home-btn,
.md-board-detail-modeling-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,
.md-board-detail-modeling-btn:hover {
  background: rgba(110, 122, 140, 0.42);
}

.md-board-detail-home-btn:active,
.md-board-detail-home-btn:focus-visible,
.md-board-detail-modeling-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 cluster — Home, plus (inside a folder) a Back button to its RIGHT.
   Horizontal (not stacked): Back sits beside Home and widens the cluster, pushing
   the sentence bar right when it appears, instead of dropping beneath Home where
   users read it as a second "home". `align-items: stretch` sizes both buttons to
   the sentence-bar row height. 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: row;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
  margin-right: -8px;
}

/* Shared layout for BOTH nav buttons: a compact icon-above-label control. Fixed
   width so Home + Back read as a matched pair; height comes from the row (stretch),
   and the icon+label stay centered at a fixed size so they don't balloon on tall
   sentence-bar presets or overflow the shortest one. Overrides the base home-btn's
   row direction / 56px width / -8px margin / 10px padding. */
.md-board-detail-nav-stack .md-board-detail-home-btn,
.md-board-detail-nav-stack .md-board-detail-modeling-btn,
.md-board-detail-nav-stack__back {
  flex: 0 0 auto;
  width: 60px;
  min-height: 0;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  margin-right: 0;
}

.md-board-detail-nav-stack .md-board-detail-home-btn svg,
.md-board-detail-nav-stack__back svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  /* Unify the two icons' stroke (house shipped at 1.25, chevron at 2.5) so the
     pair reads as one icon set. CSS beats the SVG's presentation attribute.
     Thinned 2 → 1.5 so the Home/Back icons read lighter (per request). */
  stroke-width: 1.5;
}

/* Small label under each icon (Home / Back). */
.md-board-detail-nav-btn__label {
  font-size: 11px;
  /* Lighter weight (600 → 500) so the label reads thinner alongside the thinner
     icon (per request). */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* "Try this Board" return control (board-detail).
   Deliberately LARGER than the Home/Back pair beside it and carrying a glow: it
   is temporary chrome for a board the user is only trialling, so it has to read
   as the way out without being mistaken for the permanent nav. Sits to the LEFT
   of .md-board-detail-nav-stack, so left of Home.
   Rendered only while app_state.board_detail_try_origin names this board --
   see controllers/user/board-detail#show_try_back_nav. */
.md-board-detail-try-back {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Wider than the 60px nav pair so the size difference is legible rather than
     looking like a rendering accident. */
  width: 78px;
  min-height: 0;
  padding: 8px 8px;
  margin-right: 6px;
  border-radius: 18px;
  border: 2px solid rgba(42, 157, 143, 0.85);
  background: rgba(42, 157, 143, 0.22);
  color: #fff;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  cursor: pointer;
  /* HIERARCHICAL GLOW: three stacked shadows, tight to diffuse, so the control
     reads as lifted above the nav row rather than merely tinted. */
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.3), 0 0 18px 2px rgba(42, 157, 143, 0.45), 0 6px 22px rgba(0, 0, 0, 0.28);
  animation: md-try-back-glow 2.6s ease-in-out infinite alternate;
}

.md-board-detail-try-back svg {
  flex-shrink: 0;
  /* Larger than the nav pair's 22px, matching the size step-up above. */
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.md-board-detail-try-back__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.md-board-detail-try-back:hover {
  background: rgba(42, 157, 143, 0.34);
}

.md-board-detail-try-back:active {
  transform: translateY(1px);
}

.md-board-detail-try-back:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@keyframes md-try-back-glow {
  from {
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.3), 0 0 18px 2px rgba(42, 157, 143, 0.45), 0 6px 22px rgba(0, 0, 0, 0.28);
  }
  to {
    box-shadow: 0 0 0 5px rgba(42, 157, 143, 0.16), 0 0 30px 6px rgba(42, 157, 143, 0.6), 0 6px 22px rgba(0, 0, 0, 0.28);
  }
}
/* An AAC surface has users who are sensitive to motion, and this control sits in
   the permanent chrome row. Hold the lit end of the animation rather than
   dropping the glow entirely -- the emphasis is the point, the movement is not. */
@media (prefers-reduced-motion: reduce) {
  .md-board-detail-try-back {
    animation: none;
    box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.22), 0 0 24px 4px rgba(42, 157, 143, 0.52), 0 6px 22px rgba(0, 0, 0, 0.28);
  }
}
/* Back button — the secondary control beside the primary (glass) Home. Mirrors
   the right-side sidebar toggle: translucent blue-grey, charcoal icon+label,
   rounded to match Home. Only rendered inside a folder. */
.md-board-detail-nav-stack__back {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  /* Same surface as the Home button (mirrors .md-board-detail-home-btn): frosted
     chip in base/non-speak, white glass in speak (the two share the speak re-skin
     below). Was a blue-grey tint that read as a different control. */
  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;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(27, 54, 93, 0.1);
}

.md-board-detail-nav-stack__back:hover {
  background: rgba(110, 122, 140, 0.42);
}

.md-board-detail-nav-stack__back:active {
  transform: scale(var(--md-tap, 0.97));
}

.md-board-detail-nav-stack__back:focus-visible {
  outline: none;
  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-nav-stack__back {
  color: #fff;
}

.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;
}

/* Smaller screens — SHORT (<=500px tall, e.g. landscape phones) OR NARROW
   (<=600px wide, e.g. portrait phones / small tablets): 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 row doesn't eat the screen. The user's
   size preference is used at full size; this scales it DOWN on smaller viewports in
   EITHER dimension (so both a short landscape screen and a narrow portrait one are
   covered). Each reduced value is precomputed (= round(original * 0.7)). */
@media (max-height: 500px), (max-width: 600px) {
  .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.
   Also fires on very NARROW widths (<=420px, portrait phones), mirroring the
   <=600px width added to the <=500h block above; the width thresholds nest the
   same way the height ones do (420 < 600), so a narrow phone lands on 0.65. */
@media (max-height: 400px), (max-width: 420px) {
  .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.

   Only speak mode is affected: the edit page no longer renders a speak bar at
   all (the whole row is display:none-d while editing), so there is nothing for
   the toggle to hide there.

   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. */
/* 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 control — tells the supporter their taps are being logged as
   modeling actions, not communicator actions. Click to pause/resume.

   MOVED 2026-08-17 out of the sentence bar (hence the rename from
   `.md-board-detail-sentence-bar__modeling-badge`) to sit under the Home button
   as a third nav button. Shape now matches .md-board-detail-nav-stack__back —
   icon over an 11px label at the shared 60px width — so Home / Modeling / Back
   read as one control family. Colour stays verdigris: it is a STATE indicator,
   not navigation, and that is the one thing distinguishing it from its
   neighbours. */
/* Everything structural (fill, border, radius, blur, elevation, hover, active,
   focus ring) comes from the shared .md-board-detail-home-btn rules above. What
   is left here is only what MUST differ: the ink. Later in source than the base
   rule at equal specificity, so this colour wins. */
.md-board-detail-modeling-btn {
  width: 100%;
  color: #1A7B7A;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* The label inherits the nav-button label size (11px); the icon keeps its own
   fill-based artwork rather than the stroked nav icon set. */
/* Dark mode: Home flips to white ink; modeling keeps its verdigris identity,
   lightened for contrast on the dark surface. Deliberately NOT added to the
   `.md-board-detail--dark .md-board-detail-home-btn { color: #fff }` rule. */
.md-board-detail--dark .md-board-detail-modeling-btn {
  color: rgb(98.1577889447, 213.0422110553, 199.056281407);
}

.md-board-detail-modeling-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Home + modeling share a column so modeling sits directly UNDER Home at the
   same width. Home is the flexible child, so it gives up exactly the modeling
   button's height when modeling is active and reclaims it when not — that is
   the "Home shrinks when modeling shows" behaviour, done by the layout rather
   than by a second competing rule. */
.md-board-detail-nav-stack__home-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 4px;
  flex: 0 0 auto;
  width: 60px;
  min-height: 0;
}

.md-board-detail-nav-stack__home-col .md-board-detail-home-btn {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* With modeling showing, the column holds TWO stacked buttons instead of one
   tall Home, so each is roughly half the height — and the 18px radius Home
   wears when it owns the full column reads as over-rounded on a short button
   (the curve starts eating the icon). Tighten both to 12px so the pair still
   reads as one stacked unit.

   Keyed on `:has(.md-board-detail-modeling-btn)` rather than a class the
   template toggles: the modeling button's mere presence IS the condition, so
   there is no second source of truth to keep in sync. `:has()` is used
   extensively in this file already. Both children are named explicitly so the
   radii can never diverge from each other. */
.md-board-detail-nav-stack__home-col:has(.md-board-detail-modeling-btn) .md-board-detail-home-btn,
.md-board-detail-nav-stack__home-col:has(.md-board-detail-modeling-btn) .md-board-detail-modeling-btn {
  border-radius: 12px;
}

.md-board-detail-modeling-btn:active {
  transform: scale(var(--md-tap, 0.97));
}

/* 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. */
/* Paused — same surface, dimmed. The old variant swapped in its own verdigris
   fill; now that the button wears the Home surface, changing the fill would break
   the very match this control is meant to have. Opacity + the play-vs-pause icon
   carry the state instead. Two render contexts:
   - <button> (manual pause): interactive, resumes on one tap.
   - <span>   (auto pause on the supervisee's edit page): static, resumes on exit. */
.md-board-detail-modeling-btn--paused {
  opacity: 0.7;
}

.md-board-detail-modeling-btn--paused:hover {
  opacity: 0.85;
}

span.md-board-detail-modeling-btn--paused {
  cursor: default;
}

span.md-board-detail-modeling-btn--paused:hover {
  opacity: 0.7;
}

.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 sentence bar also carries the speak action — tapping the composed message
   speaks it (a pointer bonus alongside the inline mic button). This used to be
   scoped away from a read-only edit-mode mirror of the row; that mirror is gone,
   so the row is only ever rendered live. */
.md-board-detail-sentence-row .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);
}

/* Delayed loading cue, shared by both prediction placements. The class is applied
   only once a lookup has been running longer than the cue delay (see
   suggestions_loading_visible in controllers/user/board-detail.js) — most lookups
   resolve in a few ms and a dim that flashes on and off is more disruptive than no
   cue at all.

   It is a DIM, deliberately not a spinner and never a size change: these tiles are
   motor targets, so nothing may move, resize, or change enough to read as a
   different control mid-reach. Pointer events are deliberately UNTOUCHED — the
   stale words stay live, because a dead target that swallows a dwell or a switch
   hit gives no feedback and costs the user a re-acquisition, which is worse than
   inserting a slightly stale but perfectly valid word. */
.md-board-detail-sentence-bar__prediction-group--is-loading,
.md-board-detail-prediction-rail--is-loading {
  /* The cue is on the tile SURFACE, never on the text. `opacity` on the tile is a GROUP operation —
     it multiplies the label's alpha too — and the LIGHT rail's label is only ~5.1:1 against the
     board at the top of its gradient, so any group dim breaks WCAG 1.4.3 there: 0.55 measures
     ~2.9:1, and even 0.8 reaches only ~4.06:1, under the 4.5:1 that applies because the label can
     be 13px. The tiles stay live and clickable, so the inactive-component exemption does not apply.

     Set as VARIABLES ON THE ANCESTOR and inherited by the tiles, rather than as properties on the
     tiles: the dark-mode tile rule sits ~13,500 lines later at identical specificity, so a direct
     property here lost to it on source order and the cue silently did not render in dark mode at
     all. Inheritance has no specificity contest to lose.

     One value set serves both themes. Fading the tile RAISES label contrast, since it darkens
     under white text: the light RAIL is the tightest surface and measures 5.06:1 at the shipped
     0.22 and 7.10:1 at 0.10. (An earlier revision of this comment named the light IN-BAR as the
     tightest with a 0.136 ceiling; that was computed without the group's own rgba(0,0,0,0.55)
     backing, and the in-bar label actually measures 6.92:1 at 0.22. The rail is the binding
     case.) The dark-rail ceiling for a 4.5:1 label is 0.377. Recompute against the RAIL if these
     are retuned.

     The hover pair exists because :hover redeclares the same `background` shorthand at higher
     specificity: with literals there, hovering a tile mid-lookup silently cancelled its cue —
     and on touch devices sticky hover kept it cancelled — so the one tile the user was reaching
     for was the one that stopped showing it. --pred-img-a does the same job for the placeholder
     symbol, whose [src$="square.svg"] rule outranks the img dim below. */
  --pred-tile-a-hi: 0.10;
  --pred-tile-a-lo: 0.03;
  --pred-tile-border-a: 0.16;
  --pred-tile-hover-hi: 0.10;
  --pred-tile-hover-lo: 0.03;
  --pred-tile-hover-border-a: 0.16;
  --pred-img-a: 0.5;
}

/* The symbol may fade — it is not text, and 1.4.11 does not apply to it. */
.md-board-detail-sentence-bar__prediction-group--is-loading .md-board-detail-sentence-bar__prediction-img,
.md-board-detail-prediction-rail--is-loading .md-board-detail-sentence-bar__prediction-img {
  opacity: 0.5;
}

/* Word-prediction rail (<=1024px). 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;
  /* Single column that MIRRORS THE BOARD'S ROW STRUCTURE: the same number of rows
     as the board (--prediction-rows) as minmax(0,1fr) tracks, the board's EXACT
     row gap, and the rail pinned to the board grid's height (--prediction-grid-h)
     with the grid's own measured top inset (--prediction-rail-pad-top). So each
     prediction tile lands in the SAME row band as the board button beside it; the
     tile rule below then insets it to the CARD's box within that band so the two
     line up 1:1 at every screen size and in every folder setting (all published by
     _sync_prediction_tile_size in controllers/user/board-detail.js). A GRID, not a
     flex column: the flex column shrank its tiles to fit a max-height and they
     drifted out of line with the board rows. The suggestion list is capped to the
     row count (prediction_rail_suggestions) so tiles never overflow the tracks.
     Width matches one board cell; left margin matches the board's COLUMN gap.
     Fixed fallbacks keep a sensible column if measurement hasn't run yet. */
  grid-template-rows: repeat(var(--prediction-rows, 4), minmax(0, 1fr));
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--prediction-tile-w, 84px);
  height: var(--prediction-grid-h, 100%);
  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. The top inset mirrors the board grid's OWN padding-top,
     copied from its computed style (--prediction-rail-pad-top) rather than hardcoded:
     the grid uses `padding-top: var(--bd-grid-top, 4px)` and the short-viewport rules
     set that to 0, so a literal 4px misaligned row 1 there. No bottom inset so the
     last row aligns too. */
  /* Panel surface — the same glass the tiles use, so the rail reads as one component
     rather than tiles floating on the board canvas. Literal alphas, NOT the --pred-tile-*
     vars: those are lowered by --is-loading to dim the TILES, and a panel that dimmed with
     them would blunt the cue instead of backing it. The tiles composite over this, so they
     stay visibly raised against it.
     The hairline is an inset box-shadow rather than a border ON PURPOSE: a border would
     shrink the content box, and the tile is width:100% of it — the tile must stay exactly
     one board button wide, so nothing here may change the content box except the padding
     below, which _sync_prediction_tile_size measures and compensates for. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 14px;
  /* Query container so the empty-state copy below can size itself against the PANEL's own
     width (cqw). The rail's width is set explicitly from JS, so inline-size containment
     cannot feed back into it. The tiles are containers in their own right, so their labels
     still resolve against the tile, not this. */
  container-type: inline-size;
  /* Horizontal padding insets the tiles from the panel edge. It is READ BACK in JS and
     added to the solved width, so the tiles stay board-button-sized and the board simply
     yields the extra. Bottom stays 0 so the last row still aligns with the board's. */
  padding: var(--prediction-rail-pad-top, 4px) 4px 0;
  /* Top margin mirrors the GRID's own margin-top (`.md-board-detail-grid.board.speak`
     has 6px, reset to 0 on short/narrow viewports) — without it the rail starts at the
     flex row's top while the board starts a margin lower, and every row band is off by
     that much even though the heights match exactly. Measured, not hardcoded, because
     that margin changes with the viewport. */
  margin-top: var(--prediction-rail-margin-top, 0px);
  margin-left: var(--prediction-rail-gap-left, 8px);
}

/* Empty state. The rail stays mounted with no tiles (it holds the board's width), so
   without this the panel is a blank column with no explanation. Spans every row so the
   message centres in the panel rather than sitting in row 1. The rail is narrow — one board
   button wide — so the copy has to stay short enough to wrap gracefully. */
.md-board-detail-prediction-rail__empty {
  /* Spans every row so it cannot create an implicit extra track and push the panel taller
     than the board grid, but the message sits at the TOP of that span — centring it in a
     full-height panel read as the text floating in the middle of an empty column. */
  grid-row: 1/-1;
  min-height: 0;
  /* A grid item's automatic minimum size is its MIN-CONTENT width, so without this the box
     refuses to shrink below the longest word and spills past the panel — measured 94px wide
     inside a 71px rail, which reads as "the text is not centred" because it is centred in a
     box wider than its container. `min-width: 0` lets it shrink to the track; break-word
     then handles a word longer than the (deliberately narrow) panel, which matters most for
     translations, since this string lives in the narrowest element on the page. Same trap
     the tile rule above documents. */
  min-width: 0;
  /* Never break mid-word. Breaking "predictions" across two lines is the one thing this
     copy must not do — a fragment reads as a typo, and in an AAC surface the visual shape of
     a word is itself a recognition cue (the board label rule keeps `word-break: keep-all`
     for the same reason). The size below is what makes the longest word FIT, so there is
     nothing to break. */
  overflow-wrap: normal;
  word-break: keep-all;
  /* A BLOCK, not a flex container. As a flex container the text became an anonymous flex
     item, and a flex item carries its own automatic minimum size — so it refused to wrap
     below the longest word no matter what min-width the container had, and the message
     spilled symmetrically past both panel edges. A block box has no such item to fight:
     text-align centres the lines and overflow-wrap can break a word that genuinely cannot
     fit. Top alignment comes free, since block content starts at the top of the span. */
  display: block;
  text-align: center;
  /* Minimal side padding: this is the narrowest element on the page, and every px spent
     here is a px the longest word does not get. The panel's own 4px already holds the copy
     off the edge. */
  padding: 10px 2px 0;
  /* 14px, FIXED. This is an AAC surface: text is held at or above 14px regardless of how
     narrow the panel gets, so it is never shrunk to fit. An earlier revision sized this
     against the panel with a 9px floor — that made the copy fit at any column count by
     trading away legibility, which is not a trade this app makes. If the copy does not fit,
     the copy is what changes. */
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

/* The spine label replaces the sentence below 640px (see that breakpoint); above it, the
   panel is wide enough for the real copy. */
.md-board-detail-prediction-rail__empty-spine {
  display: none;
}

/* Tiles match the board button box (measured vars, fixed fallbacks). */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction {
  width: 100%;
  /* Zero, so the tile's CONTENT box matches the card's. Matching the card's padding value
     (`1px clamp(1px, 1%, 4px)`) is NOT the same thing and measured 2px short: the tile
     carries a 1px border the card does not, so equal padding leaves a smaller content box.
     What has to match is what the symbol gets, not what the declaration says. Measured at
     14 columns: card content 33px, tile content 33px, painted symbol 33px on both. */
  padding: 0;
  /* Override the base tile's `min-width: 44px`. The rail's width tracks one board
     button (--prediction-tile-w), so on a many-column board that width can be under
     44px; with the floor in place the tile stays wider than the rail's content box and
     spills past its right edge. Letting it shrink to the rail width keeps the two in
     step. The image scales with the tile (see the rail __prediction-img rule below), so
     a sub-44px tile stays legible.
     NOTE: an earlier version of this comment attributed the spill to "the rail's
     overflow-y:auto, which makes overflow-x compute to auto". The rail declares no
     overflow property at all — that rationale described a mechanism that cannot run. */
  min-width: 0;
  /* Match the board CARD's box inside the row band — NOT the band itself. The rail's
     minmax(0,1fr) tracks already mirror the board rows, but a card does not fill its
     cell: every folder setting reserves a different slice of cell top space for the
     tab (default folders 0.14 x --bd-cell-min on every cell, Show-Labels-on-Tab
     8/10px + a calc(100% - 18px) card, colored-corner 0, folder-less boards none), so
     a band-filling tile floated above the card beside it by exactly that reserve.
     --prediction-tile-inset-top / --prediction-tile-h are the card's MEASURED offset
     and height (_sync_prediction_tile_size), which is why one rule covers every
     folder mode. The calc() fallback keeps the old band-filling behavior until the
     first measurement lands. Still REQUIRED to override the base in-bar pill's fixed
     `height: 78px` — with that leaking through, tiles stayed 78px tall and floated in
     the (correctly tall) rows, leaving big gaps. min-height:0 lets the image + label
     shrink to honor the height on dense boards instead of growing the tile past it. */
  margin-top: var(--prediction-tile-inset-top, 0px);
  height: var(--prediction-tile-h, calc(100% - var(--prediction-tile-inset-top, 0px)));
  min-height: 0;
  /* Symbol-to-word spacing. Tighter than the base tile so the symbol keeps as much of
     the tile's height as possible — the rail tile is exactly one board button tall, and
     every px spent here is a px the symbol does not get. */
  gap: 2px;
  /* 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 {
  /* Fill the tile's width the way a board symbol fills its card
     (app.scss:80551-80568 sets the board img `width:100%` + `object-fit:contain` so a
     small-canvas symbol scales UP instead of sitting at intrinsic size). `width:auto` +
     `max-width:80%` left the rail symbol both smaller and inset from the tile, which is
     what made it read as a lesser button than the one beside it.
     `flex: 1 1 0` is KEPT rather than the board's `flex:1 1 auto` + `height:100%`: the
     board's height comes from a holder element the rail has no equivalent of (the rail img
     is a bare flex child, board-detail.hbs:2029-2033), and a percentage height here would
     go cyclic on the first paint before --prediction-tile-h lands and inflate the tile to
     the symbol's intrinsic size. The flexed main size already gives the same used height.
     Deliberately NOT copying the board img's `opacity: 1`: the --is-loading dim
     (app.scss:72736) is the same specificity and EARLIER in source, so declaring opacity
     here would silently win and kill the loading cue. */
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-width: 100%;
  /* No dashed frame on the RAIL. The frame is the in-bar placement's "this is a
     suggestion" affordance, and it costs 3px padding + 1.5px border per side — which, with
     object-fit:contain, shrinks the painted symbol by twice that on the binding axis. On a
     14-column board that measured 25px against the board button's 33px: the same word,
     visibly smaller, right beside it. The rail sits in the board grid and reads as another
     column, so the tile's own glass surface is the affordance there; the in-bar group keeps
     the dash (base rule below, untouched). */
  padding: 0;
  border: 0;
}

/* Placeholder (missing-image) symbol on the rail: square.svg is a translucent
   brand-coloured photo glyph, which reads DIM on the dark board surface the rail
   sits on (base tiles are 0.85 opacity with no backing). Give the placeholder full
   opacity + a light frosted backing (mirrors the dark-mode lift) so the glyph
   composites over white and reads bright and clear instead of muddy. */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction-img[src$="square.svg"] {
  /* Through the shared alpha, not a literal: at (0,2,1) this rule outranks the --is-loading
     img dim, so a literal `1` meant a prediction whose symbol failed to resolve showed no
     loading cue on its symbol at all. */
  opacity: var(--pred-img-a, 1);
  background: rgba(255, 255, 255, 0.85);
}

/* 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 {
  /* Fallback coefficient tracks the board label rule (26 / 13px floor) so the
     pre-measurement paint is already the right size. Stays `cqw`, NOT `cqmin`
     like the board card: this tile is an `inline-size` container, and in one of
     those the block axis is unavailable, so `cqmin` would silently resolve
     against the small-viewport size instead of the tile. */
  font-size: var(--prediction-label-font, clamp(13px, 26cqw, var(--bd-button-text-size, 15px)));
  /* The rail sits on the DARK board surface in light mode too — the prediction
     tiles show the dark canvas through — so dark text is unreadable here. Use
     light text for legibility (matches the dark-mode rule below). */
  color: rgba(255, 255, 255, 0.95);
  /* Truncate exactly as a board label does. The rail label previously declared no
     overflow, no clamp and no ellipsis at all, so a prediction longer than the tile did not
     truncate — it spilled out of the tile and over the board. These are the board label's
     own declarations (`.md-board-detail-symbol-card__label`), copied so the two read as one
     set of buttons: wrap at word boundaries only, never mid-word (the visual shape of a word
     is a recognition cue for AAC users), cap at three lines and ellipsise past that.
     `max-height` only CAPS, so a one-word prediction is unaffected — this changes nothing
     until a label would otherwise have overflowed. Scoped to the rail: the in-bar placement
     keeps its own behaviour. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 3.45em;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* CONSTRAINING THE BOX is what makes the clip mean anything, and it is load-bearing.
     The tile is a COLUMN flex container with align-items:center, so the label's cross size
     is AUTO — it sizes to its own content. `overflow: hidden` then clips inside a box that
     is itself wider than the tile, and the label still spills over the board: measured 101px
     inside a 33px tile, which is the state this rule exists to prevent.
     Verified by mutation: removing EITHER declaration alone changes nothing, because the
     other still constrains the box; removing BOTH reproduces the 101px spill. They are kept
     as a pair to mirror `.md-board-detail-symbol-card__label`, which carries width:100% for
     the same reason. */
  width: 100%;
  max-width: 100%;
}

/* 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: grid;
  }
  /* 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: grid;
}

.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. */
  /* Tile surface alphas come through custom properties so the LOADING state can retune them from
     the group/rail ancestor. The tile must never DECLARE these vars — its own declaration would
     beat the inherited one and the cue would stop working. */
  border: 1px solid rgba(255, 255, 255, var(--pred-tile-border-a, 0.3));
  background: linear-gradient(135deg, rgba(255, 255, 255, var(--pred-tile-a-hi, 0.22)) 0%, rgba(255, 255, 255, var(--pred-tile-a-lo, 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;
  /* No `opacity` here: nothing changes the TILE's opacity. The cue moves the IMG's, which
     is where the transition belongs (see __prediction-img below). */
  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, var(--pred-tile-hover-hi, 0.3)), rgba(255, 255, 255, var(--pred-tile-hover-lo, 0.12)));
  border-color: rgba(255, 255, 255, var(--pred-tile-hover-border-a, 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;
  /* The cue fades this element, so the easing belongs here. Without it the tile surface
     eased over 180ms while the symbol snapped — the abrupt change the delayed-cue design
     exists to avoid for CVI and attention differences. */
  transition: opacity 0.18s ease;
  /* 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);
  /* Static monitor icon — no rotation. The old md-portrait-phone-rotate animation was for the
     phone that flipped portrait→landscape; the overlay now recommends a larger screen, not a
     rotation, so the icon stays solid. */
}

.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;
  /* Brand verdigris, 25% lighter (swapped with the Continue Anyway button color). */
  color: rgb(70.9786432161, 205.7713567839, 189.3618090452);
}

.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;
}

/* The only button in every orientation overlay. Kept deliberately quiet — it is an
   escape hatch, not a call to action; the overlay's own copy carries the instruction.
   (A `--primary` "Rotate Device" button was removed 2026-08-15 along with its styles;
   no overlay has a primary action any more.) */
.md-board-detail-portrait-overlay__btn--secondary {
  padding: 8px;
  border: none;
  background: transparent;
  /* Brand verdigris (swapped with the title color) — the shared "Continue Anyway" across the
     larger-screen (board-detail) and create-board orientation overlays. */
  color: #2A9D8F;
  font-weight: 500;
}

.md-board-detail-portrait-overlay__btn--secondary:hover {
  color: rgb(70.9786432161, 205.7713567839, 189.3618090452);
  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);
  /* Circular mic — diameter tracks --nb-sb-btnh so it scales with the size
     class AND the responsive @media var block, exactly like the tool buttons'
     height (which also read --nb-sb-btnh). Hardcoded 55px froze it while the
     tools shrank on small screens / grew on large. 55px is the medium base. */
  width: var(--nb-sb-btnh, 55px);
  height: var(--nb-sb-btnh, 55px);
  min-width: var(--nb-sb-btnh, 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);
}

/* Keep the mic glyph DARK in light mode. The svg strokes with `currentColor` off
   the button's `color: $la-navy`; force the stroke explicitly (scoped to light —
   dark mode keeps its own light glyph via the .md-board-detail--dark rule) so no
   inherited/overriding `color` can wash the icon out on the light button. */
.md-shell--board-detail:not(.md-board-detail--dark) .md-board-detail-sentence-bar__btn--speak svg,
.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-sentence-bar__btn--speak svg {
  stroke: #1B365D;
}

/* The mic svg is the lone flex child of the circular __btn--speak. On very short
   screens (≤400px tall, where the icon var drops to 11px) it was collapsing to
   0px WIDE while keeping its height (a 0×11 box) — the classic main-axis flex
   shrink: the svg's automatic min-width let flexbox squeeze it to nothing. Pin it
   with `flex: none` (never grow/shrink) + an explicit min-width equal to its
   intended size so the glyph always renders at full width. Applies at all sizes
   (harmless where it already fit); the icon dimension still tracks --nb-sb-sbtn. */
.md-board-detail-sentence-row .md-board-detail-sentence-bar__btn--speak svg {
  flex: none;
  min-width: var(--nb-sb-sbtn, 18px);
}

/* 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;
}

/* Editing pill floats centered in its own row at the top of the edit header —
   the markup is a sibling of the title row rather than a child of it, 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;
  /* Lift the session bar into its own layer above the board content below it.
     (Its backdrop-filter already makes it a stacking context; a positive z-index
     keeps it above later position:relative rows in the header.) */
  position: relative;
  z-index: 5;
  /* 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. No bottom margin — the bar sits
     flush (per request). Full width of the center panel (the title column it lives
     in is stretched in edit mode — see the .md-shell--board-detail-edit rule below). */
  margin-bottom: 0;
  width: 100%;
  padding: 7px 12px 7px 16px;
  border-radius: 16px;
  /* SAME glass surface as the speak-mode compose bar (.md-board-detail-sentence-bar)
     — shared via the glass-bar-surface mixin so the two always match (per request).
     Layout above stays session-bar-specific. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(238, 244, 251, 0.64) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 14px 22px -16px rgba(255, 255, 255, 0.65), inset 0 -10px 22px -18px rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 12px 30px rgba(27, 54, 93, 0.12); /* soft outer elevation */
  color: #1B365D;
  will-change: transform;
  transform: translateZ(0);
}

/* Edit mode: the session bar spans the FULL center-panel width. It lives in a plain
   column div (.md-board-detail-header__title-col) inside the header title-group; in
   edit mode that column is the group's only child (the nav btns + board icon aren't
   rendered), so let it grow to the group's full width — the group itself already
   fills the header row (flex: 1 1 320px), so the bar reaches the panel edges. */
.md-shell--board-detail-edit .md-board-detail-header__title-col {
  flex: 1 1 auto;
  min-width: 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);
}

/* "Take a tour" — the LAST Board Action, in NORMAL FLOW at the end of the Board
   Actions list (after "Other Actions"), so it pushes the Search & Filter section
   below it down instead of floating over the expanded menu. Centered as a pill so
   it reads as a distinct helper affordance rather than another list row; a small
   top margin separates it from the last action row. */
.md-board-edit-panel__tour {
  display: flex;
  justify-content: center;
  margin: 8px 0 2px;
}

/* The trigger pill is `position: fixed` by default (its dashboard placement). Reset
   it to `static` so the WHOLE pill flows in the list and is 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. */
.md-board-edit-panel__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-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;
}

/* Board icon + name shown in the session bar (replaced the pencil + "Editing
   Board" status). Icon is a small board thumbnail; the name uses the standard
   title ink (not the teal status colour) and truncates on overflow. */
.md-board-edit-session__board-icon {
  flex: 0 0 auto;
  /* 25% larger than the prior 34px (per request); radius scaled to match. */
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid rgba(27, 54, 93, 0.12);
}

.md-board-edit-session__board-title {
  color: #374151;
  min-width: 0;
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-board-detail--dark .md-board-edit-session__board-title {
  color: #fff;
}

/* Rename affordance sitting immediately after the board name in the session bar:
   a quiet round ghost button that opens the Edit Board Details modal. Deliberately
   understated at rest (transparent, hairline ring) so it reads as an accessory to
   the title rather than a third action competing with Save / Cancel; it fills in
   with the same verdigris the session bar uses on hover. `flex: 0 0 auto` and the
   negative left margin pull it tight against the (truncating) title while the bar's
   11px gap still separates it from whatever follows. */
.md-board-edit-session__title-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -4px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.md-board-edit-session__title-edit:hover {
  background: rgba(42, 157, 143, 0.16);
  border-color: rgba(42, 157, 143, 0.55);
  transform: translateY(-1px);
}

.md-board-edit-session__title-edit:active {
  transform: translateY(0);
}

.md-board-edit-session__title-edit:focus-visible {
  outline: 2px solid #2A9D8F;
  outline-offset: 2px;
}

.md-board-detail--dark .md-board-edit-session__title-edit {
  border-color: rgba(143, 228, 223, 0.32);
}

.md-board-detail--dark .md-board-edit-session__title-edit:hover {
  background: rgba(143, 228, 223, 0.18);
  border-color: rgba(143, 228, 223, 0.62);
}

/* Dark mode: lighten the note-page outline of the pencil mark (stroked #46505F
   inline), same treatment the Editing pill's icon gets. The teal pencil accent
   stays as-is. */
.md-board-detail--dark .md-board-edit-session__title-edit svg path[stroke="#46505F"] {
  stroke: #eef3f6;
}

.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;
}

/* Exit to Home — a quiet text link sitting LEFT of Cancel. Styled as a link
   rather than a third button on purpose: Cancel and Save are the two ways to
   FINISH editing, and a third filled control beside them would compete with
   both. A little extra right margin separates it from that pair so the eye
   still groups Cancel+Save together. */
.md-board-edit-session__exit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  /* Verdigris, in the AA variant (documented 4.73:1 on white). The session bar
     is `glass-bar-surface` — a translucent WHITE gradient — so the earlier
     rgba(255,255,255,.82) here was near-invisible on it. The neighbouring
     Cancel/Save icons are light-toned because they sit on their own dark slate
     BUTTON, not on the bar. */
  color: #1A7B7A;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.md-board-edit-session__exit-link:hover {
  color: rgb(18.8805369128, 89.3194630872, 88.5932885906);
  background: rgba(42, 157, 143, 0.1);
}

.md-board-edit-session__exit-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #2A9D8F;
}

.md-board-edit-session__exit-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* Narrow: the session bar's actions become a stacked column so Exit / Cancel /
   Save each get a full-width row instead of being squeezed onto one line. The
   link loses its right margin (the column gap spaces it now) and centres with
   the buttons it sits above. */
@media (max-width: 640px) {
  .md-board-edit-session__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .md-board-edit-session__exit-link {
    margin-right: 0;
    justify-content: center;
  }
}
.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;
}

/* Below 820px the edit session bar gets cramped, so shrink the Save/Cancel buttons and their
   badges to reclaim room. This is the supporter/therapist edit toolbar (not an AAC communicator
   target), so a sub-44px touch target is acceptable here. Placed after the base button/badge
   rules so it wins by source order; the color-only discard/save variants don't touch size. */
@media (max-width: 820px) {
  .md-board-edit-session__btn {
    min-height: 36px;
    padding: 4px 12px 4px 5px;
    font-size: 13px;
    gap: 6px;
  }
  .md-board-edit-session__btn-badge {
    width: 20px;
    height: 20px;
  }
  .md-board-edit-session__btn-badge .md-board-edit-session__btn-icon {
    width: 14px;
    height: 14px;
  }
}
/* ≤640px: drop the "Cancel"/"Save" text so each button collapses to just its badge icon —
   reclaims horizontal room in the tightest session bars. Padding becomes a symmetric pad
   around the badge (the base is asymmetric for the badge-left + label-right layout) and the
   gap is zeroed since there's no label to space from. */
@media (max-width: 640px) {
  .md-board-edit-session__btn-label {
    display: none;
  }
  .md-board-edit-session__btn {
    padding: 4px;
    gap: 0;
  }
}
/* 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;
}

/* 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;
}

/* 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;
}

/* Public pill — same soft metadata chip as --private, in a blue tint
   (dusty-denim) so the open/globe indicator reads as the counterpart to
   the private verdigris. Structural sizing/shape/hover come from the
   shared .info-icon / meta-context / --clickable rules. */
.md-board-detail-header__info-icon--public {
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.04);
  color: #4C86D8;
}

.md-board-detail-header__info-icon--public svg {
  stroke: #4C86D8;
}

/* 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,
.md-board-detail--dark .md-board-detail-header__info-icon--public {
  /* 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,
.md-board-detail--dark .md-board-detail-header__info-icon--public 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);
}

/* 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,
.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-sentence-bar {
  padding: 2px 18px;
  gap: 18px;
  /* Glassy glossy surface — SHARED with the edit-mode session bar
     (.md-board-edit-session) via the glass-bar-surface mixin so the two always
     match (per request). The mixin is the translucent-white gloss formula (bright
     reflective top fading to a see-through lower half, strong blur + saturation, a
     crisp specular top edge + upper sheen bloom). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(238, 244, 251, 0.64) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 14px 22px -16px rgba(255, 255, 255, 0.65), inset 0 -10px 22px -18px rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 12px 30px rgba(27, 54, 93, 0.12); /* soft outer elevation */
  color: #1B365D;
  will-change: transform;
  transform: translateZ(0);
}

/* 2. Home + Modeling + Back buttons — same translucent-white treatment so the nav
   buttons + bar read as one coordinated rail on the bright canvas.
   The modeling button is included so its background MATCHES Home's; only its ink
   is pulled back to verdigris immediately below. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-home-btn,
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-modeling-btn,
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-nav-stack__back,
.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-home-btn {
  /* Same glassy glossy language as the bar, scaled for a button (smaller sheen
     bloom). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(238, 244, 251, 0.62) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #1B365D;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 8px 12px -9px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 14px rgba(27, 54, 93, 0.1);
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-home-btn:hover,
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-modeling-btn:hover,
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-nav-stack__back:hover,
.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-home-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(240, 246, 252, 0.7) 100%);
  color: #1B365D;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 8px 12px -8px rgba(255, 255, 255, 0.68), 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 18px rgba(27, 54, 93, 0.13);
}

/* Ink ONLY. The rail rule above legitimately sets navy for Home/Back; the
   modeling button must keep its verdigris identity (it is a state indicator, not
   navigation) and the icons are `fill="currentColor"`, so this covers glyph and
   label together. Placed AFTER the hover block, not before it: that block sets navy too
   (it must, to share the hover background), so an earlier rule lost on hover and
   the ink flickered navy on mouse-over. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-modeling-btn,
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-modeling-btn:hover {
  color: #1A7B7A;
}

/* 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,
.new-board-mockup-wrap: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,
.new-board-mockup-wrap: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 {
  /* Same glassy glossy language as the bar / nav buttons. !important to beat the
     base actions-toggle rule (which is all !important). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(238, 244, 251, 0.62) 100%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: rgba(27, 54, 93, 0.78) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 8px 12px -9px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 14px rgba(27, 54, 93, 0.1) !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-actions-toggle:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(240, 246, 252, 0.7) 100%) !important;
  color: #1B365D !important;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 8px 12px -8px rgba(255, 255, 255, 0.68), 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 18px rgba(27, 54, 93, 0.13) !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sidebar-toggle--stacked {
  /* Same glassy glossy language as the bar / nav buttons, scaled for a button.
     !important to beat the --stacked base rule (which is all !important). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(238, 244, 251, 0.62) 100%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: rgba(27, 54, 93, 0.78) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 8px 12px -9px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 14px rgba(27, 54, 93, 0.1) !important;
}

.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-sidebar-toggle--stacked:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(240, 246, 252, 0.7) 100%) !important;
  color: #1B365D !important;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 8px 12px -8px rgba(255, 255, 255, 0.68), 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 18px rgba(27, 54, 93, 0.13) !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 */
}
/* Dense boards (>10 columns) narrow the inline sidebar ~25% at EVERY breakpoint so the
   board grid reclaims the room (the grid is the flex:1 sibling in
   .md-board-detail-grid-sidebar-wrap and expands into the freed space automatically).
   Crucially, the inner content — board thumbnail, label, item padding — scales down by the
   same proportion so it stays composed instead of squishing into the narrower rail. Widths
   and content mirror the responsive tiers below at 0.75: base(>1024) width 112→84 / img
   60→45; ≤1024 width 80→60 / img 42→32; ≤768 width 70→53 / img 28→21. Label font is held at
   the AAC ≥11px readability floor (see the ≤768 note further down), so it steps 15→12→11
   rather than scaling below legibility. Gated by .md-shell--many-columns (set on the shell
   when current_grid.columns > 10). */
/* EXCEPTION to the 0.75 scale above: the base tier is 100px, not 112×0.75 = 84.
   The Edit pill at the sidebar's foot keeps its "Edit" LABEL above 1024px (the label
   only collapses to icon-only at ≤1024px), and the label does not scale with this
   rail — so 84px clipped the pill's trailing padding and border. Measured, all
   border-box:

     sidebar 100  − 2 (own borders)  − 16 (__scroll padding 8+8)      = 82 available
     pill      1 + 12 (padding) + 16 (icon) + 6 (gap) + ~26 ("Edit"@13px/600)
             + 12 (padding) + 1                                       ≈ 74 needed

   ~8px of slack, which also absorbs the shorter translations of `edit`. The ≤1024px
   and ≤768px tiers below are unaffected and keep the 0.75 scale, because the label is
   hidden there and only the icon has to fit.

   COST: 16px of board width on a many-columns board. That is the trade the wider pill
   is worth; if it ever needs reclaiming, hide the label here the way ≤1024px does
   rather than narrowing the rail back under the pill. */
.md-shell--many-columns .md-board-detail-inline-sidebar {
  width: 100px;
}

.md-shell--many-columns .md-board-detail-inline-sidebar__item {
  padding: 8px 6px;
}

.md-shell--many-columns .md-board-detail-inline-sidebar__img {
  width: 45px;
  height: 45px;
}

.md-shell--many-columns .md-board-detail-inline-sidebar__name {
  font-size: 12px;
}

@media (max-width: 1024px) {
  .md-shell--many-columns .md-board-detail-inline-sidebar {
    width: 60px;
  }
  .md-shell--many-columns .md-board-detail-inline-sidebar__item {
    padding: 5px 3px;
  }
  .md-shell--many-columns .md-board-detail-inline-sidebar__img {
    width: 32px;
    height: 32px;
  }
  .md-shell--many-columns .md-board-detail-inline-sidebar__name {
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .md-shell--many-columns .md-board-detail-inline-sidebar {
    width: 53px;
  }
  .md-shell--many-columns .md-board-detail-inline-sidebar__item {
    padding: 4px 2px;
  }
  .md-shell--many-columns .md-board-detail-inline-sidebar__img {
    width: 21px;
    height: 21px;
  }
}
.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;
}

/* When the My Board Collection drawer is open, temporarily hide the inline sidebar
   (any screen width/height). This is a VISUAL hide only — the sidebar is rendered by
   the user's `inlineSidebarOpen` / quick_sidebar preference, which we do NOT touch, so
   it reappears when the drawer closes (if they had it expanded). It's a flex child, so
   display:none lets the board reflow to fill the space — no gap. */
.md-shell--board-collection .md-board-detail-inline-sidebar {
  display: none;
}

/* 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;
  /* Truncate a too-long label to a single line with an ellipsis rather than
     wrapping (e.g. "Inflections" on a narrow sidebar). The block is width-
     constrained by the full-width .__item button, so ellipsis applies. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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: 112px;
  }
}
/* Narrow viewports (<=1024px): narrow the inline sidebar to 80px and shrink its
   board thumbnails/labels so they don't crowd the grid. The pin control is left
   alone so it keeps its 44px touch target. */
@media (max-width: 1024px) {
  .md-board-detail-inline-sidebar {
    width: 80px;
  }
  .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: 11px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 28px;
    height: 28px;
  }
  /* Was 8px — far below the AAC label-readability floor and a
     disproportionate drop from the ≤1024 tier (12px) for only a 80→70px
     width change. 11px stays legible; over-long labels ellipsis-truncate
     as they already do at ≤1024. */
  .md-board-detail-inline-sidebar__name {
    font-size: 11px;
  }
}
/* 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). */
/* NOTE: `and (max-width: 1024px)` — the sidebar only NARROWS on narrow viewports
   (112px >1024, 80px ≤1024, 70px ≤768); its width does NOT change with height. So
   this height-based content-shrink must ONLY fire when the sidebar is actually
   narrow. Without the width guard, a WIDE + short screen (e.g. 1227×389) kept the
   112px sidebar but shrank the label/icon to 10px/26px — tiny content in a big
   card. The guard keeps the full-size (15px) label on the wide sidebar. */
@media (max-height: 500px) and (max-width: 1024px) {
  .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: 11px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 32px;
    height: 32px;
  }
  /* Was 9px — bumped to 11px for AAC label readability on short screens
     (the 80px sidebar has room; matches the ≤768 name size). */
  .md-board-detail-inline-sidebar__name {
    font-size: 11px;
  }
}
/* <=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). `and (max-width: 1024px)` for the same
   reason as the <=500h block above — only shrink when the sidebar is narrow, so a
   wide+short screen keeps its full-size label. */
@media (max-height: 400px) and (max-width: 1024px) {
  .md-board-detail-inline-sidebar__item {
    padding: 4px 2px;
    font-size: 10px;
  }
  .md-board-detail-inline-sidebar__img {
    width: 26px;
    height: 26px;
  }
  /* Was 7px — unreadably small; 10px keeps AAC labels legible on the
     shortest rows (slightly under the ≤500h size since the row is tighter). */
  .md-board-detail-inline-sidebar__name {
    font-size: 10px;
  }
}
/* 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;
}

/* =<1024px: pull the options + sidebar stack 8px closer to the sentence bar — the same -8px
   the nav stack on the other side of the row already uses, so both ends of the row trim their
   share of the row's `gap: 13px` by the same amount. That idiom rather than changing the gap
   itself, which is shared and would then need compensating twice. Leaves a 5px channel here
   (12px was tried first and closed it to 1px, which read as touching). */
@media (max-width: 1024px) {
  .md-board-detail-sentence-bar__actions-wrap {
    margin-left: -8px;
  }
}
.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. */
/* Single source of truth for the pinned Board Collection drawer width, so the
   panel and the layout push it reserves stay identical at every breakpoint.
   Override this ONE variable per breakpoint (see ≤1024px below) and both track it. */
.md-shell--board-collection {
  --md-collection-drawer-w: 380px;
}

.md-board-detail-actions-menu--collection {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-height: 100vh;
  width: var(--md-collection-drawer-w, 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: var(--md-collection-drawer-w, 380px); /* == drawer width, exactly */
}

/* ≤1024px: narrow the pinned Board Collection drawer by 60px (380 → 320). Only the
   variable changes — the panel width and the layout push both read it, so they stay
   equal automatically at this (and any future) breakpoint. */
@media (max-width: 1024px) {
  .md-shell--board-collection {
    --md-collection-drawer-w: 320px;
  }
}
/* ── Edit-mode Board Collections drawer (LEFT variant) ────────────────
   Mirror of the speak-mode right drawer, but pinned to the LEFT edge and used
   in EDIT mode: the edit rail hides and this drawer takes its place, while the
   center board area is pushed RIGHT by the drawer width (no overlay, so the grid
   stays visible/interactive while browsing board-to-board). Reuses the same
   --md-collection-drawer-w token so width + push stay in lockstep. */
.md-shell--board-collection-left {
  --md-collection-drawer-w: 380px;
}

.md-board-detail-actions-menu--collection.md-board-detail-actions-menu--collection-left {
  right: auto;
  left: 0;
  /* Sharp LEFT edge (flush with viewport), rounded RIGHT edge — the left-side
     counterpart of the right drawer's 14px 0 0 14px. */
  border-radius: 0 14px 14px 0;
}

.md-board-detail-actions-menu--collection.md-board-detail-actions-menu--collection-left .md-board-collection__header {
  border-radius: 0 14px 0 0;
}

/* Rail hides — the drawer takes its place. */
.md-shell--board-collection-left .md-board-edit-panel {
  display: none;
}

/* Edit-mode collection: hide the per-row board language labels (the drawer only
   carries --collection-left in edit context, so speak mode is unaffected). Covers
   every row — Original Selected Board, My Boards, and the brand sections. */
.md-board-detail-actions-menu--collection-left .md-board-collection__item-lang {
  display: none;
}

/* Right SETTINGS panel also hides while browsing the collection, so the center
   board area is unobstructed (mirrors the speak-mode collection hiding the inline
   sidebar). It comes back when the drawer closes. */
.md-shell--board-collection-left .md-board-edit-right-panel {
  display: none;
}

/* Save / Cancel hide while previewing a browsed board — the center is showing a
   different board (the pill reads "Previewing"), so committing or discarding the
   edit doesn't apply. They return when the drawer closes. */
.md-shell--board-collection-left .md-board-edit-session__actions {
  display: none;
}

/* Push the center layout RIGHT by exactly the drawer width (edit mode only), and
   collapse the 3-column grid (rail | center | right-panel) to a single 1fr column so
   the center `main` fills the freed width.
   !important + three shell-class specificity (0,0,4,0) is REQUIRED to beat the
   edit-mode :has() grid rules (~app.scss:91036, `15% 1fr 15% !important`): the rail
   and right panel are display:none while the drawer is open, but they stay in the
   DOM, so `:has(.md-board-edit-panel)` still matches and would otherwise keep the
   two side columns reserved (the empty-gap / thin-strip bug). Overriding an existing
   !important is the sanctioned reason to use one here. */
.md-shell--board-detail.md-shell--board-detail-edit.md-shell--board-collection-left .md-board-detail-layout {
  padding-left: var(--md-collection-drawer-w, 380px);
  grid-template-columns: 1fr !important;
}

@media (max-width: 1024px) {
  .md-shell--board-collection-left {
    --md-collection-drawer-w: 320px;
  }
}
.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;
  /* Wraps so the add/remove confirm can drop to its own line below the row
     instead of competing with the board name for horizontal space. */
  flex-wrap: wrap;
  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;
  /* This is the live sidebar — the only section whose order matters and the
     only one you can reorder. A teal glow + solid top stroke lifts it off the
     add-lists below, which share the plainer card treatment. */
  border-top-color: rgba(20, 127, 130, 0.85);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04), 0 0 0 1px rgba(20, 127, 130, 0.18), 0 0 22px 2px rgba(20, 127, 130, 0.22);
}

.md-sidebar-editor__section--current:hover {
  border-top-color: rgba(20, 127, 130, 0.95);
  box-shadow: 0 1px 4px rgba(17, 26, 46, 0.06), 0 4px 16px rgba(17, 26, 46, 0.04), 0 0 0 1px rgba(20, 127, 130, 0.26), 0 0 26px 3px rgba(20, 127, 130, 0.28);
}

.md-board-detail--dark .md-sidebar-editor__section--current {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(20, 127, 130, 0.3), 0 0 26px 3px rgba(20, 127, 130, 0.3);
}

/* Divider heading between "on the sidebar" and "can be added". Sits BETWEEN
   cards rather than inside one, so it reads as a group heading for everything
   below it; slightly larger than the in-card section labels it introduces. */
.md-sidebar-editor__group-label {
  margin: 20px 4px 10px;
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6A85;
  border-bottom: 1px solid rgba(17, 26, 46, 0.1);
}

.md-board-detail--dark .md-sidebar-editor__group-label {
  color: rgba(240, 244, 250, 0.72);
  border-bottom-color: rgba(240, 244, 250, 0.16);
}

/* 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. */
/* 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;
  /* Basis 0 (not auto) is REQUIRED because the row is flex-wrap:wrap. Under wrap, the browser
     breaks lines using each item's flex BASE size BEFORE shrinking — with basis:auto a long
     board name makes the display's base size wide, so the +/reorder/remove controls get bumped
     to the next row even though the display could shrink. Basis 0 makes the display's line-break
     size 0, so the controls always stay on line 1; grow:1 + min-width:0 then let it fill and the
     name truncate. (The confirm span keeps its own line via its own flex:0 0 100%.) */
  flex: 1 1 0;
  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__action[disabled] {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.md-sidebar-editor__confirm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /* Full-width so it wraps onto its own line under the row (see the row's
     flex-wrap). Previously inline + flex-shrink:0, which squeezed the board
     name until it truncated — you couldn't see what you were confirming. */
  flex: 0 0 100%;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.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 {
  border-top-color: rgba(240, 244, 250, 0.14);
}

.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 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-board-collection__item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.md-board-collection__item-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.55);
}

.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);
}

/* ≤1024px: hide the language field entirely — it crowds the board name at this
   width, so drop it and let the name (.md-board-collection__item-name, flex: 1 1 auto)
   reclaim the full width. The grid-size pill keeps a shared min-width so it still
   reads as a tidy, consistent column. */
@media (max-width: 1024px) {
  .md-board-collection__item-lang {
    display: none;
  }
  .md-board-collection__item-count {
    min-width: 54px;
    text-align: center;
  }
}
/* 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);
}

.md-board-detail--dark .md-board-collection__item-owner {
  color: rgba(226, 232, 240, 0.55);
}

/* 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;
}

/* ── Original Selected Board — highlighted "hero" section ──────────────────────
   The board the edit page was opened with, pinned at the top of the drawer. Given
   a stronger teal-accented treatment than the neutral section cards so it clearly
   outranks them (visual hierarchy). Placed AFTER the base + dark section rules so
   these same-specificity modifier selectors win on source order. */
.md-board-collection__section--original {
  background: radial-gradient(ellipse 75% 100% at 8% -20%, rgba(20, 127, 130, 0.13) 0%, transparent 68%), linear-gradient(180deg, rgba(20, 127, 130, 0.08) 0%, #ffffff 72%);
  border: 1px solid rgba(20, 127, 130, 0.4);
  border-top: 4px solid #147F82;
  box-shadow: 0 0 0 1px rgba(20, 127, 130, 0.08), 0 4px 14px rgba(20, 127, 130, 0.16), 0 12px 30px rgba(17, 26, 46, 0.1);
}

.md-board-collection__section--original .md-board-collection__section-label {
  color: #147F82;
}

.md-board-collection__section--original .md-board-collection__item {
  background: rgba(20, 127, 130, 0.08);
  border: 1px solid rgba(20, 127, 130, 0.22);
}

.md-board-collection__section--original .md-board-collection__item:hover {
  background: rgba(20, 127, 130, 0.14);
}

.md-board-collection__section--original .md-board-collection__item-name {
  font-weight: 700;
}

/* Dark variant — brighter teal so it reads on the dark drawer surface. */
.md-board-detail--dark .md-board-collection__section--original {
  background: radial-gradient(ellipse 75% 100% at 8% -20%, rgba(80, 217, 209, 0.16) 0%, transparent 68%), rgba(20, 127, 130, 0.14);
  border: 1px solid rgba(80, 217, 209, 0.38);
  border-top: 4px solid rgba(80, 217, 209, 0.85);
  box-shadow: 0 0 0 1px rgba(80, 217, 209, 0.1), 0 6px 22px rgba(0, 0, 0, 0.38);
}

.md-board-detail--dark .md-board-collection__section--original .md-board-collection__section-label {
  color: rgba(80, 217, 209, 0.92);
}

.md-board-detail--dark .md-board-collection__section--original .md-board-collection__item {
  background: rgba(80, 217, 209, 0.1);
  border: 1px solid rgba(80, 217, 209, 0.22);
}

.md-board-detail--dark .md-board-collection__section--original .md-board-collection__item:hover {
  background: rgba(80, 217, 209, 0.18);
}

.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(255, 255, 255, 0.55);
  /* Same glassy glossy language as the bar / nav buttons, scaled for a button. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(238, 244, 251, 0.62) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 8px 12px -9px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(27, 54, 93, 0.05), 0 4px 14px rgba(27, 54, 93, 0.1);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-board-detail-options-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(240, 246, 252, 0.7) 100%);
  color: #374151;
  box-shadow: inset 0 1.5px 0 rgb(255, 255, 255), inset 0 8px 12px -8px rgba(255, 255, 255, 0.68), 0 1px 2px rgba(27, 54, 93, 0.06), 0 6px 18px rgba(27, 54, 93, 0.13);
}

.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;
}

@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 = the user's grid-gap preference. KEEP THIS A PLAIN LENGTH: the
     prediction rail measures getComputedStyle(grid).rowGap / columnGap
     (_sync_prediction_tile_size) and parseFloat's the result, so a
     min()/percentage gap serializes to a value parseFloat can't read and the
     rail's tile spacing breaks (regressed 2026-07 by a button-size gap cap that
     lived here). Button-size gap scaling belongs in board-alt's JS extra_pad,
     which publishes a plain px value — not in this CSS grid gap. */
  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.)
     Through a VARIABLE so a mode can build on it: the short-viewport rules below
     reclaim this space by setting `--bd-grid-top: 0`, and compact mode adds its own
     offset on top of whatever the variable holds. Setting `padding-top` directly in
     those rules meant a mode could only override it by out-specifying them. */
  padding-top: var(--bd-grid-top, 4px);
  /* See .md-board-detail-layout — 100dvh prevents bottom-row clipping on
     Android Chrome/Edge where 100vh extends past the actual visible viewport.
     The 120px offset = the chrome above the grid (sentence bar ~90px + the
     ~30px of surrounding padding), tuned for the full-height MEDIUM sentence
     bar. On short/narrow viewports the bar shrinks (see the matching offset
     override below), so 120 would over-reserve and leave a dead gap. */
  height: calc(100dvh - 120px);
}

/* ── Fitzgerald category grouping (flag: board_category_grouping) ─────────────
   The .md-board-detail-grid__group wrapper is emitted in BOTH modes so the
   ~200-line cell block in board-detail-grid.hbs is written once instead of
   duplicated into a grouped branch. Ungrouped it is `display: contents`, so it
   generates NO box and the base grid above lays out exactly as it did before
   this feature existed. Only .md-board-detail-grid--grouped gives it a box.

   ⚠ DORMANT, NOT DEAD — read before "cleaning up" anything below.
   `.md-board-detail-grid--grouped` is emitted by `{{if this.panelLayout ...}}`
   (board-detail-grid.hbs), and `panelLayout` is a hardcoded `false`
   (board-detail-grid.js) — the PANEL presentation is parked as a future feature,
   the same way `category_ordering_available` is. So every
   `.md-board-detail-grid--grouped ...` rule in this section currently matches
   NOTHING. That is intentional: bringing the panel layout back is one `true`, and
   deleting these rules would mean re-authoring them.
   What grouping actually paints today is `--compact` / `--compact-scroll`
   (`compactCategories` / `compactScroll`, both derived from `groupingEnabled`).
   NOTE the near-miss: `--grouped-no-scroll` IS live — it hangs off
   `groupingEnabled` + `unless categoryScrollEnabled`, not off `panelLayout`.
   Do not sweep it up with the others. */
.md-board-detail-grid__group {
  display: contents;
}

/* Inner button container. Emitted in both modes; `display: contents` when
   ungrouped so it generates no box and today's grid is untouched. */
.md-board-detail-grid__group-body {
  display: contents;
}

/* Column wrapper. Same trick as the group and body wrappers: emitted in BOTH
   modes and `display: contents` when ungrouped, so it generates no box and the
   existing grid is untouched. */
.md-board-detail-grid__column {
  display: contents;
}

.md-board-detail-grid--grouped .md-board-detail-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--bd-button-gap, 8px);
  min-width: 0;
  min-height: 0;
}

/* Panels keep their NATURAL height — no stretching.
   Two attempts at flushing the bottoms have now failed the same way:
   (1) stretch only the LAST panel — all the slack lands in one category, a visible hole;
   (2) distribute the slack across every panel with flex-grow — the hole is spread but
       still reads as one, badly, on a category with few buttons (a 1-button SOCIAL panel
       became mostly empty tint), and it does NOT line the columns up, because the columns
       hold different amounts of content in the first place.
   Flushing is a PACKING problem, not a stretching one: the fix is to make the columns
   hold comparable amounts (see the 4-column / 3-across work), not to inflate whatever
   was packed unevenly. Panels are top-aligned so a shorter column ends short. */
.md-board-detail-grid--grouped .md-board-detail-grid__column {
  justify-content: flex-start;
}

.md-board-detail-grid--grouped .md-board-detail-grid__group-body,
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-body {
  /* Fill the stretched panel. Without this the panel grows and the tinted body does
     not, leaving a band of the panel's own background under the buttons — the tint
     stops short of the panel edge and the "uniform bottom" reads as a rendering fault
     rather than as a taller category. `grid-auto-rows: min-content` below keeps the
     BUTTONS packed at the top; only the surface grows. */
  flex: 1 1 auto;
  display: grid;
  /* The button grid lives HERE now (moved off __group, which is a plain block
     stack). Panels hold their own columns so a 3-button group and a 16-button
     group both read as one block rather than inheriting the board's columns. */
  /* 3 across — see GROUP_INNER_COLUMNS in utils/board_categories.js; the two must agree. */
  grid-template-columns: repeat(var(--bd-group-inner-columns, 3), minmax(0, 1fr));
  gap: var(--bd-button-gap, 8px);
  grid-auto-rows: min-content;
  padding: 7px;
  border-radius: 10px;
  /* Glassy inner surface, a couple of steps lighter than the board.
     Still DERIVED from $brand-charcoal-dark (the board surface it sits on,
     .md-board-detail-main app.scss:69078) rather than a fresh hex, so it tracks
     the brand colour if that ever moves. Two layers, per the house recipe in
     LEARNINGS "Atmospheric depth surface formula": a translucent white veil on
     top reading as ambient light catching the surface, over a subtle vertical
     tonal gradient. A flat fill cannot produce the same quality.
     The inset top highlight + inset bottom shade give it directional lighting
     (bright above, dark below) so it reads as a recessed glass tray holding the
     buttons rather than a flat rectangle. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0.09) 100%), linear-gradient(180deg, rgba(27.5, 32.5, 40.5, 0.78) 0%, rgba(24.75, 29.25, 36.45, 0.74) 100%);
  /* SHIPPING VALUES, restore these two lines:
  linear-gradient(180deg,
    rgba(55, 65, 81, 0.78) 0%,
    rgba(44.6875, 52.8125, 65.8125, 0.74) 100%); */
  /* The base above is TRANSLUCENT on purpose -- that is what separates glass
     from gloss. The category tint behind shows through and is blurred and
     saturated by the backdrop filter, so each tray picks up a hint of its own
     category colour instead of being an opaque slab with a sheen painted on.
     Same blur+saturate idiom the rest of the app uses for glass surfaces. */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.24), inset 0 14px 22px -16px rgba(255, 255, 255, 0.18), inset 0 -10px 22px -18px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark mode uses the translucent navy the main board surface uses, not the page
   canvas behind it — same distinction called out at app.scss:55042. */
.md-board-detail--dark .md-board-detail-grid--grouped .md-board-detail-grid__group-body,
.md-board-detail--dark .md-board-detail-grid--compact-scroll .md-board-detail-grid__group-body {
  /* Same construction against the dark theme's navy: veil over a lifted base.
     Lighter than the flat translucent navy it replaced so the tray still reads as
     raised out of the panel in dark mode, where a too-close value goes muddy. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.06) 100%), linear-gradient(180deg, rgba(20, 25, 34, 0.76) 0%, rgba(16, 20, 28, 0.72) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 14px 22px -16px rgba(255, 255, 255, 0.1), inset 0 -10px 22px -18px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* Grouped board = category panels tiled across columns.
   GRID, not multi-column: the base .md-board-detail-grid carries a definite
   height (calc(100dvh - 120px)), and CSS multicol under a definite height does
   NOT stop at column-count — it keeps generating columns in the inline
   direction, which pushed the last panels off-screen to the right. Grid cannot
   overflow sideways. */
/* Panels pack ("tetris") with no dead space between them.
   Multi-column, not grid: a grid tiles ROW-WISE, so every row is as tall as its
   tallest panel and a 15-button category leaves a gap under every shorter panel
   beside it. Columns let panels stack independently and the browser balances
   them for free.
   The `height: auto` override is what makes this work and is NOT optional. The
   base .md-board-detail-grid sets height: calc(100dvh - 120px); multi-column
   under a DEFINITE height does not stop at column-count -- it keeps generating
   columns sideways, which is what pushed the last categories off-screen on the
   first attempt. With an indefinite height the browser balances into exactly
   --bd-group-columns and cannot overflow horizontally. */
.md-board-detail-grid--grouped {
  display: grid;
  grid-template-columns: repeat(var(--bd-group-columns, 3), minmax(0, 1fr));
  grid-template-rows: none;
  gap: var(--bd-button-gap, 8px);
  align-items: stretch;
  /* Keeps the base rule's definite height (calc(100dvh - 120px)) ON PURPOSE.
     Column tracks need a definite height for the last panel in each to have
     something to stretch into — with a content height there is no leftover and
     the bottom edge stays ragged.
     This was `height: auto` while the layout used CSS multi-column, where a
     definite height turns the box into a fragmentation context that generates
     columns sideways past the count (which an overflow-x then clips — that bug
     hid 20 of 60 buttons). Grid has no such behaviour: excess content overflows
     DOWN, so a definite height is both safe and required here. */
  /* Height AUTO with the old definite value as a FLOOR.
     It used to be strictly definite (inherited from the base rule) so the last panel in
     each column had something to stretch into. That works only while the content FITS:
     with more content than height the panels overflow the column instead of stretching,
     and each column ends wherever its own content runs out — measured at 776px columns
     holding 1327px of panels, which is precisely the staggered bottom this is meant to
     fix. Auto lets the single grid row size to the TALLEST column, `align-items:
     stretch` then makes every column that height, and the panels' `flex: 1 1 auto`
     fills the remainder. The min-height keeps the original floor so a SHORT board still
     fills the viewport rather than floating in the top corner. */
  height: auto;
  min-height: calc(100dvh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── COMPACT categories (grouping ON, scrolling OFF) ───────────────────────────
   The panel chrome — header, panel padding, the gap between panels, the per-panel
   column tracks — is what pushed a grouped board past the fold, not the buttons.
   Compact mode removes all of it and TILES the categories onto the board's own grid:
   one rectangle per category, sized and placed by `pack_category_tiles`
   (utils/board_categories.js) and written onto the wrapper as `group.tile_style`.

   The tile is what makes a single ring possible. An earlier version left every wrapper
   `display: contents` and flowed the buttons, which meant a category occupied a
   STAIRCASE of cells that no one border can trace — so the ring had to go on each CELL,
   and a category read as N separate outlined buttons rather than as one group.

   The cost of rectangles is that they waste cells a free flow does not, so a tiled
   board needs more rows than the board authored. Rows are `minmax(0, 1fr)` under a
   definite grid height, so that spends button HEIGHT and never introduces scrolling —
   which is the whole point of the mode (the user cannot scroll).

   No headers, by design: the colour and the ring carry the category, and a header row
   per category is most of what compact mode is trying to win back. */
.md-board-detail-grid--compact .md-board-detail-grid__column,
.md-board-detail-grid--compact .md-board-detail-grid__group-body {
  display: contents;
}

/* One category = one TILE.

   `--bd-tile-columns` / `--bd-tile-rows` are the tile's span in BOARD cells, and the
   inner grid re-creates exactly that many equal tracks at the board's own gap. That is
   what keeps a button inside a 3-wide tile the same size as one inside a 9-wide tile.

   ZERO padding, and the ring drawn with `outline` (which takes no layout space) rather
   than a border: any padding here would make the button width a function of the tile's
   span — an AAC user navigates this board by position, so buttons changing size with
   the category they landed in is not a trade available to us.

   The tile's gap is the BOARD's gap, plainly — no compensation for the padding.

   The consequence, stated so nobody rediscovers it: a tile spanning `w` columns loses
   `2 x padding` of width whatever `w` is, and its `w` tracks absorb that loss, so a button
   comes out `colW - 2 x padding / w` wide. Buttons in a 1-column tile are therefore a few
   px narrower than in a 4-column one — measured spread is bounded by `2 x padding`.
   Compensating for it (inner gap = board gap + 2 x inset) makes every button identical but
   spends `2 x inset` on every gap INSIDE a category, which is much more visible. Traci
   chose the small size variance over the wide spacing.

   `margin` is zero: the ring is an `outline` — paint, no layout — drawn from the border box
   out into the board's gap, and two neighbouring rings MEET there, so the categories are
   already separated. The board gap cannot drop below `2 x --bd-ring` without adjacent
   rings overlapping. */
.md-board-detail-grid--compact .md-board-detail-grid__group {
  display: grid;
  grid-template-columns: repeat(var(--bd-tile-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--bd-tile-rows, 1), minmax(0, 1fr));
  margin: var(--bd-tile-margin, 4px);
  padding: var(--bd-tile-pad, 3px);
  /* Row and column gaps INSIDE a category are set independently of the board's, and of
     each other: the rows are tight so stacked categories can be separated without the
     board growing, the columns carry the air instead. */
  row-gap: var(--bd-tile-row-gap, 4px);
  column-gap: var(--bd-tile-col-gap, 12px);
  min-width: 0;
  min-height: 0;
  /* The category ring, built as concentric BOX-SHADOW rings rather than an `outline`:
     an outline can only be one flat colour, and this needs to graduate from deep on the
     inside to lifted on the outside, with a specular edge to read as glass.

     Spread-only shadows paint outside the border box exactly like an outline did, so this
     still costs NO layout — the tile's geometry, and every button size derived from it,
     is unchanged. Painted innermost-first, because the first shadow in the list is drawn
     on top of the ones after it.

     Four bands off `--bd-ring`, so the whole ring still scales with that one value:
       0    -> 1/3    deepest — the shaded inner lip
       1/3  -> 2/3    the category's own colour — the body of the ring
       2/3  -> -0.5   lifted, as if catching light
       -0.5 -> full   a white hairline — the gloss
     plus a soft drop beyond it so the ring sits ON the board rather than in it.
     `oklch` for the mixes: perceptually even steps, and the idiom the rest of this
     stylesheet already uses. */
  outline: none;
  box-shadow: 0 0 0 calc(var(--bd-ring, 6px) / 3) color-mix(in oklch, var(--bd-group-fill, transparent) 58%, black), 0 0 0 calc(var(--bd-ring, 6px) / 3 * 2) var(--bd-group-fill, transparent), 0 0 0 calc(var(--bd-ring, 6px) - 0.5px) color-mix(in oklch, var(--bd-group-fill, transparent) 66%, white), 0 0 0 var(--bd-ring, 6px) rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.28);
  border-radius: 14px;
}

/* Compact fills the page to its bottom edge.

   `.md-board-detail-main` keeps 7px under the grid and the sidebar wrap another 4px. On
   every other mode that is correct page chrome; in compact it is 11px of board a user who
   cannot scroll never gets, and it is the last of what "not stretching to the full height"
   was pointing at. Scoped with `:has()` so it applies only while the categorised
   non-scrolling grid is the thing inside — no other mode is touched.

   The grid keeps its own 6px bottom padding: the bottom row's ring is drawn 6px past the
   tile box and the grid clips at its padding edge, so removing it would shear the ring
   off. The reserves above already account for this. */
.md-board-detail-main:has(.md-board-detail-grid--compact),
.md-board-detail-grid-sidebar-wrap:has(.md-board-detail-grid--compact) {
  padding-bottom: 0;
}

/* Per-category downward stretch.

   These tiles end short of what sits below them, so their BOX is extended downward. Done
   by trimming the tile's bottom margin, not by padding: padding would push the buttons
   down INSIDE the tile and shrink them, which is the opposite of the ask — the content
   stays put and the ring reaches further down to close the gap.

   A tile's height is its grid rows and it stretches to them, so the only room to grow into
   is the margin that was holding it off the row edge. `--bd-tile-margin` is 4px, so 2px
   here leaves 2px, so every listed tile reaches 2px further down.

   Keyed on the category class the template already emits. The `yes` tile is Actions
   buttons donated to the bottom band; it carries its own key precisely so a rule for it
   cannot also hit the 20-button Actions block. */
.md-board-detail-grid--compact .md-board-detail-grid__group--how_when,
.md-board-detail-grid--compact .md-board-detail-grid__group--things,
.md-board-detail-grid--compact .md-board-detail-grid__group--social,
.md-board-detail-grid--compact .md-board-detail-grid__group--no_not,
.md-board-detail-grid--compact .md-board-detail-grid__group--yes,
.md-board-detail-grid--compact .md-board-detail-grid__group--words,
.md-board-detail-grid--compact .md-board-detail-grid__group--keyboard,
.md-board-detail-grid--compact .md-board-detail-grid__group--keyboard_extra {
  margin-bottom: calc(var(--bd-tile-margin, 4px) - 2px);
}

/* Never render a category header here even if a future change starts emitting one —
   compact mode has no room for it and a stray header would take a tile row. */
.md-board-detail-grid--compact .md-board-detail-grid__group-header {
  display: none;
}

/* Rows come from the PACKER, not from the board's authored row count: a tiling needs
   more rows than a free flow. `--bd-compact-rows` is published on the grid's style
   attribute by the component; `--board-rows` is the fallback for the frame before it
   is measured. Padding replaces the base rule's `padding-top: 4px` so the outer tiles'
   rings are not clipped — `--grouped-no-scroll` sets `overflow-y: hidden`, which makes
   the x axis compute to `auto`, so an unpadded ring would both clip and be able to
   raise a horizontal scrollbar. */
.md-board-detail-grid--compact {
  /* One place the ring width and the gap it lives in are decided, since neither is
     meaningful without the other. `!important` on the gap because the base
     `.md-board-detail-grid` rule declares its own with `!important` (to defend against
     the hard-coded gaps in the @media blocks below it), and an important declaration is
     not beaten by source order. Kept a PLAIN LENGTH: the prediction rail parseFloat's
     getComputedStyle(grid).rowGap, which a min()/calc() value would break.
     Tighter than the board's own spacing on purpose — compact mode is what a user picks
     when the whole board has to fit, and the space buys button height back. */
  /* Four numbers, one geometry — see the tile rule above for why they are coupled.
     Tile margin and padding are ZERO on purpose. Both are insets, and an inset costs
     `2 x inset` of INNER gap (the tile loses that width whatever its span, and only the
     w-1 inner gaps can give it back) — the 4px margin plus 3px padding is exactly what
     pushed the buttons inside a category 20px apart. With them at zero the whole boundary
     is the board gap, which is set to `2 x ring` so two neighbouring rings MEET: the same
     visual separation, none of the inner cost, and larger buttons.
     Floor: the gap cannot drop below `2 x ring` without adjacent rings overlapping. */
  /* Board gap + the two tile margins is the distance between neighbouring tile boxes; the
     two 7px rings drawn into it leave the rest clear. 4 + 8 + 4 = 16, minus 2 x 6 of
     ring, = a 4px clear channel between every pair of categories. */
  --bd-compact-gap: 8px;
  --bd-ring: 6px;
  /* 4px of breathing room between a category's ring and its buttons. It is an INSET, so
     it costs `2 x 4px` of inner gap and the same off every button's width — there is no
     arrangement that avoids that (see the tile rule above). Margin stays zero: the ring
     meeting its neighbour is what separates the categories, and a margin would spend the
     same again for nothing extra. */
  --bd-tile-pad: 4px;
  --bd-tile-margin: 4px;
  --bd-tile-row-gap: 4px;
  --bd-tile-col-gap: 12px;
  grid-template-rows: repeat(var(--bd-compact-rows, var(--board-rows)), minmax(0, 1fr));
  /* Row gap and column gap are the SAME number here and separable on purpose: the columns
     carry the board's pitch (and with it every button width), while the rows only carry the
     space between one shelf of categories and the next. `--bd-compact-row-gap` defaults to
     the board gap, so this rule is unchanged for anyone who does not set it; the scrolling
     variant sets it, because a board that scrolls does not have to spend 28px between rows
     to look right. Written as one declaration rather than a `row-gap` override further down
     so there stays exactly one authoritative gap rule (the `!important` here would beat a
     plain override anyway). */
  gap: var(--bd-compact-row-gap, var(--bd-compact-gap)) var(--bd-compact-gap) !important;
  /* 20px top = the 4px the ring needs to clear the clipped edge, plus the 16px the board
     is shifted down by so it does not sit hard against the chrome above it. Padding, not
     margin: the grid holds a definite height, so padding takes the space out of the rows
     (which are `1fr`) instead of pushing the bottom row past the viewport.
     NOTE the `@media (max-height: 700px)` rule further down this file zeroes `padding-top`
     for every mode at a higher specificity, so on a short viewport the shift does not
     apply. Left that way deliberately — that rule exists to reclaim exactly this kind of
     space when there is none to spare. */
  /* The board sits 16px lower than it otherwise would, on top of the 4px the ring needs
     to clear the clipped edge. Published as a VARIABLE, not just applied here, because
     two other rules own `padding-top` on this element at higher specificity — the
     ≤820px-tall speak rule and the ≤700px reclaim blocks — and both now read it. A plain
     length rather than a calc over another variable: that form measured 1px instead of
     16px at a short viewport, and a fixed offset does not need arithmetic. */
  --bd-compact-top: 4px;
  /* Sides and bottom are sized to the RING: the grid clips at its padding box
     (`--grouped-no-scroll` sets `overflow-y: hidden`), so anything less trims the outer
     tiles' rings. The top keeps its own smaller value — that is the deliberate 8px push
     up, and it costs a trimmed ring on the first row only. */
  padding: var(--bd-compact-top) var(--bd-ring) var(--bd-ring);
  /* The reserve must equal the grid's own TOP OFFSET, and that offset changes with the
     viewport: the chrome above the grid is 110px normally, 104px once the =<820px-tall
     rule drops the grid's margin, and 96px once the =<700px block reclaims its padding.
     Each tier is that offset plus the ~14px `.md-board-detail-main` keeps below the grid;
     leave that out and main gains a scrollbar, which is the one thing this mode exists to
     avoid. A single fixed value cannot be right at all three — 124px fitted the tall case
     and left 28-36px of dead board at the short ones, which is what "not stretching to
     the full height" was. Each of those blocks now sets the reserve beside the change that
     moved the offset, so the two cannot drift.
     Rows are `1fr`, so the reserve comes out of button HEIGHT — the right place for it.
     Edit mode and the =<500px-tall rules keep their own `!important` heights (0,3,0). */
  --bd-compact-reserve: 113px;
  height: calc(100dvh - var(--bd-compact-reserve, 113px));
}

/* The SCROLLING variant of the tiling.

   MUST STAY BELOW the `--compact` rule above. The grid root carries BOTH classes when
   grouping is on and scrolling is allowed (board-detail-grid.js: compactCategories is
   `groupingEnabled`, compactScroll is `groupingEnabled && categoryScrollEnabled`), and the
   two selectors are the SAME specificity — so whichever is declared last wins `height` and
   `grid-template-rows`. Declared ABOVE it this block lost both, the board kept the
   non-scrolling geometry (a definite height and `minmax(0, 1fr)` rows), and every tile came
   out `k x height/rows` tall while its `__group-body` rows held the 76px floor — measured at
   8 equal 90px tracks in a 787px grid, tiles 84px holding 130px of content, so the buttons
   painted 46px below their own tinted background. Same reasoning as the `__group` /
   `__group-body` pair further down, which was already ordered this way on purpose.

   Identical layout — same packing, same tiles, same rings. The only difference is what
   happens when the board needs more rows than the viewport has: with scrolling off the
   rows share a definite height and the buttons shrink to fit; here they hold a floor and
   the board scrolls instead, which is the trade a user who can scroll may prefer.

   `minmax(floor, auto)`, not `minmax(0, 1fr)`: a grid with `1fr` rows and no definite
   height collapses to min-content (LEARNINGS, "Board-detail board grid height is a
   load-bearing magic-number calc"), which is what makes the definite height load-bearing
   in the non-scrolling case and why it cannot simply be dropped here. */
.md-board-detail-grid--compact-scroll {
  height: auto;
  min-height: calc(100dvh - var(--bd-compact-reserve, 113px));
  overflow-y: auto;
  grid-template-rows: repeat(var(--bd-compact-rows, var(--board-rows)), minmax(var(--bd-scroll-row-min, 76px), auto));
  /* ── The last term in uniform button width ─────────────────────────────────
     The tray rule further down zeroes the tile's horizontal PADDING and border and puts
     its column gap on the board's own, which leaves one fixed horizontal cost: the tile's
     4px margin on each side. Like any fixed inset it is divided by the tile's span, so it
     alone still made a 2-column category's buttons 4px narrower than a 5-column one's
     (measured 77.4 against 79.8 with everything else already matched).

     So the margin goes and the board gap carries the whole channel between categories
     instead. This is safe HERE and nowhere else: the separation between two categories in
     this variant is bare board, whereas the non-scrolling variant draws a ring `--bd-ring`
     outside each tile and needs `2 x margin + gap` to stay wide enough for two of them to
     meet. `--compact` keeps its own values untouched.

     8 + 2 x 4 = 16, so the channel a user sees does not move. The board's column gap is
     also what the tray now uses between its buttons, so one number governs both and they
     cannot drift. */
  /* ── How a category reads as separate, given uniform buttons ───────────────
     Uniform buttons force `g_in = G + 2I` (see the tray rule), and with the tray's own
     inset at zero that means the gap INSIDE a category is exactly the board gap. So the
     space between two categories can never exceed the space between two buttons, and the
     separation has to be carried by the FRAME — the tinted panel edge — rather than by
     extra air. Both numbers below exist to make that frame substantial:

       board gap  28px  = frame 10 + channel 8 + frame 10
       frame      10px  drawn in space borrowed from the gap, so it costs no button width

     `2 * inset < gap` is the hard constraint; at equality neighbouring panels touch, which
     is why the two always move together.

     MEASURED, so nobody tries it again: raising the frame does NOT widen the panel. The
     panels tile the board, so a band's containers plus its channels are the board width,
     and holding the channel fixed holds their total fixed. Taking this pair to 52/22 at
     2280 moved the People panel from 312px to 315px — 3px — while every button went from
     132px to 109.7px. The frame is bought from the BUTTONS, not from the layout. Real panel
     width can only come from a band's unused columns (band 1 leaves one). */
  --bd-compact-gap: 28px;
  /* The VERTICAL channel between one band of categories and the next. Independent of the
     horizontal one: 28px of column gap buys the frame each panel borrows back and sets the
     pitch every button width derives from, whereas 28px of ROW gap buys nothing but air —
     the tiles already carry 8px of vertical padding, and this variant scrolls, so height it
     does not spend is height it does not have to scroll past. */
  --bd-compact-row-gap: 8px;
  --bd-tile-margin: 0px;
  --bd-tray-inset: 10px;
  /* ── Button width and the gap between buttons, as free parameters ──────────
     The placed (non-band) tiles have to run the tray at the board's own pitch, so their
     inner column gap IS the board gap — 28px between buttons inside a category, which is
     most of the space left on the board.

     A band tile does not: its tray is given an explicit width, and ANY width of the form
     `w * A + (w-1) * B` yields `w` tracks of exactly A, for every w. So A (the button) and
     B (the gap between buttons) are independent, and shrinking B pays straight into A.

     A is capped by the NARROWEST tile in a band having to still fit its content box,
     `w * pitch - gap`. At w = 2 that gives `A <= pitch - (gap + B)/2`, which is the value
     below; wider tiles then have room to spare and spend it as frame. A one-column band
     tile would want more than its box, so the tray width is clamped with `min(..., 100%)`
     — that tile's buttons come out at the board pitch instead of A, the only case where
     they do not all match. No band on the core boards has one (the one-column categories
     are all in the keyboard notch, which is placed, not banded). */
  --bd-btn-gap: 4px;
  /* ── The tile's own chrome, the two fixed horizontal insets ────────────────
     `--bd-tray-pad` is the tray's padding on all four sides. It is a fixed inset, so it has
     to be added to the tray's WIDTH (box-sizing is border-box here) or it would come off
     the button tracks and a 2-column category's buttons would stop matching a 4-column
     one's. `--bd-tile-pad-x` is the group CONTAINER's own left/right padding inside its
     border; like every other fixed horizontal inset on this board it competes with button
     width — see the ceiling on `--bd-btn-w`, which subtracts it.

     Declared on the GRID and not on `__group`, where they used to live, because the
     keyboard region solves for its own button width on the region COLUMN — and a custom
     property substitutes its own `var()`s at the element it is DECLARED on, so everything
     `--bd-region-btn-w` references has to be inherited there. Groups still inherit both,
     unchanged. */
  --bd-tray-pad: 4px;
  --bd-tile-pad-x: 6px;
  /* The outermost panel in every band reaches `--bd-tray-inset` past its grid area, so the
     grid must reserve at least that much or it clips the frame off the left and right
     columns. The base `--compact` rule reserves `--bd-ring` (6px), which is sized for the
     ring the NON-scrolling variant paints — smaller than this frame, and unrelated to it.
     Tied to the same variable so raising the frame cannot silently start clipping it. */
  padding-left: var(--bd-tray-inset, 10px);
  padding-right: var(--bd-tray-inset, 10px);
}

/* The per-category downward stretch above subtracts 2px from `--bd-tile-margin`, which is
   now 0 here — a negative bottom margin that would pull those categories into the one
   below. It exists to close a gap under a tile whose height is fixed by a `1fr` row, and
   in this variant rows size to their content and there is no such gap to close. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group {
  margin-bottom: 0;
}

/* ── Category bands as FLEX ROWS (scrolling variant only) ──────────────────────
   Why this exists. A tile placed with `grid-column: X / span N` can only be an integer
   number of columns wide, so a band that leaves one column unused cannot share it between
   its four categories — an even share is a quarter of a column. Laid out as a flex row the
   share is just `flex-grow`, and fractional widths are free.

   Only the SCROLLING variant, and only the vocabulary bands: the keyboard and the notch
   beside it are two-dimensional (a 30-key block three rows tall with a four-column notch
   alongside), which a row cannot express, so those keep their grid placement. The band
   element itself is still a grid item — it spans every column and its own rows — so the
   board's vertical rhythm is unchanged.

   THE GEOMETRY, because every number below depends on it. Writing `pitch` for one board
   column plus one gap, a tile `w` columns wide must be `w*pitch - gap` for its buttons to
   come out the same width as every other category's:

     band gap     = board gap - 2*inset   so two panels still sit `board gap` apart from
                                          content edge to content edge
     tile basis   = w*pitch - gap + 2*inset
     tile grow    = 1                     the band's unused columns, shared EVENLY
     tray width   = w*pitch - gap         exact, and centred, so everything the tile gains
                                          becomes symmetric frame and NONE of it reaches
                                          the buttons

   With no unused columns the tiles overflow the row by exactly `2*inset`, which the band's
   negative margin hands back to the grid's own side padding — the same borrow the placed
   tiles use, so the frame is there either way.

   `pitch` needs the board's content width as a LENGTH. CSS cannot read a grid track, and
   measuring it in JS would put a write in the render path; a container query gives it for
   free — `100cqw` is the container's inline size, and the container is the GRID (not the
   band, whose own width is 2*inset wider than the board because of that negative margin). */
.md-board-detail-grid--compact-scroll {
  container-type: inline-size;
}

.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* `--bd-band-trim` narrows every category in the band by exactly that much.
     It cannot be done on the tile: the tiles carry `flex-grow: 1`, so shrinking a basis
     just enlarges the free space and grow hands the same pixels straight back — the width
     is unchanged. The space has to leave the ROW instead, and it has to leave at `trim`
     per tile whatever the tile count is. One gap-worth per boundary plus half at each end
     is exactly `n * trim` for `n` tiles:

       gaps    (n-1) * trim
       padding 2 * (trim / 2)
       total   n * trim   ->  grow shares the loss evenly  ->  trim off each tile

     which is why the padding is half the trim and not the whole of it.

     It is 0 now. Trimming a group and widening the space between the frames are the SAME
     operation seen from two sides — the row is a fixed width, so every pixel taken off a
     group reappears between the panels. 12px of trim was 12px of extra channel. */
  --bd-band-trim: 0px;
  gap: calc(var(--bd-compact-gap, 8px) - 2 * var(--bd-tray-inset, 10px) + var(--bd-band-trim, 0px));
  padding-left: calc(var(--bd-band-trim, 0px) / 2);
  padding-right: calc(var(--bd-band-trim, 0px) / 2);
  margin-left: calc(-1 * var(--bd-tray-inset, 10px));
  margin-right: calc(-1 * var(--bd-tray-inset, 10px));
  min-width: 0;
}

/* ── The keyboard REGION on a track list of its own (scrolling variant only) ───
   Why this exists. The bands escaped the board's equal columns by becoming flex rows; the
   region cannot, because a 30-key block three rows tall with a four-column notch beside it
   is two-dimensional and a row cannot express it. But it does not have to stay on the
   BOARD's columns either — it only has to stay a grid. So the region column becomes a grid
   of its own: one button-wide track per notch column, plus a single track for the keyboard.

   What that fixes. On the board's equal columns a placed tile holds a tray of
   `w*A + (w-1)*B` inside a grid area of `w*colW + (w-1)*boardGap`, and the difference —
   `(w-1) * (boardGap - B)`, 216px under the ten-column keyboard at 2280 — is dead board.
   It could not be spent on a wider button either: the per-button slack is `(w-1)/w` of it,
   which is ZERO at one column, and the notch has a one-column tile, so the narrowest tile
   in the region capped `--bd-btn-w` for all of them at 133.7 against the bands' 162.8.
   MEASURED, both, before the change (`scripts/category-layout-dump-qa.mjs`).

   With tracks of its own the region charges the tile chrome once per TRACK instead of once
   per board column, and the surplus goes to the buttons instead of to the right-hand edge
   of the keyboard.

   `grid-template-columns` arrives INLINE from the component: `repeat()` needs a literal
   count and `repeat(0, …)` is invalid, so a board too narrow for a QWERTY row (no notch)
   needs a different track LIST, not a different number. Same reason as the band's placement.

   This rule is (0,2,0) — the same as `.md-board-detail-grid--compact
   .md-board-detail-grid__column { display: contents }` further up, which it has to beat,
   and a media query would not help. It is declared BELOW that rule and must stay there
   (LEARNINGS: two modifier classes on one element). */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--region {
  /* A — the button width every tile in the region gets. Solved, not tuned: it is the width
     at which the region's tracks add up to exactly the row it has.

       row       = 100cqw + 2*inset          the same borrow a band takes
       notch trk = A + P                     P = 2*trayPad + 2*tilePad, the tile's chrome
       kb  trk   = kb_cols*A + (kb_cols-1)*B + P
       row       = notch_cols*(A + P) + notch_cols*g + kb_trk        g = the band gap

     -> A = (row - (notch_cols+1)*P - notch_cols*g - (kb_cols-1)*B) / (notch_cols + kb_cols)

     `P` is charged once per notch TRACK, which is what a ONE-column tile needs; a wider
     notch tile therefore gets `P + g - B` more track than its tray uses and centres in it,
     the same trade a band tile makes with its share of the band's spare columns.

     Declared HERE and not on the grid: `100cqw` needs an ancestor container and the grid IS
     the container, so on the grid itself it would resolve against the viewport instead —
     the trap the `--bd-col-pitch` comment records. Everything it references is declared on
     the grid root above, because a custom property substitutes its own `var()`s at the
     element it is declared on.

     The region still lands short of the bands (151 against 163 at 2280) and that is
     geometry, not a missing term: it uses all 14 board columns while each band uses 13 of
     14, and no track sizing recovers a column that is not there. */
  --bd-region-btn-w: calc(
    (100cqw + 2 * var(--bd-tray-inset, 10px)
     - (var(--bd-region-notch-cols, 0) + 1) * (2 * var(--bd-tray-pad, 4px) + 2 * var(--bd-tile-pad-x, 6px))
     - var(--bd-region-notch-cols, 0) * (var(--bd-compact-gap, 8px) - 2 * var(--bd-tray-inset, 10px))
     - (var(--bd-region-kb-cols, 1) - 1) * var(--bd-btn-gap, 4px))
    / (var(--bd-region-notch-cols, 0) + var(--bd-region-kb-cols, 1)));
  --bd-region-notch-track: calc(var(--bd-region-btn-w)
    + 2 * var(--bd-tray-pad, 4px) + 2 * var(--bd-tile-pad-x, 6px));
  display: grid;
  /* Rows are the board's own sizing, so the region keeps the vertical rhythm it had while
     it was placed directly on the board grid: a floor, and `auto` above it. Implicit rather
     than declared — the keyboard tile spans every one of them, so they all exist. */
  grid-auto-rows: minmax(var(--bd-scroll-row-min, 76px), auto);
  column-gap: calc(var(--bd-compact-gap, 8px) - 2 * var(--bd-tray-inset, 10px));
  row-gap: var(--bd-compact-row-gap, var(--bd-compact-gap, 8px));
  margin-left: calc(-1 * var(--bd-tray-inset, 10px));
  margin-right: calc(-1 * var(--bd-tray-inset, 10px));
  min-width: 0;
}

.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group {
  /* Grows in proportion to its SPAN, not equally, and the basis is written in button terms.
     Both are needed for the tray to fill the tile while the buttons in a band still match.

     With basis `w*A0 + (w-1)*B + 2*trayPad + 2*tilePad` and grow `w`, a tile ends up

       content = w*A0 + (w-1)*B + 2*trayPad + F*w/SUM(w)          (F = the band's slack)
       tracks  = (content - 2*trayPad - (w-1)*B) / w = A0 + F/SUM(w)

     — no `1/w` term left, so every category in the band lands on the same button width and
     the row is used up exactly. Equal `flex-grow: 1` does NOT do this: it hands a 2-column
     and a 4-column category the same pixels, which is fine while the tray is a fixed width
     (it becomes frame) and wrong the moment the tray fills.

     F differs per band — band 1 leaves one board column spare here, band 2 leaves two — so
     the button width differs BETWEEN bands. That is the deliberate trade for the tray
     filling its container; a single width across every band cannot also use up two
     different amounts of slack.

     `flex-shrink: 0` still: shrinking would scale the basis and the placed tiles' fixed
     trays would overflow. */
  /* `--bd-tile-span` is the tile's width in board columns; `--bd-tile-columns` is how many
     BUTTON tracks sit inside it. They are the same number for every tile except one the
     stylesheet widens deliberately (see the Time / Keys rule below), where a wider tile with
     the SAME track count is exactly how the single button inside it is made to fill. Falls
     back to the track count, so a tile that does not set it is unchanged. */
  flex: var(--bd-tile-span, var(--bd-tile-columns, 1)) 0 calc(var(--bd-tile-span, var(--bd-tile-columns, 1)) * var(--bd-btn-w) + (var(--bd-tile-span, var(--bd-tile-columns, 1)) - 1) * var(--bd-btn-gap, 4px) + 2 * var(--bd-tray-pad, 4px) + 2 * var(--bd-tile-pad-x, 6px));
  min-width: 0;
  /* The placed tiles get these from their inline `tile_style`; a band tile has no
     placement of its own, so the frame is declared here instead. */
  padding: 8px var(--bd-tray-inset, 10px);
  margin-left: 0;
  margin-right: 0;
}

/* The tray keeps the EXACT width its column span is worth and centres itself, so every
   pixel the tile gained from the band's spare columns lands as frame on both sides and the
   button tracks never move. This is the whole reason the leftover can be shared evenly
   without the buttons changing size. */
/* `w * A + (w-1) * B` gives `w` tracks of exactly A for every w, so the tray is sized from
   the BUTTON rather than from the board pitch, and the tile's spare width never reaches the
   buttons.

   The BODY carries `2 * --bd-tray-pad` on top, because box-sizing is border-box and its
   padding would otherwise come off the tracks — at `2 * pad / w`, which is per-span drift:
   measured 135.7 / 139.7 / 141.7 for w = 1 / 2 / 4 when this width was declared at (0,2,0)
   and lost to the rule it was meant to override. Both selectors below are (0,3,0), the same
   as the group rules around them, so nothing here depends on source order.

   The header keeps the bare width so its label lines up with the first button. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group > .md-board-detail-grid__group-header {
  width: calc(var(--bd-tile-columns, 1) * var(--bd-btn-w) + (var(--bd-tile-columns, 1) - 1) * var(--bd-btn-gap, 8px));
  margin-left: 0;
  margin-right: 0;
}

.md-board-detail-grid--compact-scroll .md-board-detail-grid__group > .md-board-detail-grid__group-body {
  width: calc(var(--bd-tile-columns, 1) * var(--bd-btn-w) + (var(--bd-tile-columns, 1) - 1) * var(--bd-btn-gap, 4px) + 2 * var(--bd-tray-pad, 4px));
  margin-left: 0;
  margin-right: 0;
}

/* Inside a band the tray FILLS its container — the tile is already sized so that filling it
   yields uniform tracks (see the flex rule). (0,4,0), so it beats the (0,3,0) rule above
   without depending on source order. The PLACED tiles keep that fixed width: their
   containers are real grid areas of differing spans, and a tray that filled them would give
   a one-column notch tile and the ten-column keyboard different button sizes. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group > .md-board-detail-grid__group-body,
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group > .md-board-detail-grid__group-header {
  width: 100%;
}

/* Time and the Keys folder get TWO board columns each once there is room for it.

   Both are single buttons, so on the controls row they are the narrowest tiles there —
   one track, the same width as `yes` and `social`. But neither is a vocabulary word: Time
   holds a whole phrase ("Give me time to answer.") and Keys is the way into the keyboard,
   and both are reached mid-conversation, which is the worst moment to be aiming at the
   smallest target in the row.

   The SPAN doubles and the track count does not, which is the entire point: the tray fills
   its container inside a band (the rule above), the inner grid stays `repeat(1, minmax(0,
   1fr))`, so the one button STRETCHES across the doubled tile instead of sitting in half of
   it beside an empty cell. That empty half is exactly what the old `CONTROL_ROW_STRETCH` in
   the packer produced, which is why the width is spent here — where it can reach the
   button — rather than by handing the packer a wider tile.

   `min-width: 1025px`, an existing tier in this stylesheet, because the row is a fixed
   width and the columns these two gain come off the four tiles beside them. Above 1024 the
   board has them to spare; at or below it the board is already short of horizontal room
   (the same reasoning as the ≤1024 block below) and every one of those columns is button
   size on a board an AAC user is aiming at, so there they stay one track wide. */
@media (min-width: 1025px) {
  .md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group--time,
  .md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group--keyboard_extra {
    --bd-tile-span: 2;
  }
  /* …and their LABEL grows with the tile.

     Doubling the tile on its own made the text look lost: "Give me time to answer." sat at
     the flat `--bd-button-text-size` (18px at the default step) on one line, using 29px of
     the 62px label box in a 381px-wide button. The label size is a user PREFERENCE, not a
     responsive value, so it does not scale with the screen and nothing else was going to
     pick that room up — `label_fit.js` is shrink-only and had nothing to shrink.

     Declared as a CEILING, not a final size. `applyOne` / `batchedFit` both `clearFont` and
     then read each label's OWN computed size as the base they fit from
     (label_fit.js — "Start from what CSS would actually render, not from the raw
     preference"), so this is the size the fitter starts at and it shrinks from here
     whenever the text does not fit. That is what makes the multiplier safe to state once:
     at 2280 the phrase stays on one line and keeps the full 1.6x, at ~1280 the box is
     narrower and the fitter settles it a couple of px lower, and a longer translation is
     brought down the same way instead of being ellipsised.

     Both tiles, because both were widened for the same reason. Inside the same query as the
     span so the two halves of one decision cannot drift apart. */
  .md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group--time .md-board-detail-symbol-card__label,
  .md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group--keyboard_extra .md-board-detail-symbol-card__label {
    font-size: calc(var(--bd-button-text-size, 15px) * 1.6);
  }
}
/* Narrow screens: tighter board, thinner rings.

   950px is an existing breakpoint in this stylesheet (other rules already key off it), so
   this adds no new tier for a reader to track. Placed AFTER the base rule on purpose: a
   media query adds no specificity, so declared before it the base simply won and this did
   nothing (styling-recurring-problems #4 — verified, gap stayed 8px at 900px wide). Below it the board is short of horizontal room,
   and 8px between buttons plus a 6px ring is spending it on chrome.

   Both drop by 2px, and they have to move TOGETHER: the ring is drawn into the gap from
   both neighbours, so the clear channel between categories is
   `2 x margin + gap - 2 x ring`. At 4px and 4px that stays at 4px, the same separation
   the full-size board has. Drop the gap alone and adjacent rings would overlap. */
@media (max-width: 950px) {
  .md-board-detail-grid--compact {
    /* The board gap and the ring, both 2px thinner than the full-size board. They move
       together: the ring is drawn into the gap from both neighbours, so the clear channel
       between categories is `2 x margin + gap - 2 x ring` — 8 + 4 - 8 = 4px, the same
       separation the full-size board has. Dropping the gap alone would overlap them. */
    --bd-compact-gap: 4px;
    --bd-ring: 4px;
    /* And the gaps INSIDE a category tighten, which is what actually buys button size
       here. These are the tile's own row/column gaps: unlike the board gap they are not
       compensated for anything, so every pixel taken off them goes straight into the
       buttons. The tiling is untouched — the packer works in cells, so the row and column
       counts are identical and nothing reflows. */
    --bd-tile-row-gap: 2px;
    --bd-tile-col-gap: 4px;
  }
  /* Every category, not just the short ones. A 14px corner is sized for the full-size
     board; at these widths the tiles are small enough that it eats a visible share of
     each edge and the rings stop reading as rectangles round a group. */
  .md-board-detail-grid--compact .md-board-detail-grid__group {
    border-radius: 6px;
  }
  /* The BUTTONS inside the bottom band, likewise. Their base radius is
     `clamp(6px, 1.2vw, 16px)`, which is sized for a full board button; on a 40-50px tile
     in this band it rounds away a real part of the face. Squared off to match the tiles
     that hold them.

     Not the 30-key block: its keys are the same size as the vocabulary buttons above and
     read as a keyboard, so they keep the standard radius. That distinction is only
     expressible because the keyboard FOLDER carries its own `keyboard_extra` key —
     sharing `keyboard` with the key block meant any rule for one hit both. */
  .md-board-detail-grid--compact .md-board-detail-grid__group--how_when .md-board-detail-symbol-card,
  .md-board-detail-grid--compact .md-board-detail-grid__group--things .md-board-detail-symbol-card,
  .md-board-detail-grid--compact .md-board-detail-grid__group--social .md-board-detail-symbol-card,
  .md-board-detail-grid--compact .md-board-detail-grid__group--no_not .md-board-detail-symbol-card,
  .md-board-detail-grid--compact .md-board-detail-grid__group--yes .md-board-detail-symbol-card,
  .md-board-detail-grid--compact .md-board-detail-grid__group--keyboard_extra .md-board-detail-symbol-card {
    border-radius: 5px;
  }
}
/* Narrower screens, SCROLLING variant only: close the channel between categories.

   Why this is scroll-only and not part of the ≤950px block above. In the non-scrolling
   view the ring is real: it is painted `--bd-ring` outside each tile and two neighbouring
   rings MEET in the board gap, so `2 x margin + gap` has to stay at least `2 x ring` or
   the rings overlap — that block spends the whole channel on ring and leaves a fixed 4px
   clear. The scrolling variant sets `box-shadow: none` on the tile and uses the tinted
   tray as the boundary instead, so it has no ring to protect and the whole
   `gap + 2 x margin` is dead space. Measured at 1280/1100/1024: 16px horizontal, 14px
   vertical between categories, with nothing drawn in any of it.

   1024px because that is where the board starts being short of horizontal room and is
   already a tier in this stylesheet (60+ rules key off it) — no new breakpoint to track.

   MUST STAY BELOW the ≤950px block above: both selectors are (0,1,0) and a media query
   adds no specificity, so at ≤950 whichever is declared last wins these two variables.
   Declared above it, the scrolling board would keep the ring-compensated 4px gap below
   950px and this would do nothing (styling-recurring-problems #4).

   The margin floor is 2px, NOT 0. The per-category downward stretch above sets
   `margin-bottom: calc(var(--bd-tile-margin) - 2px)`, so a 0 margin would compute to
   -2px and pull each of those eight categories 2px INTO the one below it. */
@media (max-width: 1024px) {
  .md-board-detail-grid--compact-scroll {
    /* The whole channel in one number, for the same reason as the base rule above: the
       tile margin has to stay 0 or it reopens the per-span button-width difference. 8px
       here against the base 16px. */
    /* Both scale down together — the frame is spent from the gap, so shrinking one without
       the other closes the channel (and past `2 * inset = gap` the panels overlap). Scaled
       further than the frame alone would need: every pixel of gap comes off the board's 14
       columns, and at this width that is button size on a board an AAC user is aiming at.
       18 = frame 6 + channel 6 + frame 6. */
    --bd-compact-gap: 18px;
    --bd-tile-margin: 0px;
    --bd-tray-inset: 6px;
  }
}
/* ── The QWERTY keyboard panel ────────────────────────────────────────────────
   Its keys are a SPATIAL layout, not a word list: a speller finds "s" by position the
   way anyone touch-types. So it gets the full board width at the BOTTOM, laid out on a
   real keyboard grid, instead of being packed into a column and reflowed into the
   panel's normal 3-across.

   It rides in as a final single-group column (board-detail-grid.js#renderColumns) so the
   template's one cell block is reused; this spans that column across every track. Last
   child rather than `:has()` — the grid root carries `--has-keyboard-panel`, so no
   selector support question and no chance of matching a column that merely CONTAINS a
   keyboard-ish panel. */
.md-board-detail-grid--has-keyboard-panel .md-board-detail-grid__column:last-child {
  grid-column: 1/-1;
  /* Content height: the keyboard is three rows and must not be stretched to match the
     vocabulary columns beside it — it sits UNDER them. */
  flex: 0 0 auto;
}

/* 10 tracks = the width of the longest run (qwertyuiop), so row 1 fits exactly and the
   shorter runs below it stay left-aligned under it, the way a keyboard looks. Keys are
   placed explicitly by grid-row/grid-column from the template, so the empty tail of
   rows 2 and 3 simply stays empty rather than pulling the next row's keys up. */
.md-board-detail-grid--has-keyboard-panel .md-board-detail-grid__column:last-child .md-board-detail-grid__group-body {
  grid-template-columns: repeat(var(--bd-keyboard-columns, 10), minmax(0, 1fr));
  /* Rows sized to content and packed at the top: three rows, no stretching. */
  grid-auto-rows: min-content;
  align-content: start;
}

/* The panel itself does not grow — see flex above. Without this it inherits the
   `flex: 1 1 auto` that makes vocabulary panels fill their column, and a three-row
   keyboard would stretch to the height of a 22-button category. */
.md-board-detail-grid--has-keyboard-panel .md-board-detail-grid__column:last-child .md-board-detail-grid__group {
  flex: 0 0 auto;
}

/* Vertical scrolling is a PREFERENCE while grouping is on
   (preferences.board_category_grouping.vertical_scroll, default on = today's
   behaviour). Turning it off is an accessibility choice, not a cosmetic one: a
   switch, dwell or head-pointer user cannot scroll, so for them a scrollable grid
   silently hides whatever sits below the fold. With scrolling off the panels are
   allowed to shrink instead — `min-height: 0` lets the group bodies compress rather
   than forcing the container past its definite height, so the board stays whole.
   Kept as a separate modifier rather than editing the rule above because the
   scrollable case remains the default and this is the deviation from it. */
.md-board-detail-grid--grouped-no-scroll {
  overflow-y: hidden;
}

.md-board-detail-grid--grouped-no-scroll .md-board-detail-grid__column,
.md-board-detail-grid--grouped-no-scroll .md-board-detail-grid__group,
.md-board-detail-grid--grouped-no-scroll .md-board-detail-grid__group-body {
  min-height: 0;
}

.md-board-detail-grid--grouped .md-board-detail-grid__group {
  /* A stack: header, then the button container. The button grid itself moved to
     __group-body so the buttons can sit on their own surface.

     FLEX column, not block, so the body below can `flex: 1` and fill exactly the space
     left after the header. An earlier attempt kept this as `block` and gave the body
     `height: 100%` — 100% of the PANEL, on top of the header, so the body overflowed the
     panel it was meant to fill. Both containers have to participate in the same
     stretch, which is what flex gives us.

     `flex: 1 1 auto` makes the panel take a share of any leftover height in its column,
     so the panels in a column end flush at the bottom instead of stopping short.
     Basis auto (not 0) keeps each panel's CONTENT height as its starting point, so a
     22-button category still starts taller than a 3-button one — only the REMAINDER is
     shared out. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Never split a category across a column break. A group torn in half is worse
     than no grouping at all for someone scanning for a word. */
  break-inside: avoid;
  page-break-inside: avoid;
  /* Vertical rhythm between stacked panels. In multi-column this is the ONLY
     spacing between panels in the same column -- column-gap handles the
     horizontal side, and there is no grid `gap` to fall back on here. */
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  /* Inner surface deliberately mirrors the outer board surface so there is a
     contrast EDGE between group and board for the AAC user (requested). The
     category tint rides underneath the same glass veil the rest of the app uses,
     so a group reads as the same material as the board, not a foreign card.
     Tint comes from --bd-group-fill, set inline from the SAME --fitzgerald-*
     custom property the buttons inside it use, so panel and buttons can't drift.
     Recipe: docs/task-management/LEARNINGS.md "Atmospheric depth surface formula". */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 100%), var(--bd-group-fill, #ffffff);
  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);
}

/* THE cell-height fix. In the ungrouped grid a cell has no intrinsic height at
   all -- .md-board-detail-grid__cell is `display:flex; min-height:0` and the card
   inside it is `flex: 1 1 0`, so ALL of its height comes from the parent's
   `grid-template-rows: repeat(--board-rows, minmax(0,1fr))` on a fixed-height
   container. A panel's rows are content-sized, and a `flex-basis: 0` child
   contributes no content height, so without this every button collapsed to a
   hairline. aspect-ratio gives the cell a height derived from the column width
   it already has. */
.md-board-detail-grid--grouped .md-board-detail-grid__cell {
  aspect-ratio: var(--bd-group-cell-ratio, 1);
  min-height: 0;
  /* Slight size reduction, one knob.
     The cell sits a little inside its grid track instead of filling it, so the
     button shrinks UNIFORMLY and stays square. Scaling this way rather than
     flattening the aspect-ratio (which would make buttons wider than tall) or
     adding a column (which would resize them far more than "slightly"). Centred
     so the freed space is shared either side and the rows stay visually aligned. */
  width: var(--bd-group-cell-scale, 85%);
  justify-self: center;
}

/* Header spans the panel's full inner width. aria-hidden in the template: the
   group already carries role="group" + aria-label, so exposing the heading too
   would make a screen reader announce every category name twice. */
.md-board-detail-grid--grouped .md-board-detail-grid__group-header,
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* Straightforward spacing now that __group is a block stack rather than a
     grid: the header is a normal sibling of the button container, so there is no
     grid `gap` applying to it and the earlier negative-margin cancellation is no
     longer needed. */
  padding: 0 2px 5px;
  margin-bottom: 5px;
  /* Divider between the category label and its buttons. Derived from the
     category's OWN paired text colour rather than a fixed grey, so each panel's
     rule sits in the same colour family as its tint instead of reading as a
     foreign line dropped on top. Low alpha keeps it a hairline: at full strength
     it competes with the buttons for attention, which is the opposite of what a
     scanning aid should do. */
  border-bottom: 1px solid color-mix(in srgb, var(--bd-group-text, #1B365D) 25%, transparent);
}

.md-board-detail-grid--grouped .md-board-detail-grid__group-name,
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-name {
  /* 16px fixed. The header is what makes a group identifiable at a glance, so it
     is sized independently of the buttons rather than scaling with them. */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Paired text colour from the same Fitzgerald entry as the fill, so contrast
     is the WCAG-checked pairing already used for the buttons. */
  color: var(--bd-group-text, #1B365D);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Narrower viewports drop to fewer columns before shrinking buttons — a smaller
   button is worse for an AAC user than a taller board. */
/* These set `columns`, not grid-template-columns — the grouped board is a
   multi-column context now, and a grid-template-* declaration here would be
   silently inert. */
/* FOURTH column on large boards. With panels at 3-across (GROUP_INNER_COLUMNS) a
   fourth column fits in roughly the width three 4-across columns needed, so the board
   spreads sideways instead of running down the page — more categories above the fold,
   fewer buttons stranded below it. Threshold mirrors board-detail-grid.js#columnCount;
   if the two disagree, JS packs a column CSS has no track for and it collapses. */
@media (min-width: 1400px) {
  .md-board-detail-grid--grouped {
    grid-template-columns: repeat(var(--bd-group-columns-lg, 4), minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .md-board-detail-grid--grouped {
    grid-template-columns: repeat(var(--bd-group-columns-md, 2), minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .md-board-detail-grid--grouped {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Dark mode: same recipe, glass veil over the tint instead of under white. */
.md-board-detail--dark .md-board-detail-grid--grouped .md-board-detail-grid__group {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), color-mix(in srgb, var(--bd-group-fill, #ffffff) 26%, #101826);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.34), 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.md-board-detail--dark .md-board-detail-grid--grouped .md-board-detail-grid__group-name,
.md-board-detail--dark .md-board-detail-grid--compact-scroll .md-board-detail-grid__group-name {
  color: rgba(255, 255, 255, 0.82);
}

/* Dark mode overrides the header TEXT colour above but not --bd-group-text, so
   the divider would still derive from the light-mode paired ink and disappear
   against a dark panel. Restate it against white. */
.md-board-detail--dark .md-board-detail-grid--grouped .md-board-detail-grid__group-header,
.md-board-detail--dark .md-board-detail-grid--compact-scroll .md-board-detail-grid__group-header {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* The scrolling variant keeps the PANEL presentation — glass tray, category name, tinted
   frame — and takes only the LAYOUT from the tiling. The tile stops being the button grid
   and goes back to being a frame holding a header and a body, the way `--grouped` builds
   it; the body is the grid, and the packer's spans drive its tracks.

   The tray background, the header and the name rules are SHARED with `--grouped` above
   rather than copied, so the two presentations cannot drift. The ring belongs to the
   non-scrolling view only — here the tray edge does that job.

   Placed AFTER those shared rules deliberately: they are the same specificity, so declared
   before them their `grid-template-columns: repeat(--bd-group-inner-columns, ...)` and
   `grid-auto-rows: min-content` simply won — the tile came out 3 columns wide with
   2px-tall buttons. Measured. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group {
  /* DESIGN DECISION (2026-08-25, Traci): categorised boards keep "each row fills". Button
     widths therefore VARY BY ROW — at 1600 they measure 147.2 / 126 / 102.3 / 122 — because a
     row using fewer columns grows its buttons to fill its own width. This is intended, not
     drift. Solving one width from the most-constrained row and applying it board-wide was
     considered and rejected: it buys uniformity by leaving trailing dead space on every row
     that does not use all its columns, which is precisely what the flex bands exist to
     remove. Do not "normalise" these widths.

     One board column plus one gap, and the button width derived from it. Declared on the
     GROUP so both kinds of tile have them — the banded ones, whose width the flex row sets,
     and the placed ones beside the keyboard. Not on the grid: a custom property resolves
     the `var()`s in its own value at the element it is DECLARED on, and `100cqw` needs an
     ancestor container, which the grid is. Put on the grid, `--bd-btn-w` computed to the
     guaranteed-invalid value and every button collapsed to 2px. */
  --bd-col-pitch: calc((100cqw + var(--bd-compact-gap, 8px)) / var(--board-columns, 14));
  /* `--bd-btn-boost` is how the space BETWEEN categories is tuned, which is not obvious
     enough to leave uncommented. That space is frame, not gap: a band's spare columns are
     handed to its tiles by `flex-grow`, and since the tray inside has a fixed width every
     one of those pixels lands as padding around it. Shrinking the band's gap does not help
     — the freed pixels go straight back to the tiles as more frame. The only thing that
     converts frame into something useful is a wider button, so the boost adds directly to A
     and the frames give way by the same amount.

     Ceiling: the PLACED tiles (keyboard and its notch) still have to fit real grid areas,
     and the keyboard is the tightest at ten columns — `10A + 9B <= 1609` at 2280px, so
     A <= ~153.7. Past that the key block overflows its own tile. */
  --bd-btn-boost: 0px;
  /* Two ceilings, whichever binds first.

     1. A band tile has to fit its own content box, tightest at two columns:
        `2A + B <= 2*pitch - gap`  ->  `A <= pitch - (gap + B)/2`.
     2. A PLACED tile beside the keyboard has a real grid area — one board column per span
        plus the borrow — and the tray it holds is `A + 2 * tray-pad` wide. At one column
        that is `A <= colW + 2*inset - 2*tray-pad`, with `colW = pitch - gap`.

     (2) only binds on the narrow tier, where the borrow is smaller: at 1024px it came out
     1px under and the one-button notch tiles hung their tray through the side of the panel.
     Written as a `min()` rather than tuned per breakpoint so a future change to the gap, the
     borrow or the tray padding cannot quietly reintroduce it at some width nobody tested. */
  --bd-btn-w: min(
    calc(var(--bd-col-pitch) - (var(--bd-compact-gap, 8px) + var(--bd-btn-gap, 8px)) / 2
         + var(--bd-btn-boost, 0px)),
    calc(var(--bd-col-pitch) - var(--bd-compact-gap, 8px)
         + 2 * var(--bd-tray-inset, 6px)
         - 2 * var(--bd-tray-pad, 4px) - 2 * var(--bd-tile-pad-x, 6px)));
  display: flex;
  flex-direction: column;
  box-shadow: none;
  padding: 0;
  border-radius: 10px;
  /* The category tint as the panel frame — the same `--bd-group-fill` the ring uses. */
  background: var(--bd-group-fill, transparent);
}

/* With the category NAME showing, the frame needs to be a frame: 4px so the header and
   the tray inside it are not flush against the tile's own edge.
   `:has()` rather than a new class — the header is rendered only when the user's
   `show_category_names` preference is on, so its presence IS the condition, and there is
   nothing for a class to know that the DOM does not already say.
   Scroll variant only: the non-scrolling view never renders a header. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group:has(.md-board-detail-grid__group-header) {
  /* VERTICAL only. Horizontal padding here is a FIXED cost the tile pays whatever its
     span, and the tile's tracks absorb it, so a button comes out `colW - inset / w` wide —
     narrower in a 2-column category than in a 4-column one. On this board that was People
     and Connectors visibly short of Actions and Describe. The frame the header wanted is
     above and below it; left and right, the board's own gap between tiles already
     separates one category from the next. See the tray rule below for the other two
     terms — its padding and its side border — and the column gap that went with them.

     The side frame comes back a different way: BORROWED FROM THE BOARD GAP rather than
     taken out of the tile. A negative margin widens the tinted panel by exactly what the
     padding insets the tray, so the tile's CONTENT box — the only thing button width is
     computed from — is still `w*colW + (w-1)*gap` and every button stays `colW` wide. The
     buttons stop sitting flush against the panel edge and the tint reads as a frame on all
     four sides again.

     `--bd-tray-inset` against `--bd-compact-gap`: two neighbouring panels each reach the
     inset into the gap, leaving `gap - 2*inset` of board between them — 28 and 10 give an
     8px channel. Do NOT raise the inset past half the gap or adjacent categories touch.
     The grid's own `--bd-ring` side padding is what the outermost panels reach into, so
     nothing overflows the scroll container. */
  /* Horizontal padding is ZERO here, and the frame comes from the negative margin alone.
     A placed tile's box is its grid area plus `2 * inset` (the borrow); padding would take
     that back off the CONTENT box, and the content box is the ceiling on how wide a button
     may be. The one-column notch tiles are the tightest on the board, so their padding was
     what capped `--bd-btn-w` for every category — with it, an 8px boost pushed their
     buttons straight out through the side of their own panel. Without it the tray can use
     the full borrowed width and the frame is what the centring leaves over. */
  /* Horizontal padding is 0; the frame on this axis is the negative margin alone, and the
     buttons get their inset from the TRAY's own 4px instead. A placed tile's box is its
     grid area plus `2 * inset`, and its content box is therefore exactly one board column
     per span — so a one-column notch tile has `colW` to hold a tray of `A + 2 * tray-pad`.
     Charging it tile padding as well leaves 8px too little and the tray hangs out through
     the side of the panel, which is what it did. Vertical padding is unaffected: nothing
     competes for height here. */
  padding: 8px var(--bd-tile-pad-x, 6px);
  margin-left: calc(-1 * var(--bd-tray-inset, 6px));
  margin-right: calc(-1 * var(--bd-tray-inset, 6px));
}

/* ...but NOT on a band tile. That borrow exists so a PLACED tile can widen past the grid
   area it was assigned; a band tile has no grid area — the flex row positions it — so the
   negative margin simply pulled each band `--bd-tray-inset` to the left of its own row,
   put the first and last category outside the grid's padding box and raised a horizontal
   scrollbar on a container whose whole purpose is to scroll vertically.

   This has to sit AFTER the rule above: both selectors are (0,3,0) — three classes each,
   `:has()` contributing its argument's specificity — so nothing but source order separates
   them, and the band block itself is declared earlier in the file. The frame on a band tile
   comes from its padding plus the share the row hands it, so nothing is lost here. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--band > .md-board-detail-grid__group {
  margin-left: 0;
  margin-right: 0;
}

/* A region tile takes the width the REGION solved for rather than the board-column ceiling
   every other placed tile is held to, and no borrow: the region column has already reached
   `--bd-tray-inset` past the grid on both sides, and each of its tracks is sized to hold
   the tray that goes in it.

   Same source-order requirement as the band rule above — (0,3,0) against the `:has(…-header)`
   rule, which is where the negative margin comes from. `--bd-btn-w` would win from anywhere
   (that one is declared at (0,2,0)); the margins would not. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--region > .md-board-detail-grid__group {
  --bd-btn-w: var(--bd-region-btn-w);
  margin-left: 0;
  margin-right: 0;
}

/* A notch tile spanning more than one column has more track than a fixed-width tray needs —
   the tracks charge the tile chrome once each, and a wider tile pays it once. That surplus
   used to be CENTRED as symmetric frame, which left Predictions and No's and Dont's sitting
   inside their own tiles with a margin either side while every band tile filled its row.

   They FILL instead, which is the same rule the rest of the categorised board follows: each
   row fills its own width, so a tile using fewer columns grows its buttons rather than
   leaving dead board (see the DESIGN DECISION note at the `--bd-btn-w` site). `width: 100%`
   overrides the tray-width calc above; the margins go to 0 so nothing is left to centre.

   The keyboard is unaffected either way: its track is solved to hold its tray exactly, so
   100% and the calculated width are the same number. What this must NOT reintroduce is the
   old failure where a fixed-width tray sat at the flex column's cross-axis start and piled
   the whole surplus on the right — filling the track removes the surplus rather than
   redistributing it, so there is none to pile up.
   (0,4,0), so it beats the width rules above without depending on source order. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--region > .md-board-detail-grid__group > .md-board-detail-grid__group-body,
.md-board-detail-grid--compact-scroll .md-board-detail-grid__column--region > .md-board-detail-grid__group > .md-board-detail-grid__group-header {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-body {
  /* `display: grid` explicitly: this element also carries `--compact`, whose rule makes
     the body `display: contents` so its cells join the board grid directly. That is right
     for the non-scrolling view and wrong here, where the body IS the tile's grid.
     Measured: without this the body had no box and every button rendered 0px tall.

     The LAYOUT half, identical to the non-scrolling view — the packer's spans drive the
     tracks. Rows are `minmax(floor, auto)` and NOT `minmax(0, 1fr)`: this body sits in a
     flex column with no definite height, and `1fr` rows under an indefinite height
     collapse to min-content — measured, it rendered 2px-tall buttons. The shared
     `--grouped` rule's `grid-auto-rows: min-content` is overridden here for the same
     reason (LEARNINGS, "Board-detail board grid height is a load-bearing magic-number
     calc"). */
  display: grid;
  grid-template-columns: repeat(var(--bd-tile-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--bd-tile-rows, 1), minmax(var(--bd-scroll-row-min, 76px), auto));
  grid-auto-rows: auto;
  /* Both axes take the SAME value in this variant — `--bd-btn-gap` is the gap between
     buttons, whichever way they sit. It is also the `B` in the tray-width formula, so the
     column gap has to come from here; giving the rows their own value would just be a
     second number to keep in step for no gain. */
  row-gap: var(--bd-btn-gap, 4px);
  /* ── Uniform button width ──────────────────────────────────────────────────
     A tile spans `w` board columns, so its box is `w*colW + (w-1)*boardGap`. Its `w`
     tracks come out `colW` wide — the same as every other category's — only when the two
     things that box is spent on match the board exactly:

       track = (w*colW + (w-1)*boardGap - 2*inset - (w-1)*innerGap) / w

     Solve `track = colW` for every `w` at once and there is exactly one answer:
     `inset = 0` and `innerGap = boardGap`. Any fixed horizontal inset is divided by `w`,
     so it always takes more off a narrow category's buttons than a wide one's, and any
     innerGap above the board's does the same to the `w-1` gaps. Measured before this, on
     the 14-column board: People 59.4px, Connectors 65.4px, Actions and Describe 68.4px.

     So the shared `--grouped` tray rule's `padding: 7px` and 1px side border are zeroed on
     the horizontal axis here, and the 12px column gap gives way to the board's own. The
     tray keeps all of it VERTICALLY — the padding, the border, the glass and its inset
     highlights are untouched top and bottom, which is where the surface reads from anyway.
     Categories are still separated left-to-right by the board gap plus the tile margin.

     This is also why `--bd-tile-col-gap` is not simply re-declared smaller: the gap has to
     BE the board gap, not merely be closer to it. */
  /* ── Uniform button width ──────────────────────────────────────────────────
     A tile spans `w` board columns, so its content box is `w*colW + (w-1)*G` and its
     tracks come out

       track = colW + (G - g_in) - [(G - g_in) + 2I] / w

     for a horizontal inset `I` (padding + border) and inner gap `g_in`. That still depends
     on `w` — a 2-column category's buttons narrower than a 4-column one's — unless the
     bracketed term vanishes, and there are only two ways to make it vanish:

       I = 0 and g_in = G   ->  track = colW          (this rule)
       g_in = G + 2I        ->  track = colW - 2I     (pays for the frame out of the
                                                       buttons, and runs the gaps INSIDE a
                                                       category 2I wider than the ones
                                                       between them)

     The frame is worth having but not at the buttons' expense, so the inset here is zero —
     padding AND the shared `--grouped` rule's 1px side border, which is just as fixed a
     cost — and the category's frame is bought a third way: the TILE is expanded past its
     content box (see the tile rule), which costs neither. */
  column-gap: var(--bd-btn-gap, 8px);
  padding: var(--bd-tray-pad, 4px);
  /* Side borders stay off: a 1px border is another fixed inset, and under border-box it
     would take 2px off the tracks divided by `w` — the same per-span drift the padding is
     compensated for above. Top and bottom keep theirs. */
  border-left-width: 0;
  border-right-width: 0;
}

/* Headers render again here — part of the panel presentation. The non-scrolling view
   hides them only because it has no room. Still gated on `show_category_names` by the
   template, so a user who turned them off keeps them off.

   `flex`, NOT `block` — this is undoing `--compact`'s `display: none`, so it has to restore
   the value the shared header rule above sets, not a different one. As `block` the name
   span was left an INLINE box, and `overflow`, `text-overflow` and `min-width` do nothing on
   a non-replaced inline: the name could neither shrink nor ellipsise, so a long category
   name ran straight out of its tile and was sheared off by the grid's clip ("QUESTIO").
   utils/label_fit.js could not save it either — `clientWidth` is 0 on an inline box, so its
   width fit had nothing to measure against and bailed. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-header {
  display: flex;
}

/* Names off: the header goes, its SPACE goes with it — the frame is left with the same 8px
   above the tray as below it. `display: none` on the header rather than dropping it from the
   template: `:has(.md-board-detail-grid__group-header)` still matches a display:none element,
   so the frame keeps the 8px padding that rule gives it. Removing the element instead takes
   the padding to 0 on all four sides, which is not the same thing. */
/* Scoped to the mode: the rule directly above sets `display: flex` on the header at (0,2,0),
   so a bare `--hidden` class at (0,1,0) loses to it — measured, the header kept its 29px and
   the frame kept a 46px top against an 8px bottom. */
.md-board-detail-grid--compact-scroll .md-board-detail-grid__group-header--hidden {
  display: none;
}

/* SHORT viewports (≤500px tall): the sentence bar shrinks ~27px here (the
   --nb-sb var block also fires at this height — app.scss ~68633), but the grid's
   fixed 120px offset above did not follow, so the top-aligned grid ended ~27px
   short of its container and a dead gap opened below the last button row. Drop
   the offset to 93px (= shrunk bar 63px + the same ~30px chrome) so the board
   fills to the same small bottom residual (~16px) as full-height screens.
   Scoped to max-HEIGHT only (NOT the var block's `(max-width:600px)` arm): at
   narrow widths the chrome above the grid is taller (bar wraps / layout padding
   differs), so 93px would over-shoot there and push the last row into a small
   scroll — narrow-width keeps the 120px offset. Speak mode only — edit mode
   hides the live sentence row (its grid keeps 120px via the edit-scoped rule). */
@media (max-height: 500px) {
  /* `:not(--compact-scroll)` for the same reason the edit clamp exempts it (see the
     `.md-shell--board-detail-edit … .md-board-detail-grid--compact-scroll` rule below): a
     definite height collapses that mode's `minmax(76px, auto)` rows onto their floor and the
     trays overflow their own frames. Added to BOTH short-viewport blocks so their relative
     order — the =<400 one must still beat this — is unchanged. */
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-grid-sidebar-wrap .md-board-detail-grid:not(.md-board-detail-grid--compact-scroll) {
    height: calc(100dvh - 93px);
  }
}
/* EVEN SHORTER viewports (≤400px tall): the sentence bar shrinks a SECOND step
   here (the --nb-sb var block fires again at max-height:400 — app.scss ~68715),
   so the 93px offset over-reserves once more and the bottom gap returns on short
   wide screens. Drop to 72px so the grid flushes to the ~8px structural bottom
   padding (main 4 + wrap 4). Must come AFTER the ≤500 rule (same specificity) to
   win where both queries match. Tuned so small/medium sentence bars fill cleanly;
   a giant (large/huge) bar on a ≤400px screen is an extreme edge that can still
   scroll a few px. Speak mode only. */
@media (max-height: 400px) {
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-grid-sidebar-wrap .md-board-detail-grid:not(.md-board-detail-grid--compact-scroll) {
    height: calc(100dvh - 72px);
  }
}
/* SHORT viewports (≤700px tall): compact the board so a short screen isn't
   dominated by button spacing. The grid gap drops to a tight 4px (overriding a
   larger button-gap preference at this height ONLY — the full preference gap
   returns on taller screens) and the grid's 4px top inset collapses, so the
   first row sits close under the sentence bar and the rows pack together (per
   request). Rows are 1fr, so the tighter gap just makes each button slightly
   taller — the grid still fills its height (the ≤500 offset above / the base
   offset keep the bottom flush). Speak mode only. The prediction rail reads the
   grid's rowGap (parseFloat) so it tightens to match — 4px is a plain length. */
@media (max-height: 700px) {
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-grid-sidebar-wrap .md-board-detail-grid {
    /* The VARIABLE, not the `gap` property. The base rule already reads
       `gap: var(--bd-button-gap, 8px) !important`, so setting the variable tightens every
       mode that uses the board's own spacing — while leaving a mode that defines its own
       geometry (compact, which sets `--bd-compact-gap` and `--bd-ring`) intact.
       Declaring `gap` here directly out-specified compact and forced its 11px category
       rings down to 2px and its 18px gap to 4px on any viewport under 700px tall, which
       is most laptops — the thicker outlines simply never appeared. */
    --bd-button-gap: 4px !important;
    /* The variable, not the property — see the base rule. A mode that wants its own top
       offset builds on this rather than having to out-specify this block. */
    /* 0px, WITH THE UNIT. A unitless 0 is a valid length on its own, but compact mode
       builds on this variable with `calc(var(--bd-grid-top) + 16px)`, and `calc(0 + 16px)`
       is invalid — the whole padding declaration is dropped and the shift silently
       disappears at this viewport. Measured. */
    --bd-grid-top: 0px;
    /* Compact keeps the 16px shift here; only the 4px ring clearance is reclaimed. */
    --bd-compact-top: 0px;
    /* Top inset reclaimed here too, so the reserve follows it down again. */
    --bd-compact-reserve: 102px;
  }
  /* NOTE: the short-screen folder-tab-reserve collapse (cell padding-top:0 + folder-back
     top/bottom:0) was REMOVED so the default folder tab shows on short viewports too —
     matching the user's folder-style preference at EVERY screen size, not just tall ones.
     The folder-tab-geometry mixin's reserve/protrusion now applies at all heights. Trade-off:
     short screens keep the ~10px per-row tab reserve instead of reclaiming it. (The grid gap
     and main padding reclaim above are kept.) Speak mode. */
  /* Reclaim the board area's outer chrome on short screens: the center board
     panel's padding (base 8/12/7, up to 24 bottom in some states) collapses to a
     uniform 4px so the grid uses the full width/height between the sentence bar
     and the side rails (per request).
     TOP is 0, not 4px: the shell above already contributes its own 2px, and on a
     375px-tall viewport (iPhone SE landscape) every one of these paddings stacked
     — shell 2 + main 4 + sentence-row margin 6 = 12px of dead space before the
     sentence bar even started. 0 here leaves the shell's 2px as the whole top
     inset, which is the intent. */
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-main {
    padding: 0 4px 4px !important;
  }
  /* Same squeeze under the sentence bar. The ≤820px rule sets `6px 2px 14px`,
     which is fine on a tall tablet but spends 20px of a 375px-tall phone on the
     gap above and below the bar. Top goes to 0 (the shell's 2px is the top inset)
     and the gap to the grid drops to 4px, matching the grid's own 4px gutter on
     short screens so the board reads as one evenly-spaced block. */
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-sentence-row {
    margin: 0 2px 4px 2px;
  }
  /* Tighten the gutter between the board grid and the inline sidebar from 6px to
     4px so it matches the symmetric 4px board spacing — a small, even gap rather
     than flush (per request). */
  .md-shell--board-detail:not(.md-shell--board-detail-edit) .md-board-detail-inline-sidebar {
    margin-left: 4px;
  }
}
/* EDIT page — mirror the speak-page short-screen compaction so the board PREVIEW
   grid gets more room on short screens (per request): 4px grid gap, collapsed top
   inset, folder-tab reserve removed (symmetric 4px rows), and the center panel
   padding collapsed from 8/16/28 to a uniform 4px. The edit grid keeps its own
   height offset (edit-scoped rule) — retuned for short screens just below so the
   reclaimed space goes to the buttons, not a bottom gap. (No inline-sidebar rule:
   edit mode hides it; the left/right rails are separate layout tracks.) */
@media (max-height: 700px) {
  /* Extra `.md-board-detail-layout` class → (0,4,0), so this beats BOTH edit-grid
     height rules (base 100dvh-120, both 0,3,0 !important) regardless of source
     order. Fill the reclaimed space: the base offset left a ~30px dead gap below
     the last row (edit chrome above the grid is a constant ~82px); 92px drops the
     grid to the panel's 4px bottom padding. gap/padding-top ride the same selector. */
  .md-shell--board-detail-edit .md-board-detail-layout .md-board-detail-grid-sidebar-wrap .md-board-detail-grid {
    --bd-button-gap: 4px !important;
    /* 0px, WITH THE UNIT. A unitless 0 is a valid length on its own, but compact mode
       builds on this variable with `calc(var(--bd-grid-top) + 16px)`, and `calc(0 + 16px)`
       is invalid — the whole padding declaration is dropped and the shift silently
       disappears at this viewport. Measured. */
    --bd-grid-top: 0px;
    /* Compact keeps the 16px shift here; only the 4px ring clearance is reclaimed. */
    --bd-compact-top: 0px;
    /* Top inset reclaimed here too, so the reserve follows it down again. */
    --bd-compact-reserve: 102px;
    height: calc(100dvh - 98px) !important;
  }
  /* Zero the wrap's ~10px bottom padding on short screens — it was the last bit of
     content pushing the grid past the visible panel (a small scroll on a page
     designed to fit on ONE screen). With it gone, the 98px offset fills to a ~8px
     residual with no scroll. (0,3,0 !important to beat the base wrap rule.) */
  .md-shell--board-detail-edit .md-board-detail-layout .md-board-detail-grid-sidebar-wrap {
    padding-bottom: 0 !important;
  }
  /* NOTE: the short-screen folder-tab-reserve collapse (cell padding-top:0 + folder-back
     top/bottom:0) was REMOVED here too, so the default folder tab shows on short EDIT
     viewports — same reasoning as the speak block above (respect the folder-style preference
     at every screen size). Trade-off: short screens keep the ~10px per-row tab reserve. */
  /* Collapse the center panel padding from 8/16/28 to a uniform 4px. Extra
     `.md-board-detail-layout` class so this (0,3,0) beats the base edit-main rule
     `.md-shell--board-detail-edit .md-board-detail-main {padding:8/16/28!important}`
     (0,2,0) which is later in source — without the bump, equal specificity + later
     source would keep the heavy padding. */
  .md-shell--board-detail-edit .md-board-detail-layout .md-board-detail-main {
    padding: 4px !important;
  }
}
/* ARIA row wrapper for the board grid (grid → row → gridcell). `display: contents`
   generates no layout box, so the gridcells inside it keep participating in the
   parent .md-board-detail-grid's CSS grid exactly as before — the wrapper exists
   only to give each row the role="row" that require-context-role (and screen-reader
   grid navigation) needs. */
.md-board-detail-grid__row {
  display: contents;
}

/* Narrow screens (<=768px): "colored corner" folders want the buttons extra
   close (2px) so the corner indicator reads well — tighter than the general
   proportional cap on the base rule. Other folder styles are already handled by
   the base `gap: min(--bd-button-gap, proportional)` rule above, which scales
   the gap down with the button width on narrow screens (that replaced the old
   flat 8px override here). 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 rule above. */
@media (max-width: 768px) {
  .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 {
  /* Reserve room for ALL the edit chrome above/below the grid so the board fits on ONE
     screen with no vertical scroll. 120px under-reserved on full screens: the 59px sticky
     session header + main's 8/16/28 padding + the wrap's 10px bottom padding + 4px margin add
     up past it, so the grid ran a hair too tall and <main> (overflow-y:auto) scrolled. 140px
     covers it. (Short screens use the tighter offset in the @media block above, which already
     fits.) If a small bottom gap appears, trim this; if it still scrolls, raise it. */
  height: calc(100dvh - 140px) !important;
}

/* …EXCEPT the scrolling categorised grid, which must not be clamped at all.

   Its rows are `minmax(--bd-scroll-row-min, auto)` and its tiles carry `min-height: 0` (the
   compact tile rule), so a track's BASE size is the 76px floor and only the `auto` MAX can
   grow it — and an auto max needs an indefinite height to grow into. Under the clamp above
   every track sat at exactly 76px and each tinted frame came out shorter than the glass tray
   inside it: measured at 1280x750 as 9 x 76px tracks in a 637px grid, trays 56-78px past
   their frame and buttons 40-62px past their tile.

   A separate rule rather than a `:not()` on the clamp: `:not(.class)` would raise that
   selector to (0,4,0) and it would then also beat the =<700px-tall edit block below, which
   deliberately clamps 4px tighter. This states the ONE state that opts out and leaves every
   other grid's cascade exactly as it was. `!important` because the declaration it is
   answering carries it — and it must beat the =<700px block's clamp too, which it does on
   source order at equal specificity.

   The reserve is republished here because this mode reads it as a FLOOR (`min-height` on the
   mode root) rather than as a ceiling, and in edit the chrome above the grid is the 140px
   above, not the speak view's 113px. */
.md-shell--board-detail-edit .md-board-detail-grid-sidebar-wrap .md-board-detail-grid.md-board-detail-grid--compact-scroll {
  --bd-compact-reserve: 140px;
  height: auto !important;
}

/* ── Category views on the EDIT page run the board EDGE TO EDGE ────────────────
   Speak mode already does this (`.md-shell--board-detail:not(--edit) .md-board-detail-layout`
   zeroes the layout's side padding so the board reaches the page edge); edit mode keeps a
   form-sized gutter that a categorised board — the widest thing on the page — cannot afford.
   Both category views take it, scrolling or not, which is why this keys on `--compact`: the
   component puts that class on the grid whenever grouping is on and adds `--compact-scroll`
   only for the scrolling variant.

   Two things move together, and neither works alone:
     1. <main> drops its 16px side padding;
     2. the grid drops the 6px side padding it was carrying for its own rings.
   The board ends FLUSH with <main>, not past it. A 12px bleed (the edit layout's column gap,
   which would have landed the board on the rails' edges) was built and then removed on
   request — <main>'s edge is where the board stops.

   `overflow-x: clip` + `overflow-clip-margin` on both boxes is what makes 2 legal: the grid
   clips at its own padding box, so with no side padding the outer tiles' rings — spread-only
   box-shadows drawn `--bd-ring` outside the tile — would be sheared, and those rings then
   land on <main>'s own edge, where `overflow-x: hidden` would shear them again. `clip` is the
   one overflow value that takes a margin, and unlike `hidden` it does not make the box a
   scroll container — so neither picks up a horizontal scrollbar. */
.md-shell--board-detail-edit .md-board-detail-layout .md-board-detail-main:has(.md-board-detail-grid--compact) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip;
  /* 6px, the full-size `--bd-ring`. The variable itself is declared on the GRID, a
     descendant, so it does not reach up here — this is the fallback, deliberately. It only
     ever needs to be >= the ring, and the ring never exceeds 6px (the =<950px block takes it
     down to 4px). */
  overflow-clip-margin: 6px;
}

.md-shell--board-detail-edit .md-board-detail-grid--compact {
  /* Tighter ROWS inside a category than the speak view uses (4px). The edit page gives the
     board ~140px less height for the same number of rows, so each row track is shorter while
     the card inside it stays SQUARE (the board's shape preference) — the card comes out
     narrower than its track and the leftover is spent as vertical air on top of the gap.
     Measured at 1017x651: a 52px card in a 54.3px track, plus the 4px gap, read as 6px
     between one button and the next. Halving it took that to 2px — and because the tile's rows
     are `1fr`, the 2px it gave back went into the tracks: the square card grew from 52px to
     54px rather than the tile shrinking. */
  --bd-tile-row-gap: 2px;
  /* And the same halving across (12px -> 6px). The speak view spends more here on purpose —
     the compact block's own comment notes the rows are tight and "the columns carry the air
     instead" — but on the edit page that air is the most visible space on the board, and the
     ring around each category already separates one from the next. */
  --bd-tile-col-gap: 6px;
}

/* Spending the SIDE padding on board is a ring-variant trick, so it is scoped to the ring
   variant. Both reasons it does not carry to `--compact-scroll`:

     1. There is no ring there. A scrolling category's frame is a real box — 6px of tile
        padding against a -6px margin, borrowed from the board gap so button width can stay
        uniform — and a real box at the padding-box edge is CLIPPED, not merely unpainted.
        The first and last category in every band lost their frame and the buttons read as
        crossing the panel edge.
     2. The clip margin cannot save it anyway. `--compact-scroll` sets `overflow-y: auto`,
        and `overflow-x: clip` beside a scrolling axis computes to `hidden` — measured as
        `hidden/auto`. `overflow-clip-margin` only applies to `clip`, so it is inert there.

   This is why it must be the SELECTOR that narrows rather than a later override: the
   scrolling variant needs the base rule's `var(--bd-ring)` side padding to survive, and an
   override can only add declarations back, not un-apply these. The row/column gap tuning
   above stays on the shared selector — that part is right for both. */
.md-shell--board-detail-edit .md-board-detail-grid--compact:not(.md-board-detail-grid--compact-scroll) {
  padding-left: 0;
  padding-right: 0;
  /* The ring is a spread-only box-shadow drawn `--bd-ring` outside each tile's border box.
     With the side padding gone the outer tiles sit on the padding box edge, so without a
     clip margin the left and right categories would lose their ring on that side. */
  overflow-x: clip;
  overflow-clip-margin: var(--bd-ring, 6px);
}

/* The board grid fills the viewport height at ALL sizes (base
   `.md-board-detail-grid { flex: 1 1 0 }`), so it always stays on ONE PAGE with no
   scroll. Short/small viewports previously swapped to a "square-collapse" (square
   cards + grid height:auto, which let <main> scroll); that was removed on purpose so
   the grid never scrolls — shape-square cards now fill their cell at every size. */
/* 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. */
.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;
}

.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;
  /* Hold tracking keys off the .button card. Nested img/svg must not steal the pointer. */
  pointer-events: none;
  /* 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,
.symbol_background_black .md-board-detail-symbol-card__text-symbol {
  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;
  /* Fill the holder rather than sitting at intrinsic size. `width/height: auto`
     meant an image only ever rendered as large as its source file, so a
     low-resolution or small-canvas symbol left dead space inside a button that
     had room for it — the symbol never expanded to its full allowed content
     space. `100%` + `object-fit: contain` scales the symbol UP to the holder as
     well as down, and contain still preserves aspect ratio, so nothing is
     stretched or cropped. */
  width: 100%;
  height: 100%;
  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;
}

/* Two selectors, same declaration: the responsive board-button padding is set on
   `.md-board-detail-grid .md-board-detail-symbol-card` (two classes), which
   outranks a lone `--text-symbol` and would put 1px back on a card whose whole
   point is that the text fills it. The grid-scoped copy matches that specificity
   so the zeroing still wins inside the board grid. */
.md-board-detail-symbol-card--text-symbol,
.md-board-detail-grid .md-board-detail-symbol-card--text-symbol {
  padding: 0;
}

.md-board-detail-symbol-card--text-symbol .md-board-detail-symbol-card__image {
  height: 100%;
  border-radius: inherit;
}

.md-board-detail-symbol-card__text-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 6px;
  color: inherit;
  font-family: var(--bd-button-font, inherit);
  font-size: clamp(16px, var(--bd-button-text-size, 15px) * 1.45, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  overflow: hidden;
  text-align: center;
  text-transform: var(--bd-button-text-transform, none);
  word-break: keep-all;
  /* `normal`, not `anywhere`. `anywhere` let the browser break INSIDE a word to
     make it fit — "you" rendered as "yo" / "u" — and for AAC the shape of the
     whole word is the recognition cue, so a split word is worse than a small
     one. With `normal` an over-wide word simply overflows, which is the signal
     label_fit measures (scrollWidth > clientWidth) before shrinking the font to
     fit. Wrapping at real word boundaries still works for multi-word labels. */
  overflow-wrap: normal;
}

.high_contrast .md-board-detail-symbol-card__text-symbol {
  color: #f8fc03 !important;
  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);
}

/* "Hide the label when the picture is shown" (button.hide_label) on the modern grid.
   Unconditional (matches the classic board's `.hide-label`, which hides whenever the
   flag is set) rather than gated on `:has(img.symbol)`, so it doesn't hinge on :has
   support or image-load timing. The class is only added when btn.hide_label is set. */
.md-board-detail-symbol-card__label.hide-label {
  display: none;
}

/* When "hide the label" is set the picture becomes the button: drop the 4px card
   padding so the symbol grows as large as it can in the space it no longer shares
   with the label. `object-fit: contain` (kept from the base rule) means the WHOLE
   symbol stays visible — no cropping — it just scales up to fill the freed room.
   Opt-in per button (btn.hide_label → `--hide-label` on the card); scoped to
   raster/loaded `img.symbol` so folder-placeholder svgs and empty cells are untouched. */
/* Grid-scoped copy for the same reason as --text-symbol above: the two-class
   responsive padding rule would otherwise reintroduce a 1px inset on a card that
   deliberately drops it so the symbol can fill the whole button. */
.md-board-detail-symbol-card--hide-label,
.md-board-detail-grid .md-board-detail-symbol-card--hide-label {
  padding: 0;
}

.md-board-detail-symbol-card--hide-label .md-board-detail-symbol-card__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.md-board-detail-symbol-card--hide-label .md-board-detail-symbol-card__image img.symbol {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.md-board-detail-symbol-card__label {
  pointer-events: none;
  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; label_fit.js inline overrides layered
     on top can make the change read as "pops back and forth between the
     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 {
  /* No padding — the session bar sits flush to the top of the scroll area AND flush
     to the grid-sidebar-wrap below (no vertical gap, per request). */
  margin-bottom: 0;
  padding: 0;
  /* STICK the session bar to the top while the board scrolls beneath.
     .md-board-detail-main is the scroll container and this header is a DIRECT child
     of it, so the header stays pinned the whole scroll. (Sticky on the deeply-nested
     session bar itself fails: a sticky element only holds while its PARENT is in
     view, and the bar's short title column scrolls away.) TRANSPARENT background
     (per request) — the dark board surface shows through, and the session bar is
     translucent glass, so the board scrolls under it with the frosted-glass blur
     (mirrors the speak compose bar over the board). Zero padding = no strips to
     bleed. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
}

/* ── Edit mode pill badge ── */
/* "Editing" status badge — absolutely centered in the sticky session bar (which is
   position:relative), so it sits at the TOP CENTER of the edit page. Styled like the
   Take-a-tour pill (.md-tour__trigger): white rim + frosted backdrop over a
   denim→verdigris glass tint. But it's an INFO BADGE, not a button — flatter shadow,
   no cursor/hover, and pointer-events:none so clicks pass through to the bar. */
.md-board-detail-edit-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 11px;
  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%);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  color: #1b2a4a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  /* Gentle badge lift — NOT the raised-button shadow the tour trigger uses. */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), 0 2px 7px rgba(76, 134, 216, 0.14);
  pointer-events: none;
}

.md-board-detail-edit-pill__icon {
  flex: 0 0 auto;
}

.md-board-detail-edit-pill__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Dark mode: SOLID pill background + a uniform LIGHT font/icon (per request) — no translucent
   glass and no gradient. The glassy pill's bright upper-left highlight fought text contrast
   (dark text OR light text washed out over it); a solid dark pill gives even contrast for one
   light text color. Light mode keeps its glassy translucent pill + solid $indigo text. */
.md-board-detail--dark .md-board-detail-edit-pill {
  background: #2e4a52;
  color: #eef3f6;
}

/* Dark mode: lighten the icon FRAME — the note "partial square" outline (Editing) and the eye
   outline (Previewing), both stroked #46505F inline — which reads too dark on the solid dark
   pill. A CSS stroke overrides the SVG presentation attribute, so no template change. The
   pencil / pupil accent (#2A9D8F teal) is left as-is. */
.md-board-detail--dark .md-board-detail-edit-pill__icon path[stroke="#46505F"] {
  stroke: #eef3f6;
}

/* ≤1024px: the "Editing/Previewing" pill leaves its absolute centre and rejoins the flex
   flow, so it sits directly after the board name instead of floating at the centre of the
   page.

   PLACED AFTER THE PILL RULE ABOVE, NOT BESIDE THE SESSION-BAR RULES IT ALSO TOUCHES. A
   media query adds NO specificity (styling-recurring-problems #4), and
   `.md-board-detail-edit-pill { position: absolute }` is the same (0,1,0) — so declared
   up there with the rest of the session bar, this lost, and the pill stayed centred at
   every width. Measured before the move: `position: absolute` and dead-centre of the bar
   at 1440, 1024, 900 AND 760px, which is why the ≤768px tier appeared never to have
   worked either.
   so it sits directly after the board name instead of floating at the centre of the page.

   Centring it is a whole-page gesture, and it only reads as one while the bar is wide enough
   for the centre to be visibly empty. Below this the bar is title + pill + Cancel/Save with
   little slack, and a centred badge lands wherever the title happens to end — beside it, or
   worse, on top of it.

   This tier used to start at 768px, together with hiding the title. The two are separate
   decisions and now have separate thresholds: the pill stops being centred here, the title
   is dropped further down. */
@media (max-width: 1024px) {
  .md-board-detail-edit-pill {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  /* Left-align the row so the state block + pill hug the start, and push the Cancel/Save
     actions to the right edge with an auto margin (base is justify-content: space-between).
     DOM order is state → pill → actions, so no reordering is needed. */
  .md-board-edit-session {
    justify-content: flex-start;
  }
  .md-board-edit-session__actions {
    margin-left: auto;
  }
}
/* ≤768px: hide the board NAME as well, to reclaim room on narrow screens — the board icon
   stays as the compact identifier, and the pill (already in flow from the tier above) moves
   up into the gap the name leaves. */
@media (max-width: 768px) {
  /* The rename pencil goes with the name it annotates — with the title gone it
     would read as an orphaned control between the icon and the pill. Edit Board
     Details is still reachable from the Board Actions panel at this width. */
  .md-board-edit-session__board-title,
  .md-board-edit-session__title-edit {
    display: none;
  }
}
/* ── 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--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;
}

/* 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;
  }
  .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;
}

/* Account page "Extras" card menu. It carries `.dropdown-menu` too (Bootstrap
   owns the open/close), so this rule only has to answer the bits Bootstrap sets
   that the modern skin does not: the menu hangs from the RIGHT edge of the card
   rather than the left, and Bootstrap's own text styling on the anchors is
   replaced by .md-settings-dropdown-item. Replaces an inline
   `style="right: 0; left: auto"` on the element. */
.md-acct-extras__menu {
  left: auto;
  right: 0;
  min-width: 240px;
  max-width: none;
  /* Nothing on this page locks page scroll when the menu opens — but the menu
     is absolutely positioned, so it does NOT add to the page's scroll height:
     opened near the bottom of the viewport its tail had nowhere to go and there
     was nothing to scroll to. Capping the height and letting the MENU scroll
     keeps every item reachable without the page having to grow. 70vh so it only
     kicks in when the menu genuinely can't fit.
     NO `overscroll-behavior: contain` here: `overflow-y: auto` makes this a
     scroll container even when the items fit (the usual case — five items is
     ~232px, well under the cap), and containment then SWALLOWS the wheel
     instead of chaining it, so the page froze whenever the pointer sat over
     the open menu. Default chaining scrolls the menu first and the page after
     it bottoms out, which is what the rest of the app's menus do. */
  max-height: min(70vh, 460px);
  overflow-y: auto;
}

/* Two-tone glyphs, sized and pinned so labels align on one text axis however
   long the label wraps. */
.md-acct-extras__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.md-acct-extras__label {
  min-width: 0;
}

/* Bootstrap 3's `.dropdown-menu > li > a` (0,1,2) out-specifies the flat
   `.md-settings-dropdown-item` (0,1,0), so the skin's own `display: flex`,
   `gap`, and `padding` never reached these anchors — they laid out as
   `display: block` with `padding: 3px 20px`, which put the glyph inline on the
   text baseline with ZERO space before the label. This selector is (0,2,2), so
   it wins; it is the one authoritative place the extras items answer Bootstrap
   (text-decoration was already here for the same reason). */
.md-acct-extras__menu > li > a.md-settings-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
}

.md-acct-extras__menu > li > a.md-settings-dropdown-item:hover,
.md-acct-extras__menu > li > a.md-settings-dropdown-item:focus {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
  text-decoration: 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;
}

/* 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 {
  /* 8px top padding (matches speak mode's .md-board-detail-main) so the sticky
     session bar has breathing room at the top of the board area (per request);
     sides 16px; bottom 28px for a comfortable last-row clearance. */
  padding: 8px 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;
}

/* 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". */
.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;
}

/* ── 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.

     Sheen stops darkened ~15% twice (2026-08-07): top highlight
     0.06 -> 0.051 -> 0.043 (less white), bottom shade 0.05 -> 0.058 -> 0.067
     (more black). NOTE the flat
     rgba(255,255,255,0.08) wash below is what sets most of this tile's
     brightness against the canvas — darkening the whole tile means moving that
     value, not these two. */
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 1.1px, transparent 1.6px) 0 0/14px 14px, linear-gradient(180deg, rgba(255, 255, 255, 0.043) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.067) 100%), rgba(255, 255, 255, 0.08) !important;
}

/* SPEAK mode (light) + the create-board-new live preview: the board canvas
   (.md-board-detail-main / .new-board-mockup-wrap) is the $brand-charcoal-dark
   surface, so the base rule's navy wash would make empty cells read as holes.
   Lift them with a white wash instead. Scoped to speak + light so EDIT (light
   board panel) keeps the navy wash and dark mode keeps its own; the preview is
   listed explicitly because it has no .md-shell--board-detail ancestor.
   !important + higher specificity beat the base rule's !important.

   Dot alpha 0.10 → 0.20 (2026-08-07): against the white-0.5 wash the texture was
   nearly imperceptible, so the cards read as blank slabs rather than the
   "empty container" cue the dots are there to give. Darker dots only — the wash
   stays 0.5 so overall card brightness against the canvas is unchanged.

   Dot RADIUS 0.8 → 1.1px solid / 1.2 → 1.6px feather, then TILE 10 → 14px
   (2026-08-07). Both matched by the dark-mode rule above so the two modes keep
   the same texture. The two knobs are independent: the tile sets dot DENSITY
   (how far apart), the gradient stops set dot SIZE. Bigger dots on the original
   10px tile read as crowded, so the tile was opened up to keep the texture airy
   at the larger radius.

   GRADIENT (2026-08-07): a top-lit sheen fading to a faint bottom shade, layered
   BETWEEN the dots and the flat wash. Kept as its own layer rather than replacing
   the wash colour — the solid background-color stays, so the card still has a
   defined fill (and the "is the wash light enough" regression guard in
   e2e/create-board-new-theme.spec.js keeps working). Both modes use the same
   shape, scaled to their own alpha budget. */
.md-shell--board-detail:not(.md-shell--board-detail-edit):not(.md-board-detail--dark) .md-board-detail-symbol-card--empty,
.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-symbol-card--empty {
  background: radial-gradient(circle at 50% 50%, rgba(27, 54, 93, 0.2) 1.1px, transparent 1.6px) 0 0/14px 14px, linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%, rgba(27, 54, 93, 0.05) 100%), 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;
  /* Query container so the folder tab (a descendant) can size itself in cqh — % of THIS
     cell's height — and thus scale with the BUTTON: shorter on small buttons, taller on big
     ones, with a matching (scaled) corner radius so short tabs never round into a "nub".
     container-type: size gives size/layout containment only (NOT paint), so the tab still
     protrudes above the cell via overflow: visible. The cell is a 1fr grid item with a
     determinate size, so size containment is a no-op for its own sizing. */
  container-type: size;
  container-name: folder-cell;
}

/* Folder back panel — elevated, solid with depth */
.md-folder-back {
  position: absolute;
  top: 6px;
  left: -1px;
  right: -1px;
  bottom: -3px;
  background: color-mix(in srgb, var(--btn-bg, rgb(104.6181818182, 119.5636363636, 141.9818181818)) 90%, black);
  border-radius: clamp(6px, 1.2vw, 16px);
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(27, 42, 65, 0.14);
  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: calc(34% + 4px);
  height: 6.6px;
  background: color-mix(in srgb, var(--btn-bg, rgb(104.6181818182, 119.5636363636, 141.9818181818)) 95%, black);
  /* Rounded-rectangle tab. A prior version used a trapezoid clip-path
     (polygon(16% 0, 84% 0, 100% 100%, 0 100%)) to angle the sides inward, but
     clip-path RE-CLIPS to the polygon's sharp vertices — it discards the
     border-radius entirely, so the corners rendered as hard points and the
     sides read as too-slanted. Dropping the clip lets border-radius round the
     top corners (the classic manila-folder tab); the mixin sets the actual
     radius in cqmin so it scales with the button. */
  border-radius: 11px 11px 0 0;
  pointer-events: none;
  transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
  overflow: hidden;
}

/* Narrow buttons (<40px wide) in DEFAULT folder mode: nudge the tab 4px left (10px → 6px) so it
   sits better on the smaller folder front. Driven by the .md-shell--buttons-narrow class the
   controller adds when the measured board_cell_width drops below 40px (board_buttons_narrow) —
   the same measured-width + shell-class pattern as md-shell--many-columns, rather than a
   container query (nothing else queries the folder-cell container, so it's unproven here).
   Scoped to default mode: Show-Labels-on-Tab / colored-corner have their own tab treatments. */
.md-shell--buttons-narrow .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-tab {
  left: 6px;
}

/* 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;
  /* Show-Labels-on-Tab uses a WIDE tab for the label text — keep it rectangular so
     the inward-angled trapezoid (default tab) doesn't clip the label at the edges. */
  clip-path: none;
}

/* 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.
     Sized in container-query units so it scales WITH the button instead of
     staying a fixed px that reads oversized on small cards. The card is
     `container-type: size` (line ~74778), so cqmin = 1% of the card's smaller
     side; ~22% of the card, clamped so it neither disappears on tiny cards nor
     overpowers large ones. This one proportional rule replaces the old fixed
     20/24/15px breakpoint steps (same cqw-scaling structure the card labels use). */
  width: clamp(13px, 22cqmin, 26px);
  height: clamp(13px, 22cqmin, 26px);
  /* 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 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;
  }
}
.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;
}

/* Locked while category grouping is on: the panel already carries the category, so the
   folder treatments would be a second, competing colour/label system on the same cell.
   The buttons are genuinely `disabled` in the template — this is only the paint, and it
   keeps them READABLE (0.55, not the usual dimmed-to-invisible) because the note above
   them has to be legible alongside. */
.md-folder-style-option--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.md-folder-style-locked-note {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(27, 54, 93, 0.78);
}

.md-board-detail--dark .md-folder-style-locked-note {
  color: rgba(255, 255, 255, 0.82);
}

.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 top reserve the folder cells use for
   their tab (calc(--bd-cell-min * 0.14), matching the mixin's folder-cell value) — so non-folder
   buttons render the same visual height as the folder fronts, keeping the grid rows aligned.
   Scoped to --has-folders (set by BoardDetailGrid.hasFolders) so a folder-LESS board does NOT
   inherit this reserve and its buttons keep full height with no dead top space. */
.md-board-detail-grid--has-folders: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: calc(var(--bd-cell-min, 90px) * 0.14);
}

/* ── 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): 6px visible tab (was 10px).
   Tightened to match the shorter tab (height 8% of the backdrop, down from 12%):
   the tab now protrudes ~4px less, so the row space reserved above each card
   drops with it. */
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) {
  /* Default folder view: $visible tracks the tab height. The tab was trimmed 2px
     (height calc(15% - 2px)), so $visible drops 9px → 7px to pull the rows back in by the
     same 2px — back-top 9px, button top padding 11px (was 13px). Scoped to this invocation
     only — the Show-Labels-on-Tab variant below keeps its own default. */
  /* Folder-tab geometry scales with the cell's SMALLER side, published as --bd-cell-min
     (min(width,height)) by board-detail.js so tab + back + reserve share ONE basis and can't
     diverge (mixing bases let the tab punch into the row above). min-side (not height) keeps the
     tab proportionate on tall-narrow buttons. The 90px fallback is only the pre-measurement seed;
     board-detail.js publishes --bd-cell-min synchronously on first render so tabs are correct from
     the first frame. $visible / $cell-pad-offset are unused (the @include sites still pass them). */
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-back {
  top: calc(var(--bd-cell-min, 90px) * 0.13);
  /* Bottom overhang pulled in 1px more per request (−2px → −1px). */
  bottom: -1px;
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-tab {
  /* Reserve (0.14, the cell's padding-top below) sits ABOVE the tab's protrusion (0.085 up from
     the back top at 0.13 → the tab's top lands ~0.045·min below the cell top): that gap is the
     "space between rows" — the tab keeps its full height and the ROWS open up around it, so it
     never reaches the row above at ANY grid-gap. DEFAULT folder mode only — Show-Labels-on-Tab
     overrides height/top. */
  height: calc(var(--bd-cell-min, 90px) * 0.12);
  top: calc(var(--bd-cell-min, 90px) * -0.085);
  border-radius: calc(var(--bd-cell-min, 90px) * 0.04) calc(var(--bd-cell-min, 90px) * 0.04) 0 0;
  /* Slight file-tab taper: the top edge is drawn a touch narrower than the base so the
     sides angle gently inward, like a real folder tab. A clip-path trapezoid gives a crisp
     taper but RE-CLIPS to sharp polygon vertices — it discards the border-radius entirely,
     which is exactly why the corners read as un-rounded before. A subtle perspective tilt
     narrows the top while PRESERVING the rounded corners. Anchored at the bottom so the tab
     stays seated on the folder back. */
  transform: perspective(80px) rotateX(15deg);
  transform-origin: 50% 100%;
}
.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: calc(var(--bd-cell-min, 90px) * 0.14);
}
.md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) {
  /* Non-folder cells pick up the SAME card reserve so card tops stay flush across a mixed row —
     but that rule is moved OUT of this mixin to a --has-folders-scoped selector (search
     "has-folders" below), so folder-LESS boards don't inherit dead top space. */
}

/* 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) {
    /* Folder-tab geometry scales with the cell's SMALLER side, published as --bd-cell-min
       (min(width,height)) by board-detail.js so tab + back + reserve share ONE basis and can't
       diverge (mixing bases let the tab punch into the row above). min-side (not height) keeps the
       tab proportionate on tall-narrow buttons. The 90px fallback is only the pre-measurement seed;
       board-detail.js publishes --bd-cell-min synchronously on first render so tabs are correct from
       the first frame. $visible / $cell-pad-offset are unused (the @include sites still pass them). */
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-back {
    top: calc(var(--bd-cell-min, 90px) * 0.13);
    /* Bottom overhang pulled in 1px more per request (−2px → −1px). */
    bottom: -1px;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) .md-folder-tab {
    /* Reserve (0.14, the cell's padding-top below) sits ABOVE the tab's protrusion (0.085 up from
       the back top at 0.13 → the tab's top lands ~0.045·min below the cell top): that gap is the
       "space between rows" — the tab keeps its full height and the ROWS open up around it, so it
       never reaches the row above at ANY grid-gap. DEFAULT folder mode only — Show-Labels-on-Tab
       overrides height/top. */
    height: calc(var(--bd-cell-min, 90px) * 0.12);
    top: calc(var(--bd-cell-min, 90px) * -0.085);
    border-radius: calc(var(--bd-cell-min, 90px) * 0.04) calc(var(--bd-cell-min, 90px) * 0.04) 0 0;
    /* Slight file-tab taper: the top edge is drawn a touch narrower than the base so the
       sides angle gently inward, like a real folder tab. A clip-path trapezoid gives a crisp
       taper but RE-CLIPS to sharp polygon vertices — it discards the border-radius entirely,
       which is exactly why the corners read as un-rounded before. A subtle perspective tilt
       narrows the top while PRESERVING the rounded corners. Anchored at the bottom so the tab
       stays seated on the folder back. */
    transform: perspective(80px) rotateX(15deg);
    transform-origin: 50% 100%;
  }
  .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: calc(var(--bd-cell-min, 90px) * 0.14);
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-tab-labels):not(.md-board-detail-grid--folder-colored-corner) {
    /* Non-folder cells pick up the SAME card reserve so card tops stay flush across a mixed row —
       but that rule is moved OUT of this mixin to a --has-folders-scoped selector (search
       "has-folders" below), so folder-LESS boards don't inherit dead top space. */
    /* 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. */
  }
}
/* Board-button padding scales with the BUTTON, not the viewport. A percentage
   resolves against the grid cell's width, so this reads "1% of the button,
   floored at a 1px hairline, capped at the base 4px": small buttons get their
   1px no matter how wide the screen is, big buttons keep a comfortable frame.
   Replaces a `@media (max-width: 1024px) { padding: 1px }` rule that keyed off
   the wrong axis — a dense board on a WIDE screen (14 columns at 1660px →
   108×44px buttons) never matched it and kept the full 4px, spending 8px of a
   44px button (18% of its height) on frame instead of symbol.
   A container query would be the precise tool, but a container cannot query
   ITSELF, and making the parent cell a container implies `contain: layout`,
   which puts a stacking context on every cell and risks trapping the protruding
   folder tab under its neighbour. Percentage padding needs no containment and no
   breakpoint. Still scoped to .md-board-detail-grid so the other symbol-card
   contexts (colour legend, board previews) keep the flat base 4px.
   VERTICAL padding is a flat 1px hairline and deliberately does NOT scale: a CSS
   percentage always resolves against the containing block's WIDTH, even for
   padding-top/bottom, so a wide-but-short button (108x44) was being given a
   vertical inset sized by its width — the wrong axis entirely, and the source of
   the dead band under the symbol on short cards. Horizontal padding still scales,
   because there width IS the right axis. */
.md-board-detail-grid .md-board-detail-symbol-card {
  padding: 1px clamp(1px, 1%, 4px);
}

@media (max-width: 1024px) {
  /* The label's own 3px/5px padding is the other half of the same problem: with
     the bigger small-screen font above, that 8px of vertical chrome came
     straight out of the symbol holder (flex:1 gets only what's left), shrinking
     the symbol on sparse boards even as the word grew. Trim it to a hairline so
     the word can grow WITHOUT costing the symbol. Bottom goes to 0, matching the
     intent of the ≤768px rule further up. Single-class specificity on purpose:
     the tighter @container short-card tiers below are later in source and still
     take over on genuinely short cards. */
  .md-board-detail-symbol-card__label {
    padding: 1px 1px 0;
  }
}
/* 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 {
  /* Folder-tab geometry scales with the cell's SMALLER side, published as --bd-cell-min
     (min(width,height)) by board-detail.js so tab + back + reserve share ONE basis and can't
     diverge (mixing bases let the tab punch into the row above). min-side (not height) keeps the
     tab proportionate on tall-narrow buttons. The 90px fallback is only the pre-measurement seed;
     board-detail.js publishes --bd-cell-min synchronously on first render so tabs are correct from
     the first frame. $visible / $cell-pad-offset are unused (the @include sites still pass them). */
}
.md-board-detail-grid--folder-tab-labels .md-folder-back {
  top: calc(var(--bd-cell-min, 90px) * 0.13);
  /* Bottom overhang pulled in 1px more per request (−2px → −1px). */
  bottom: -1px;
}
.md-board-detail-grid--folder-tab-labels .md-folder-tab {
  /* Reserve (0.14, the cell's padding-top below) sits ABOVE the tab's protrusion (0.085 up from
     the back top at 0.13 → the tab's top lands ~0.045·min below the cell top): that gap is the
     "space between rows" — the tab keeps its full height and the ROWS open up around it, so it
     never reaches the row above at ANY grid-gap. DEFAULT folder mode only — Show-Labels-on-Tab
     overrides height/top. */
  height: calc(var(--bd-cell-min, 90px) * 0.12);
  top: calc(var(--bd-cell-min, 90px) * -0.085);
  border-radius: calc(var(--bd-cell-min, 90px) * 0.04) calc(var(--bd-cell-min, 90px) * 0.04) 0 0;
  /* Slight file-tab taper: the top edge is drawn a touch narrower than the base so the
     sides angle gently inward, like a real folder tab. A clip-path trapezoid gives a crisp
     taper but RE-CLIPS to sharp polygon vertices — it discards the border-radius entirely,
     which is exactly why the corners read as un-rounded before. A subtle perspective tilt
     narrows the top while PRESERVING the rounded corners. Anchored at the bottom so the tab
     stays seated on the folder back. */
  transform: perspective(80px) rotateX(15deg);
  transform-origin: 50% 100%;
}
.md-board-detail-grid--folder-tab-labels .md-board-detail-grid__cell--folder {
  padding-top: calc(var(--bd-cell-min, 90px) * 0.14);
}
.md-board-detail-grid--folder-tab-labels {
  /* Non-folder cells pick up the SAME card reserve so card tops stay flush across a mixed row —
     but that rule is moved OUT of this mixin to a --has-folders-scoped selector (search
     "has-folders" below), so folder-LESS boards don't inherit dead top space. */
}

/* 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;
  }
}
/* Small-screen button labels.
   These coefficients were measured, not guessed: on a 14-column board at
   1024x768 the old `clamp(10px, 14cqw, pref)` bottomed out on its 10px FLOOR
   while the user's chosen button text size was 35px — the word rendered at 29%
   of the requested size and was unreadable at arm's length. Two changes:
   (1) `cqw` -> `cqmin`. Width-only sizing ignores how tall the button is, which
       is the axis that actually varies as rows are added; `cqmin` tracks the
       smaller dimension so the label fits either way and can't outgrow a narrow
       card. Matches the height-aware @container tiers below, so the two agree
       instead of contradicting each other.
   (2) Higher coefficient + higher floor, so the label lands near the user's
       preference instead of collapsing to the floor. The clamp ceiling is still
       `--bd-button-text-size`, so the preference remains the upper bound and
       nothing grows past what the user asked for.
   Card padding drops to 1px at <=1024px (see the card rule) which widens the
   container box these percentages resolve against, so the symbol keeps its room
   even as the word gets bigger. */
@media (max-width: 1200px) {
  .md-board-detail-symbol-card__label {
    font-size: clamp(13px, 26cqmin, var(--bd-button-text-size, 15px)) !important;
  }
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(13px, 26cqmin, var(--bd-button-text-size, 15px)) !important;
  }
  .md-board-detail-grid--text-pos-text_only .md-board-detail-symbol-card__label {
    font-size: clamp(14px, 30cqmin, var(--bd-button-text-size, 19px) * 1.2) !important;
  }
}
@media (max-width: 820px) {
  .md-board-detail-symbol-card__label {
    font-size: clamp(12px, 24cqmin, var(--bd-button-text-size, 15px)) !important;
  }
  /* Below 820px the empty-state copy SCALES down with the viewport, from its 14px base to a
     12px floor — the same floor the board label directly above steps to at this breakpoint,
     so the panel's type never renders smaller than the buttons beside it.
     1.71vw is chosen so the ramp STARTS at the breakpoint rather than jumping: 820 x 0.0171
     = 14.0px, so the size is continuous across 820px, and it reaches the 12px floor at about
     700px and holds there.
     The floor is deliberate and is not to be lowered to make long copy fit. An earlier
     revision used 9px for exactly that reason; on an AAC surface the copy is the variable,
     not the type size. */
  .md-board-detail-prediction-rail__empty {
    font-size: clamp(12px, 1.71vw, 14px);
  }
}
@media (max-width: 640px) {
  /* At this width the panel is one board button wide on a phone — too narrow for a
     sentence, which would wrap to a stack of one- and two-word lines. Turn it into a
     vertical spine label instead: it reads cleanly in a narrow column and names the panel
     rather than instructing, which is the honest thing to do when there is no room to
     explain. The copy stays in the DOM for wider widths; only the display swaps. */
  .md-board-detail-prediction-rail__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
  }
  .md-board-detail-prediction-rail__empty-copy {
    display: none;
  }
  .md-board-detail-prediction-rail__empty-spine {
    display: block;
    /* Bottom-to-top, the convention for a left-hand spine label. `vertical-rl` plus a 180
       degree rotation reads upward; text-orientation:mixed keeps Latin glyphs upright
       relative to the line rather than individually rotated. */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    /* Uppercased in CSS, not in the source string: the translated value stays natural-case
       so locales that do not uppercase meaningfully are unaffected. */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
  }
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(12px, 24cqmin, 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(13px, 28cqmin, var(--bd-button-text-size, 19px) * 1.2) !important;
  }
}
/* ── Height-aware button scaling (short cards) ──────────────────────────────
   The label rules above only look at the card WIDTH (viewport @media + `cqw`), so on
   a wide-but-short button — small screens, short viewports, or many rows — the label
   held its full width-based size while `__image` (flex:1, leftover space only) got
   squeezed to an unrecognizable symbol. The card has `container-type: size`, so once a
   card gets genuinely SHORT, size the label off its SMALLER dimension (`cqmin`) and
   trim the label padding, so the symbol and word scale DOWN TOGETHER and both stay
   visible. `cqmin` (not `cqh`) also stops the font from outgrowing a narrow card.
   Clamp upper bound stays the user's chosen `--bd-button-text-size`, so tall cards
   (query doesn't fire) and the pref itself are untouched. Placed after the width rules
   so it wins by source order whenever the card is short. Mirrors the existing
   `clamp(px, Ncqw, pref)` structure on the height axis.
   NOTE: intentionally NOT `!important`. label_fit.js applies its fit
   size via a plain inline style, which must keep winning; a plain rule here (later in
   source than the base rule, equal specificity) still overrides the base on wide screens
   where no `!important` @media width-rule competes, while inline label_fit and the narrow-
   viewport width rules stay in control where they already are. */
@container symbol-card (max-height: 72px) {
  .md-board-detail-symbol-card__label,
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(13px, 26cqmin, var(--bd-button-text-size, 15px));
    line-height: 1.1;
    padding: 1px 2px 2px;
  }
}
@container symbol-card (max-height: 48px) {
  .md-board-detail-symbol-card__label,
  .md-board-detail-symbol-card__label-input {
    font-size: clamp(12px, 24cqmin, var(--bd-button-text-size, 15px));
    line-height: 1.05;
    /* 3 lines, not 2. A line cap is a MAXIMUM, so a short label still renders on
       one line and is unaffected — this only changes labels that genuinely need
       the room, which at 2 lines were being ellipsised instead. The label is
       `flex-shrink: 0`, so the extra lines come out of `__image` (`flex: 1 1
       auto` takes only what is left): the symbol shrinks so the WORD survives,
       which is the right trade on an AAC button — a cut-off word can't be read
       at all. */
    -webkit-line-clamp: 3;
    max-height: 3.15em;
    padding: 0 1px 1px;
  }
}
/* Under 45px tall the button has no room to spare: push the word up tight
   against its own glyph box, so the label's chrome — not its text — is what
   yields. Zero padding and line-height 1 (no leading above or below the glyphs).
   The font size is deliberately NOT reduced further; shrinking the word to grow
   the symbol just trades one unreadable thing for another.
   The line cap stays at 3 (inherited from the tier above rather than dropped to
   1): a cap is a MAXIMUM, so one- and two-word labels are unaffected, but a long
   one like "Give me time to answer." can use the lines it needs instead of being
   ellipsised. Those lines come out of `__image`, since the label is
   `flex-shrink: 0` and the image is `flex: 1 1 auto` — the symbol shrinks so the
   word survives. Deliberate: at this size a truncated word conveys nothing,
   while a smaller symbol still does. */
@container symbol-card (max-height: 45px) {
  .md-board-detail-symbol-card__label,
  .md-board-detail-symbol-card__label-input {
    line-height: 1;
    -webkit-line-clamp: 3;
    max-height: 3em;
    padding: 0;
  }
}
@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;
    /* Also subtract the shell's own top padding — the layout is nested inside it,
       so a bare 100dvh made the page exactly 2px taller than the viewport and
       forced a scrollbar on short screens with nothing actually to scroll to. */
    min-height: calc(100dvh - var(--topbar-height, 68px) - var(--bd-shell-pad-top, 0px));
  }
  .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. */
  }
  /* NOT in colored-corner mode. These two shrink a folder cell — 0.25rem off the bottom of
     the CELL, and the card to 92% of its width — to make room for the folder BACK and TAB
     that stick out of it. Colored-corner folders have neither: the card itself is the whole
     decoration, so the inset bought nothing and simply made every folder smaller than the
     buttons beside it. Measured at 1017px: a folder card 53.5 x 42px against 56 x 46px for
     its neighbour in the same row.
     `.md-board-detail-grid:not(…)` rather than a bare `:not()` on the cell — the mode class
     lives on the GRID, not on the cell. The specificity that adds (0,3,0 / 0,4,0) is checked
     against what follows: the only later rules touching these elements are the ≤900px
     `margin-top` and a dark-mode background, neither of which sets these properties. */
  .md-board-detail-grid:not(.md-board-detail-grid--folder-colored-corner) .md-board-detail-grid__cell--folder {
    margin-bottom: 0.25rem;
  }
  .md-board-detail-grid:not(.md-board-detail-grid--folder-colored-corner) .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. */
  /* Same custom properties as the base rule. Both were literals before, and because this rule sits
     ~13,500 lines later at identical specificity (0,2,0) it beat the --is-loading rule on source
     order alone — so the loading cue did not render AT ALL in dark mode. Consuming the vars removes
     the contest: the cue sets them on the ancestor and inheritance carries them here. */
  border-color: rgba(255, 255, 255, var(--pred-tile-border-a, 0.24));
  background: linear-gradient(135deg, rgba(255, 255, 255, var(--pred-tile-a-hi, 0.16)) 0%, rgba(255, 255, 255, var(--pred-tile-a-lo, 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, var(--pred-tile-hover-hi, 0.22)), rgba(255, 255, 255, var(--pred-tile-hover-lo, 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. */
/* Dark mode: folder back/tab intentionally have NO background override anymore, so they inherit
   the base color-mix rules — the folder FRONT color darkened 10% for the back and 20% for the
   tab — i.e. dark mode now matches the LIGHT-mode versions (per request). --btn-bg (the front
   color) is set inline on the folder-back in both themes, so colored folders render the same
   darkened front color in dark mode; uncolored folders fall back to the same charcoal the light
   rules use. (Previously these forced charcoal +30%, which ignored the folder color in dark.) */
/* ── 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;
}

/* Button Settings header: the modal title + a live COPY of the button as it
   appears in speak mode (colour, symbol, label) — replaces the plain "- label"
   text so the user sees exactly which button they're editing. */
.md-bs-header__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.md-bs-header__title-row h3 {
  margin: 0;
}

/* Text-position preference (shared by the header + Color-tab mockups): label on top
   flips the flex column so the label sits ABOVE the symbol (DOM order is
   symbol-then-label = "text on bottom"); "text only" hides the symbol entirely (the
   template omits the <img>), matching how the board renders in speak mode. */
.md-bs-header__button.md-bs-preview--text-top {
  flex-direction: column-reverse;
}

.md-bs-header__button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  /* Matches the ACTUAL board button's speak-mode size — didInsertElement measures a
     live board card and publishes --bs-preview-w / --bs-preview-h (60px fallback).
     CLAMPED: the measured value is a real board card, which on a 2x2 or 3x3 starter
     board is 300-500px — unclamped that renders a half-screen "preview" that pushes
     the modal title out of the header. The bounds keep it recognisable as a thumbnail
     at both extremes (tiny on a 24-column board, huge on a 2x2). */
  width: clamp(44px, var(--bs-preview-w, 60px), 120px);
  height: clamp(44px, var(--bs-preview-h, 60px), 120px);
  padding: 6px;
  border-radius: 12px;
  /* Colour comes from the inline style (button's fill + border); this sets the
     width/style + a neutral fallback so a colourless button still frames. */
  border: 2px solid #cbd3de;
  box-shadow: 0 1px 4px rgba(27, 54, 93, 0.14);
  overflow: hidden;
  /* Size container so the symbol + label scale WITH the button (mirrors the board
     card's `container-type: size`), so a big button gets a big symbol/label. */
  container-type: size;
}

.md-bs-header__button-img {
  max-width: 78cqmin;
  max-height: 55cqmin;
  object-fit: contain;
}

.md-bs-header__button-label {
  font-size: clamp(11px, 15cqmin, 22px);
  font-weight: 600;
  color: #222222;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.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;
}

/* Explainer under "Setting up your board...". The copy step takes 30-40s and a
   bare spinner reads as a hang, so this says what is happening and why. Quieter
   than the label above it, and width-capped so it wraps to 2-3 short lines
   rather than one long one. */
.md-board-details-modal__overlay-subtext {
  display: block;
  margin-top: 6px;
  max-width: 28em;
  /* 0.70, not 0.65. Composited over the card's white background, 0.65 gives
     #6B7C96 = 4.23:1, which fails WCAG 1.4.3 for normal-size text (needs 4.5:1).
     0.70 gives #5F728E = 4.89:1. It matters more here than the
     ratio alone suggests: this is the only explanation on screen during a 30-40s
     blocking copy, so it is exactly the text a low-vision user needs to read.
     Kept in step with the sibling __overlay-count below, which had the same
     failure at the same value. */
  color: rgba(27, 54, 93, 0.7);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
}

/* 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;
  /* 4.5:1 applies here too — 15px/600 is below the 18.66px large-text
     threshold, so this is normal-size text. See __overlay-subtext above. */
  color: rgba(27, 54, 93, 0.7);
}

@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;
}

/* 20% de-saturation on the rendered preview board buttons — applies wherever the
   board-preview-canvas is used (the board-preview modal AND the Find Boards preview). */
.board-preview-canvas__el {
  filter: saturate(0.8);
}

/* 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;
  /* D7: pin the CTA row to the bottom of the scrolling modal body. At short
     viewport heights the primary action ("Pick this Board" in picker/recommend
     mode, "Try This Board" otherwise) sits below the fold — the modal DOES
     scroll, so it was reachable but easy to miss at the exact moment someone
     chooses a home board.

     `bottom: 0` is the pinned-footer case, not the fragile one: the element is
     the last child of a TALL containing block (.md-board-preview__canvas-col,
     which holds the canvas), so sticky has the full column height to pull it
     UP into view. The scrollport it binds to is
     .md-board-details-modal__body (`overflow: auto`); neither
     .md-board-preview nor __canvas-col declares overflow, so nothing
     intermediate captures it — checked, because an ancestor with `overflow`
     hidden on either axis silently becomes the scrollport (the bug behind the
     .md-shell sticky fix).

     Negative inline margins cancel the gutters and are re-added as padding.
     Precisely, because an earlier version of this comment claimed more than the
     geometry delivers ("spans the full width... content does not show through
     beside it"): the RIGHT edge does land exactly on the modal body's border box
     (body padding-right 28 → row margin -15 → col padding-right 15 → +28 = 0), so
     nothing shows through on that side. The LEFT does not, because this element
     lives inside `.md-board-preview__canvas-col`, which is bootstrap `col-sm-8`
     and therefore starts a third of the way across the row at ≥768px — the -28px
     only pulls it into the inter-column gutter, not to the body's left edge.
     Above 768px the info column (`col-sm-4`) scrolls BESIDE the bar rather than
     under it. That is cosmetic and mostly invisible, since
     .md-board-details-modal__content is also white, and it is left alone: making
     the bar genuinely full-width means lifting it out of the column, which
     changes the layout this modal was designed around. Below 768px col-sm-8 goes
     full width and the geometry is exact. Background matches
     .md-board-details-modal__content.

     `bottom: -28px` rather than 0 because sticky resolves against the
     scrollport's CONTENT box: at `bottom: 0` the bar floats 28px up from the
     body's edge (measured) and scrolled content shows through the body's
     28px bottom padding beneath it. Pushing it down by that padding and adding
     the same 28px to its own padding-bottom keeps the buttons visually where
     they were while the background covers the gutter. */
  position: sticky;
  bottom: -28px;
  z-index: 2;
  margin-left: -28px;
  margin-right: -28px;
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: 44px;
  background: #fff;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
}

/* 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;
  /* 0.70, not 0.60. These are 13px labels on a white card: 0.60 composites to
     #76869E = 3.69:1, below the 4.5:1 WCAG 1.4.3 needs for
     normal-size text. 0.70 = #5F728E = 4.89:1, matching the loading-overlay
     text above. */
  color: rgba(27, 54, 93, 0.7);
  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-board-preview__meta.md-board-preview__meta {
  /* Visible description for a metric whose label alone is ambiguous, tied to its
     <dt> with aria-describedby (see components/board-preview.hbs). Smaller and
     lighter than the value it follows, but still at the 4.5:1 floor — it is the
     text that stops the number reading like a bug, so it cannot be decorative. */
}
.md-board-preview__meta.md-board-preview__meta .md-board-preview__meta-help {
  display: block;
  margin-top: 2px;
  color: rgba(27, 54, 93, 0.7);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.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;
  max-height: 40vh;
  overflow-y: auto;
}

/* 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;
}

/* Opt-in grid listbox (register month/year). Large cells so eye-gaze
   and switch users can hit a month or year without scrolling a
   12- or 120-row list. Search / divider / empty rows span the grid. */
.bound-select--grid .bound-select__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(48px, 1fr));
  gap: 6px;
  right: auto;
  min-width: max(100%, 280px);
  max-height: 360px;
}

.bound-select--grid.bound-select--cols-4 .bound-select__list {
  grid-template-columns: repeat(4, minmax(48px, 1fr));
  min-width: max(100%, 320px);
}

.bound-select--grid .bound-select__search,
.bound-select--grid .bound-select__divider,
.bound-select--grid .bound-select__empty {
  grid-column: 1/-1;
}

.bound-select--grid .bound-select__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 6px;
  text-align: center;
  white-space: normal;
}

.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;
}

/* Group heading — the custom list's equivalent of <optgroup label>. Inert
   (not an option, no hover/selected state), so it reads as structure rather
   than as a disabled choice: uppercase micro-label, muted, with its options
   indented beneath it. A heading is never rendered without options under it
   (see modern-select.js#filteredContent). */
.modern-select.md-modal-modern-select .modern-select__group-label {
  padding: 10px 14px 4px;
  /* Was 11px at rgba($la-navy, 0.5) — composites to #8D9AAE on the white list for
     2.87:1, under AA, and 3px under the size floor. These headings are the only thing
     separating a long grouped option list into readable sections. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.72);
  cursor: default;
  pointer-events: none;
}

.modern-select.md-modal-modern-select .modern-select__group-label ~ .modern-select__option {
  padding-left: 26px;
}

.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);
}

/* Segmented two-choice control (e.g. Primary Solution: app vs. Something Else) —
   modern replacement for the Bootstrap `.btn-group` toggle. A pill container with
   equal-width options; the active one gets the slate-blue brand fill. */
.md-modal-segment {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.1);
}

.md-modal-segment__option {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.md-modal-segment__option:hover {
  background: rgba(27, 54, 93, 0.06);
}

.md-modal-segment__option--active,
.md-modal-segment__option--active:hover {
  background: linear-gradient(135deg, #5A6A85, #46505F);
  color: #fff;
  box-shadow: 0 2px 6px rgba(70, 80, 95, 0.28);
}

/* Read-only value line (e.g. the current home board key). */
.md-modal-value {
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  margin: 0 0 10px;
  word-break: break-word;
}

/* 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);
  /* Also used as <button> in user-results modal — reset UA button chrome. */
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.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;
}

/* bound-select / modern-select use tagName:span; an inline span shrinks
   the hit target so clicks on the painted trigger miss the <button>.
   Same fix as `.md-modal-body .md-modal-field > span`. */
.md-org-settings-field > span {
  display: block;
  width: 100%;
  max-width: 100%;
}

.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);
    }
  }
}
/* ── Background board-copy drawer ──────────────────────
   Bottom-RIGHT companion to .ll-toast: when a copy is sent to the background
   (click outside the "Copying Board" modal), it minimizes to this drawer, and
   the finished/failed toast then takes the same slot. Its own block rather than
   an .ll-toast modifier because .ll-toast is bottom-centered app-wide and is
   driven by a different component. */
.ll-copy-drawer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: min(360px, 100vw - 48px);
  display: flex;
  /* Top-aligned, not centered: the result card grows to two lines plus an action
     row, and a vertically-centered icon drifts away from the headline it marks. */
  align-items: flex-start;
  gap: 14px;
  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;
  z-index: 10000;
  animation: ll-copy-drawer-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smaller than the modal's 32px spinner — this is a status badge, not the
   main event. */
.ll-copy-drawer__spinner {
  width: 22px;
  height: 22px;
  border-width: 2px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ll-copy-drawer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2A9D8F;
  margin-top: 2px;
}

.ll-copy-drawer__body {
  flex: 1;
  min-width: 0;
}

.ll-copy-drawer__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.ll-copy-drawer__hint {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(27, 54, 93, 0.65);
  word-break: break-word;
}

/* Result-card actions. The card waits to be answered rather than fading, so the
   choice has to be reachable — full-size targets, not text links. */
.ll-copy-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ll-copy-drawer__btn {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: #fff;
  color: #1B365D;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ll-copy-drawer__btn:hover {
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
}

.ll-copy-drawer__btn--primary {
  background: #2A9D8F;
  border-color: #2A9D8F;
  color: #fff;
}

.ll-copy-drawer__btn--primary:hover {
  /* color.adjust(), not the deprecated global darken(), and not a hardcoded hex:
     this sheet already `@use`s sass:color (top of file) and derives its palette
     that way (see the .fitzgerald-*-soft variants in _variables.scss), so the
     hover stays tied to $brand-verdigris and follows the brand color if it moves. */
  background: rgb(34.4653266332, 128.8346733668, 117.3462311558);
  border-color: rgb(34.4653266332, 128.8346733668, 117.3462311558);
  color: #fff;
}

.ll-copy-drawer__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2A9D8F;
}

.ll-copy-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  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-copy-drawer__close:hover {
  background: rgba(27, 54, 93, 0.08);
  color: #1B365D;
}

.ll-copy-drawer__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2A9D8F;
}

/* Result states reuse the toast's accent language */
.ll-copy-drawer--done {
  border-left-color: #2ecc71;
}

.ll-copy-drawer--done .ll-copy-drawer__icon {
  color: #2ecc71;
}

.ll-copy-drawer--error {
  border-left-color: #C0392B;
}

.ll-copy-drawer--error .ll-copy-drawer__icon {
  color: #C0392B;
}

@keyframes ll-copy-drawer-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-copy-drawer {
    animation: none;
  }
  .ll-copy-drawer__spinner {
    animation: none;
  }
}
@media (max-width: 480px) {
  .ll-copy-drawer {
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}
/* Lift clear of .ll-toast while one is on screen. Both are fixed at z-index 10000;
   at <=480px the toast also goes full-width at bottom:12px, so at rest the two
   occupy the SAME strip and this drawer — later in application.hbs, equal z-index —
   painted straight over it. They also overlap on mid-width desktops (~144px at
   900px). Offset = toast height + its bottom offset + a gap.
   MUST come after the <=480px block above: both selectors are single-class, so
   source order decides and the generic `bottom: 12px` would otherwise win on
   phones — exactly the case this fixes. Only applied while a toast is showing, so
   the resting position is unchanged. */
.ll-copy-drawer--above-toast {
  bottom: 100px;
}

@media (max-width: 480px) {
  .ll-copy-drawer--above-toast {
    bottom: 84px;
  }
}
/* ── 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);
  /* Centred on the base rule. The corner anchor D10 asked for belongs to the
     --navbar variant ONLY and is declared there; do not hoist it back up here.
     D10's whole argument — a fixed tap target in the middle of the TOP edge is a
     mis-tap risk and can sit over modal headers — is about a tab hanging DOWN
     from the navbar. --speak hangs UP from the BOTTOM edge over the board grid,
     where the trade is the opposite: at right:16px the tab covers the
     bottom-RIGHT communication cell of the board and the foot of the
     board-detail edit rail. On an AAC app an opaque overlay on a communication
     button is worse than a centred one, and bottom-centre is where this tab has
     always sat. */
  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 {
  /* Absolute + top:100% seats the tab immediately BELOW the navbar, and
     right/left/transform corner-anchor it so it lands clear of everything.
     This is D10's fix and it is scoped HERE rather than on the base rule
     because --speak hangs off the bottom edge over the board grid, where the
     same anchor would cover a communication button (see the base rule).

     The offset parent is `.app-navbar__inner`, not `.app-navbar` — the tab is a
     direct child of the inner wrapper (components/app-navbar.hbs:77) and
     `.app-navbar .app-navbar__inner` is `position: relative !important` (~3440).
     On authenticated pages that resolves to the same place, because
     #inner_header / .app-navbar / .app-navbar__inner are all pinned to
     `height: 70px !important` (~19944) with the navbar's 2rem padding zeroed —
     so `top: 100%` does land on the navbar's bottom edge. But `right: 16px`
     resolves inside the inner, whose right edge is already 16px in from
     `.app-navbar { padding-right: 16px !important }` (~19864), so the tab sits
     ~32px from the viewport, not 16. The media-query note below is written
     against that. `.app-navbar__inner { overflow: visible !important }` above is
     what lets the tab escape the navbar box — and now that this is `absolute`
     rather than `fixed`, that declaration is load-bearing: any ancestor
     `overflow` in this chain would clip the tab away entirely.

     Do NOT re-add `left: 50%; right: auto; transform: translateX(-50%)` here.
     That was tried on 2026-08-23 to "restore" centring for this variant, on the
     premise that it sits inside the navbar where centring is correct. At the
     time a `#within_ember…` rule was also forcing `position: fixed; top: 0`, so
     the centring applied to a PAGE-LEVEL tab and re-created the exact mis-tap
     target D10 reported — measured dead centre, 720px of a 1440px viewport.
     That override has since been removed (see the note further down). Two
     traps if this is revisited: at top:0 the corner is NOT free — the tab
     covers Settings / Support / the online-status control; and under
     `position: fixed` this rule's own `top: 100%` resolves against the VIEWPORT,
     dropping the tab to y=900, off-screen. */
  position: absolute;
  top: 100%;
  right: 16px;
  left: auto;
  transform: none;
}

/* Compact sizing through the 721-820 band as well as below 720 (that narrower
   breakpoint lives in the @media block further down and keeps its other rules).
   Reason is geometric, not cosmetic: from ~700 to ~820 the gap between the
   navbar (bottom 70) and the home page's secondary nav row beneath it (top 97)
   is only 28px, while the full-size tab is 36px tall — so a tab seated below
   the navbar necessarily clips that row. There is no vertical fix; no 36px gap
   exists. Narrowing the tab (141px vs 172px) clears the row HORIZONTALLY
   instead, because the row's right edge scales with the viewport while the
   tab's left edge is `100vw - 16 - width`.

   Measured at height 1138, this clears 760-820 (e.g. at 760 the tab's left edge
   is 603px and the row's rightmost control ends at 578px) and shrinks the
   overlap at 721 from 41px to 10px. It does NOT fully clear ~700-740, where a
   ~10-20px horizontal by 6px vertical clip of one control remains — see
   CLAIM-CHECK-BACKLOG.md A1. Above ~820 the gap opens to 72px+ and the
   full-size tab is clear regardless.

   Scoped to --navbar: the collision is with a row that only exists beneath the
   navbar, so there is no reason to shrink the --speak tab (which hangs off the
   bottom edge) below the 36px it already sits at — 36px is under the 44px
   recommended target as it is. Kept as its own block rather than widening the
   `@media (max-width: 720px)` block further down, which sets the same two values
   but also carries panel sizing that must stay at 720. */
@media (min-width: 721px) and (max-width: 820px) {
  .beta-feedback-drawer-tab--navbar {
    font-size: 0.95rem;
    min-height: 34px;
  }
}
.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;
}

/* NOTE: the TAB deliberately has no override here any more — it uses the
   `.beta-feedback-drawer-tab--navbar` rule's own `position: absolute; top: 100%`,
   which seats it directly beneath the navbar (position: relative, height 70).
   It previously forced `position: fixed; top: 0` so the tab could float over the
   navbar at top-CENTRE, where nothing sits. Corner-anchored that is wrong twice
   over: at top:0 the tab covers Settings / Support / the online-status control
   (measured at 1440px), and `position: fixed` also breaks the variant's own
   `top: 100%`, which then resolves against the VIEWPORT and drops the tab to
   y=900, off-screen. Absolute + top:100% + the base `right: 16px` collides with
   nothing. The drawer panel above still pins to top: 0 — only the tab changed. */
/* 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).
   ────────────────────────────────────────────────────────────────── */
/* User-select button grid alignment. The Bootstrap `.row` is float-based, so unequal
   card heights (2-line usernames + the "not available" line) make columns catch on
   taller neighbors and stagger out of a grid. Flex-wrap lays them in clean rows;
   stretching each column and filling the button gives equal-height cards per row. The
   button's inline `margin-bottom` row-spacing is relocated to the column (needs
   !important to beat the inline style) so cards can equalize. */
.user-select-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.user-select-grid > [class*=col-] {
  display: flex;
  margin-bottom: 20px;
}

.user-select-grid > [class*=col-] > .user_select,
.user-select-grid > [class*=col-] > .btn-group {
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
}

/* Compact variant (`<UserSelect @compact={{true}} />`, currently the
   switch-communicators modal) — the SAME markup laid out as a vertical list so
   picking a communicator reads like a dropdown rather than a grid of large cards.
   Bootstrap's col-* widths are plain classes, so a full-width override needs no
   !important; the avatar size, button padding and row gap DO, because the
   component writes those as inline `style` attributes and inline styles cannot be
   beaten any other way (same reason the base rules above use it).
   Scoped to the modifier, so the default card grid is untouched. */
.user-select-grid--compact {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  /* The card grid's row spacing is per-column; the list uses `gap` instead. */
}
.user-select-grid--compact > [class*=col-] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.user-select-grid--compact {
  /* Row: avatar left, name right, single line — not the centered column stack. */
}
.user-select-grid--compact .user_select.btn {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  text-align: left !important;
  /* The card grid wraps long usernames onto a second line to keep cards equal
     height; a list row has no such constraint, so keep each entry one line. */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-select-grid--compact .user_select.btn img {
  height: 32px !important;
  width: 32px !important;
  max-width: 32px !important;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.user-select-grid--compact {
  /* The markup separates avatar and name with <br>; in a row that would force a
     line break, so collapse it. */
}
.user-select-grid--compact .user_select.btn br {
  display: none;
}
.user-select-grid--compact {
  /* With the <br>s collapsed, the "not available" note would run straight into
     the name ("me not available"). Push it to the row's trailing edge so it reads
     as a status against that entry — which is what it is. The row stays present
     rather than hidden because `include_me` (user-select.js) toggles this entry's
     disabled state when `skip_me` changes at runtime, so it has to exist. */
}
.user-select-grid--compact .user_select.btn .text-muted {
  margin-left: auto;
  padding-left: 12px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.user-select-grid--compact {
  /* Selected state keeps the verdigris treatment from the base rules but drops the
     wide halo, which is too heavy at row scale and overlapped its neighbours. */
}
.user-select-grid--compact .user_select.btn-info {
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.3) !important;
}

.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: break-word;
  word-break: break-word;
  hyphens: manual;
}

.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: break-word;
  word-break: break-word;
  hyphens: manual;
}

/* 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;
  /* SAME glass surface as the header session bar (.md-board-edit-session), shared
     via the glass-bar-surface mixin so the rails match the header — background,
     white border, top-highlight sheen, and layered shadow all from ONE source.
     Keeps the rail's own 14px radius. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(238, 244, 251, 0.64) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 14px 22px -16px rgba(255, 255, 255, 0.65), inset 0 -10px 22px -18px rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 12px 30px rgba(27, 54, 93, 0.12); /* soft outer elevation */
  color: #1B365D;
  will-change: transform;
  transform: translateZ(0);
  border-radius: 14px;
  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. Light mode uses navy, dark mode (paired rule below)
     uses white. Full-strength, darkened navy (was rgba .85, which read washed
     out against the bright glass — per request the collapsed captions need to be
     darker); still visibly quieter than the ACTIONS / SETTINGS headers because
     those are teal, not navy. */
  color: rgb(10.935, 21.87, 37.665) !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;
  /* Darkened a touch (was rgba .85) to match the expanded-panel label darkening,
     so the collapsed-rail content labels read the same depth (per request). */
  color: rgb(17.82, 35.64, 61.38) !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;
  /* Collapsed rail: the magnifier is a click target that expands the panel + focuses the
     search field (open_board_search_panel), so it reads as interactive. */
  cursor: pointer;
}

/* 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%;
  /* Match the right panel's section-icon chip: a translucent-white disc instead of
     the faint navy tint, so the two rails' icon backgrounds are identical. */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  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;
}

/* ── Rail hierarchy: Board Collections > Categorize > Board Actions ────────────
   `__row--collection` and `__row--categorize` had NO rules of their own — bare
   modifiers inheriting the transparent `__row` base, so they read as plain list items
   beside the outlined Board Actions toggle.

   Both now carry the SAME elevated surface, one step above the Board Actions
   `__filter-toggle`: more opaque fill, a tinted rather than neutral border, 600 weight,
   and a real drop shadow. Geometry (radius, padding, min-height) still matches the
   toggle so the three read as one family — the hierarchy is expressed in WEIGHT, not
   by making one of them a different shape.

   Board Collections then leads on its own with a GLOW (below). It is the only one of
   the three that navigates AWAY into another board; the other two act on the board in
   front of you. */
.md-board-edit-panel__row--collection,
.md-board-edit-panel__row--categorize {
  padding: 6px 10px 6px 9px;
  border: 1px solid rgba(90, 106, 133, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 1px 2px rgba(27, 54, 93, 0.06), 0 4px 10px rgba(27, 54, 93, 0.08);
}

/* The glow that separates Collections from Categorize now that their surfaces match.
   A soft accent halo BEHIND the button — two wide, low-alpha accent shadows under the
   existing lift, so it reads as light spilling from behind rather than as a second
   border. Deliberately restrained: this is a rail item, not a call to action, and a
   strong glow next to an AAC board competes with the board itself. */
.md-board-edit-panel__row--collection {
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 1px 2px rgba(27, 54, 93, 0.06), 0 4px 10px rgba(27, 54, 93, 0.08), 0 0 12px rgba(90, 106, 133, 0.3), 0 0 24px rgba(90, 106, 133, 0.16);
}

/* Hover/focus mirrors the Board Actions toggle so all three respond alike; Collections
   keeps its glow, intensified, so the hierarchy holds in every state rather than
   collapsing the moment the pointer lands. */
.md-board-edit-panel__row--collection:hover,
.md-board-edit-panel__row--collection:focus-visible,
.md-board-edit-panel__row--categorize:hover,
.md-board-edit-panel__row--categorize:focus-visible {
  background: rgba(90, 106, 133, 0.14);
  border-color: rgba(90, 106, 133, 0.44);
  color: #5A6A85;
}

.md-board-edit-panel__row--categorize:hover,
.md-board-edit-panel__row--categorize:focus-visible {
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 2px 4px rgba(27, 54, 93, 0.08), 0 6px 14px rgba(27, 54, 93, 0.1);
}

.md-board-edit-panel__row--collection:hover,
.md-board-edit-panel__row--collection:focus-visible {
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.04), 0 2px 4px rgba(27, 54, 93, 0.08), 0 6px 14px rgba(27, 54, 93, 0.1), 0 0 16px rgba(90, 106, 133, 0.42), 0 0 30px rgba(90, 106, 133, 0.22);
}

/* Open state matches `__filter--open` on the Board Actions toggle. */
.md-board-edit-panel__row--categorize.md-board-edit-panel__row--active {
  border-color: rgba(90, 106, 133, 0.4);
  background: rgba(90, 106, 133, 0.06);
}

.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;
}

/* Light mode: darken the side-panel labels for stronger contrast on the bright
   glass rails (per request — the earlier -8% wasn't dark enough). Covers both the
   left (Action) rail rows and the right (Settings) rail section headers. Dark mode
   keeps its own lighter label. */
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-edit-panel__label,
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-edit-right-panel__section-label {
  color: rgb(10.935, 21.87, 37.665);
}

/* Light mode: brighten the glass gradient on the three EDIT-mode rails ~15% (per
   request) — the session bar (header), the left Action panel, and the right
   Settings panel. They share the `glass-bar-surface` mixin, but so does the
   SPEAK-mode sentence bar (which was NOT asked to change), so override here on the
   edit surfaces only rather than editing the mixin. Brightness = alpha of the
   translucent-white stops over the dark canvas; each stop bumped ~15% (top clamps
   at opaque). Only the background gradient changes — border/sheen/shadow stay from
   the mixin so the rails still read as one system with the header. */
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-edit-session,
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-edit-panel,
.md-shell--board-detail-edit:not(.md-board-detail--dark) .md-board-edit-right-panel {
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(240, 246, 252, 0.74) 100%);
}

.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;
}

/* Dark-mode parity. Both rows share the elevated surface here too; Collections keeps
   the glow, which on a dark ground is where a halo actually reads BEST — a drop shadow
   disappears against dark, an accent glow does not. */
.md-board-detail--dark .md-board-edit-panel__row--collection,
.md-board-detail--dark .md-board-edit-panel__row--categorize {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.28);
}

.md-board-detail--dark .md-board-edit-panel__row--collection {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 14px rgba(90, 106, 133, 0.55), 0 0 28px rgba(90, 106, 133, 0.3);
}

.md-board-detail--dark .md-board-edit-panel__row--collection:hover,
.md-board-detail--dark .md-board-edit-panel__row--collection:focus-visible,
.md-board-detail--dark .md-board-edit-panel__row--categorize:hover,
.md-board-detail--dark .md-board-edit-panel__row--categorize:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.md-board-detail--dark .md-board-edit-panel__row--collection:hover,
.md-board-detail--dark .md-board-edit-panel__row--collection:focus-visible {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 18px rgba(90, 106, 133, 0.7), 0 0 34px rgba(90, 106, 133, 0.38);
}

.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;
  /* SAME glass surface as the header session bar (.md-board-edit-session), shared
     via the glass-bar-surface mixin so the rails match the header — background,
     white border, top-highlight sheen, and layered shadow all from ONE source.
     Keeps the rail's own 14px radius. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(238, 244, 251, 0.64) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 14px 22px -16px rgba(255, 255, 255, 0.65), inset 0 -10px 22px -18px rgba(27, 54, 93, 0.06), 0 1px 2px rgba(27, 54, 93, 0.05), 0 12px 30px rgba(27, 54, 93, 0.12); /* soft outer elevation */
  color: #1B365D;
  will-change: transform;
  transform: translateZ(0);
  border-radius: 14px;
  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%;
  /* Lighter chip on the bright glass rail (per request): a translucent-white disc
     instead of the faint navy tint, so the icon sits on a light background. */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  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 when floating-ui FLIPS them
   ABOVE their target: 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). Flipped above, both rode
   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.

   TOP PLACEMENT ONLY — do not re-add a `[data-popper-placement^=bottom]` variant.
   There used to be one (`calc(10rem + 16px)`), and it was a bug: whether the
   popover flips depends on how much room is below the target, which varies with
   viewport height and page chrome. Where there IS room below, placement stays
   `bottom` and that rule shoved the popover ~176px past its target — over the
   content beneath it and off the bottom of the viewport. It looked correct in
   local dev only because the layout there happened to force the flip every time.
   Reported on the deployed board-picker tour and removed 2026-08-17; the generic
   16px arrow-gap rule below now applies to the un-flipped case, as it should. */
.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--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);
}

/* Link variant — for a footer action that is genuinely OPTIONAL and must not
   compete with the primary button (the display-style modal's "Customize your
   dashboard", which is now a choice rather than the only way forward). Reads as
   a text link: no chrome, underlined, brand colour. Kept as a <button> (Shepherd
   renders footer actions as buttons) so it stays keyboard-operable; the underline
   is what signals "link" to the eye. */
.shepherd-element .md-tour__btn--link {
  color: #4C86D8;
  border-color: transparent;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  padding-left: 6px;
  padding-right: 6px;
}

.shepherd-element .md-tour__btn--link:not(:disabled):hover {
  color: #111A2E;
  background: none;
  border-color: transparent;
  text-decoration-thickness: 2px;
}

.shepherd-element .md-tour__btn--link:focus-visible {
  outline: none;
  border-radius: 6px;
  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;
}

/* ──────────────────────────────────────────────────────────────
   SUPERVISING CONTEXT PILL
   Names the account a supporter is viewing when it isn't their own
   (components/supervising-context-pill.*).

   ZERO LAYOUT IMPACT BY CONSTRUCTION. The pill is absolutely positioned out of
   document flow inside a zero-height anchor, so no surrounding element moves by
   a pixel — an earlier in-flow version pushed every page's content down.
   pointer-events:none means it can never take a click meant for the page
   beneath it. These two properties are the contract; everything else here is
   cosmetic.

   IT SCROLLS AWAY WITH THE PAGE. The pill used to be position:fixed and so
   followed the reader down every page. It now renders INSIDE #content — the
   app's real scroll container on every page that scrolls (#within_ember is
   position:fixed/overflow:hidden on the page-footer layout, so the document
   itself never scrolls) — anchored to a zero-height wrapper. Keep the anchor:
   without a positioned ancestor inside the scroller the pill would resolve
   against #within_ember again and go back to hovering.
   ────────────────────────────────────────────────────────────── */
.ll-supervising-pill-anchor {
  position: relative;
  height: 0; /* takes no space in #content's flex column */
}

.ll-supervising-pill {
  position: absolute;
  /* Measured from the anchor, which sits at #content's CONTENT-box top — after
     the layout's own top padding. Every layout that shows a header already pads
     #content past it (`#within_ember #content` ~l.1197, and the bento rules
     restate the same calc), and the layouts that zero that padding
     (.board-detail-view, .content--no-top-padding) also zero/hide the header —
     so a plain gap below the content start clears the chrome everywhere.
     44px drops the pill clear of the page's own top chrome and lines it up with
     the board-picker's pill-nav. px, not rem: bootstrap's `html { font-size:
     10px }` (vendor.css) means 1rem renders at 62.5% of what it reads like. */
  top: 44px;
  left: 16px;
  z-index: 900; /* above page content, below modals/overlays (1000+) */
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%), linear-gradient(135deg, rgba(42, 157, 143, 0.16) 0%, rgba(49, 111, 112, 0.12) 100%);
  /* Slight glow: soft verdigris halo outside the hairline border, over the
     standard inset top highlight. Not the raised drop-shadow stack — this is a
     label, not a control. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(42, 157, 143, 0.07), 0 0 14px rgba(42, 157, 143, 0.22), 0 1px 3px rgba(27, 54, 93, 0.08);
  color: #316F70;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  max-width: calc(100vw - 32px);
}

/* Wide screens only: the page chrome below the header (the Home/Caseload/Boards
   pill row and the hero beneath it) sits lower once there is room for it, and
   the pill was left stranded up against the header. Drop it 32px so it reads as
   part of that row. At 1024 and below the chrome tightens back up and 44px is
   right again, so the base value stands there. */
@media (min-width: 1025px) {
  .ll-supervising-pill {
    top: 76px;
  }
}
/* Board picker: that page sets its own top band (workspace padding-top 32 +
   pill-nav margin-top 24, ~5260), and the brief for it asks that this pill and
   the Boards/Choose Board step control share a vertical centre. The step
   control's centre lands at 118 (#content padding) + 32 + 24 + 21 (half the nav
   band) = 195px; this pill is ~34px tall, so 195 - 17 = 60px from the same
   anchor. Coupled to those two values — change them and this moves with them. */
#within_ember:has(.md-shell--board-picker) .ll-supervising-pill {
  top: 60px;
}

/* Live-session indicator: a dot with an expanding pulse ring. The RING animates,
   never the dot or the pill, so nothing about the element's box changes. */
.ll-supervising-pill__status {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.ll-supervising-pill__status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2A9D8F;
  box-shadow: 0 0 6px rgba(42, 157, 143, 0.85);
}

.ll-supervising-pill__status-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(42, 157, 143, 0.55);
  animation: ll-supervising-pulse 2s ease-out infinite;
}

@keyframes ll-supervising-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-supervising-pill__status-dot::after {
    animation: none;
    opacity: 0.5;
    transform: scale(1);
  }
}
.ll-supervising-pill__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ll-supervising-pill {
    left: 10px;
    max-width: calc(100vw - 20px);
    font-size: 13px;
  }
}
/* ── Focused View: boards-page CTAs wear the home hero's surface ───────────
   "+ New Board" and "Set / Change Home Board" are the boards page's two primary
   entrypoints and are deliberately one button family (same pill radius, same
   translucent teal→denim gradient in Gentle View — see
   `.ub-boards-page__new-board-btn` ~l.63224 and `.ub-boards-page` &__set-home-btn
   ~l.66017). In FOCUSED View they instead take the surface of the home page's
   hero (`.md-card--speak-focused` ~l.50573): the same
   `$focus-hero-center → $focus-hero-edge` radial in oklab, so the CTA a user
   meets on Boards is visibly the same material as the one they press on Home.
   THE INK HAS TO FLIP WITH THE FILL. The Gentle pill is a LIGHT translucent
   surface carrying dark `var(--md-ink)` text and a `currentColor` icon; the hero
   surface is a dark navy. Reusing it without switching to `$focus-on-dark`
   (#fff) would leave near-black text on near-black ground. The hero already
   pairs this exact gradient with `$focus-on-dark`, so the pairing is proven.
   Border and rim follow the hero for the same reason — a white 0.5 rim reads as
   a bright halo on a dark fill.
   Scoped on `body.ll-layout-focused`, the app-wide Focused flag set in
   app.js:511, so this cannot leak into Gentle View. (0,2,1) clears both base
   rules at (0,1,0); the only higher-specificity rule on either button is the
   ≤768px `align-self` at ~l.63672, which sets no colour. */
body.ll-layout-focused .ub-boards-page__new-board-btn,
body.ll-layout-focused .ub-boards-page__set-home-btn {
  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%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.24), 0 10px 22px rgba(27, 54, 93, 0.3);
}

/* Hover mirrors the hero's: lift + deeper shadow + a faint brand glow. The
   gradient is restated because the base hover rules swap it back to the light
   Gentle pill, and box-shadow does not cascade per layer. */
body.ll-layout-focused .ub-boards-page__new-board-btn:hover,
body.ll-layout-focused .ub-boards-page__set-home-btn:hover {
  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%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), inset 0 -5px 10px rgba(27, 54, 93, 0.32), 0 3px 7px rgba(27, 54, 93, 0.28), 0 14px 28px rgba(27, 54, 93, 0.36), 0 0 20px rgba(42, 157, 143, 0.12);
}

/* The icon inherits via `fill="currentColor"` in the markup, so the colour
   above already carries it — no separate rule needed. */
/* ── Categorize panel (flag: board_category_grouping) ─────────────────────────
   Full-width takeover launched from the edit rail, between Board Actions and
   Search & Filter. Positioned over .md-board-detail-layout rather than reflowing
   the edit page's three-column grid — the collection drawer reshapes that grid
   with !important and three-class specificity (app.scss ~74721), and competing
   with it would mean another round of specificity management for no gain. */
.md-board-category-order {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #374151;
}

/* The panel's top region: a 64px header row that owns the page-level actions, then ONE
   settings strip.

   Height is the whole design constraint here. This region is `flex: 0 0 auto` above the
   order list and the live preview — the two things the panel exists for — so every pixel
   it takes comes out of them. It was a header plus two glass cards, each holding a switch,
   a paragraph of body copy, a nested sub-option and a permanent amber advisory: ~250px
   before the first category appeared. The budget now is header 64 + gap 10 + strip ~72,
   inside 8/10 of bar padding — about 165px, and the strip only grows when the scrolling
   advisory is actually showing. */
.md-board-category-order__bar {
  display: flex;
  flex-direction: column;
  /* Both at the bottom of their allowed 8-12px range. The budget is header 64 + gap 8 +
     strip 72-88 + 8 = 152-168 normally, and 175 in the one state that grows: the scrolling
     advisory adds a 20px line to its own column. At 10px each that state measured 179. */
  gap: 8px;
  flex: 0 0 auto;
  /* No padding above the header: its own 64px min-height IS the breathing room, and the
     budget has nothing spare for a second inset above it. */
  padding: 0 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

/* The grouping setting and the page actions on ONE centred row — heading, description and
   its On/Off switch on the left, Reset/Done pushed to the right. `wrap` is the escape hatch
   only: the actions drop below when the width genuinely cannot hold both, which keeps Done
   reachable without a horizontal scroll. */
.md-board-category-order__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 64px;
}

/* `0 1 auto`, not `1 1 auto`: the switch belongs to this heading and reads as its control, so
   it sits directly beside the text rather than being pushed to the far side of the row. The
   ACTIONS take the free space instead (margin-left: auto, below). */
.md-board-category-order__head-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* The On/Off switch — the same painted switch the strip uses, with the two words either side
   of the track. The strip's switches carry no words on purpose (a switch states itself by
   knob position, which is a non-colour indicator); this one governs whether the whole panel
   applies, so it is worth the extra clarity. Both words are `aria-hidden` in the template —
   the checkbox announces its own state, and "Off Group by category On" would read worse. */
.md-board-category-order__onoff {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px, the touch-target floor: the whole control is the label, so all of it is the hit
     area, not just the 48px track. */
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}

.md-board-category-order__onoff-word {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* The inactive word stays legible rather than being greyed to a hint — it is one half of
     the value this control is stating. 4.9:1 on this surface. */
  color: #94A3B8;
}

.md-board-category-order__onoff-word--active {
  color: #F8FAFC;
}

/* THE MASTER CONTROL. It reads as a different rank from the two switches in the strip, not
   just a switch that happens to sit higher: a raised pill holds the whole Off/track/On group,
   the track is bigger (56 x 32 against the strip's 48 x 28), and the words sit either side of
   it. Everything below it is disabled when this is off, so "this one governs the others" has
   to be legible before the user flips anything. */
/* CENTRED ON THE PANEL, not parked beside the heading: this is the switch the whole panel
   hangs off, so it sits on the page's centre line the way the edit page's status pill does.
   Absolute, so the heading on the left and Reset/Done on the right keep their own ends of the
   row and neither pushes it off centre. The 4px in the transform is the deliberate drop —
   the heading block beside it is two lines with its optical weight high, and a true centre
   read as riding up. */
.md-board-category-order__onoff--master {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 4px));
  gap: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.md-board-category-order__onoff--master .md-board-category-order__onoff-word {
  font-size: 13px;
}

/* One line where it fits, wrapping where it does not — never truncated. The panel is
   read by a therapist at arm's length on a tablet, so a description that hides half of
   itself behind an ellipsis is worse than one that takes a second line. */
.md-board-category-order__row-desc {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: #CBD5E1;
}

/* A setting that currently has no effect — its card (or, for the nested option, its
   block) dims as ONE thing, control and explanation together. Dimming only the row left
   an amber accessibility advisory at full strength beside a switch that could not be
   operated, which read as a live warning about a dead control.
   WCAG 1.4.3 exempts inactive components and their labels from the contrast minimum, so
   this is a legitimate inactive treatment rather than unreadable text; the `disabled`
   attribute on the input is what announces it. */
.md-board-category-order__inactive {
  opacity: 0.45;
}

/* ── The switch ───────────────────────────────────────────────────────────────
   ONE painting for all three settings. They were a switch plus two system
   checkboxes, which put the same kind of decision in two visual languages. The real
   <input type="checkbox"> is kept and kept focusable (opacity only, never
   `display: none`), so label association, keyboard operation and the announced
   checked state are unchanged — only the paint differs. */
/* 48 x 44: the PAINTED switch is 28px tall, but the transparent input fills the wrap, so
   the wrap's height is the real hit area and 44 is the floor this panel is held to. The
   track is centred in it rather than filling it. */
.md-board-category-order__switch-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
}

.md-board-category-order__switch-wrap input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.md-board-category-order__switch-wrap input:disabled {
  cursor: default;
}

.md-board-category-order__switch {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #2A9D8F;
  transition: background 140ms ease;
  /* Pointer events belong to the input above it, which covers the whole 48x44 wrap. */
  pointer-events: none;
}

.md-board-category-order__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translateX(20px);
  transition: transform 140ms ease;
}

/* Focus ring lands on the switch, since the real input is transparent. */
.md-board-category-order__switch-wrap input:focus-visible + .md-board-category-order__switch {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* The two STRIP switches read as recessed — a well cut into the panel with the knob riding
   in it — while the master switch in the header stays raised. That is the hierarchy stated in
   material as well as in size: the one that turns the feature on sits on the surface, the two
   that configure it sit in it. Scoped to the strip so the master keeps its glass.
   Recipe: a dark inset from the top edge (the shadow the wall casts into the well), a light
   inset at the bottom (light pooling at its base) and a 1px light line OUTSIDE the bottom
   edge, which is what sells "carved in" rather than "painted dark". */
.md-board-category-order__strip .md-board-category-order__switch {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* OFF, in the strip: darker than the panel around it, so the empty half of the well reads as
   depth rather than as a lighter chip sitting on top. */
.md-board-category-order__strip .md-board-category-order__switch--off {
  background: rgba(0, 0, 0, 0.28);
}

/* OFF state. Driven by a CLASS rather than `input:not(:checked)` because
   `checked={{...}}` sets the DOM PROPERTY: `:checked` tracks it on user input, but the
   class keeps the paint in step with the Ember state on re-render too — one source of
   truth for both. The knob POSITION is what states the value, so this is not a
   colour-only indicator. */
.md-board-category-order__switch--off {
  background: rgba(255, 255, 255, 0.24);
}

.md-board-category-order__switch--off .md-board-category-order__switch-knob {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .md-board-category-order__switch,
  .md-board-category-order__switch-knob {
    transition: none;
  }
}
/* The MASTER switch's geometry, declared AFTER the base switch rules above rather than beside
   the header rules it belongs to: both are single-class selectors, so the base `width: 48px`
   would simply win on source order — measured, the track came out 48px wide instead of 56. */
/* 56 x 44: the painted track grows to 32px, the hit area keeps the 44px floor. */
.md-board-category-order__switch-wrap--master {
  width: 56px;
}

/* Glass, not a flat fill — the master control gets the same treatment as the rest of the
   app's raised surfaces: a translucent white veil over the brand tint, a specular top edge and
   a soft drop, so it reads as a lit object rather than a coloured capsule. */
.md-board-category-order__switch-wrap--master .md-board-category-order__switch {
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.02) 100%), linear-gradient(150deg, #2A9D8F 0%, rgb(29.0834170854, 108.7165829146, 99.0221105528) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.28);
}

/* OFF is the same material with the tint taken out, so the two states read as one object in
   two positions rather than two different chips. */
.md-board-category-order__switch-wrap--master .md-board-category-order__switch--off {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.02) 100%), linear-gradient(150deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* Travel is derived, not guessed: 56 (track) - 24 (knob) - 4 - 4 (insets) = 24px, so the knob
   lands 4px inside the right edge exactly as it starts 4px inside the left. It used to travel
   24px inside a 48px track — 4px PAST the end — which is what pushed the knob out of its
   background on the right. */
.md-board-category-order__switch-wrap--master .md-board-category-order__switch-knob {
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  transform: translateX(24px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

.md-board-category-order__switch-wrap--master .md-board-category-order__switch--off .md-board-category-order__switch-knob {
  transform: translateX(0);
}

.md-board-category-order__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #F8FAFC;
}

.md-board-category-order__subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  /* #CBD5E1 on this surface is 8.6:1 — the AAC legibility floor applies to a panel a
     therapist reads at arm's length on a tablet, so secondary text is a real colour
     rather than a low-alpha white veil. */
  color: #CBD5E1;
}

/* THE settings strip — one container for all three settings, not a card each.

   Two columns, one per setting: the labels and the scrolling, both of which depend on the
   grouping switch that now lives in the header. Equal tracks (`minmax(0, 1fr)`, so a long
   description shrinks its column instead of widening the strip) with the glass on the OUTER
   box only. Individual settings are transparent and separated by a hairline, which is a
   divider's whole job — nested cards spent a border, a background and 16px of padding each to
   say the same thing, twice, inside a region that has no height to spare. */
.md-board-category-order__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* The one glass surface in this region: translucent white over the charcoal, the same
     recipe the rest of the app uses for a raised surface. */
  background: rgba(255, 255, 255, 0.055);
}

/* A setting owns no surface of its own — just its column, and a divider from the one
   before it.

   STRETCHED, not top-aligned. Its content is top-aligned inside the row regardless, so
   stretching costs nothing visually and buys the one thing `align-self: start` cannot:
   every cell in a row shares an edge, so the dividers between them are continuous lines
   rather than segments that stop wherever each cell's own content happened to end. */
.md-board-category-order__setting {
  min-width: 0;
  padding: 0 14px;
}

.md-board-category-order__setting:first-child {
  padding-left: 0;
}

/* `nth-child(2)`, not `:last-child`: with labels hidden the scrolling setting becomes the
   last child too, and dropping its right padding widened its content box by 14px — its info
   dot and switch jumped sideways the moment you toggled it. Keyed on POSITION, the first
   column keeps its padding whatever else is rendered. */
.md-board-category-order__setting:nth-child(2) {
  padding-right: 0;
}

.md-board-category-order__setting + .md-board-category-order__setting {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* The strip keeps BOTH tracks even when only one setting is rendered (labels appear only
   while scrolling is on). Collapsing to a single full-width column was tried first and it
   moves Board scrolling — its own info dot and switch slide sideways the instant you toggle
   it, which reads as the control running away from the pointer. It holds its column; the
   second track is simply empty. */
/* One column before smaller text. PLACED AFTER the strip's base rules above, not with the
   header rules it reads next to: a media query adds no specificity, so declared before
   `grid-template-columns: repeat(2, …)` this simply lost and the two settings stayed side by
   side at 680px. Measured.
   One column before smaller text. There is no two-column tier any more — the strip IS two
   columns at every width above this, since grouping moved to the header and left two
   settings. The divider follows the axis they stack on: a border-left between columns, a
   border-top between rows. */
@media (max-width: 700px) {
  .md-board-category-order__strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-board-category-order__setting {
    padding: 0;
    border-left: none;
  }
  .md-board-category-order__setting + .md-board-category-order__setting {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Still a compact ROW, not the card design coming back through the side door: the
     switch's 44px floor plus a little breathing room, and nothing else. */
  .md-board-category-order__row {
    min-height: 60px;
  }
}
/* A setting: text on the left, then the info disclosure, then the switch. */
.md-board-category-order__row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 52px = the 44px touch-target floor for the switch, plus enough for a two-line text
     block (16px title + 13.5px description) to sit centred without crowding. It is what
     puts the strip at ~72px, the bottom of its intended range. */
  min-height: 52px;
  margin: 0;
}

/* min-width:0 is load-bearing: without it the text block's min-content width wins and a
   long description widens the grid track instead of wrapping inside it. */
.md-board-category-order__row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-board-category-order__row-label {
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #F8FAFC;
  cursor: pointer;
}

/* ── The info disclosure ──────────────────────────────────────────────────────
   The long explanations that used to sit permanently under each switch. A native
   <details> so the control is a real button to assistive technology, announces its own
   expanded state, and opens on click OR keyboard — never hover, which no keyboard or
   switch user can produce. */
.md-board-category-order__info {
  position: relative;
  flex: 0 0 auto;
}

/* The 44x44 control. `list-style: none` + the ::-webkit- rule kill the disclosure
   triangle; the icon is the affordance. */
.md-board-category-order__info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #CBD5E1;
  cursor: pointer;
  list-style: none;
}

.md-board-category-order__info-btn::-webkit-details-marker {
  display: none;
}

.md-board-category-order__info-btn:hover {
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.08);
}

/* White on this charcoal is ~15:1, well past the 3:1 the focus indicator needs, and it
   is the same ring the switches use so the panel has one focus language. */
.md-board-category-order__info-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* OUT OF FLOW on purpose: an inline expansion would push the strip taller and shove the
   category list down the moment anyone asked what a setting does. Anchored to the
   right-hand edge of the disclosure so it cannot leave the panel on the last column. */
.md-board-category-order__info-body {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: 320px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #223047;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  font-size: 13.5px;
  line-height: 1.45;
  color: #E2E8F0;
}

/* Amber advisory, not body copy — this is guidance about who the setting affects, and it
   has to survive being skimmed. #F6C86B on this surface is 9.5:1, and the icon plus the
   wording carry the meaning, so nothing here rests on the colour alone.
   Rendered only while scrolling is ON (the template gates it), so it reserves no height
   in the state it has nothing to say about. */
.md-board-category-order__advisory {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #F6C86B;
}

.md-board-category-order__advisory svg {
  flex: 0 0 auto;
  margin-top: 1px;
  /* Explicit stroke, not `currentColor` inheritance: styling-recurring-problems #3 —
     a deeper rule setting stroke on this panel's SVGs would otherwise win. */
  stroke: #F6C86B;
}

/* Page-level actions, in the header beside the panel title. Reset is only rendered once
   the order actually differs from the default (controller#category_order_changed) — it
   used to sit here permanently, competing with Done while doing nothing. */
.md-board-category-order__bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  /* Takes the row's free space, so the heading + its switch stay grouped on the left. */
  margin-left: auto;
}

/* Reset only. Done is the edit bar's Save button — same classes, same paint — so it must
   not pick up this sizing on top of it. */
.md-board-category-order__reset {
  /* 44px min — the touch-target floor this panel is held to everywhere else. */
  min-height: 44px;
  padding: 6px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Quiet secondary: an outline, no fill. Reset and Done sat in the same filled treatment,
   which made a destructive-ish reset compete with the primary action for attention. */
.md-board-category-order__reset {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #E2E8F0;
}

.md-board-category-order__reset:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
}

.md-board-category-order__reset:focus-visible,
.md-board-category-order__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Order list beside a full-size preview. The list is the ACCESSIBLE control
   surface: it is one-dimensional, which matches the data (categories are a
   sequence; which column one lands in is derived by the packing, not chosen), so
   up/down arrows are unambiguous and need no drag gesture to operate. */
.md-board-category-order__body {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 16px;
}

.md-board-category-order__list {
  flex: 0 0 260px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

.md-board-category-order__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Swatch carries the category's OWN Fitzgerald fill, so the list reads in the
   same colour language as the preview beside it. */
.md-board-category-order__swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--bd-group-fill, #fff);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.md-board-category-order__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-category-order__controls {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.md-board-category-order__move {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 30px is the floor for a comfortable target here; these sit in a dense list
     and are used repeatedly. */
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}

.md-board-category-order__move:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The preview hosts a real BoardDetailGrid, which sizes itself; this just gives
   it the remaining width and its own scroll so the order list stays put. */
.md-board-category-order__preview {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-radius: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.18);
  /* While a Categorize toggle is being applied the grid is hidden rather than
     unmounted — see the note in board-detail.hbs. `display: none` and not
     `visibility: hidden`: the latter keeps the grid in layout, so the loading message
     would be pushed below a full-height blank space instead of sitting where the grid
     was. */
}
.md-board-category-order__preview--loading .md-board-detail-grid {
  display: none;
}

/* Shown in place of the preview grid while a Categorize toggle is being applied.
   Centred in the panel the grid would have filled, so the box does not collapse and
   then jump back to full height when the regrouped board arrives — the same reasoning
   as the boards-page loading state's min-height.
   Plain text, matching this app's other inline loading affordances (a `<p>` with
   "Loading…"), rather than a spinner: the wait is normally one frame and only becomes
   visible on a slow device, where an animation would itself be competing for the main
   thread that is busy doing the regroup. */
.md-board-category-order__preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  height: 100%;
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  /* 15px, not the 14px this panel uses for secondary text: this is the only thing on
     screen while it shows, and the AAC legibility floor applies. */
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

/* Move-to-category picker (Categorize panel). Centred over the panel rather than
   anchored to the tapped button: the preview scrolls and repacks as categories
   are reordered, so an anchored popover would need re-measuring on every change
   for no benefit at this size. */
.md-board-category-order__picker-backdrop {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.45);
}

.md-board-category-order__picker {
  position: absolute;
  z-index: 71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 92vw);
  max-height: 78%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f8 100%);
  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.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.md-board-category-order__picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.md-board-category-order__picker-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-board-category-order__picker-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(27, 54, 93, 0.06);
  color: #1B365D;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

/* Stated plainly rather than buried: the move repaints the button for the
   communicator, which is not obvious from a list of category names. */
.md-board-category-order__picker-note {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(27, 54, 93, 0.75);
}

.md-board-category-order__picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.md-board-category-order__picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.md-board-category-order__picker-item:hover {
  background: rgba(27, 54, 93, 0.04);
}

/* Scope the shared swatch/name colours for the light picker surface — the list
   in the dark panel above sets its own. */
.md-board-category-order__picker-item .md-board-category-order__name {
  color: #1B365D;
}