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

/* `$lighten` is a FINAL scale applied to all three ramp stops after the base lightness and the
   centre/edge shifts, so a caller can say "this card, N% lighter" without retuning the shifts
   that give it its shape. Defaults to 0%, which `color.scale` treats as no change, so every
   existing caller renders byte-identically. */
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,
body.ll-layout-focused .md-shell--user .md-pillnav--dashboard .md-pillnav__pill.active,
body.ll-layout-focused .md-shell--user .md-pillnav--dashboard .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: 56px 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 {
  /* NO TOP PADDING AT >=1024px ON THE BOARDS PAGE (requested 2026-09-22).
     SCOPED OFF `--stats`, not folded into the rule above: `.md-shell--reports-view` is shared
     by Boards (user/boards.hbs) and Reports (user/stats.hbs), and Reports carries the extra
     `.md-shell--stats` (templates/user/stats.hbs:5). Adding `:not()` to the shared rule would
     have stripped Reports of its 16/56/44 padding entirely, so this is a narrower SCOPE rather
     than a specificity override — the shared rule keeps owning both pages' base rhythm.
     `:not()` also lifts this to (0,4,0), so it beats the shared rule at the 1024 overlap where
     both queries match. */
}
body.ll-layout-focused .md-shell--reports-view:not(.md-shell--stats) > .md-workspace {
  /* NO TOP GAP AT ANY WIDTH (requested 2026-09-22). Both boxes, because `.md-workspace`
     carries a margin as well as padding and zeroing one leaves the other holding the gap
     open — that is why this looked like it only worked at exactly 1024px, where the base
     margin happens to drop to 0 on its own.
     UNGATED ON PURPOSE: this was briefly scoped to `min-width: 1024px`, which left the
     narrower breakpoints still applying their own top padding. The rule now out-specifies
     those, so there is one answer at every width instead of three. */
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.ll-layout-focused .md-shell--stats > .md-workspace {
  padding-top: 0 !important;
}
@media (max-width: 900px) {
  body.ll-layout-focused .md-shell--stats > .md-workspace {
    padding-top: 28px !important;
  }
}
body.ll-layout-focused .md-shell--reports-view .md-workspace > .md-pillnav {
  margin-top: 0 !important;
}
body.ll-layout-focused {
  /* (The Updates-arrival rules that sat here moved just below this block on 2026-10-10, scoped to
     BOTH Modern layouts.) */
}

body.ll-view-modern {
  /* UPDATES (logs) page — no top padding at >=1024px (requested 2026-09-22). The target is
     `.md-main--user`, not the workspace: app.scss:47050 gives every account-section page
     `padding-top: calc(var(--bottombar-height, 59px) - 24px)` (the 35px the inspector showed).
     `:has(.md-logs)` narrows it to THIS page — that rule is deliberately shared by the whole
     account section ("one section, one vertical rhythm"), so it must keep applying to account,
     goals, settings and the rest. The `:has()` also out-specifies it, which is what lets a
     non-!important-fight override land. */
  /* THE UPDATES ARRIVAL ONLY (tightened 2026-09-22). This was keyed on `:has(.md-logs)`, i.e.
     the logs PAGE, which also stripped the padding when the page is opened from the account
     rail — and that arrival should keep its normal account-section rhythm. `--updates-arrival`
     (templates/user.hbs) marks the pill-nav arrival specifically. */
}
body.ll-view-modern .md-shell--user > .md-workspace > .md-main--user.md-main--updates-arrival {
  padding-top: 0 !important;
}
body.ll-view-modern {
  /* ...and the WORKSPACE itself on that page, same breakpoint (requested 2026-09-22). Separate
     from the `.md-main--user` rule above because they are two different boxes, each with its
     own top padding: the workspace's comes from `.md-shell--user > .md-workspace`
     (padding-top: 20px in Focused, ~1833) or, on the pill-nav arrival, from
     `.md-workspace--homenav` (64px, app.scss). Zeroing one leaves the other.

     SPECIFICITY (0,5,1) VIA THE EXTRA `.md-shell`, and it is load-bearing: the homenav rule is
     `body .md-shell.md-shell--user > .md-workspace.md-workspace--homenav` at (0,4,1) and also
     `!important`. Matching it would tie, and a tie is decided by source order — this file is a
     `@use`d partial emitted ~61k lines ABOVE app.scss, so the homenav 64px would win and this
     would silently do nothing. The extra class settles it by weight instead.

     NOTE this supersedes that 64px headroom on this page at >=1024px; the arrival still gets
     it below that width. */
  /* Same tightening as the rule above: the WORKSPACE loses its top gap only on the Updates
     arrival, so the rail arrival keeps the section's normal spacing. */
}
body.ll-view-modern .md-shell.md-shell--user > .md-workspace:has(.md-main--updates-arrival) {
  /* NO TOP GAP AT ANY WIDTH (requested 2026-09-22). Both boxes, because `.md-workspace`
     carries a margin as well as padding and zeroing one leaves the other holding the gap
     open — that is why this looked like it only worked at exactly 1024px, where the base
     margin happens to drop to 0 on its own.
     UNGATED ON PURPOSE: this was briefly scoped to `min-width: 1024px`, which left the
     narrower breakpoints still applying their own top padding. The rule now out-specifies
     those, so there is one answer at every width instead of three. */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.md-shell--layout-focused.md-shell--extras-view > .md-workspace {
  /* Top gap removed at EVERY width (requested 2026-09-22), matching the Boards and Updates
     pages; sides keep their 40px. The margin matters as much as the padding here:
     `.md-shell--layout-focused > .md-workspace` (app.scss ~55835) gives this shell
     `margin-top: 16px !important`, and this selector is (0,3,0) against its (0,2,0), so it
     wins on weight. Was `padding: 32px 40px 0px`. */
  padding: 0 40px 0px !important;
  margin-top: 0 !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__icon-wrap {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__svg-icon[stroke="#46505F"],
.md-shell--layout-focused.md-shell--extras-view .md-extras-card__svg-icon [stroke="#46505F"] {
  stroke: #1F2A44 !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: 900px) {
  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: 0px 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, rgb(77, 116, 171) 0%, rgb(61, 93, 139) 100%) !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(241, 244, 248, 0.98) 0%, rgba(246, 248, 251, 0.98) 100%) !important;
}
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__section-icon,
body.ll-layout-focused .md-shell--reports-view .ub-boards-page__folders-chevron-btn,
body.ll-layout-focused .md-user-summary .ub-boards-page__section-icon,
body.ll-layout-focused .md-user-summary .ub-boards-page__folders-chevron-btn {
  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%, rgb(209, 231, 227) 0%, transparent 46%), linear-gradient(140deg, rgb(231, 239, 251) 0%, rgb(215, 229, 248) 100%) !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;
  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%, rgb(209, 231, 227) 0%, transparent 46%), linear-gradient(140deg, rgb(231, 239, 251) 0%, rgb(215, 229, 248) 100%) !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;
}

/* ── FOCUSED: THE ORG DETAIL PAGES ARE THE GENTLE ONES (2026-09-23) ─────────────────────
   Requested, in two steps: "the rooms content needs to move up on the page by a lot", then
   "on modern view the focused view rooms should match the modern view rooms styles (for now)".

   SO THE TARGET IS GENTLE'S GEOMETRY, NOT THE FOCUSED DASHBOARD'S. The first pass aimed these
   pages at the focused dashboard's own offsets (`--topbar-height` on `#content`, 16/32 on the
   workspace, keeping the shell's 112px nav clearance) and landed the rooms page at y=204
   against gentle's 174. Close, and still two layouts to keep level. These two declarations
   instead restate exactly what app.scss's gentle `:has(.ll-appshell)` block sets --
   `calc(--topbar-height + 1rem)` and a shell clearance of 0 -- so the page computes the same
   26 + 0 + 40 + 40 = 106 in both layouts and there is one geometry to maintain, not two.
   The workspace is deliberately absent: the base 40/40 is what gentle uses and what focused
   already had, so naming it would only be a third copy of a value nobody is changing.

   "(FOR NOW)" IS THE USER'S OWN QUALIFIER, and it is why this is written as a POINTER at the
   gentle rule rather than as a focused design. When these pages get a real focused treatment,
   delete this block -- do not edit its numbers, or the two layouts start drifting silently.

   ALL THE ORG DETAIL PAGES, not just rooms: they share one shell and one workspace, and moving
   rooms alone would leave its siblings 130px lower than a page one click away. The org
   DIRECTORY (`--org-directory`) is excluded -- different layout, its own spacing, and not what
   moved. Verified with scripts/rooms-page-spacing-qa.mjs: focused and gentle now report the
   same switcher/hero/grid run (174 / 244 / 438). */
/* ── MODERN FOCUSED, ROOMS PAGE: THE BOARDS CARD'S SURFACE (2026-09-24) ─────────────────
   Requested: "make this div bg the same bg as the boards page md-workspace on modern focused".

   THE BOARDS PAGE'S `.md-workspace` PAINTS NOTHING -- measured, it computes to
   `background: none` with a transparent colour. The surface that reads as the boards page in
   Focused is `.ub-boards-page__boards-section`, and it gets it from `$focus-boards-bg`, the
   shared frosted-glass token this file already hands to the focused home page's Boards card and
   to the Extras page for exactly this "match the boards card" purpose (see `.md-extras-page`
   above). So this reuses the token rather than copying the two gradients out of the inspector,
   and the four surfaces cannot drift.

   THE BACKDROP FILTER COMES WITH IT, and that is not scope creep: every layer in
   `$focus-boards-bg` is translucent, so what the panel actually looks like is decided as much by
   what it blurs behind it as by the gradient itself. `.md-main--org` was on blur(22px)
   saturate(1.35) against the boards card's blur(14px) saturate(1.3); leaving that alone would
   have applied the right gradient and still not matched.
   BORDER, RADIUS AND SHADOW ARE DELIBERATELY LEFT as the org card's own (1px rgba(27,54,93,.1),
   32px, its existing shadow). The request was the background; the card's shape was not raised,
   and changing it here would be a second, unasked-for change riding along.

   `!important` because every declaration in the base rule
   (`.md-shell--org:not(.md-shell--org-directory) .md-main--org`, app.scss ~96294) carries one.
   At (0,5,1) against that rule's (0,3,0) the weight is there either way.
   Same `:has(...)` page test as the header rule below -- see its note for why the rooms page has
   to be named by what it renders. */
body.ll-view-modern.ll-layout-focused .md-workspace:has(.md-stats-main, .md-org-rooms, .md-org-rooms-empty) .md-main--org {
  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;
}

/* ── MODERN FOCUSED, ROOMS PAGE: A STILL HEADER AND NO META ROW (2026-09-24) ────────────
   Requested: "modern focused view - Rooms page - remove the movement from the header and hide
   the subheader". Basic already reads this way for its whole org section
   (`body.ll-view-basic .md-hero--org`, _classic-home.scss); this is the same treatment, asked
   for on one page of one layout, so it is scoped to that page rather than folded in there.

   THE MOTION RULES CANNOT SIMPLY BE SWITCHED OFF -- the same trap the Basic rule records.
   `.md-hero__title--from-left` (app.scss:34501) sets `opacity: 0` and animates to visible with
   `forwards`, so the animation is what REVEALS the title, not just what moves it. `animation:
   none` alone would leave the header permanently invisible, which is why `opacity: 1` comes
   with it. The divider is static and is deliberately left alone (app.scss:34591).

   ONLY THE TITLE NEEDS THE MOTION RULE. The subheader's own `--from-right` span is inside the
   `--meta` row being hidden below, so a second animation rule for it would be dead.

   `:has(...)` NAMES THE ROOMS PAGE BY WHAT IT RENDERS, because the hero lives in the PARENT
   template (templates/organization.hbs) and the page itself has no class to hang this on. The
   three arguments are that page's three content states: `.md-stats-main` (the supervisor's room
   list), `.md-org-rooms` and `.md-org-rooms-empty` (the manager's list and its empty state) --
   verified unique to templates/organization/rooms.hbs. The loading state is deliberately not
   listed; it is transient and matching it would change nothing a user can see.
   `.md-hero--org` in the descendant part keeps this off the Reports page, which also carries
   `.md-stats-main` but has no org hero.

   BOTH VIEWS SINCE 2026-10-01 (was `body.ll-view-modern.ll-layout-focused`): Basic's rooms pages
   now show their header as Modern's do (requested; see `md-hero--org-rooms` in _classic-home.scss),
   so in Focused they take this same still, meta-less list header.

   NO `!important`: at (0,6,1) against the base rules' (0,3,0) this wins on specificity alone,
   which matters because this partial is `@use`d and so EMITTED BEFORE app.scss -- a tie would
   have gone to the base rule. */
body.ll-layout-focused .md-workspace:has(.md-stats-main, .md-org-rooms, .md-org-rooms-empty) .md-hero--org .md-hero__title .md-hero__title--from-left {
  animation: none;
  opacity: 1;
}

body.ll-layout-focused .md-workspace:has(.md-stats-main, .md-org-rooms, .md-org-rooms-empty) .md-hero--org .md-hero__sub--meta {
  display: none;
}

body.ll-layout-focused #within_ember #content:has(.md-shell--org:not(.md-shell--org-directory)) {
  padding-top: calc(var(--topbar-height) + 1rem) !important;
}

body.ll-layout-focused #content:has(.md-shell--org:not(.md-shell--org-directory)) .ll-appshell .md-shell {
  padding-top: 0 !important;
}

/* ...AND IT STAYS PUT FROM 1024px DOWN (requested 2026-09-24: "Rooms page on 1024px and
   smaller, the content is shifting up on the page -> prevent that from happening").
   THE JUMP IS THE BASE WORKSPACE'S TOP MARGIN GOING AWAY. `.md-workspace` is `margin: 40px
   auto` at desktop widths and 0 at 1024 and below, and its padding steps 40 -> 52 -> 40 across
   the same range. Measured on this page: the switcher sat at y=174 at 1280 and 1100, then 134
   at 1024 and 1000, then 146 at 950 -- a 40px jump up and a 12px partial recovery, none of it
   this page's own doing.
   The gentle block in app.scss absorbs the same loss for the pages it covers by adding 52px of
   shell padding at this breakpoint; these pages take the shell's padding to 0, so they had
   nothing to absorb it with.
   BOTH VALUES ARE PINNED, not just the margin: restoring only the margin would have left the
   950px step's 12px of extra padding, so the page would have stopped jumping up and started
   drifting down instead. With both fixed the sum is 26 + 0 + 40 + 40 = the same y at every
   width in this band.
   FLOORED AT 901px on purpose. At 900 and below the account rail stops being a fixed panel and
   becomes an in-flow band above the page (app.scss), so everything below it moves by design --
   that is a layout change, not a shift to pin. */
@media (max-width: 1024px) and (min-width: 901px) {
  /* MODERN ONLY since 2026-10-01: Basic's org pages take no top gap at any width above 900px
     (_classic-home.scss, "ORG PAGES: NO TOP GAP"), and this rule's id weight would override that. */
  body.ll-view-modern.ll-layout-focused #content:has(.md-shell--org:not(.md-shell--org-directory)) .md-workspace {
    margin-top: 40px !important;
    padding-top: 40px !important;
  }
}
/* `.md-shell--org` WAS ADDED HERE ON 2026-09-23 AND TAKEN BACK OUT THE SAME DAY (requested:
   "on modern rooms page, make focused view match gentle view's style"). The org pages wear the
   Reports page's `.md-stats-main` container, so extending this scope to them looked like the
   way to give them its focused half too.

   WHAT IT ACTUALLY REACHED, measured against the compiled CSS rather than reasoned about:
   exactly two of the twelve rules below. `.md-stats-main` on the rooms LIST page, which is a
   no-op -- the base `.md-stats-main` (app.scss ~64647) is a pure centred wrapper with no paint,
   so clearing paint changes nothing. And `.report-kpi` on the room DETAIL page, which swapped
   its six cards onto `$focus-card-surface` with a dusty-denim border. That second one was the
   whole visible difference between the two layouts on those pages, and it is the one being
   removed. The other ten name elements no org template renders (`.md-hero--reports-dashboard`,
   `.md-user-meta`, `.report-trend`, `.report-insights`, `.progress-highlight*`,
   `.md-stats-filter__compare`) -- verified by grep across `templates/organization*`.

   SO THE ORG PAGES NOW TAKE THE BASE SURFACES IN BOTH LAYOUTS, which is what "match gentle"
   means here: gentle IS the base. Nothing was added to make them match -- a rule was removed.
   If a future org page wants the focused Reports treatment, add it back with the same check:
   which of these rules can reach the elements that page actually renders. */
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%, rgb(209, 231, 227) 0%, transparent 46%), linear-gradient(140deg, rgb(231, 239, 251) 0%, rgb(215, 229, 248) 100%) !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;
  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%, rgb(234, 244, 242) 0%, transparent 46%), linear-gradient(140deg, rgb(246, 249, 254) 0%, rgb(238, 244, 252) 100%) !important;
  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--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, rgb(89, 134, 197) 0%, rgb(72, 108, 161) 100%);
  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 {
  /* 32px -> 44px -> 56px. TWO separate +12 requests on 2026-09-21, the second worded the
     same as the first ("add 12px to md-caseload's top margin") and made after the first had
     landed, so it is read as a further increment from the value then on screen rather than
     as a repeat. Edited here rather than answered with a new rule elsewhere: this is the
     declaration that owns the value, and a second one would have had to outrank it. */
  margin-top: 56px;
}
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-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action.md-caseload__quick-action--model,
body.ll-layout-focused .md-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action.md-caseload__quick-action--choose-board {
  background: radial-gradient(ellipse at center, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%) !important;
  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;
  border-color: rgb(17, 27, 73) !important;
  border-color: color-mix(in oklch, color-mix(in oklch, #120380, gray 28%), black 34%) !important;
  color: #ffffff !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__list-header .md-caseload__list-quick .md-caseload__quick-action.md-caseload__quick-action--model:not(.md-caseload__quick-action--empty) svg *:not([stroke=none]),
body.ll-layout-focused .md-shell--caseload .md-caseload__list-header .md-caseload__list-quick .md-caseload__quick-action.md-caseload__quick-action--choose-board:not(.md-caseload__quick-action--empty) svg *:not([stroke=none]) {
  stroke: #ffffff !important;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--remote:not(.md-caseload__quick-action--limited) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 12%), 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--remote:not(.md-caseload__quick-action--limited) svg [stroke="#46505F"] {
  stroke: currentColor;
}
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--model:hover,
body.ll-layout-focused .md-shell--caseload .md-caseload__quick-action--choose-board:hover,
body.ll-layout-focused .md-caseload__quick-action.md-caseload__quick-action--remote:not(.md-caseload__quick-action--limited):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.5) 0%, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 12%), 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 2px 3px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(27, 54, 93, 0.14), 0 1px 2px rgba(27, 54, 93, 0.1), 0 3px 6px rgba(27, 54, 93, 0.12) !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 2px 3px rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(27, 54, 93, 0.16), 0 2px 3px rgba(27, 54, 93, 0.12), 0 5px 10px rgba(27, 54, 93, 0.16) !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.5) 0%, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 12%), 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 2px 3px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(27, 54, 93, 0.14), 0 1px 2px rgba(27, 54, 93, 0.1), 0 3px 6px rgba(27, 54, 93, 0.12) !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 2px 3px rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(27, 54, 93, 0.16), 0 2px 3px rgba(27, 54, 93, 0.12), 0 5px 10px rgba(27, 54, 93, 0.16) !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.5) 0%, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 12%), 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 2px 3px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(27, 54, 93, 0.14), 0 1px 2px rgba(27, 54, 93, 0.1), 0 3px 6px rgba(27, 54, 93, 0.12) !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 2px 3px rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(27, 54, 93, 0.16), 0 2px 3px rgba(27, 54, 93, 0.12), 0 5px 10px rgba(27, 54, 93, 0.16) !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.5) 0%, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 22%), linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 12%), 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 2px 3px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(27, 54, 93, 0.14), 0 1px 2px rgba(27, 54, 93, 0.1), 0 3px 6px rgba(27, 54, 93, 0.12) !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 2px 3px rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(27, 54, 93, 0.16), 0 2px 3px rgba(27, 54, 93, 0.12), 0 5px 10px rgba(27, 54, 93, 0.16) !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 {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: none;
  color: #1b365d;
  font-size: 15px;
  font-weight: 600;
}
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: #9a6a12 !important;
  color: #9a6a12 !important;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access--attention svg {
  width: 14px;
  height: 14px;
}
body.ll-layout-focused .md-shell--caseload {
  --dn-cl-trigger-cols: auto minmax(0, 1fr);
  --dn-cl-identity-row: auto;
  --dn-cl-status-col: 2;
  --dn-cl-status-row: auto;
}
body.ll-layout-focused .md-shell--caseload .md-caseload__list-trigger:not(:has(.md-caseload__list-status .md-caseload__list-access)) {
  --dn-cl-identity-row: 1 / span 2;
  --dn-cl-identity-align: center;
}
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: rgb(175, 185, 215) !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 rgb(141, 148, 164) !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, rgb(238, 242, 246) 0%, rgb(210, 219, 231) 100%) !important;
  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-shell--user > .md-workspace {
  padding-top: 20px !important;
}

body.ll-layout-focused .md-hero--dashboard-user {
  display: none !important;
}
body.ll-layout-focused .md-logs__header,
body.ll-layout-focused .md-preferences__header,
body.ll-layout-focused .md-edit-profile__header,
body.ll-layout-focused .md-compact-head {
  animation: none;
}
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.55) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, rgb(197, 225, 220) 0%, transparent 46%), linear-gradient(140deg, rgb(218, 231, 249) 0%, rgb(200, 219, 245) 100%) !important;
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, color-mix(in oklch, #2A9D8F 30%, white) 0%, transparent 46%), linear-gradient(140deg, color-mix(in oklch, #4C86D8 20%, white) 0%, color-mix(in oklch, #4C86D8 30%, white) 100%) !important;
}
body.ll-layout-focused .md-hero--user__avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid #5A6A85;
  border-radius: 50%;
  pointer-events: none;
}

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: linear-gradient(158deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0) 72%), radial-gradient(circle at 50% 46%, rgba(29, 35, 48, 0.94) 0%, rgba(40, 48, 60, 0.92) 48%, rgba(65, 75, 92, 0.87) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(15, 23, 42, 0.24), 0 6px 16px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
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%, rgb(209, 231, 227) 0%, transparent 46%), linear-gradient(140deg, rgb(231, 239, 251) 0%, rgb(215, 229, 248) 100%) !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;
}

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;
  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-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 {
  color: #ffffff !important;
  border-color: rgba(70, 80, 95, 0.3) !important;
  background: #5A6A85 !important;
}
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 .nb-stepper-mini__input {
  color: #1B365D;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(76, 134, 216, 0.18) 35%, rgba(76, 134, 216, 0.34) 100%);
  box-shadow: 0 2px 12px rgba(76, 134, 216, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(76, 134, 216, 0.16);
}

body.ll-layout-focused .nb-grid-picker__cell--on {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 62%), radial-gradient(ellipse at center, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 62%), 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%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 1px rgba(27, 54, 93, 0.3), 0 1px 2px rgba(27, 54, 93, 0.2);
}

body.ll-layout-focused .nb-create-chooser__btn--ai {
  border-color: rgba(76, 134, 216, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.13) 100%);
}

body.ll-layout-focused .nb-create-chooser__btn--ai:hover,
body.ll-layout-focused .nb-create-chooser__btn--ai:focus-visible {
  border-color: rgba(76, 134, 216, 0.6);
  background: linear-gradient(180deg, #ffffff 0%, rgba(76, 134, 216, 0.18) 100%);
}

body.ll-layout-focused .nb-ai-generate__btn.btn.btn-primary {
  border-color: rgba(76, 134, 216, 0.18);
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.3), rgba(91, 141, 239, 0.26));
}

body.ll-layout-focused .nb-ai-generate__btn.btn.btn-primary:not(:disabled) {
  box-shadow: 0 0 0 5px rgba(76, 134, 216, 0.12), 0 6px 20px rgba(76, 134, 216, 0.3), 0 2px 6px rgba(13, 36, 56, 0.1);
}

body.ll-layout-focused .nb-ai-generate__btn.btn.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(76, 134, 216, 0.4), rgba(91, 141, 239, 0.34));
  box-shadow: 0 0 0 6px rgba(76, 134, 216, 0.18), 0 8px 26px rgba(76, 134, 216, 0.38), 0 2px 8px rgba(13, 36, 56, 0.12);
}

body.ll-layout-focused .nb-section {
  /* SILVER, NOT BLUE. The first attempt reused `$focus-section-bg-darkened`, and it read
     blue for the reason this file already documents at ~line 170: darkening a COOL
     near-white raises its apparent saturation, because the R-B spread widens as the stop
     darkens. That note records 20% giving rgb(167, 188, 217) and 15% giving
     rgb(184, 201, 224) -- "both read BLUE". The same trap caught this card: its top stop
     resolved to rgb(206, 221, 236), a 30-point R-B spread.
     So the ramp is authored directly at the lightness wanted instead of being derived by
     darkening a tinted base, which puts the R-B spread exactly where it is wanted rather
     than wherever the darkening maths lands it.
     TUNED IN BOTH DIRECTIONS. The first silver pass landed at 7 / 6 / 3 and read GREY --
     overcorrected, having come straight from 30 / 27 / 0, which read blue. 16 / 12 / 8 is
     the middle: enough cool cast to be silver rather than a neutral grey, still less than
     half the spread that made it look like a blue tile. Values computed, not eyeballed,
     as the note at ~170 asks. */
  background: linear-gradient(180deg, rgb(216, 221, 232) 0%, rgb(226, 230, 238) 45%, rgb(235, 238, 243) 100%);
  /* Neutral ink, not `$focus-accent`. The interior falloff used dusty denim, which was
     painting blue INSIDE the card on top of the blue gradient -- the two together are
     what made it read as a blue tile. A plain grey does the same shading work without
     carrying a hue. */
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 10px 20px rgba(120, 125, 132, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(27, 54, 93, 0.08), 0 10px 24px rgba(27, 54, 93, 0.12), 0 20px 48px rgba(27, 54, 93, 0.1);
}

body.ll-layout-focused .nb-section__title {
  color: #1B365D;
}

body.ll-layout-focused .nb-section__title:not(.nb-section__title--inline) {
  /* DARKER than the gentle pill it replaces (requested): the denim roughly doubles at
     both stops and the white top sheen is pulled back from 0.35 to 0.22, so the wash
     reads as a filled pill rather than a tint. Same three-stop construction and the same
     geometry — only the densities move.
     MEASURED, not estimated. The bottom stop (0.34 denim over the card) resolves to
     rgb(188, 209, 239) and carries $la-navy at 7.80:1; the midpoint stop (0.18) resolves
     to rgb(215, 227, 245) at 9.35:1. The bottom of the gradient is therefore the worst
     case, not an average, and it clears both the 4.5:1 AA floor and AAA's 7:1 for normal
     text. Deepening much past this starts eating the AAA margin — re-measure before
     doing so, because the ink is what has to keep up. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(76, 134, 216, 0.18) 35%, rgba(76, 134, 216, 0.34) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(76, 134, 216, 0.22);
}

body.ll-layout-focused .md-workspace--create-board-new.new-board--modern {
  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--create-board-new .nb-wizard__next.btn.btn-primary,
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__next.btn.btn-primary:hover:not(:disabled),
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__next.btn.btn-primary:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgb(77, 116, 171) 0%, rgb(61, 93, 139) 100%);
  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%);
  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);
}
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__next.btn.btn-primary:disabled,
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__next.btn.btn-primary[aria-disabled=true] {
  background: #e5e7eb;
  color: #1f2937;
  border-color: rgba(31, 41, 55, 0.18);
  box-shadow: none;
}
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__nav .nb-wizard__back,
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__nav .nb-wizard__back:hover,
body.ll-layout-focused .md-shell--create-board-new .nb-wizard__nav .nb-wizard__back:focus-visible {
  background: linear-gradient(135deg, rgb(220.4914285714, 228.16, 235.8285714286) 0%, rgb(196.3555555556, 208.0844444444, 223.1644444444) 100%);
  color: #1B365D;
  border-color: rgba(27, 54, 93, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14);
}
body.ll-layout-focused .md-shell--create-board-new .nb-create-rail__submit,
body.ll-layout-focused .md-shell--create-board-new .nb-create-rail__submit:hover:not(.new-board__submit--invalid),
body.ll-layout-focused .md-shell--create-board-new .nb-create-rail__submit:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(160deg, rgb(77, 116, 171) 0%, rgb(61, 93, 139) 100%) !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;
  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;
}

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-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-focused.png) !important;
  background-image: -webkit-image-set(url(/../images/organizations-focused.webp) type('image/webp'), url(/../images/organizations-focused.png) type('image/png')) !important;
  background-image: image-set(url(/../images/organizations-focused.webp) type('image/webp'), url(/../images/organizations-focused.png) type('image/png')) !important;
  filter: none !important;
}

@media (max-width: 900px) {
  body.ll-layout-focused .md-shell--home .md-workspace > .md-pillnav {
    margin-top: 12px !important;
  }
}
body.ll-layout-focused .md-grid .md-card.md-card--attention {
  background: var(--dn-attention-bg-focused, radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.024) 38%, transparent 62%), radial-gradient(ellipse 60% 40% at 50% 70%, rgb(194.219625, 201.5551875, 215.178375) 0%, rgb(165.76932, 176.6217, 193.50318) 48%, rgb(110.4669015544, 125.9525906736, 150.4715984456) 100%)) !important;
  /* Callers sit on a base rule that sets `border: none` and `box-shadow: none` `!important`
     ("the image IS the icon"), so anything wanted here has to be restated or the tile has no
     edge at all. */
  /* NOT RAISED. Dropping the outer drop shadow alone was not enough — the tile still read
     as a pressable chip, because a lit top rim plus a dark bottom lip plus a light border
     IS the bevel recipe, and a bevel says "object sitting on the surface" regardless of
     whether anything is cast beneath it. All three go, leaving just the radial dome, which
     is a lighting cue on the artwork rather than an edge treatment on a control.
     No contrast concern: the tile is a dark ramp on a light card, so it stays plainly
     distinct without an outline. */
  border: none !important;
  box-shadow: none !important;
  /* The ::before is positioned against this. `.md-card__icon` is `display: grid`, so without
     taking the pseudo out of flow it would be a zero-size grid item. */
  position: relative;
}

body.ll-layout-focused .md-card--rooms .md-room-card__icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  width: var(--dn-room-icon-focused, 69px);
  height: var(--dn-room-icon-focused, 69px);
  filter: none;
}

body.ll-layout-focused .md-card--rooms .md-room-card__icon::before {
  content: "";
  position: absolute;
  inset: 7.5%;
  /* Match the card it sits on, whatever radius that caller's base rule gives it. */
  border-radius: inherit;
  /* PLAIN url() FIRST as the fallback: `type()` inside image-set() needs Safari 17+ /
     Chrome 113+, and legacy -webkit-image-set() never supported it at all — so on an older iPad
     or a pre-2023 Android WebView (a very common AAC device population) BOTH declarations below
     are dropped and this line is what carries the artwork. */
  background-image: url(/../images/door.png);
  background-image: -webkit-image-set(url(/../images/door.webp) type('image/webp'), url(/../images/door.png) type('image/png'));
  background-image: image-set(url(/../images/door.webp) type('image/webp'), url(/../images/door.png) type('image/png'));
  /* Restated rather than inherited: the base `background:` shorthand that supplied these
     applies to the ELEMENT, which now carries the slate card instead. */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  inset: 0;
  filter: brightness(1.1) saturate(0.8);
}

/* ── THE SHARED CARD DIVIDER, PER CARD (2026-09-24) ─────────────────────────────────────
   Requested: the attention card's divider "make it lighter, it fails for contrast", the rooms
   card's "make darker".
   ONE BASE RULE, TWO CARDS THAT WENT OPPOSITE WAYS. `.md-card--boards__divider` (app.scss
   ~54063) draws a single dusty-denim ramp, and it was written when both cards were light
   panels. The 2026-09-21 experiment turned the attention card into a dark slate dome and left
   the rooms card light, so the same denim now sits on two very different surfaces -- composited
   against each panel it measures 1.07:1 on the attention card (invisible, which is the reported
   failure) and 1.78:1 on the rooms card.
   Each card therefore gets its own ink, in the direction its surface needs, and the base rule
   is left alone for the Boards card it was written for. Only the COLOUR changes; the 90deg
   fade-in/fade-out shape, the height and the margins all stay with the base.
   Computed after: 3.08:1 and 3.69:1, both clearing the 3:1 WCAG 2.1 asks of a non-text UI
   boundary. */
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card--boards__divider {
  /* White, because the panel under it is dark slate. Denim at any alpha cannot reach 3:1 here
     -- it is darker than the panel's light centre and barely lighter than its rim. */
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.375) 12%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.375) 88%, transparent 100%);
  /* The base drop shadow is a denim glow meant to lift the line off a light panel; on this one
     it is invisible and only muddies the edge. */
  box-shadow: none;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-card--boards__divider {
  /* Navy rather than denim, and at a higher peak alpha: this panel is light and just lightened
     again, so the line had to go the other way to stay legible on it. */
  background: linear-gradient(90deg, transparent 0%, rgba(27, 54, 93, 0.32) 12%, rgba(27, 54, 93, 0.65) 50%, rgba(27, 54, 93, 0.32) 88%, transparent 100%);
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms {
  background: radial-gradient(ellipse 60% 26% at 50% 86%, rgba(27, 54, 93, 0) 0%, rgba(27, 54, 93, 0.15) 55%, rgba(27, 54, 93, 0.3) 100%), linear-gradient(180deg, rgba(248.16, 249.96, 253.2, 0.98), rgba(210.1125, 216.845625, 228.0675, 0.95)) !important;
}

body.ll-layout-focused:not(.ll-density-compressed) .md-grid section.md-card.md-card--rooms {
  --dn-card-pad: 10px 24px 20px;
  --dn-room-icon-focused: 46px;
  --dn-room-pad-y: 6px;
}

body.ll-layout-focused:not(.ll-density-compressed) .md-grid .md-card.md-card--rooms .md-card--boards__divider {
  margin-top: -4px;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-card__icon--rooms {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  filter: none !important;
  margin-block: -9px;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-card__icon--rooms::before {
  content: "";
  position: absolute;
  inset: 7.5%;
  /* Match the card it sits on, whatever radius that caller's base rule gives it. */
  border-radius: inherit;
  /* PLAIN url() FIRST as the fallback: `type()` inside image-set() needs Safari 17+ /
     Chrome 113+, and legacy -webkit-image-set() never supported it at all — so on an older iPad
     or a pre-2023 Android WebView (a very common AAC device population) BOTH declarations below
     are dropped and this line is what carries the artwork. */
  background-image: url(/../images/classroom.png);
  background-image: -webkit-image-set(url(/../images/classroom.webp) type('image/webp'), url(/../images/classroom.png) type('image/png'));
  background-image: image-set(url(/../images/classroom.webp) type('image/webp'), url(/../images/classroom.png) type('image/png'));
  /* Restated rather than inherited: the base `background:` shorthand that supplied these
     applies to the ELEMENT, which now carries the slate card instead. */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(1.05);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention__all {
  --md-dash-btn-bg: rgba(165.5, 194.5, 235.5, 0.6);
  --md-dash-btn-bg-hover: rgba(165.5, 194.5, 235.5, 0.7);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--dn-attention-track, 260px), 100%), 1fr));
}

@media (max-width: 768px) {
  body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__name {
  width: auto;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: rgba(27, 54, 93, 0.18);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status {
  justify-self: start;
  max-width: 100%;
  text-align: left;
  font-size: 14px;
}

body.ll-layout-focused .md-shell--home > .md-workspace > .md-main {
  width: auto !important;
  max-width: none !important;
  margin-left: -40px !important;
  margin-right: -40px !important;
  /* md-main's own 16px side padding + the 40px it just bled over, so its CONTENT stays put. */
  padding-left: 56px !important;
  padding-right: 56px !important;
  /* NO TOP PADDING on the focused dashboard (requested 2026-09-21). The base `.md-main`
     rule's `padding: 18px 16px 24px` puts 18px above the first card, on top of the shell's
     own nav clearance -- two stacked gaps where the page wanted one. Set here rather than on
     the base rule because Gentle View keeps its 18px: this partial is the Focused overlay and
     the baseline is untouched by contract. The bottom 24px stays; only the top was asked
     about. */
  padding-top: 0 !important;
}

@media (max-width: 950px) {
  body.ll-layout-focused .md-shell--home > .md-workspace > .md-main {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
@media (max-width: 820px) {
  body.ll-layout-focused .md-shell--home > .md-workspace > .md-main {
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
@media (max-width: 1024px) {
  body.ll-layout-focused .md-grid.md-grid--dashboard {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 1024px) and (min-width: 951px) {
  body.ll-layout-focused .md-shell--home > .md-workspace {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
body.ll-layout-focused .md-shell--caseload > .md-workspace {
  margin-top: 48px !important;
}

@media (max-width: 900px) {
  body.ll-layout-focused .md-shell--caseload > .md-workspace {
    margin-top: 32px !important;
  }
}
@media (max-width: 1024px) and (min-width: 951px) {
  body.ll-layout-focused .md-shell--caseload > .md-workspace {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
@media (max-width: 950px) {
  body.ll-layout-focused .md-shell--caseload .md-caseload {
    margin-top: 68px;
  }
}
@media (max-width: 900px) {
  body.ll-layout-focused .md-shell--caseload .md-caseload {
    margin-top: 0;
  }
}
body.ll-layout-focused #content.boards-page .md-workspace {
  margin-top: 0 !important;
}

body.ll-layout-focused #content.boards-page .ub-boards-page--below-dashboard-pills {
  padding-top: 0;
}

@media (max-width: 1300px) {
  body.ll-layout-focused .md-caseload__list-trigger {
    /* NO WASH (requested 2026-09-29: "don't bring back the gray header"). The identity row
       carried the More Actions tile's blue-grey ramp here, which with the header tint made the
       grey band; the row now sits on the card's own surface, as it does above 1300px. */
    background: none;
  }
}
body.ll-layout-focused .md-acct-rail__row {
  box-shadow: 0 0 0 1px #D2DAE5, 0 4px 14px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.ll-layout-focused .md-acct-rail__row:hover,
body.ll-layout-focused .md-acct-rail__row:focus-visible {
  box-shadow: 0 0 0 1px #EAEFF6, 0 10px 24px rgba(17, 26, 46, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.ll-layout-focused .md-acct-rail {
  background: linear-gradient(160deg, rgba(229.5, 229.5, 229.5, 0.55) 0%, rgba(24.3, 48.6, 83.7, 0.05) 100%);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__avatar {
  border: 1px solid #5A6A85;
  outline: 1px solid rgba(234, 239, 246, 0.75);
  outline-offset: -2px;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card__icon--attention {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card__icon--attention::before {
  content: "";
  position: absolute;
  inset: 7.5%;
  /* Match the card it sits on, whatever radius that caller's base rule gives it. */
  border-radius: inherit;
  /* PLAIN url() FIRST as the fallback: `type()` inside image-set() needs Safari 17+ /
     Chrome 113+, and legacy -webkit-image-set() never supported it at all — so on an older iPad
     or a pre-2023 Android WebView (a very common AAC device population) BOTH declarations below
     are dropped and this line is what carries the artwork. */
  background-image: url(/../images/communicators-folders.png);
  background-image: -webkit-image-set(url(/../images/communicators-folders.webp) type('image/webp'), url(/../images/communicators-folders.png) type('image/png'));
  background-image: image-set(url(/../images/communicators-folders.webp) type('image/webp'), url(/../images/communicators-folders.png) type('image/png'));
  /* Restated rather than inherited: the base `background:` shorthand that supplied these
     applies to the ELEMENT, which now carries the slate card instead. */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ch-grid:not(.ch-grid--extras) {
  /* SPEAK + REPORTS WEAR THE MODERN CASELOAD-HERO MATERIAL, FOCUSED ONLY (2026-09-22).
     The glass-tile include stays as the BASE so Basic+Gentle keeps exactly the tile it had;
     the hero is layered in a `body.ll-layout-focused &` wrapper on top. That scoping is the
     whole point: this block lost its `body.ll-layout-focused` prefix earlier the same day so
     Basic could use the focused PALETTE in both layouts, which meant an unscoped hero here
     silently restyled the Gentle Speak button too — reported, and this is the fix.
     The hero mixin is `!important` throughout, so it cleanly supersedes the glass tile where
     it applies rather than racing it. */
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #89A9C4 0%, #7498B9 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main:hover, .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: radial-gradient(ellipse at center, rgb(50, 84, 140) 0%, rgb(3, 25, 64) 100%) !important;
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.128 260), white 6%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.128 260), white 6%), black 34%) 100%) !important;
  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 14px 28px rgba(27, 54, 93, 0.34), 0 0 22px rgba(42, 157, 143, 0.1) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
  /* WHITE INK ON THE DESCENDANTS, not just the tile. The note above `.ch-tile__label` records
     that its colour is set in two mutually exclusive media blocks, so a matching rule always
     beats inheritance — `color` on the tile alone leaves a dark label on a dark fill. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main .ch-tile__label,
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main .ch-tile__sub {
  color: #ffffff !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main {
  /* SPLIT OUT OF THE GROUP ABOVE so the description can be grey while the title and sub-label
     stay white -- see `$ch-focused-hero-more-ink` for the value and the measurement. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main .ch-tile__more {
  color: #E5E5E5 !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main: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 22px 40px rgba(27, 54, 93, 0.42), 0 0 34px rgba(76, 134, 216, 0.35) !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--speak-main: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;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(145deg, #C9D9D8 0%, #90B3B1 55%, #719997 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports:hover, .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: radial-gradient(ellipse at center, rgb(57, 91, 92) 0%, rgb(7, 32, 33) 100%) !important;
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.05 198), white 6%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.05 198), white 6%), black 34%) 100%) !important;
  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 14px 28px rgba(27, 54, 93, 0.34), 0 0 22px rgba(42, 157, 143, 0.1) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
  /* WHITE INK ON THE DESCENDANTS, not just the tile. The note above `.ch-tile__label` records
     that its colour is set in two mutually exclusive media blocks, so a matching rule always
     beats inheritance — `color` on the tile alone leaves a dark label on a dark fill. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports .ch-tile__label,
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports .ch-tile__sub {
  color: #ffffff !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports {
  /* SPLIT OUT OF THE GROUP ABOVE so the description can be grey while the title and sub-label
     stay white -- see `$ch-focused-hero-more-ink` for the value and the measurement. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports .ch-tile__more {
  color: #E5E5E5 !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports: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 22px 40px rgba(27, 54, 93, 0.42), 0 0 34px rgba(76, 134, 216, 0.35) !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--reports: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;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #AEA899 0%, #A09888 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas:hover, .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: radial-gradient(ellipse at center, rgb(98, 73, 109) 0%, rgb(37, 20, 44) 100%) !important;
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.082 315), white 6%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.082 315), white 6%), black 34%) 100%) !important;
  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 14px 28px rgba(27, 54, 93, 0.34), 0 0 22px rgba(42, 157, 143, 0.1) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
  /* WHITE INK ON THE DESCENDANTS, not just the tile. The note above `.ch-tile__label` records
     that its colour is set in two mutually exclusive media blocks, so a matching rule always
     beats inheritance — `color` on the tile alone leaves a dark label on a dark fill. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas .ch-tile__label,
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas .ch-tile__sub {
  color: #ffffff !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas {
  /* SPLIT OUT OF THE GROUP ABOVE so the description can be grey while the title and sub-label
     stay white -- see `$ch-focused-hero-more-ink` for the value and the measurement. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas .ch-tile__more {
  color: #E5E5E5 !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas: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 22px 40px rgba(27, 54, 93, 0.42), 0 0 34px rgba(76, 134, 216, 0.35) !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--ideas: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;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #9EA5B1 0%, #8A93A3 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account:hover, .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: radial-gradient(ellipse at center, rgb(77, 85, 94) 0%, rgb(23, 29, 34) 100%) !important;
  background: radial-gradient(ellipse at center in oklab, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.022 250), white 6%) 84%, white) 0%, color-mix(in oklch, color-mix(in oklch, oklch(0.3 0.022 250), white 6%), black 34%) 100%) !important;
  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 14px 28px rgba(27, 54, 93, 0.34), 0 0 22px rgba(42, 157, 143, 0.1) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
  /* WHITE INK ON THE DESCENDANTS, not just the tile. The note above `.ch-tile__label` records
     that its colour is set in two mutually exclusive media blocks, so a matching rule always
     beats inheritance — `color` on the tile alone leaves a dark label on a dark fill. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account .ch-tile__label,
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account .ch-tile__sub {
  color: #ffffff !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account {
  /* SPLIT OUT OF THE GROUP ABOVE so the description can be grey while the title and sub-label
     stay white -- see `$ch-focused-hero-more-ink` for the value and the measurement. */
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account .ch-tile__more {
  color: #E5E5E5 !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account: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 22px 40px rgba(27, 54, 93, 0.42), 0 0 34px rgba(76, 134, 216, 0.35) !important;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big.ch-tile--account: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;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big::before {
  display: none;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big::after {
  display: none;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__label {
  color: #0F172A;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__sub {
  color: #0F0269;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__more {
  color: #0D1B33;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__sub {
  letter-spacing: 0.02em;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__rule {
  color: #E5E5E5;
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__rule::before {
  display: block;
  line-height: 1;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__rule::before {
  transform: translateY(-0.085em);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__info {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__info::after {
  background: rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__cta {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(27, 54, 93, 0.18);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__sub {
  color: #0F0269;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #CAD9E7 0%, #9FB9D3 100%);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(27, 54, 93, 0.22);
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#4C86D8"], .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#4C86D8"] {
  stroke: #2357A1;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#2A9D8F"], .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#2A9D8F"] {
  stroke: #1A635A;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#C0392B"], .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#C0392B"] {
  stroke: #A13024;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#2873B4"], .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#2873B4"] {
  stroke: #205B8F;
}
.ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#23779B"], .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#23779B"] {
  stroke: #1C5F7B;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 4px 10px rgba(27, 54, 93, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#46505F"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#46505F"] {
  stroke: #FFFFFF;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#4C86D8"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#4C86D8"] {
  stroke: #E0EFFD;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#2A9D8F"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#2A9D8F"] {
  stroke: #C8F6EE;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [fill="#2A9D8F"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[fill="#2A9D8F"] {
  fill: #C8F6EE;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#C0392B"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#C0392B"] {
  stroke: #FCD9D2;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#2873B4"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#2873B4"] {
  stroke: #D6EAFC;
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon [stroke="#23779B"], body.ll-layout-focused .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon[stroke="#23779B"] {
  stroke: #D1EEF8;
}

.ch-rail {
  /* IDENTITY BLOCK (the panel the avatar sits in) IS FOCUSED-ONLY (requested 2026-09-22:
     "keep the gentle avatar bg the same as it is on gentle basic"). This `.ch-rail` block lost
     its `body.ll-layout-focused` prefix earlier the same day so Basic could take the focused
     PALETTE in both layouts — which also handed Gentle this identity fill. Reverted by scoping.

     THE INK GOES WITH THE FILL, not just the background. `.ch-rail__username`,
     `__identity-sub` and `__arrow` are measured AGAINST this wash (see the figures in the
     comments below), so scoping the background alone would leave focused ink on Gentle's
     original panel — a contrast mismatch rather than a revert. All of it moves together. */
}
body.ll-layout-focused .ch-rail .ch-rail__identity,
body.ll-layout-focused .ch-rail .ch-rail__menu-trigger {
  background: linear-gradient(150deg, #94A6BE 0%, #88B3AD 100%);
  border-color: rgba(15, 23, 42, 0.32);
  box-shadow: 0 6px 18px rgba(27, 54, 93, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #0F172A;
}
body.ll-layout-focused .ch-rail .ch-rail__identity::before,
body.ll-layout-focused .ch-rail .ch-rail__menu-trigger::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0) 100%);
}
body.ll-layout-focused .ch-rail .ch-rail__username,
body.ll-layout-focused .ch-rail .ch-rail__menu-name {
  color: #0F172A;
}
body.ll-layout-focused .ch-rail .ch-rail__identity-sub,
body.ll-layout-focused .ch-rail .ch-rail__menu-sub {
  color: #0F172A;
  opacity: 0.85;
}
body.ll-layout-focused .ch-rail .ch-rail__arrow {
  color: #0F172A;
  opacity: 0.7;
}
body.ll-layout-focused .ch-rail .ch-rail__avatar {
  border-color: rgba(15, 23, 42, 0.38);
}
.ch-rail .ch-row {
  min-height: 64px;
  padding: 9px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.34);
}
@media (max-width: 1024px) {
  .ch-rail .ch-row {
    min-height: 60px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
.ch-rail .ch-row {
  border: 1px solid rgba(156, 163, 175, 0.42);
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 2px 6px rgba(27, 54, 93, 0.1);
  transform: none;
}
.ch-rail .ch-row::before {
  display: none;
}
.ch-rail a.ch-row:hover, .ch-rail a.ch-row:focus-visible,
.ch-rail button.ch-row:hover, .ch-rail button.ch-row:focus-visible {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(156, 163, 175, 0.62);
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.08), 0 4px 10px rgba(27, 54, 93, 0.14);
  transform: none;
}
.ch-rail a.ch-row:active, .ch-rail button.ch-row:active {
  box-shadow: none;
}
.ch-rail .ch-row--todo {
  background: rgba(227, 181, 105, 0.2);
}
.ch-rail .ch-row--sync {
  background: rgba(234, 166, 143, 0.22);
}
.ch-rail .ch-row__title {
  color: #0F172A;
}
.ch-rail .ch-row__sub {
  color: #0F172A;
  opacity: 0.82;
}
.ch-rail .ch-row__arrow {
  color: #0F172A;
  opacity: 0.78;
}
.ch-rail .ch-rail__footer {
  border-top-color: rgba(15, 23, 42, 0.18);
}
.ch-rail .ch-rail__minor {
  color: #0F172A;
  opacity: 0.85;
}
.ch-rail .ch-rail__minor:hover, .ch-rail .ch-rail__minor:focus-visible {
  color: #0F172A;
  opacity: 1;
}

body.ll-layout-focused .ch-tabs {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 28px rgba(27, 54, 93, 0.14), 0 2px 6px rgba(27, 54, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(27, 54, 93, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.ll-layout-focused .ch-tab {
  min-height: 44px;
  background: transparent;
  color: #1B365D;
  opacity: 1;
}
body.ll-layout-focused .ch-tab:hover {
  background: rgba(42, 157, 143, 0.07);
  color: #1B365D;
}
body.ll-layout-focused .ch-tab.is-active {
  background: linear-gradient(135deg, #417783 0%, #5E73A3 100%);
  color: #ffffff;
  font-weight: 750;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.2);
}
body.ll-layout-focused .ch-subtab {
  background: #D2DAE5;
  border-color: rgba(27, 54, 93, 0.16);
  color: #1B365D;
}
body.ll-layout-focused .ch-subtab:hover {
  background: #C3CDDA;
  color: #1B365D;
}
body.ll-layout-focused .ch-subtab.is-active {
  background: #4E77B0;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
body.ll-layout-focused .ch-tabselect {
  background-color: rgba(255, 255, 255, 0.68);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231B365D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: rgba(27, 54, 93, 0.28);
  color: #1B365D;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.12);
}

body.ll-layout-focused .ch-card {
  background: linear-gradient(160deg, #1C3961 0%, #193155 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(27, 54, 93, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.ll-layout-focused .ch-card::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0) 100%);
}
body.ll-layout-focused .ch-card__title {
  color: #ffffff;
}
body.ll-layout-focused .ch-card__heading {
  color: #ffffff;
  opacity: 0.78;
}
body.ll-layout-focused .ch-card__text {
  color: #ffffff;
  opacity: 0.88;
}
body.ll-layout-focused .ch-card--alert {
  background: linear-gradient(160deg, #6D352F 0%, #632A29 100%);
}
body.ll-layout-focused .ch-grid:not(.ch-grid--extras) {
  --ch-compact-arrow: #E5E5E5;
}
body.ll-layout-focused .ch-card--list,
body.ll-layout-focused .ch-card--install {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #DCE0E7 0%, #CED4DD 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-card--list::before,
body.ll-layout-focused .ch-card--install::before {
  background: none;
}
body.ll-layout-focused .ch-card--list .ch-card__title,
body.ll-layout-focused .ch-card--list .ch-card__heading,
body.ll-layout-focused .ch-card--list .ch-card__text,
body.ll-layout-focused .ch-card--list .ch-note,
body.ll-layout-focused .ch-card--list .ch-empty,
body.ll-layout-focused .ch-card--list .ch-session__when,
body.ll-layout-focused .ch-card--list .ch-session__who,
body.ll-layout-focused .ch-card--list .ch-session__summary,
body.ll-layout-focused .ch-card--install .ch-card__title,
body.ll-layout-focused .ch-card--install .ch-card__heading,
body.ll-layout-focused .ch-card--install .ch-card__text,
body.ll-layout-focused .ch-card--install .ch-note,
body.ll-layout-focused .ch-card--install .ch-empty,
body.ll-layout-focused .ch-card--install .ch-session__when,
body.ll-layout-focused .ch-card--install .ch-session__who,
body.ll-layout-focused .ch-card--install .ch-session__summary {
  color: #0F172A;
  opacity: 1;
}
body.ll-layout-focused .ch-card--list .ch-session__link,
body.ll-layout-focused .ch-card--list .ch-note a,
body.ll-layout-focused .ch-card--list .ch-notes a,
body.ll-layout-focused .ch-card--install .ch-session__link,
body.ll-layout-focused .ch-card--install .ch-note a,
body.ll-layout-focused .ch-card--install .ch-notes a {
  color: #0F0269;
}
body.ll-layout-focused .ch-card--list .ch-notes span[style],
body.ll-layout-focused .ch-card--install .ch-notes span[style] {
  color: #0F172A !important;
}
body.ll-layout-focused .ch-card--list .ch-explain,
body.ll-layout-focused .ch-card--install .ch-explain {
  background: rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.3);
  color: #0F172A;
}
body.ll-layout-focused .ch-card--list .ch-explain:hover,
body.ll-layout-focused .ch-card--list .ch-explain:focus-visible,
body.ll-layout-focused .ch-card--install .ch-explain:hover,
body.ll-layout-focused .ch-card--install .ch-explain:focus-visible {
  background: rgba(15, 23, 42, 0.18);
}
body.ll-layout-focused .ch-card--list .ch-session,
body.ll-layout-focused .ch-card--install .ch-session {
  border-bottom-color: rgba(15, 23, 42, 0.22);
}
body.ll-layout-focused .ch-card--intro {
  padding: 19px 28px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 252, 0.88));
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 30px rgba(27, 54, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.ll-layout-focused .ch-card--intro .ch-card__title {
  color: #1B365D;
}
body.ll-layout-focused .ch-card--intro .ch-card__text {
  color: #1B365D;
  opacity: 0.85;
}
body.ll-layout-focused .ch-intro__icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #CAD9E7 0%, #9FB9D3 100%);
  border-color: rgba(27, 54, 93, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-intro__icon svg [stroke="#4C86D8"], body.ll-layout-focused .ch-intro__icon svg[stroke="#4C86D8"] {
  stroke: #2357A1;
}
body.ll-layout-focused .ch-intro__icon svg [stroke="#2A9D8F"], body.ll-layout-focused .ch-intro__icon svg[stroke="#2A9D8F"] {
  stroke: #1A635A;
}
body.ll-layout-focused .ch-intro__icon svg [stroke="#C0392B"], body.ll-layout-focused .ch-intro__icon svg[stroke="#C0392B"] {
  stroke: #A13024;
}
body.ll-layout-focused .ch-intro__icon svg [stroke="#2873B4"], body.ll-layout-focused .ch-intro__icon svg[stroke="#2873B4"] {
  stroke: #205B8F;
}
body.ll-layout-focused .ch-intro__icon svg [stroke="#23779B"], body.ll-layout-focused .ch-intro__icon svg[stroke="#23779B"] {
  stroke: #1C5F7B;
}
body.ll-layout-focused .ch-card--intro .ch-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, #F7F9FC 0%, #E3E8EF 52%, #CFD6E0 100%);
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.14), rgba(76, 134, 216, 0.13));
  border: 1px solid rgba(42, 157, 143, 0.4);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(27, 54, 93, 0.1);
}
body.ll-layout-focused .ch-card--intro .ch-btn:hover,
body.ll-layout-focused .ch-card--intro .ch-btn:focus-visible {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.22), rgba(76, 134, 216, 0.2));
  border-color: rgba(42, 157, 143, 0.55);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(27, 54, 93, 0.14);
}
body.ll-layout-focused .ch-btn--ghost {
  background: linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border-color: rgba(27, 54, 93, 0.16);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.ll-layout-focused .ch-btn--ghost:hover,
body.ll-layout-focused .ch-btn--ghost:focus-visible {
  background: linear-gradient(160deg, #fff 0%, #EAEFF6 100%);
  color: #1B365D;
}
body.ll-layout-focused .ch-btn.ch-boards__create,
body.ll-layout-focused .ch-btn.ch-boards__create:hover,
body.ll-layout-focused .ch-btn.ch-boards__create:focus-visible {
  padding: 12px 28px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 850;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgb(77, 116, 171) 0%, rgb(61, 93, 139) 100%);
  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%);
  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);
}
body.ll-layout-focused .ch-note {
  color: #1B365D;
  opacity: 0.88;
}
body.ll-layout-focused .ch-empty {
  color: #1B365D;
  opacity: 0.78;
}
body.ll-layout-focused .ch-empty--error {
  color: #C0392B;
  opacity: 1;
}
body.ll-layout-focused .ch-explain {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
body.ll-layout-focused .ch-explain:hover,
body.ll-layout-focused .ch-explain:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}
body.ll-layout-focused .ch-session {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.ll-layout-focused .ch-comm {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), #969EAC;
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm:hover, body.ll-layout-focused .ch-comm:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm {
  background: #969EAC;
}
body.ll-layout-focused .ch-boards__panel {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid;
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #DCE0E7 0%, #CED4DD 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-boards__panel .ch-empty {
  color: #0F172A;
  opacity: 1;
}
body.ll-layout-focused body.ll-layout-focused .ch-comm__avatar {
  border-color: rgba(15, 23, 42, 0.38);
}
body.ll-layout-focused .ch-comm__name {
  color: #0F172A;
}
body.ll-layout-focused .ch-comm__goal {
  color: #0F172A;
  opacity: 1;
}
body.ll-layout-focused .ch-comm__goal-set {
  color: #0F0269;
}
body.ll-layout-focused .ch-comm__actions .ch-tile {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
}
body.ll-layout-focused .ch-comm__actions .ch-tile::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0) 100%);
}
body.ll-layout-focused .ch-comm__actions .ch-tile::after {
  display: none;
}
body.ll-layout-focused .ch-comm__actions .ch-tile--speak {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #89A9C4 0%, #7498B9 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--speak:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--speak:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--reports {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(145deg, #C9D9D8 0%, #90B3B1 55%, #719997 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--reports:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--reports:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--ideas {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #AEA899 0%, #A09888 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--ideas:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--ideas:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--extras {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(160deg, #CAD9E7 0%, #9FB9D3 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--extras:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--extras:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--primary {
  background: radial-gradient(125% 95% at 18% 6%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 44%), linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 38%), linear-gradient(155deg, #1E4E6C 0%, #183F58 100%);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--primary:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--primary:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.3), 0 2px 5px rgba(27, 54, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 2px rgba(15, 23, 42, 0.08);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--setup {
  background: linear-gradient(155deg, #21514F 0%, #1B4240 100%);
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.22), 0 1px 3px rgba(27, 54, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--setup:hover, body.ll-layout-focused .ch-comm__actions .ch-tile--setup:focus-visible {
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.38), 0 2px 5px rgba(27, 54, 93, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--primary,
body.ll-layout-focused .ch-comm__actions .ch-tile--setup {
  border-color: rgba(255, 255, 255, 0.42);
}
body.ll-layout-focused .ch-comm__actions .ch-tile--speak,
body.ll-layout-focused .ch-comm__actions .ch-tile--reports,
body.ll-layout-focused .ch-comm__actions .ch-tile--ideas,
body.ll-layout-focused .ch-comm__actions .ch-tile--extras {
  color: #0F172A;
}
body.ll-layout-focused .ch-comm__actions .ch-tile--locked {
  color: #0F172A;
}
body.ll-layout-focused .ch-tile__caret {
  border-top-color: rgba(15, 23, 42, 0.7);
}
body.ll-layout-focused .ch-menu {
  background: rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
}
body.ll-layout-focused .ch-menu__item {
  background: linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border-color: rgba(255, 255, 255, 0.85);
  color: #1B365D;
}
body.ll-layout-focused .ch-menu__item:hover,
body.ll-layout-focused .ch-menu__item:focus-visible {
  background: linear-gradient(160deg, #fff 0%, #EAEFF6 100%);
  color: #1B365D;
}

@media (min-width: 901px) {
  body.ll-layout-focused .ch-rail--collapsed .ch-row {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.ch-rail__toggle {
  background: linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(27, 54, 93, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #0F172A;
}

@media (min-width: 901px) {
  body.ll-layout-focused .ch-rail--collapsed .ch-rail__item + .ch-rail__item {
    border-top: 0;
  }
}
@media (min-width: 901px) {
  body.ll-layout-focused .ch-rail__item + .ch-rail__item {
    padding-top: 6px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  body.ll-layout-focused .ch-rail a.ch-row:hover,
  body.ll-layout-focused .ch-rail a.ch-row:focus-visible,
  body.ll-layout-focused .ch-rail button.ch-row:hover,
  body.ll-layout-focused .ch-rail button.ch-row:focus-visible {
    transform: translateY(-1px);
  }
}
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card__title {
  color: #F2F6FC !important;
  text-shadow: none !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card__sub {
  color: #C3D0E2 !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-card__sub::before {
  background: #C3D0E2 !important;
  box-shadow: none !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item {
  min-height: 0;
  background: radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 36%, transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(240, 244, 250, 0.64) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 3px 0 0 rgba(76, 134, 216, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(27, 54, 93, 0.1), 0 2px 5px rgba(27, 54, 93, 0.12), 0 10px 24px rgba(27, 54, 93, 0.16) !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item:hover,
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item:focus-visible {
  box-shadow: inset 3px 0 0 rgba(76, 134, 216, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(27, 54, 93, 0.1), 0 4px 10px rgba(27, 54, 93, 0.16), 0 16px 34px rgba(27, 54, 93, 0.22) !important;
}

body.ll-layout-focused .md-attention__count,
body.ll-layout-focused .md-rooms__count {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(42, 157, 143, 0.32);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-room-card__arrow {
  color: #1B365D !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-room-card__arrow {
  color: #5A6A85 !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-card__sub {
  color: #3A4557 !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-card__sub::before {
  background: #3A4557 !important;
}

body.ll-view-modern.ll-layout-focused .ll-appshell__content .md-compact-head--rooms {
  margin: 78px 25px 28px;
}

body.ll-layout-focused .md-shell--org-rooms {
  --dn-org-switcher-top: 0;
}

body.ll-view-modern.ll-layout-focused .md-shell--org-rooms {
  --dn-room-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(76, 134, 216, 0.10),
    0 1px 3px rgba(15, 23, 42, 0.06);
}

body.ll-layout-focused .md-grid .md-card.md-card--rooms .md-room-card {
  background: radial-gradient(120% 140% at 14% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 34%, transparent 60%), linear-gradient(155deg, #FDFDFE 0%, #D2D9E4 100%) !important;
  border: 1px solid rgba(76, 134, 216, 0.38) !important;
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status {
  --status-ink: rgb(66.6, 78.44, 98.42);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status[data-status=hourglass],
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status[data-status=equalizer] {
  --status-ink: rgb(112.6597752809, 73.7409438202, 8.8762247191);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status[data-status=phone],
body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status[data-status=piggy-bank] {
  --status-ink: rgb(26.4, 63.36, 132.66);
}

body.ll-layout-focused .md-grid .md-card.md-card--attention .md-attention-item__status[data-status=exclamation-sign] {
  --status-ink: rgb(17.42, 82.41, 81.74);
}

/* ── CASELOAD: LESS GLASS, MORE PAPER (2026-09-24) ──────────────────────────────────────
   Requested, in four parts: "Reduce the glass dramatically on the communicator cards. Make the
   main body closer to an opaque pearl/off-white surface... Make the card header much less
   frosted... Flatten the Viewer pill and warning pills. They're metadata, not primary
   controls... Reduce the large outer container effect by making md-caseload bg transparent
   with no borders."

   ONE BLOCK, FOUR SURFACES, and they belong together: the page reads as glassy because four
   translucent layers stack on one another -- tray, card, header, pill -- and flattening any one
   of them alone just moves the problem. Written as its own block rather than edited into the
   gentle rules in _caseload.scss, because Gentle is not being changed.
   FOCUSED + MODERN ONLY: `.md-shell--caseload` is the Modern shell, and `body.ll-layout-focused`
   is the layout axis, so Basic and Gentle both keep what they have. */
/* 1. THE TRAY STOPS BEING A SURFACE. The base is a 4%-navy fill with a hairline and two inset
      shadows that read as a recessed well -- a container effect around cards that are already
      containers. Transparent, no border, no inset: the cards now sit on the page. */
body.ll-layout-focused .md-shell--caseload .md-caseload {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* 2. THE CARD BODY BECOMES PAPER. The base gradient ends in `rgba(27,54,93,0.02)`, i.e. it is
      translucent at the bottom and picks up whatever is behind it -- which is what makes it
      read as glass rather than as a card. An OPAQUE pearl ramp instead, two stops barely apart
      so it still has a little depth, with the border and shadow kept deliberately faint: the
      request allowed "a very subtle translucent border and shadow" and those are what stop the
      card dissolving into the page now that the tray behind it is gone. */
body.ll-layout-focused .md-shell--caseload .md-caseload__list-row {
  background: var(--dn-cl-card-bg, linear-gradient(180deg, #FCFCFD 0%, #F5F6F9 100%));
  border-color: rgba(27, 54, 93, 0.1);
  box-shadow: var(--dn-cl-card-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 54, 93, 0.05));
  backdrop-filter: var(--dn-cl-card-blur, none);
  -webkit-backdrop-filter: var(--dn-cl-card-blur, none);
}

/* 3. THE HEADER TAKES A FLAT PERIWINKLE TINT. Asked for directly ("a flatter, slightly tinted
      slate/periwinkle surface with only a very gentle gradient") and it is the part that was
      reading as a second glass panel. Two stops six points apart is about as gentle as a
      gradient gets while still being one; no blur, no inset highlight, no shadow -- a header is
      a band across the card, not a component sitting on it.
      `--active` keeps its own teal tint, which is state and not decoration, so it is left to
      the rules that own it. */
body.ll-layout-focused .md-shell--caseload .md-caseload__list-row:not(.md-caseload__list-row--active) .md-caseload__list-header {
  /* SOFTENED AGAIN 2026-09-24, second pass: "move it toward a quieter cool slate-gray with less
     gradient variation -- not necessarily lighter by much, just less 'foggy'. Keep enough tint
     that the identity area remains clearly separated."
     Two changes, both small and deliberate. The HUE drops from periwinkle (140,167,206) to a
     cooler, greyer slate (124,137,158), which is what takes the blue cast out of it. And the
     RANGE closes from 6 points of alpha to 3 (0.16 -> 0.13): "foggy" is what a visible ramp
     across a wide band reads as, so the cure is less variation rather than less tint. The floor
     stays at 0.13 precisely so the band still separates the identity area -- going lighter would
     have answered a different sentence than the one that was written. */
  /* TWO LAYERS: a thin slate rule along the bottom, then the tint beneath it (requested
     2026-09-24: "add a slate bottom border to the bottom of the header gradients ... don't
     extend it left to cover the left border - make it thin").
     A REAL `border-bottom` CANNOT DO THIS. A border runs the full width of the box, so it would
     cross the accent rail at the left -- the exact thing the previous request ruled out. A
     background layer can be sized and positioned independently, so this one is drawn
     `calc(100% - 5px)` wide, pinned right, and 1px tall at the bottom edge: same 5px gap the
     tint already leaves, from the same measurement (4px rail, 5px when hovered or active).
     Layer order is paint order -- first listed is on top -- so the rule sits over the tint. */
  /* THE TINT IS GONE (requested 2026-09-29: "don't bring back the gray header"). Only the slate
     divider along the bottom remains; the header now sits on the card's own surface. */
  background: linear-gradient(rgba(100, 112, 133, 0.45), rgba(100, 112, 133, 0.45));
  /* AND IT STOPS SHORT OF THE ACCENT RAIL (requested 2026-09-24: "don't extend the gradient on
     top of the left border - that border should feel like its own element").
     The rail is `.md-caseload__list-row::before`, a 4px strip at the row's left edge that widens
     to 5px when the row is hovered, focused or active (_caseload.scss). It carries `z-index: 20`
     and is still painted over here, because the header sits in a stacking context of its own --
     so raising the rail further would not have fixed it.
     SIZING THE BACKGROUND IS WHAT FIXES IT, not a margin or a padding: those would move the
     avatar and the name as well. The tint is drawn 5px narrower and pinned to the RIGHT edge, so
     the leftmost 5px of the header is simply never painted and the rail shows through at its own
     full strength. 5px, not 4, so the widened hover/active state is covered too -- the extra
     pixel at rest sits under the row's own fill and is invisible. */
  background-size: calc(100% - 5px) 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  /* AND IT FOLLOWS THE CARD'S CORNERS (requested 2026-09-24: "fix the rounding issue on the
     communicator cards -- they should be rounded"). Giving the header a fill is what introduced
     this: before, it painted nothing and the row's own rounded background was all you saw; now a
     rectangular band sits inside a rounded card and its square corners poke past the curve.
     `inherit` rather than a literal radius, and rather than `overflow: hidden` on the row -- the
     base rule refuses that deliberately because it would clip the accent rail
     (_caseload.scss). Inheriting means the header cannot fall out of step if the row's radius is
     ever retuned. All four corners, which is correct here because this rule only matches a
     COLLAPSED row (`:not(--active)`), where the header IS the whole card; an expanded row keeps
     the square-bottomed header its own rule already gives it. */
  border-radius: inherit;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* 3b. AND THE TRIGGER'S OWN SHEEN STARTS AFTER THE RAIL (requested 2026-09-24: "i want that
      part of the element to be shifted right so the border stands on its own with no overlap
      from it").
      THE HEADER WAS NOT THE ONLY THING PAINTING THERE. `button.md-caseload__list-trigger` sits
      inside the header and carries its own white-sheen gradient stack, and its `margin-left:
      -14px` exactly cancels the header's `padding-left: 14px` -- so both boxes start at the same
      x (measured: header x=286 w=916, trigger x=286 w=916) and the sheen ran straight over the
      4px accent rail. Insetting the header's background, done above, could never have reached
      it.
      SHIFTED, NOT CLIPPED, because that is what was asked for and it is also the more honest
      fix: the element's box now begins after the rail instead of being painted around it.
      THE 5px COMES OFF THE MARGIN AND GOES BACK ON THE PADDING, so the box moves and its
      CONTENT does not -- the avatar, the name and the pills stay exactly where they were
      (content edge stays at x=300). Anything else here would have nudged the whole identity row.
      5px rather than 4 to cover the rail's widened hover/active state (_caseload.scss). */
body.ll-layout-focused .md-shell--caseload .md-caseload__list-trigger {
  margin-left: -9px;
  padding-left: 9px;
}

/* 4. THE METADATA PILLS GO FLAT -- BUT NOT THE ATTENTION ONE. "Reduce the glass treatment on
      the Viewer pill. It's metadata, and currently it looks almost as dimensional as an
      interactive control... The yellow status badge can keep slightly more prominence because
      it communicates something requiring attention."
      So the `:not(--attention)` is the whole point of this selector, not a detail: a pill that
      says what your role is should read as a label, while one that says this person needs
      following up is the only thing on the card that should still pull the eye. Flattening both
      would have levelled exactly the distinction that matters.
      Fill plus a hairline, nothing raised: no gradient, no inset highlight, no drop shadow, no
      blur. The per-variant COLOURS are untouched; only the dimensional treatment goes. */
body.ll-layout-focused .md-shell--caseload .md-caseload__list-access:not(.md-caseload__list-access--attention) {
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}

/* ── MODERN FOCUSED, ORGANIZATIONS DIRECTORY: NO PAGE HEADER (2026-09-24) ────────────────
   Requested: "focused organizations hide the title and subtitle on the page and move the
   content up". Same move Focused already makes on Extras and Reports, and the same one Basic
   Focused now makes on this page (_classic-home.scss) -- so the two views agree about this
   page in this layout.

   THE SUBTITLE GOES, THE HEADING STAYS FOR ASSISTIVE TECH. `.md-hero__sub` is decorative prose
   ("Choose an organization to manage or view...") and is removed outright. The `<h1>` is this
   page's ONLY heading (templates/organizations.hbs:23); `display: none` on the hero would leave
   the document with no title at all, which on a product whose users include screen-reader and
   switch users is a regression rather than a tidy-up. It is taken off screen instead and left
   in the accessibility tree.
   WRITTEN OUT, NOT `@include aac-sr-only`: that mixin lives in app.scss, which this partial is
   `@use`d BY and cannot see -- the include compiles to "Undefined mixin" and takes the whole
   stylesheet down. Same nine declarations as the mixin (app.scss:28763).

   THE CONTENT RISES BY THE HEADER'S OWN HEIGHT, which is the "move up": the hero box collapses
   to zero and the cards take its place. It does NOT rise further, and that is deliberate -- the
   floating pill nav ends at y=146, so the shell's 50px top padding (see the org-directory rule
   in app.scss) is what keeps the first card clear of it. Removing that too would slide the cards
   under the nav, trading one collision for another. */
body.ll-view-modern.ll-layout-focused .md-shell--org-directory .md-hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.ll-view-modern.ll-layout-focused .md-shell--org-directory .md-hero__sub {
  display: none;
}

body.ll-view-modern.ll-layout-focused .md-shell--org-directory .md-hero--dashboard {
  padding: 0 !important;
  margin: 0 !important;
}

body.ll-layout-focused .progress-highlight {
  filter: saturate(0.8);
}

body.ll-layout-focused .md-shell--reports-view .report-kpi:not(.room-kpi) {
  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%, rgb(234, 244, 242) 0%, transparent 46%), linear-gradient(140deg, rgb(246, 249, 254) 0%, rgb(238, 244, 252) 100%) !important;
  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;
}

.md-cl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 14px;
}

.md-cl-head__icon {
  flex: 0 0 auto;
}

.md-cl-head__title {
  line-height: 1.2;
}

.md-cl-head__count {
  font-size: 16px;
  font-weight: 500;
  color: rgba(27, 54, 93, 0.72);
}

.md-cl-head__filter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: rgba(27, 54, 93, 0.06);
  color: #1b365d;
  font-size: 15px;
  font-weight: 650;
}

/* 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;
  }
}
/* 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__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__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  /* Compact Caseload lays the rows out two across on wide screens by setting these tokens
     (_caseload-compact.scss); the fallbacks are the single column every other view uses. */
  display: var(--dn-cl-list-display, flex);
  flex-direction: column;
  grid-template-columns: var(--dn-cl-list-cols, none);
  align-items: var(--dn-cl-list-align, normal);
  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;
  /* Focused centres a row with no status on the avatar by spanning both of its rows (the
     --dn-cl-identity-* tokens, _focused-view.scss); the fallbacks are the natural placement. */
  grid-row: var(--dn-cl-identity-row, auto);
  align-self: var(--dn-cl-identity-align, auto);
}

/* 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: 1024px) {
  /* 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.
     WIDENED FROM 768 TO 1024 (2026-09-21): the request is one identity row from 1300 down,
     and 769-1024 was the only band still stacking. It is also the band where the reason for
     stacking has already gone — the toolbar now takes its own row from 1300 — so the line no
     longer has to be protected. 1025 and up is untouched and keeps its fixed name slot. */
  .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;
  }
  /* 12px of air between the username and the role chip (requested 2026-09-21). Applied to
     the BADGES wrapper, not to `.md-caseload__list-access` itself: that class is also worn
     by the status chips ("Board needed", the attention alert), which sit in their own group
     further along the line and are not what was asked about. The wrapper holds the role
     badge alone (see the template's note at caseload.hbs), so this cannot reach them.
     It adds to the row's existing 10px gap rather than replacing it. */
  .md-caseload__list-badges {
    margin-left: 12px;
  }
}
/* THE ACTION BUTTONS GET THEIR OWN ROW FROM 1300px DOWN (requested 2026-09-21: "the
   communicator card layout needs to be avatar, username, role, info badge on one row and
   action buttons pushed to the next row"). This declaration used to live in the <=768 block
   below and is lifted here rather than copied -- one rule, a wider breakpoint.
   `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`.
   Not scoped to a view: the request covers Focused and Gentle alike, and this file is the
   modern caseload's stylesheet (Classic renders its own page). */
@media (max-width: 1300px) {
  .md-caseload__list-header > .md-caseload__list-quick {
    flex: 0 0 100%;
    /* A DIVIDER BETWEEN THE IDENTITY ROW AND THE ACTIONS ROW (requested 2026-09-21), which
       only earns its place once the toolbar is on a line of its own -- above 1300 the two
       share a line and a rule through the middle would be nonsense. A hairline at 10% navy
       rather than a full-strength border: it separates two parts of ONE card, so it should
       read as a fold in the card, not as an edge between two cards.
       NO TOP MARGIN (requested 2026-09-21: "remove the top margin from
       md-caseload__list-quick"). The 12px that was here is gone; the divider sits directly
       under the identity row and keeps its 12px of padding BELOW, so the buttons still do
       not crowd the rule. */
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(27, 54, 93, 0.1);
  }
  .md-caseload__list-trigger {
    /* THE SAME GRADIENT AS THE "MORE ACTIONS" BUTTON, 10% LIGHTER (requested 2026-09-21).
       Both layers are restated from that rule (~2242) rather than approximated, so the row
       and the button read as the same material: the white gloss pass on top, the grey ramp
       under it. `color.scale(..., $lightness: 10%)` is the lightening -- a relative scale
       toward white, which keeps the ramp's shape and its relationship between stops instead
       of flattening them the way three hand-picked hex values would. 15%, raised from 10%
       on 2026-09-21 after seeing it on screen.
       This replaces the account rail's wash, which was the previous request for this
       surface.
       IN THE PLAIN <=1300 BAND, NOT THE `min-width: 641px` ONE. It lived there at first,
       beside the centring rules it was written with, and the consequence was reported as
       "you didn't extend it all the way - there's a gap": below 641 the wash kept the
       trigger's own inset box while the card around it did not, so it sat 14px short of
       each edge with a square corner. The centring rules genuinely need that floor -- below
       it the status badge drops to its own grid row -- but the wash does not. */
    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, rgb(247.35, 249.05, 250.75) 0%, rgb(238, 241.4, 245.65) 55%, rgb(230.35, 234.6, 240.55) 100%);
    /* THE WASH BLEEDS TO THE CARD'S EDGES (requested 2026-09-21: "the bg that shows on the
       list-trigger needs to expand all the way up, all the way left and all the way down to
       the divider"). Inset, it read as a floating panel inside the card rather than as the
       identity ROW of it.
       EVERY OFFSET IS A MEASURED VALUE, not a guess: the header is `padding: 10px 14px`, so
       -10 clears the top and -14 the left; the toolbar's divider sits 8px below the trigger
       (the header's 8px row gap), so -8 carries the wash down to meet it. Each negative
       margin is paired with the same amount of padding, so the avatar, name and badges do
       not move a pixel -- only the painted box grows.
       THE RIGHT EDGE BLEEDS TOO, asked for straight after the other three ("it also needs to
       stretch all the way to the right edge of the card"), so the wash now spans the card's
       full width.
       THE TOP-RIGHT CORNER IS ROUNDED TO THE CARD'S OWN 12px (requested straight after):
       the row is `border-radius: 12px` with `overflow: visible`, so a square corner here
       poked past the card's curve instead of following it. Top-LEFT stays square -- the
       gradient accent rail (`.md-caseload__list-row::before`) occupies that edge, and the
       request named the right. */
    margin-top: -10px;
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: -8px;
    /* Each side's padding EQUALS the negative margin beside it, so the painted box grows and
       the content does not move at all. The first version added 6px/10px of its own on top
       and shifted the avatar 10px right, which is the sort of drift that is invisible until
       you measure the same element before and after. */
    padding: 10px 14px 8px 14px;
    border-radius: 0 12px 0 0;
  }
}
/* 641-1300px: 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.
   WIDENED FROM 768 TO 1300 (2026-09-21) by the same request: with the toolbar now on its own
   row from 1300 down, the identity line has the whole width to itself and the info badge no
   longer has to compete with the buttons for it. The 641px floor stays -- below it the badge
   would squeeze the name to a few ellipsised characters, which is what the <=640 rule that
   moves it back under the username is for. */
@media (max-width: 1300px) and (min-width: 641px) {
  /* Focused keeps the status under the username instead (the --dn-cl-* tokens set in
     _focused-view.scss); the fallbacks are this band's own layout. */
  .md-caseload__list-trigger {
    grid-template-columns: var(--dn-cl-trigger-cols, auto minmax(0, 1fr) auto);
  }
  /* THE IDENTITY ROW CARRIES THE SIDE PANEL'S WASH once the actions wrap (requested
     2026-09-21: "the avatar row needs the same gradient that the side panel has"). The value
     is `.md-acct-rail`'s own, read off the computed style rather than re-mixed by eye, so the
     two surfaces stay the same thing: a 160deg wash from a near-white grey into a barely
     tinted navy. It goes on the TRIGGER, which is the identity line -- the header wraps both
     rows, so painting there would wash the action buttons too.
     Only below 1300, because above it the trigger shares its line with the toolbar and a
     banded background would stop halfway across the card. */
  /* CENTRED ON THE AVATAR (requested 2026-09-21: "the username, role, and badges need to be
     centered on the avatar"). The avatar is `grid-row: 1 / span 2` and its 72px is what gives
     the trigger its height; measured, the tracks come out `22px 41px` and the identity
     occupied only the first, so the name sat at y-centre 239 against the avatar's 263.
     `span 2`, NOT `1 / -1`, and the difference is not cosmetic: the trigger declares
     `grid-template-columns` but no `grid-template-rows`, so every row here is IMPLICIT and
     `-1` resolves against the EXPLICIT grid's last line -- which is line 1. `1 / -1` therefore
     collapsed to a single row and changed nothing, which is exactly what the first attempt
     did. `span 2` counts rows instead of naming an explicit line, so it reaches the implicit
     second row the avatar created.
     Bounded at 641 with the rest of this band: below it the status badge moves to row 2 in
     the same column the identity occupies, and a spanning identity would sit on top of it. */
  .md-caseload__list-identity {
    grid-row: var(--dn-cl-identity-row, 1/span 2);
    align-self: center;
  }
  .md-caseload__list-status {
    grid-column: var(--dn-cl-status-col, 3);
    grid-row: var(--dn-cl-status-row, 1/span 2);
    align-self: center;
    /* 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--remote,
.md-caseload__list-quick .md-caseload__quick-action--ideas {
  flex: 0 0 86px;
}

/* Remote Modeling (2026-10-02): its "Limited" pill sits centred on the tile's top border
   (2026-10-03, requested; it was at the top-right corner): its middle on the border line, both
   ways, whatever the pill's height. It does not widen the tile or push the label. */
.md-caseload__quick-action--remote {
  position: relative;
}

.md-caseload__quick-action--remote .md-limited-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0;
}

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

/* AN AVATAR THAT HAS NOT ARRIVED YET STILL SHOWS THE PERSON SYMBOL (reported 2026-09-21:
   "when the caseload pillnav menu is selected, the avatar symbols don't immediately render").
   templates/caseload.hbs renders the placeholder <span> only when `avatar_url` is ABSENT, so a
   communicator WITH a photo got a bare <img> and an empty disc until the bytes landed.
   Measured on a throttled hop with the cache disabled: the 14 rows painted at t+125ms with
   `painted=0`, and the last portrait did not finish until t+4.7s -- nearly five seconds of
   blank circles on the page's primary identifying element.
   THE <img> ITSELF CARRIES THE PLACEHOLDER, as its background: a background is painted
   immediately and sits BEHIND the image content, so the symbol is there on the first frame and
   the photo covers it the moment it decodes, with no class to toggle, no JS, and no second
   element that could get out of step. It also survives a broken or 404 avatar, which
   previously left the disc empty for good.
   The glyph is the same two-tone person the placeholder span draws (circle + shoulders,
   #46505F / #2A9D8F), inlined so it needs no extra request -- a placeholder that has to be
   fetched would defeat the point. Sized to 55%, matching the span's 33-in-60 ratio.
   TRADE-OFF, stated rather than discovered: an avatar with TRANSPARENT areas will show the
   glyph faintly through them. Portraits are opaque; this is the cost of not adding state. */
.md-caseload__list-avatar:not(.md-caseload__list-avatar--placeholder) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4' stroke='%2346505F'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' stroke='%232A9D8F'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(27, 54, 93, 0.04) 0%, rgba(27, 54, 93, 0.08) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%, cover;
}

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

/* THE NAME IS 18px ONCE THE TOOLBAR LEAVES THE LINE (requested 2026-09-21: "the username
   needs to be larger"). Declared HERE, immediately after the base rule, and not up in the
   <=1300 block with the rest of that change: both selectors are (0,1,0) and a media query
   adds no specificity, so the winner is whichever comes LAST -- and the base sits at ~1760,
   far below that block, which is exactly why the first attempt at this had no effect.
   Adjacency is also the honest place for it: base value, then its one override.
   The role and status chips stay at 14px, so the name reads as the heading of the row rather
   than one chip among several. */
@media (max-width: 1300px) {
  .md-caseload__list-name {
    font-size: 18px;
  }
}
/* ── 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.
   THE BLUE GLASS, ONE SOURCE (2026-10-03): Model and Remote Modeling share this surface, Remote
   at the original strength and Model `$deepen` darker (requested: "make the remote modeling bg
   the same as the model button, then make the model button bg darker"). `$deepen` is added to
   both colour stops of every state. Navy labels on the bottom stop over white, worst case:
   Remote 8.4:1 (rest) to 7.1:1 (pressed); Model at 0.14 deeper 7.4:1 to 6.2:1. */
.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.42) 0%, rgba(58, 166, 234, 0.52) 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.5) 0%, rgba(58, 166, 234, 0.62) 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.56) 0%, rgba(58, 166, 234, 0.68) 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);
}

/* ── 1c. Remote Modeling: Model's blue glass at the original strength, when it can connect. A
   limited Remote (`--limited`, utils/remote_modeling.js) keeps the neutral tile and its "Limited"
   pill. Same :hover/:active pairing as Model, for the same reason. */
.md-caseload__quick-action.md-caseload__quick-action--remote:not(.md-caseload__quick-action--limited) {
  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--remote:not(.md-caseload__quick-action--limited):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);
}

.md-caseload__quick-action.md-caseload__quick-action--remote:not(.md-caseload__quick-action--limited):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--remote .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%;
}

/* 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. */
/* 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. */
/* 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__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. */
/* 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. */
/* 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. */
/* Inner glass rim highlight — thin top-edge white catch + faint
   bottom-edge navy shadow gives the disc a domed, lit-from-above
   quality. */
/* 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. */
/* 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. */
/* 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`. */
/* Tight identity block: name, badge, and goal row read as a single
   compact stack rather than three separated rows. */
/* 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. */
/* 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. */
/* 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);
}

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

/* 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, white 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. */
/* 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. */
/* 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. */
/* 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. */
/* 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. */
/* 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. */
/* 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. */
/* 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) {
  /* 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;
  }
  /* 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;
  }
}
/* 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__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__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. */
  /* Height, side padding and text size read from variables so a page can size its copy of the
     control without an override block; the defaults are this control's own values. The Boards
     page sets them smaller (app.scss, `.bp-segmented.ub-boards-page__density`). */
  min-height: var(--bp-seg-h, 32px);
  padding: 0 var(--bp-seg-px, 16px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(75, 78, 92, 0.85);
  font-size: var(--bp-seg-fs, 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-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18) !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.64);
  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: #115C5B;
}

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

/* (A second copy of the compact block above sat here until 2026-10-01. It repeated it rule for rule,
   except for an older Boards-page exemption for the info chip that the block above reverses and
   always out-ranked; removing it changes nothing rendered. Its one rule of its own follows.) */
.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 var(--bp-seg-px-narrow, 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;
  }
}
.bp-recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.bp-recent__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1B365D;
  margin-right: 4px;
}

.bp-recent__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 16px 4px 6px;
  border: 1.5px solid rgba(27, 54, 93, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.bp-recent__chip:hover {
  background: rgba(27, 54, 93, 0.05);
}

.bp-recent__chip:focus-visible {
  outline: 3px solid #1A7B7A;
  outline-offset: 2px;
}

.bp-recent__img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.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;
  }
}
.report-kpi:not(.room-kpi) {
  gap: 12px;
  min-height: 72px;
  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: inset 3px 0 0 rgba(44, 183, 176, 0.55), 0 1px 2px rgba(27, 54, 93, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.report-kpi:not(.room-kpi) .report-kpi__value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.report-kpi:not(.room-kpi) .report-kpi__label {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.report-kpi:not(.room-kpi) .report-kpi__icon {
  width: 40px;
  height: 40px;
}

body.ll-layout-focused .report-kpi:not(.room-kpi) {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
}

body.ll-layout-focused .report-kpi:not(.room-kpi)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #5A6A85, #4C86D8);
  opacity: 0.7;
  pointer-events: none;
}

body.ll-layout-focused .report-kpi:not(.room-kpi) .report-kpi__icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 44%, rgba(255, 255, 255, 0.42) 100%);
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), inset 0 -2px 6px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(27, 54, 93, 0.1);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  color: #46505F;
}

body.ll-layout-focused .report-kpi:not(.room-kpi) .report-kpi__icon svg > *:not(:first-child)[stroke] {
  stroke: #2A9D8F;
}

body.ll-layout-focused .report-kpi:not(.room-kpi) .report-kpi__icon svg > *[fill=currentColor] {
  fill: #2A9D8F;
}

.progress-highlight {
  min-height: 0;
  padding: 12px 14px;
  gap: 12px;
  border-radius: 12px;
  /* SPACE ABOVE (requested 2026-09-24, "add space above the communication card"). Measured after
     the reorder, the metrics row ended at y=482 and this strip began at exactly 482 -- the two
     were touching, because the insight used to sit ABOVE the metrics where nothing needed to
     separate them. 24px reads as a deliberate break between the evidence and the sentence that
     interprets it, and is close to the 32px that already falls between this strip and the basis
     line below it. */
  margin-top: 24px;
}

.progress-highlight .progress-highlight__icon {
  width: 40px;
  height: 40px;
}

.progress-highlight h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.progress-highlight .progress-highlight__description {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
}

.report-kpi:not(.room-kpi) .report-kpi__icon svg * {
  stroke-width: 1.4;
}

#content.index.with_user .main_columns:has(> .ch-page) {
  margin: 0;
  padding: 0;
}

/* ORGANIZATIONS PAGE WITH THE BASIC RAIL (2026-09-23).
   `templates/organizations.hbs` renders <Dashboard::ClassicRail /> as a DIRECT CHILD of
   `.md-shell`, which is the element carrying the page gradient -- that is what stretches the
   background across the whole page instead of leaving the rail on bare page background.

   `.md-shell` is already `display: flex; flex-direction: column !important`, so Basic only has
   to turn it into a row. No wrapper element is introduced, on purpose: `.md-shell >
   .md-workspace` is a direct-child selector carrying the workspace's `flex` and `min-height`,
   and a wrapper would silently detach both -- changing Modern's layout to deliver a
   Basic-only feature.

   `!important` THROUGHOUT, matching not fighting: every base declaration overridden here
   (`.md-shell`'s `flex-direction` and `padding-top`, `.md-shell > .md-workspace`'s `flex`,
   `.md-shell--org-directory .md-workspace`'s `margin-top`) is itself `!important`, and
   `!important` is not beaten by specificity alone.

   THE INSETS ARE THE HOME PAGE'S, not new ones (requested: "the same position on the page as
   it does on the home page", and then the same distance from the left edge). `.ch-page` below
   is what positions the rail on the Basic dashboard, and its padding is copied here whole --
   `80px 28px 24px`, plus its two top steps (44px at <=1024px, 48px stacked at <=900px) and its
   22px side inset at <=767px. The 28px left is what puts the rail the same distance in from
   the page edge on both pages; without it the shell has no side padding and the rail sat flush
   against the viewport.

   THE BASE IS A SHORTHAND AND THE BREAKPOINTS ARE LONGHANDS, copying `.ch-page`'s own
   discipline (see the note at its <=900px block): a shorthand in a media query would reset the
   side padding every time it only meant to change the top.

   The workspace's own 20px top margin is zeroed in this layout so the rail and the content
   share one top edge, the way `.ch-page`'s two columns do -- AND SO IS ITS 40px TOP PADDING
   (2026-09-24, requested: "move the organizations page content up on the page"). Zeroing the
   margin alone did not finish the job the sentence above describes: measured at 1280, the rail
   started at y=126 and the org hero at y=166, because the base `.md-workspace` padding still
   sat inside the card. With both gone the two share a top edge for real.
   THE CONTENT KEEPS ITS INSET -- `.md-hero--org` carries its own top padding (20px, and 28px
   above 1200px where more room was asked for earlier the same week), so removing the
   workspace's padding moves the block up without pushing the title against the card edge. */
/* `.la-system-settings .la-main` ADDED 2026-10-10, when System Settings gained the rail. Its
   page has no `.md-shell`; `main.la-main` is the flex column the rail and the workspace share,
   and `.la-system-settings` appears only in templates/system-settings.hbs, so nothing else moves.
   `--board-picker` ADDED 2026-10-09, when that page gained the same rail. Stated as a second
   selector rather than generalised to `.md-shell:has(> .ch-rail)`, which would read better but
   would ALSO newly match templates/organization.hbs -- it carries `md-shell--org` (not
   `--org-directory`) and mounts a rail, so a generic selector would change that page's layout
   too, which nobody asked for. */
body.ll-view-basic .md-shell--org-directory,
body.ll-view-basic .md-shell--board-picker {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  padding: 80px 28px 24px !important;
}

/* SYSTEM SETTINGS: the same row, its own top. Its page is `.la-wrapper`, a FIXED full-viewport
   overlay that starts at y=0 under the app header, where the shells above flow BELOW it. The rail
   sits header + 24px down on Organizations at every width (measured 2026-10-10: 70+24=94 from
   768px up, 114+24=138 at 767px and below), so this main's top is header + 36: the 24px gap plus
   the rail's own -12px top margin. The header height is 70px / 114px either side of 768px; the
   <=767px step is in the media block below. */
body.ll-view-basic .la-system-settings .la-main {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  padding: 106px 28px 24px !important;
}

body.ll-view-basic .md-shell--org-directory > .md-workspace,
body.ll-view-basic .md-shell--board-picker > .md-workspace,
body.ll-view-basic .la-system-settings .la-main > .md-workspace {
  flex: 1 1 auto !important;
  min-width: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* NO TOP PADDING ON THE DIRECTORY'S HERO (2026-09-24, requested: "basic view: organizations -
   remove the top padding from the hero"). The header is `.md-hero.md-hero--dashboard` and takes
   `padding: 28px 2px 10px` from the base `.md-hero`; with the workspace's own padding now gone
   (above), that 28px was the last thing holding "My Organizations" below the rail's top edge.
   `padding-top` ALONE, not the shorthand: the 2px sides and the 10px bottom are the header's own
   rhythm and were not asked about, and a shorthand here would silently reset both.
   NOT `.md-hero--org`, which is a DIFFERENT element -- the org DETAIL pages' header, whose top
   padding was deliberately widened on large screens a few days ago. `:not(.md-hero--org)` keeps
   that request intact (the rule covers every rail page since 2026-10-01; see the note below).
   Below 1024px this is already 0 from `@media (max-width: 1024px) { .md-hero--dashboard }`, so
   this rule only does work on wider screens.
   `!important` MATCHED, not added: the base `.md-hero` shorthand carries one (app.scss:47657),
   and specificity alone does not beat it -- this landed with no visible effect until the flag
   was added, measured at 28px either way. */
body.ll-view-basic .md-shell:has(> .ch-rail) .md-hero--dashboard:not(.md-hero--org) {
  padding-top: 0 !important;
}

/* BESIDE THE RAIL, EVERY PAGE TITLE STARTS ON THE CONTENT LINE, AT EVERY WIDTH (2026-10-01,
   requested: fix the header title spacing on Account, Reports and the org directory -- it sat
   40-55px below the rail and jumped 8-20px at 1024).
   THE RULE ABOVE WAS THE DIRECTORY'S ALONE; it now covers every Basic page whose rail is a direct
   child of its shell (the account section, Reports, the directory), so their header has no top
   padding there either. The org pages' header is excluded: its padding (below, "MORE BREATHING
   ROOM") is the gap between the tab strip or switcher and the title, not space above the page.
   AND NO TITLE MARGIN: at <=1024 the shared dashboard hero turns into a flex column and gives
   its title `margin-top: 2rem` to clear the tour chip (app.scss), which that block itself now
   pins `position: fixed`; the account section then takes 11px below 901, and Reports 12px.
   Each moved the title as the screen narrowed. Here, beside the rail, the title has none. */
body.ll-view-basic .md-shell:has(> .ch-rail) .md-hero--dashboard .md-hero__title {
  margin-top: 0 !important;
}

/* FOCUSED HIDES THE DIRECTORY'S HEADER (2026-09-24, requested: "basic view: focused. Hide the
   hero and subtitle"). Same move Focused already makes on Extras and Reports, where the page
   title is carried by the nav you arrived through rather than repeated at the top of the page.
   THE SUBTITLE GOES, THE HEADING STAYS FOR ASSISTIVE TECH. `.md-hero__sub` is decorative prose
   ("Choose an organization to manage or view...") and is simply removed. The `<h1>` is this
   page's ONLY heading (templates/organizations.hbs:23), so `display: none` on the hero would
   leave the document with no title at all -- on a product whose users include screen-reader and
   switch users, that is a regression, not a tidy-up. The visually-hidden block below takes it
   off screen while leaving it in the accessibility tree, which is what "hide" means here.
   WRITTEN OUT RATHER THAN `@include aac-sr-only`: that mixin is defined in app.scss, which this
   partial is `@use`d BY and cannot see -- the include compiled to "Undefined mixin" and took the
   whole stylesheet down (dev server 500). Same declarations as the mixin (app.scss:28763), kept
   in step by this note rather than by an import this file cannot have.
   GENTLE IS UNTOUCHED, and so is the hero's padding rule above -- that still governs Gentle,
   where the header is visible. */
body.ll-view-basic.ll-layout-focused .md-shell--org-directory .md-hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.ll-view-basic.ll-layout-focused .md-shell--org-directory .md-hero__sub {
  display: none;
}

/* The header box itself collapses once its children are gone, so it contributes no space. */
body.ll-view-basic.ll-layout-focused .md-shell--org-directory .md-hero--dashboard {
  padding: 0 !important;
  margin: 0 !important;
}

/* ...AND THE MAIN AREA'S 18px TOP INSET GOES WITH IT (2026-10-01, requested: page content starts
   on the same line on every page). In Gentle it separates the header from the first card; with
   the header gone it only held the "Available Organizations" card 18px below the content line
   (measured: card 124 against 106 everywhere else). */
body.ll-view-basic.ll-layout-focused .md-shell--org-directory .md-main--org {
  padding-top: 0 !important;
}

/* NO TOP-PADDING STEPS (2026-10-01, requested: content should not shift at 1024px and below, and
   should sit level with the top of the side menu -- "the alignment option"). This took `.ch-page`'s
   44px at <=1024 and 48px at <=900, which lifted the rail and the page 36px at 1024 (measured
   126 -> 90). The 80px above now holds at every width, as `.ch-page`'s own does. */
/* Stacks at the same width `.ch-page` stacks. */
@media (max-width: 900px) {
  body.ll-view-basic .md-shell--org-directory,
  body.ll-view-basic .la-system-settings .la-main {
    flex-direction: column !important;
  }
}
/* Sides narrow with `.ch-page`'s, top left alone. */
@media (max-width: 767px) {
  body.ll-view-basic .md-shell--org-directory {
    padding-right: 22px !important;
    padding-left: 22px !important;
    padding-bottom: 28px !important;
  }
}
/* System Settings at <=767px: the header is 114px here, so the top is 114 + 36 (see above);
   sides narrow like the directory's. */
@media (max-width: 767px) {
  body.ll-view-basic .la-system-settings .la-main {
    padding-top: 150px !important;
    padding-right: 22px !important;
    padding-left: 22px !important;
    padding-bottom: 28px !important;
  }
}
.ch-page {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  /* Top inset steps 80 -> 60 (<=1024px) -> 48 (<=900px), all requested 2026-09-03.
     This is the widest step. It went 80 -> 56 -> 80 the same day: 56 was chosen
     while the page was still being pushed down by the ghost outlet wrapper (app.scss
     ~953), so the rendered offset was far larger than this value. With that fixed,
     `.ch-page` starts at #content's 26px padding and this is the whole visible inset,
     so it needs the fuller figure again. Verified in the browser at 1600x1200 and
     1600x800: `.ch-page` top=26, `.ch-rail` top=106 at both, i.e. height-independent.
     80 also happens to MATCH THE MODERN DASHBOARD: `.ch-page` sits where `.md-shell`
     sits (both direct children of #index_view), and modern gets 80px of clearance below
     the navbar from `.md-workspace`'s `margin: 40px auto` PLUS `padding: 40px …`
     (app.scss ~44344). Classic has no equivalent inner wrapper, so the inset lives here.
     Bottom stays tight at 24 (requested 2026-09-02): the last card carries its own
     margin, so a large bottom pad just adds dead space above the footer.
     Sides are overridden below 767px (see the max-width: 767px block). */
  padding: 80px 28px 24px;
  box-sizing: border-box;
}

.ch-rail {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 380px;
  margin-top: -12px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%), rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 44px rgba(17, 26, 46, 0.1), 0 3px 10px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.ch-rail__menu-trigger {
  display: none;
}

.ch-rail__rows {
  display: contents;
}

.ch-rail__toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 -32px 0 0;
}

.ch-rail__toggle-row::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-right: 10px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(27, 54, 93, 0.16) 38%, rgba(27, 54, 93, 0.16) 100%);
}

.ch-rail--collapsed .ch-rail__toggle-row::before {
  margin-left: 12px;
  margin-right: 12px;
  background: linear-gradient(90deg, rgba(27, 54, 93, 0) 0%, rgba(27, 54, 93, 0.2) 50%, rgba(27, 54, 93, 0) 100%);
}

.ch-rail__toggle {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  box-shadow: 0 2px 6px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #1B365D;
  cursor: pointer;
}

.ch-rail__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.ch-rail__toggle:hover {
  background: linear-gradient(160deg, #fff, rgba(255, 255, 255, 0.86));
}

.ch-rail__toggle-icon {
  transition: transform 0.18s ease;
}

.ch-row__short {
  display: none;
}

@media (min-width: 901px) {
  .ch-rail.ch-rail--collapsed {
    max-width: 112px;
  }
  .ch-rail--collapsed .ch-rail__toggle-icon {
    transform: rotate(180deg);
  }
  .ch-rail--collapsed .ch-row__body,
  .ch-rail--collapsed .ch-row__arrow,
  .ch-rail--collapsed .ch-rail__identity-text,
  .ch-rail--collapsed .ch-rail__arrow,
  .ch-rail--collapsed .ch-group__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .ch-rail--collapsed .ch-rail__footer {
    display: none;
  }
  .ch-rail--collapsed .ch-row__short {
    display: block;
    max-width: 100%;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    color: rgba(27, 54, 93, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ch-rail--collapsed .ch-rail__identity,
  .ch-rail--collapsed .ch-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    padding-right: 4px;
    gap: 4px;
  }
  .ch-rail--collapsed .ch-rail__avatar-wrap {
    margin: 0 auto;
  }
  .ch-rail--collapsed .ch-rail__avatar {
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ch-rail {
    transition: max-width 0.22s ease;
  }
}
@media (max-width: 900px) {
  .ch-rail__toggle-row {
    display: none;
  }
}
@media (max-width: 900px) {
  .ch-rail {
    z-index: 30;
    padding: 8px;
  }
  .ch-rail__menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(93, 137, 198, 0.52) 0%, rgba(56, 143, 132, 0.44) 100%);
    color: #1B365D;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ch-rail__menu-trigger:focus-visible {
    outline: 3px solid #1B365D;
    outline-offset: 2px;
  }
  .ch-rail__menu-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
  }
  .ch-rail__menu-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }
  .ch-rail__menu-name {
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ch-rail__menu-sub {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ch-rail__menu-chevron {
    flex: 0 0 auto;
  }
  .ch-rail__menu-trigger[aria-expanded=true] .ch-rail__menu-chevron {
    transform: rotate(180deg);
  }
  .ch-rail__rows {
    display: none;
  }
  .ch-rail__rows.is-open {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    display: block;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    background: rgba(250, 251, 253, 0.98);
    box-shadow: 0 18px 44px rgba(17, 26, 46, 0.18), 0 3px 10px rgba(17, 26, 46, 0.08);
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ch-rail__menu-chevron {
    transition: transform 0.18s ease;
  }
}
.ch-rail__identity {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(93, 137, 198, 0.52) 0%, rgba(56, 143, 132, 0.44) 100%);
  border: 1px solid rgba(59, 146, 180, 0.3);
  box-shadow: 0 6px 18px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--md-ink, #111A2E);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ch-rail__identity::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.175) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.ch-rail__identity:hover,
.ch-rail__identity:focus-visible {
  text-decoration: none;
  color: var(--md-ink, #111A2E);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(17, 26, 46, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ch-rail__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}

.ch-rail__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid rgba(17, 26, 46, 0.42);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.14);
}

.ch-rail__online {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2A9D8F;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.35);
}

.ch-rail__identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ch-rail__username {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: #1B365D;
  overflow-wrap: break-word;
}

.ch-rail__identity-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-muted, #1B365D);
  opacity: 0.85;
}

.ch-rail__arrow {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: #1B365D;
  opacity: 0.6;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.ch-rail__identity:hover .ch-rail__arrow,
.ch-rail__identity:focus-visible .ch-rail__arrow {
  opacity: 0.85;
  transform: translateX(3px);
}

.ch-rail__list {
  list-style: none;
  margin: 10px 0 0;
}
@media (min-width: 901px) {
  .ch-rail__list {
    margin-top: 0;
  }
}
.ch-rail__list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ch-rail__item {
  margin: 0;
  padding: 0;
}

.ch-row {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 100%);
  border: 1px solid rgba(156, 163, 175, 0.34);
  box-shadow: 0 4px 14px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--md-ink, #111A2E);
  font: inherit;
  text-align: left;
  text-decoration: none;
  appearance: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ch-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.21) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

a.ch-row:hover,
a.ch-row:focus-visible,
button.ch-row:hover,
button.ch-row:focus-visible {
  cursor: pointer;
  text-decoration: none;
  color: var(--md-ink, #111A2E);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(17, 26, 46, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

a.ch-row:active,
button.ch-row:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ch-row--static {
  cursor: default;
}

.ch-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
}

.ch-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ch-row__title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  color: #1B365D;
}

.ch-row__sub {
  font-size: 14px;
  line-height: 1.3;
  color: var(--md-muted, #1B365D);
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-row__arrow {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  color: #1B365D;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

a.ch-row:hover .ch-row__arrow,
a.ch-row:focus-visible .ch-row__arrow,
button.ch-row:hover .ch-row__arrow,
button.ch-row:focus-visible .ch-row__arrow {
  opacity: 0.8;
  transform: translateX(3px);
}

.ch-row--todo {
  background: linear-gradient(155deg, rgba(227, 181, 105, 0.13) 0%, rgba(227, 181, 105, 0.045) 100%);
}

.ch-row--todo .ch-row__icon {
  background: linear-gradient(160deg, rgba(227, 181, 105, 0.28) 0%, rgba(227, 181, 105, 0.12) 100%);
}

.ch-row--logging-on .ch-row__icon {
  background: linear-gradient(160deg, rgba(42, 157, 143, 0.2) 0%, rgba(42, 157, 143, 0.08) 100%);
}

.ch-row--sync {
  background: linear-gradient(155deg, rgba(234, 166, 143, 0.18) 0%, rgba(234, 166, 143, 0.06) 100%);
  border-color: rgba(195, 165, 159, 0.55);
  box-shadow: 0 2px 6px rgba(234, 166, 143, 0.16), 0 1px 2px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

button.ch-row--sync:hover,
button.ch-row--sync:focus-visible {
  box-shadow: 0 5px 12px rgba(234, 166, 143, 0.22), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-row--sync .ch-row__icon {
  background: linear-gradient(160deg, rgba(234, 166, 143, 0.26) 0%, rgba(234, 166, 143, 0.12) 100%);
}

.ch-row--minor {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.66) 100%);
}

.ch-row__icon--spinning svg {
  animation: ch-spin 1.1s linear infinite;
}

@keyframes ch-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ch-row__icon--spinning svg {
    animation: none;
  }
}
.ch-menu {
  display: none;
  list-style: none;
  margin: 8px 0 0;
  padding: 5px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 26px rgba(17, 26, 46, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 100%);
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.05);
  text-align: center;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.14s ease;
}

.ch-menu__item:hover,
.ch-menu__item:focus-visible {
  background: rgba(76, 134, 216, 0.12);
  color: #1B365D;
  text-decoration: none;
}

.ch-rail__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 54, 93, 0.1);
}

.ch-rail__minor {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-muted, #1B365D);
  opacity: 0.75;
}

.ch-rail__minor:hover,
.ch-rail__minor:focus-visible {
  opacity: 1;
  color: #1B365D;
}

.ch-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 901px) {
  .ch-panel {
    margin-top: -12px;
  }
}

.ch-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ch-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.ch-boards__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.ch-boards__create {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.ch-boards__actions {
  justify-content: flex-end;
}

.ch-boards__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.ch-boards__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.ch-boards__set-home-wrap {
  margin-left: auto;
}

.ch-boards__set-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ch-boards__set-home[aria-pressed=true] {
  box-shadow: inset 0 0 0 2px #1B365D;
}

.ch-filter {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 180px;
  height: 44px;
  padding: 0 8px 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(156, 163, 175, 0.42);
  box-shadow: inset 0 1px 2px rgba(17, 26, 46, 0.05);
}

.ch-filter__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #1B365D;
  opacity: 0.55;
}

.ch-filter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 6px;
  font-size: 14px;
  color: #1B365D;
  -webkit-appearance: none;
  appearance: none;
}
.ch-filter__input::placeholder {
  color: #1B365D;
  opacity: 0.7;
}
.ch-filter__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.ch-filter__clear {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1B365D;
  opacity: 0.6;
  cursor: pointer;
}
.ch-filter__clear::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.ch-filter__clear:hover, .ch-filter__clear:focus-visible {
  opacity: 1;
  background: rgba(156, 163, 175, 0.2);
}

.ch-panel__title {
  margin: 0;
  /* !important is REQUIRED here, not preferred. app.scss carries a global
     `h2 { font-size: 25px !important }`, and these titles are <h2> elements
     (every `<h2 class="ch-panel__title">` in classic-view.hbs). An !important declaration
     can only be beaten by another !important, regardless of specificity or source
     order — so without this the panel headings rendered at 25px, 25% larger than
     designed. This and .ch-card__title below exist solely to escape that global
     hammer. (They were once this file's only two !importants; it has many more now, each
     matching a base rule's own !important -- see the notes where they stand.) */
  font-size: 20px !important;
  font-weight: 700;
  color: #1B365D;
}

.ch-tabselect {
  display: none;
  width: 75%;
  margin-inline: auto;
  height: 44px;
  padding: 0 36px 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(156, 163, 175, 0.42);
  background-color: rgba(255, 255, 255, 0.94);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231B365D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  box-shadow: inset 0 1px 2px rgba(17, 26, 46, 0.05);
  -webkit-appearance: none;
  appearance: none;
}

.ch-tabs-fit {
  position: relative;
}

.ch-tabs-fit.is-squeezed > .ch-tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}

.ch-tabs-fit > .md-pillnav-dropdown--fit {
  position: relative;
  width: 52%;
  margin: 0 auto;
}

.ch-tabs-fit.is-squeezed > .md-pillnav-dropdown--fit {
  display: block;
}

@media (max-width: 550px) {
  .ch-tabs-fit > .md-pillnav-dropdown--fit {
    display: block;
  }
}
.ch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 3px rgba(17, 26, 46, 0.05);
}

.ch-tab {
  position: relative;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--md-muted, #1B365D);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ch-tab:hover {
  color: #1B365D;
}

/* ORGANIZATION PEOPLE TABS (2026-09-23). The strip on `/organizations/:id/people` in Basic
   view wears `ch-tabs ch-tab` so it inherits BOTH schemes from the rules around this one --
   gentle here, focused in _focused-view.scss -- and this block adds only what the home page's
   tabs do not have: a headline number under each label.

   RECESSION BY SIZE AND WEIGHT, NOT BY COLOUR. The count deliberately inherits the tab's own
   `color` rather than taking a lighter one. Dimming it is the obvious way to make it secondary
   and it is how AA gets quietly undone -- the tab colour is chosen per scheme to clear 4.5:1,
   and any alpha applied here would drop below that in whichever scheme is tighter, invisibly.
   Smaller and lighter reads as secondary without touching contrast. */
.ch-organizations-tabs .ch-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
}

.ch-organizations-tabs .ch-tab__label {
  font-size: 16px;
  font-weight: 650;
}

/* ORGANISATION SWITCHER above the org header (2026-09-23), on a card that matches the room
   buttons below it (requested): label on the left, dropdown on the right.

   THE CARD VALUES ARE THE ROOM CARD'S, restated rather than borrowed by class. `.md-room-card`
   is scoped to `.md-grid .md-card--rooms` and `.md-shell--org .md-rooms__grid` -- this control
   sits ABOVE the header, outside both, so wearing that class would have styled nothing. They
   are the same gradient, border, radius, padding and lift, so the two read as one family.

   The select does NOT wear `.ch-tabselect`: that class is `display: none` until 550px, where
   it stands in for the tab strip, so reusing it would hide this control at every normal width.
   Its own look follows the app's modern-select idiom (`appearance: none` plus an inline-SVG
   chevron), the same one `.md-preferences__form select.form-control` uses -- Bootstrap's native
   select chrome is suppressed rather than inherited. */
.ch-org-switcher {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* PUSHED DOWN, AND CLOSER TO THE TITLE (requested 2026-09-23). The 28px above separates it
     from the tab strip; the 0 below hands the remaining gap entirely to the hero's own
     padding, which is tightened just beneath.
     Reads --dn-org-switcher-top, which the Focused rooms list sets to 0 in both views (2026-10-01;
     _focused-view.scss): its "Rooms - <org>" page label sits right above and carries the gap. */
  margin: var(--dn-org-switcher-top, 28px) auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  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);
}

/* CLEAR OF THE FLOATING NAV, WHERE THERE IS ONE (2026-09-23, with the switcher's move into
   Modern). Gentle's app shell gives `.md-shell` no top padding and pulls the pill nav out of
   flow by its own height, so the page box starts at y=106 while the nav's underside is at 146 --
   the nav deliberately floats over the first 40px of the page. Every other page's first element
   is text that begins lower down, so nothing showed; this one is a CARD with a background, and
   at the base 28px it sat visibly behind the pills (measured: switcher 134-204, nav 70-146).
   68px = the 40px the nav overlaps + the same 28px the control already has above it in Basic,
   so it keeps its spacing rather than being given a new one. Measured after: switcher at 174,
   28px clear of the nav.
   `:has(.ll-appshell__navbar)` is the same test the shell's own alignment rules use for "is
   there a nav floating over this page" (app.scss), so the two cannot disagree. Basic renders no
   app shell at all, so it never matches and keeps the 28px above.
   BOTH LAYOUTS, and the reason is worth stating because it briefly was not: this clearance is
   owed wherever the shell's own nav clearance is ZERO and the nav therefore floats over the
   page. That was gentle only until the org pages were pointed at gentle's geometry in
   _focused-view.scss, and it is now true of them in focused as well -- so the condition to test
   is the floating nav, which `:has(.ll-appshell__navbar)` already names, and not the layout. */
#content:has(.ll-appshell__navbar) .ch-org-switcher {
  /* The Modern Focused Rooms list sets this to 0 (--dn-org-switcher-top,
     _focused-view.scss): its page label sits above the switcher and already clears the nav. */
  margin-top: var(--dn-org-switcher-top, 68px);
}

.ch-org-switcher__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1B365D;
  white-space: nowrap;
}

/* THE DROPDOWN. A <details> rather than a <select>, because the requirement was an on-brand
   OPEN LIST and a native select's popup belongs to the operating system.
   Its own classes: `.ch-tabselect` and `.md-pillnav-dropdown` are each `display: none` until
   550px, where they stand in for a tab strip, so reusing either would have hidden this at every
   normal width -- the same trap twice over. The trigger keeps the modern-select LOOK
   (white field, hairline border, inline chevron) so it still reads as a select. */
.ch-org-dropdown {
  position: relative;
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 100%;
}

.ch-org-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  /* Radius, border and hover taken from `.md-org-report-select` (app.scss ~97479), the
     reports page's control, so the two org pages offer the same-looking select. Those rules
     are view-agnostic -- the reports page has no focused/gentle split, every one of its 52
     rules living in app.scss -- so matching them covers both layouts by construction rather
     than needing a second set here. */
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(17, 26, 46, 0.05);
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  cursor: pointer;
  list-style: none;
}
.ch-org-dropdown__trigger::-webkit-details-marker {
  display: none;
}
.ch-org-dropdown__trigger::marker {
  content: "";
}

.ch-org-dropdown__trigger:hover {
  border-color: rgba(76, 134, 216, 0.3);
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.1);
}

.ch-org-dropdown__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-org-dropdown__chevron {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.ch-org-dropdown[open] .ch-org-dropdown__chevron {
  transform: rotate(180deg);
}

/* The panel. Absolutely positioned so opening it does not push the page title down, and above
   the hero beneath it. */
.ch-org-dropdown__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(76, 134, 216, 0.2);
  background: #fff;
  box-shadow: 0 8px 28px rgba(27, 54, 93, 0.16), 0 2px 6px rgba(17, 26, 46, 0.06);
  max-height: 320px;
  overflow-y: auto;
}

.ch-org-dropdown__option {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1B365D;
  text-decoration: none;
  min-height: 40px;
  line-height: 20px;
}

.ch-org-dropdown__option:hover,
.ch-org-dropdown__option:focus-visible {
  background: rgba(76, 134, 216, 0.1);
  text-decoration: none;
}

/* The org already open. Marked with a background and full-strength ink rather than dimmed --
   the current row is the one a person is most likely scanning for. */
.ch-org-dropdown__option.is-current {
  background: rgba(27, 54, 93, 0.06);
  cursor: default;
}

/* THE GAP BELOW THE SWITCHER IS MOSTLY THE HERO'S, not the switcher's. `.md-hero--org` carries
   `padding: 20px 2px 10px !important` (app.scss), so trimming the switcher's own margin alone
   would still have left 20px of hero padding between the two. This takes that top padding down
   while leaving the sides and bottom exactly as they are -- a shorthand here would have reset
   them for a change that only concerns the top.

   `:has(.ch-org-switcher)` SCOPES IT TO THE CASE THAT ASKED FOR IT. The switcher only renders
   when there is more than one organisation; without this the title would pull up on every org
   page, including the ones with no switcher above it to close the gap to.
   BOTH VIEWS AS OF 2026-09-23, when the switcher itself stopped being Basic-only (see
   `showOrgSwitcher` in controllers/organization.js) -- but NOT at the same value, so each view
   states its own rather than one inheriting the other's and being corrected afterwards.
   BASIC KEEPS 6px. Its switcher sits under the in-flow `ch-tabs` strip, and this pairing was
   tuned against that (with its own 22px at 1201px and up, further down this file).
   MODERN TAKES 22px (requested: "there needs to be a bit more space below the dropdown on the
   rooms page"). Its switcher hangs below a nav that FLOATS over the page, so it reads as a
   card on open space rather than as the second row of a strip, and the tight pairing that
   suits Basic looks cramped here. 22px is Basic's own large-screen value for this same pair,
   so the two views agree on a number rather than inventing a second one. */
body.ll-view-basic .md-workspace:has(.ch-org-switcher) .md-hero--org {
  padding-top: 6px !important;
}

body.ll-view-modern .md-workspace:has(.ch-org-switcher) .md-hero--org {
  padding-top: 22px !important;
}

/* ROOM SUMMARY CARDS (2026-09-23). The org room page reuses the Reports page's `.report-kpi`,
   but its figures are not headline numbers -- they are phrases like "0 words, 0 sessions" and
   "0 words/day, 0 sessions/wk". At the Reports page's 25-32px they wrapped to three lines and
   read as a headline the value cannot carry.

   SO THE PAIR IS INVERTED HERE (requested): the LABEL leads, in the steadier weight, and the
   figure sits under it at a size a phrase can actually hold. The markup order is swapped to
   match, so this is not CSS re-ordering what the DOM says -- a screen reader hears the label
   first too.

   `.room-kpi` is an extra class on the same element, so the card keeps every other rule it
   inherits, including the focused surface. Only type and order change. */
/* EQUAL HEIGHT ACROSS THE FOUR. They sit in Bootstrap `col-sm-3` columns, which do not
   stretch their children, so each card was only as tall as its own text and the row came out
   ragged. A min-height equalises them without making the row a flex container -- that row also
   holds the panels and charts below, and turning it flex would have re-laid those out too. */
.room-kpi {
  min-height: 92px;
}

.room-kpi .report-kpi__label {
  margin: 0;
  color: var(--report-ink);
  /* 14px IS A FLOOR, not a preference. It was briefly taken to 13px while shrinking the pair,
     which is below the size this product holds itself to -- its users include people reading
     at distance, on mounted devices, and with low vision, and the label is the part that says
     what the figure means. Shrink the VALUE if the row needs more room; this does not go
     under 14. */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.room-kpi .report-kpi__value {
  /* HAIRLINE BETWEEN LABEL AND FIGURE. Carried as a `border-top` on the VALUE rather than a
     `border-bottom` on the label, so it spans the value's box: the label often wraps to two
     short lines and a rule under it would end mid-card, which is what reads as unfinished
     rather than deliberate.
     Low-alpha navy at 0.12 -- the same weight the reports page's own divider uses -- so it
     separates without competing with either line it sits between. */
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(27, 54, 93, 0.12);
  color: var(--report-muted);
  /* 15px, against the Reports page's clamp(25px, 2.6vw, 32px). These are not headline numbers
     but phrases -- "0 words/day, 0 sessions/wk" -- and at the headline size they wrapped to
     three lines in a quarter-width column, which is what made the row ragged in the first
     place. Smaller is what lets them sit on one or two lines. */
  font-size: 15px;
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1.35;
}

/* LIST-SHAPED CARDS (Goal Words, Curriculum & Training). These two hold a word list or a
   curriculum name plus an action link rather than a single figure, so their value slot is a
   <div> of flowing content instead of a one-line <p>.

   Kept SCROLLABLE rather than clipped: the original panel body carried
   `max-height: 90px; overflow: auto`, and a room with a dozen goal words still needs to reach
   all of them. Dropping that in the name of a tidy card would have hidden data.
   `min-width: 0` is what lets the words wrap inside the grid's `minmax(0, 1fr)` track instead
   of forcing the card wider than its column. */
.room-kpi--list .report-kpi__value {
  max-height: 84px;
  overflow-y: auto;
  min-width: 0;
  /* The inline styles the original markup puts on its word spans (16px bold) still apply and
     are left alone -- they are the words' own emphasis, not the card's. */
}

.room-kpi--list .report-kpi__value a {
  font-size: 14px;
}

/* TWO PER ROW AT 1200px AND BELOW (requested 2026-09-23). The cards sit in Bootstrap
   `col-sm-3 col-xs-6` columns -- four across from 768px up -- and at a quarter of the width
   their phrase-shaped values wrap hard. Half-width gives them a line to sit on.

   THE COLUMN IS WIDENED, NOT THE CARD. `width` lives on the `col-sm-3`; setting it on
   `.room-kpi` would leave the card overflowing a 25% column rather than the column resizing.
   `:has(> .room-kpi)` is what reaches it from the only class this page owns -- and it keeps the
   rule off every other `col-sm-3` in the app, including the ones further down this same page.

   (0,2,0) against Bootstrap's `.col-sm-3` at (0,1,0), so it wins on specificity and not on
   source order, which matters because Bootstrap's own rule lives in a `min-width: 768px` query
   that overlaps this one across 768-1200. Below 768 `col-xs-6` already gives two per row, so
   the two agree rather than fight. */
/* The break is a 1200px-and-below device only: above it the columns are a quarter each and the
   action column plus both list cards still fit one line, which is the layout that page has
   always had. Declared `none` here rather than left unstyled so that stays true by rule and not
   by the accident of an empty div being harmless.
   IT MUST PRECEDE THE QUERY: the two declarations have the same (0,1,0) specificity, so the
   later one wins. Written after it, this `none` would beat the `block` inside the query at
   every width and the break would never fire. */
.room-kpi-break {
  display: none;
}

@media (max-width: 1200px) {
  .col-sm-3:has(> .room-kpi) {
    width: 50%;
  }
  /* AND THE LIST PAIR STARTS A LINE OF ITS OWN. At half-width the two list cards can no longer
     share a line with the floated `col-sm-6` action column that precedes them in the markup:
     the float takes half, Goal Words takes the other half, and Curriculum drops to the next
     line by itself -- the stagger this widening introduced.
     The break is a BLOCK box because `clear` has no effect on the inline-block columns
     themselves, so nothing else in the row can reach past that float. Zero height, so the line
     it starts costs no space. Its element lives in templates/organization/room.hbs. */
  .room-kpi-break {
    display: block;
    width: 100%;
    clear: both;
  }
}
/* WRAPPING. These columns are Bootstrap FLOATS, and floats snag: a column taller than its
   neighbours catches the next one, which then hangs off its side instead of starting a fresh
   row. The six cards are not the same height -- Goal Words and Curriculum carry a list, the
   other four a single line -- so the row staggered as soon as it wrapped.

   `inline-block` instead of `float` is the fix. Inline-block items always begin a new row
   together when they no longer fit, regardless of each other's height, and `vertical-align:
   top` keeps them aligned at the top of that row rather than on their text baselines.
   Widths are untouched, so the 25% / 50% / `col-xs-6` steps still decide how many fit.

   SCOPED TO THE KPI COLUMNS ONLY, via `:has(> .room-kpi)`. The same row holds the action
   buttons and the charts below, which are still floats and still want to be -- mixing the two
   models across the whole row is what would look strange. */
.col-sm-3:has(> .room-kpi) {
  float: none;
  display: inline-block;
  vertical-align: top;
  /* Inline-block honours whitespace between elements; the template indents these onto their
     own lines, which would otherwise add a stray gap to every column's width and drop the
     last card to the next row one step early. */
  margin-right: -4px;
}

/* MORE BREATHING ROOM ABOVE THE ORG HEADER ON LARGE SCREENS (requested 2026-09-23), and more
   again below the switcher when one is on screen.

   ONLY ABOVE 1200px, deliberately. The tight 6px gap this widens was set for the case where
   the switcher sits directly over the title, and on a narrow screen that closeness is what
   keeps the two reading as one block without pushing the content below the fold. Wide screens
   have the height to spare and the tightness reads as cramped instead.
   1201px is the same seam the KPI columns use, so the page has one large/small boundary rather
   than two that disagree.

   TWO VALUES, because the two cases are not the same gap. Without a switcher this is the space
   between the tab strip and the title; with one it is the space under the dropdown, which
   already has its own 28px above it, so it needs slightly less to feel even.
   AT EVERY WIDTH since 2026-10-01 (requested: the page content should not shift as the screen
   narrows): above 1200px only, the title stepped 8px at 1200 (28 -> 20) and 16px with a switcher
   (22 -> 6). These later rules now win at every width, so the 6px rule above no longer applies. */
body.ll-view-basic .md-hero--org {
  padding-top: 28px !important;
}

body.ll-view-basic .md-workspace:has(.ch-org-switcher) .md-hero--org {
  padding-top: 22px !important;
}

/* ORG HEADER ON BASIC VIEW (2026-09-23): no role meta row, and no entrance motion.
   Both are scoped to `body.ll-view-basic`, the app-wide Basic body class, so Modern keeps the
   header exactly as it is.

   THE MOTION RULES CANNOT SIMPLY BE SWITCHED OFF. `.md-hero__title--from-left` and
   `.md-hero__sub--from-right` (app.scss ~34501) each set `opacity: 0` and then animate to
   visible with `forwards` -- the animation is what REVEALS the text, not just what moves it.
   Setting `animation: none` alone would leave the header permanently invisible, so `opacity: 1`
   has to come with it. That is the whole reason this is two declarations and not one.

   No `!important`: the base rules carry none, and `body.ll-view-basic` ahead of the same
   selector is (0,4,0) against their (0,3,0), so these win on specificity alone.

   REPORTS IS EXCLUDED (2026-09-25, requested: "on gentle, add movement to ... the stats page").
   This rule is scoped to `.md-hero--dashboard`, which the REPORTS hero also carries, so stilling
   the org header stilled Reports too -- collateral, not intent: everything above talks about the
   org header and nothing here was ever about the reports dashboard. Excluding it in place, with
   `:not()`, is what restores that page's own entrance motion in Basic; adding a louder rule
   somewhere else to switch it back on would have left this one still claiming Reports.
   ONLY Reports is excluded. Every other Basic hero this reaches -- the org header it was written
   for, and the user dashboard hero -- keeps the stillness it was given.
   GENTLE ONLY WITHOUT A LAYOUT TEST: `body.ll-layout-focused .md-shell--reports-view
   .md-hero--reports-dashboard` is `display: none !important` (_focused-view.scss:1011), so this
   hero does not exist in Focused and cannot animate there. A `:not(.ll-layout-focused)` here
   would be a condition that is already guaranteed.
   THE ROOMS PAGES ARE EXCLUDED TOO (2026-10-01, requested: "on basic view, the rooms page headers
   should show like they do on modern view"), the same way and for the same reason as Reports:
   `md-hero--org-rooms` (controllers/organization.js `roomsSectionActive`) marks the org header on
   the rooms list and a room's page, which then move as Modern's do. In Focused the rooms LIST is
   stilled again, for both views, by the rule in _focused-view.scss that Modern Focused has there. */
body.ll-view-basic .md-hero--dashboard:not(.md-hero--reports-dashboard):not(.md-hero--org-rooms) .md-hero__title .md-hero__title--from-left,
body.ll-view-basic .md-hero--dashboard:not(.md-hero--reports-dashboard):not(.md-hero--org-rooms) .md-hero__sub .md-hero__sub--from-right {
  animation: none;
  opacity: 1;
}

/* The "User · Manager" counts under the org title. Scoped to `.md-hero--org` rather than the
   `--meta` modifier generally, which the reports dashboard also uses and which was not asked
   about. Not on the rooms pages (`md-hero--org-rooms`, 2026-10-01; see the motion rule above):
   they show the counts as Modern does. */
body.ll-view-basic .md-hero--org:not(.md-hero--org-rooms) .md-hero__sub--meta {
  display: none;
}

/* PRIMARY NAV FORM (2026-09-23). `user-pill-nav` swaps its `md-pillnav` classes for these on
   Basic view, so this same strip now serves as the page-level nav that `.md-pillnav--dashboard`
   serves on Modern. The base `.ch-tabs` above is a full-width panel control living inside the
   dashboard's card; as a page nav it should sit centred and only as wide as its items, the way
   the pill row it replaces does.

   THE UPDATES BADGE COMES ACROSS TOO. That pill carries `md-pillnav__badge`, and the swap
   deliberately changes only the BASE class -- `md-pillnav__pill--updates` and the badge are
   modifiers that position the count, and rewriting them would have meant forking the markup
   after all. The badge simply has no `ch-` rule of its own, so it is given the home tabs'
   `.ch-tab__badge` treatment here rather than left unstyled. */
.ch-tabs--primary {
  /* EQUAL-WIDTH TABS, sized to the widest of them (requested 2026-09-23: the same width for
     Home and for the section tab beside it).

     A GRID, not flex, because this is the one thing flex cannot do. `.ch-tab` is `flex: 1 1
     auto`, which grows items from their own content -- so "Home" and "Subscription" end up
     visibly different sizes, which is what prompted this. `grid-auto-columns: 1fr` with a
     `fit-content` track sizes EVERY column to the widest item, so the two match whatever the
     section label happens to be, from "Rooms" to "Subscription", without a hard-coded width
     that would need revisiting each time a section is added.

     The tab's own metrics are untouched -- padding, font and the 44px minimum target all still
     come from `.ch-tab` above -- so these read as home-page tabs, just evenly sized. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* The grid sizes the track; this centres the label inside it, which flex was doing implicitly
   before and grid does not. */
.ch-tabs--primary .ch-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* BREADCRUMB FORM of the strip -- a way back plus the current page, used on the Rooms page.
   Left-aligned rather than the tab row's stretched split: two items sharing the full width
   would read as a choice between equals, and one of them is where you already are. The back
   tab is an <a>, so it needs the anchor colour and underline neutralised to match the buttons
   beside it, which `.ch-tab` alone does not do. */
.ch-tab.is-active {
  background: linear-gradient(160deg, #fff 0%, rgba(255, 255, 255, 0.86) 100%);
  color: #1B365D;
  box-shadow: 0 3px 8px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tab__badge, .ch-tabs--primary .md-pillnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #C0392B;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.ch-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ch-subtab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--md-muted, #1B365D);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ch-subtab:hover {
  background: #fff;
  color: #1B365D;
}

.ch-subtab.is-active {
  background: linear-gradient(160deg, rgba(76, 134, 216, 0.18) 0%, rgba(76, 134, 216, 0.1) 100%);
  border-color: rgba(76, 134, 216, 0.45);
  color: #1B365D;
}

.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}

.ch-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 108px;
  padding: 16px 12px;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.74) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(17, 26, 46, 0.08), 0 1px 3px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #1B365D;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ch-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.252) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.ch-tile::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -25%;
  width: 85%;
  height: 115%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

a.ch-tile:hover, a.ch-tile:focus-visible,
button.ch-tile:hover, button.ch-tile:focus-visible {
  color: #1B365D;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(17, 26, 46, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile__chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(160deg, #fff 0%, rgba(255, 255, 255, 0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

a.ch-tile:hover .ch-tile__chip,
button.ch-tile:hover .ch-tile__chip {
  box-shadow: 0 7px 16px rgba(17, 26, 46, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile__icon {
  position: relative;
  flex: 0 0 auto;
}

.ch-tile__label {
  position: relative;
}

.ch-tile__sub,
.ch-tile__rule,
.ch-tile__more {
  display: none;
}

.ch-tile--big .ch-tile__label {
  font-size: clamp(18px, 0.75rem + 0.85vw, 26px);
}

.ch-tile--big {
  --ch-zone-gap: 14px;
  min-height: 124px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
}
.ch-tile--big .ch-tile__info {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ch-tile--big .ch-tile__info::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--ch-zone-gap) / 2);
  height: 1px;
  background: rgba(27, 54, 93, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.ch-tile--big .ch-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ch-tile--big .ch-tile__more {
  display: block;
  position: relative;
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  color: #334155;
  text-align: left;
  text-wrap: pretty;
}
.ch-tile--big .ch-tile__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(17, 26, 46, 0.1);
}
.ch-tile--big .ch-tile__sub {
  display: block;
  position: relative;
  margin: 0;
  min-width: 0;
  font-weight: 700;
  color: #1B365D;
  text-align: left;
  overflow-wrap: anywhere;
}
.ch-tile--big .ch-tile__rule {
  display: block;
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  height: auto;
  background: none;
  line-height: 1;
  color: rgba(27, 54, 93, 0.88);
  pointer-events: none;
}
.ch-tile--big .ch-tile__rule::before {
  content: "→";
}

.ch-tile--silver .ch-tile__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "chip  label" "more  more";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}

.ch-tile--silver .ch-tile__chip {
  grid-area: chip;
}

.ch-tile--silver .ch-tile__text {
  display: contents;
}

.ch-tile--silver .ch-tile__label {
  grid-area: label;
}

.ch-tile--silver .ch-tile__more {
  grid-area: more;
}

.ch-tile--silver .ch-tile__cta {
  justify-content: flex-end;
}

.ch-tile--silver .ch-tile__sub {
  text-align: right;
}

a.ch-tile--big:hover .ch-tile__cta,
button.ch-tile--big:hover .ch-tile__cta {
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(255, 255, 255, 0.88);
}

a.ch-tile--big:focus-visible .ch-tile__cta,
button.ch-tile--big:focus-visible .ch-tile__cta {
  background: rgba(255, 255, 255, 0.62);
  border-color: #1B365D;
  box-shadow: inset 0 0 0 1px #1B365D;
}

a.ch-tile--big:active .ch-tile__cta,
button.ch-tile--big:active .ch-tile__cta {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px rgba(17, 26, 46, 0.1);
}

.ch-tile--primary {
  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(84, 160, 208, 0.28) 0%, rgba(84, 160, 208, 0.38) 100%);
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  border: 1px solid rgba(64, 103, 177, 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(64, 126, 177, 0.22), 0 0 18px rgba(64, 126, 177, 0.3);
}

.ch-tile--setup {
  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(65, 162, 157, 0.44), rgba(113, 148, 217, 0.38));
  background-color: rgba(255, 255, 255, 0.3);
  color: #1B365D;
  border: 1px solid rgba(41, 108, 108, 0.92);
  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(41, 108, 108, 0.22), 0 0 18px rgba(41, 108, 108, 0.3);
}

.ch-tile--locked {
  cursor: default;
  color: var(--md-muted, #1B365D);
  opacity: 0.85;
}

.ch-tile--extras {
  flex-direction: row;
  gap: 5px;
  min-height: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
}

.ch-tile__caret {
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid rgba(27, 54, 93, 0.5);
  transition: transform 0.18s ease;
}

.ch-tile--extras[aria-expanded=true] .ch-tile__caret {
  transform: rotate(180deg);
}

.ch-tile--account {
  background: linear-gradient(155deg, rgba(59, 146, 180, 0.52) 0%, rgba(59, 146, 180, 0.26) 100%);
  border-color: rgba(59, 146, 180, 0.3);
  box-shadow: 0 8px 20px rgba(59, 146, 180, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--account .ch-tile__chip {
  background: linear-gradient(160deg, rgba(59, 146, 180, 0.16) 0%, rgba(59, 146, 180, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--account:hover, .ch-tile--account:focus-visible {
  box-shadow: 0 14px 30px rgba(59, 146, 180, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile--speak-main {
  background: linear-gradient(155deg, rgba(77, 141, 197, 0.52) 0%, rgba(77, 141, 197, 0.26) 100%);
  border-color: rgba(77, 141, 197, 0.3);
  box-shadow: 0 8px 20px rgba(77, 141, 197, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--speak-main .ch-tile__chip {
  background: linear-gradient(160deg, rgba(77, 141, 197, 0.16) 0%, rgba(77, 141, 197, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--speak-main:hover, .ch-tile--speak-main:focus-visible {
  box-shadow: 0 14px 30px rgba(77, 141, 197, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile--speak {
  background: linear-gradient(155deg, rgba(77, 141, 197, 0.52) 0%, rgba(77, 141, 197, 0.26) 100%);
  border-color: rgba(77, 141, 197, 0.3);
  box-shadow: 0 8px 20px rgba(77, 141, 197, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--speak .ch-tile__chip {
  background: linear-gradient(160deg, rgba(77, 141, 197, 0.16) 0%, rgba(77, 141, 197, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--speak:hover, .ch-tile--speak:focus-visible {
  box-shadow: 0 14px 30px rgba(77, 141, 197, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile--create {
  background: linear-gradient(155deg, rgba(42, 157, 143, 0.3) 0%, rgba(42, 157, 143, 0.13) 100%);
  border-color: rgba(42, 157, 143, 0.3);
  box-shadow: 0 8px 20px rgba(42, 157, 143, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--create .ch-tile__chip {
  background: linear-gradient(160deg, rgba(42, 157, 143, 0.16) 0%, rgba(42, 157, 143, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--create:hover, .ch-tile--create:focus-visible {
  box-shadow: 0 14px 30px rgba(42, 157, 143, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile--reports {
  background: linear-gradient(155deg, rgba(49, 111, 112, 0.46) 0%, rgba(49, 111, 112, 0.22) 100%);
  border-color: rgba(49, 111, 112, 0.3);
  box-shadow: 0 8px 20px rgba(49, 111, 112, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--reports .ch-tile__chip {
  background: linear-gradient(160deg, rgba(49, 111, 112, 0.16) 0%, rgba(49, 111, 112, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--reports:hover, .ch-tile--reports:focus-visible {
  box-shadow: 0 14px 30px rgba(49, 111, 112, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-tile--ideas {
  background: linear-gradient(155deg, rgba(167, 154, 128, 0.54) 0%, rgba(167, 154, 128, 0.26) 100%);
  border-color: rgba(167, 154, 128, 0.3);
  box-shadow: 0 8px 20px rgba(167, 154, 128, 0.2), 0 1px 3px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--ideas .ch-tile__chip {
  background: linear-gradient(160deg, rgba(167, 154, 128, 0.16) 0%, rgba(167, 154, 128, 0.07) 100%);
  border-color: rgba(255, 255, 255, 0.85);
}
.ch-tile--ideas:hover, .ch-tile--ideas:focus-visible {
  box-shadow: 0 14px 30px rgba(167, 154, 128, 0.28), 0 2px 5px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-grid:not(.ch-grid--extras) .ch-tile__chip {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, rgba(156, 163, 175, 0.34) 0%, rgba(156, 163, 175, 0.15) 55%, rgba(156, 163, 175, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 2px rgba(17, 26, 46, 0.05), 0 4px 10px rgba(17, 26, 46, 0.1);
}

.ch-tile--silver {
  background: linear-gradient(155deg, rgba(156, 163, 175, 0.1) 0%, rgba(156, 163, 175, 0.03) 100%), linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 100%);
  border-color: rgba(156, 163, 175, 0.38);
  box-shadow: 0 6px 16px rgba(17, 26, 46, 0.08), 0 1px 3px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ch-tile--silver .ch-tile__chip {
  background: linear-gradient(160deg, rgba(156, 163, 175, 0.16) 0%, rgba(156, 163, 175, 0.07) 100%);
  border-color: rgba(156, 163, 175, 0.45);
}

a.ch-tile--silver:hover,
a.ch-tile--silver:focus-visible,
button.ch-tile--silver:hover,
button.ch-tile--silver:focus-visible {
  box-shadow: 0 12px 26px rgba(17, 26, 46, 0.12), 0 2px 5px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ch-grid--extras {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(156, 163, 175, 0.3);
}
@media (max-width: 1024px) {
  .ch-grid--extras {
    row-gap: 8px;
  }
}

.ch-comms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ch-comm {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
}

.ch-comm--highlighted {
  outline: 3px solid #1A7B7A;
  outline-offset: 2px;
}

.ch-comm__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ch-comm__avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.42);
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.12);
}

.ch-comm__ident {
  min-width: 0;
  flex: 1 1 auto;
}

.ch-comm__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #1B365D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-comm__goal {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(27, 54, 93, 0.78);
}

.ch-comm__goal--none {
  font-style: italic;
}

.ch-comm__goal-set {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: #1F4EA8;
  cursor: pointer;
  text-decoration: underline;
}
.ch-comm__goal-set::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}

.ch-comm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.ch-comm__actions .ch-tile {
  flex: 0 1 104px;
  min-height: 88px;
  font-size: 14px;
}

.ch-comm__actions .ch-tile--setup {
  flex-basis: 150px;
}

.ch-comm__actions .ch-tile--extras {
  flex: 0 0 auto;
  min-height: 0;
}

.ch-comm__extras {
  display: flex;
  align-items: flex-end;
}

.ch-comm__extras-panel {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.08);
  box-shadow: inset 0 1px 2px rgba(17, 26, 46, 0.05);
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.ch-comm__extras-panel.is-open {
  display: grid;
  grid-auto-rows: 1fr;
}

.ch-comm__extras-panel > li {
  display: flex;
}

.ch-comm__extras-panel .ch-menu__item {
  height: 100%;
  text-align: center;
  gap: 5px;
}

.ch-comm__extras-panel .md-limited-badge {
  margin-left: 0;
}

.ch-comm__badge {
  margin-top: 2px;
}

.ch-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%), rgba(27, 54, 93, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.ch-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1575) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.ch-boards__panel {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #F4F7FB 0%, #E6EBF2 100%);
}

.ch-card--list,
.ch-card--install {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #F4F7FB 0%, #E6EBF2 100%);
}
.ch-card--list::before,
.ch-card--install::before {
  background: none;
}
.ch-card--list a,
.ch-card--install a {
  color: #1F4EA8;
}
.ch-card--list .ch-notes span[style],
.ch-card--install .ch-notes span[style] {
  color: rgba(27, 54, 93, 0.8) !important;
}

.ch-card__title {
  margin: 0 0 8px;
  /* See .ch-panel__title — same `h2 { font-size: 25px !important }` escape. */
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.2;
  color: #1B365D;
}

.ch-card__heading {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
}

.ch-card__text {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-ink, #111A2E);
}

.ch-card--alert {
  background: linear-gradient(160deg, rgba(192, 57, 43, 0.12) 0%, rgba(192, 57, 43, 0.05) 100%);
}

.ch-card--intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 30px rgba(27, 54, 93, 0.07);
}

.ch-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, rgba(156, 163, 175, 0.34) 0%, rgba(156, 163, 175, 0.15) 55%, rgba(156, 163, 175, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 2px rgba(17, 26, 46, 0.05), 0 4px 10px rgba(17, 26, 46, 0.1);
  border-color: rgba(156, 163, 175, 0.3);
}

.ch-intro__content {
  min-width: 0;
  max-width: 900px;
}

.ch-card--intro .ch-card__title {
  margin: 3px 0 3px;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(22px, 1.6vw, 30px) !important;
  font-weight: 700;
  line-height: 1.15;
  color: #1B365D;
}

.ch-card--intro .ch-card__text {
  margin: -2px 0 0;
  max-width: 70ch;
  font-size: clamp(14px, 13px + 0.14vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  color: #374151;
}

.ch-card--intro .ch-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: clamp(14px, 13px + 0.14vw, 15px);
  font-weight: 700;
  white-space: nowrap;
  background: #2860C9;
}

.ch-card--intro .ch-btn:focus-visible {
  outline: 3px solid #3A6BC7;
  outline-offset: 3px;
}

.ch-intro__cta-arrow {
  margin-left: 10px;
  transition: transform 0.18s ease;
}

.ch-card--intro .ch-btn:hover .ch-intro__cta-arrow,
.ch-card--intro .ch-btn:focus-visible .ch-intro__cta-arrow {
  transform: translateX(3px);
}

.ch-card__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ch-card__stores img {
  height: 40px;
  width: auto;
}

.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ch-btn--primary {
  /* Starts at $brand-dusty-denim-aa, NOT $brand-dusty-denim. These are the only two
     places in this file that reverse WHITE text out of an opaque denim fill, and the
     lighter denim fails WCAG 2.1 AA there: #fff on #4C86D8 measures 3.68:1 against a
     4.5:1 requirement, and the gradient stayed under 4.5 for roughly its first three
     quarters (midpoint #4378D0 = 4.34:1). Neither element qualifies as large text.
     With the AA denim the whole ramp passes — 5.82:1 at the start, 5.11:1 at the end.
     Everything else in this file uses plain $brand-dusty-denim as a low-alpha tint
     behind DARK text, where it is fine; only reversed-out white needs the AA variant. */
  background: linear-gradient(160deg, #2860C9 0%, #3A6BC7 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(58, 107, 199, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ch-btn--primary:hover,
.ch-btn--primary:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(58, 107, 199, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ch-btn--ghost {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(27, 54, 93, 0.14);
  color: #1B365D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ch-btn--ghost:hover,
.ch-btn--ghost:focus-visible {
  background: #fff;
  color: #1B365D;
  text-decoration: none;
}

.ch-notes,
.ch-sessions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--md-ink, #111A2E);
}

.ch-empty {
  margin: 0;
  font-size: 14px;
  color: var(--md-muted, #1B365D);
  opacity: 0.78;
}

.ch-empty--explained {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

.ch-empty--error {
  color: #C0392B;
  opacity: 1;
}

.ch-explain {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(27, 54, 93, 0.08);
  border: 1px solid rgba(27, 54, 93, 0.14);
  color: #1B365D;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.ch-explain::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.ch-explain:hover,
.ch-explain:focus-visible {
  background: rgba(27, 54, 93, 0.14);
}

.ch-session {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.07);
}

.ch-session:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ch-session__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}

.ch-session__when {
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
  font-size: 14px;
}

.ch-session__link {
  font-weight: 650;
  color: #1F4EA8;
}

.ch-session__who {
  color: var(--md-muted, #1B365D);
  opacity: 0.8;
  font-size: 14px;
}

.ch-session__summary {
  font-size: 14px;
  line-height: 1.4;
  color: var(--md-muted, #1B365D);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-boards__lead {
  font-size: 14px;
  font-weight: 600;
  color: #2860C9;
}

.ch-boards__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ch-boards__grid .ch-empty {
  flex: 1 1 100%;
}

.ch-boards__cell {
  flex: 0 0 240px;
  max-width: 100%;
  aspect-ratio: 1/1;
  min-width: 0;
  display: flex;
}

.ch-boards__cell > * {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.ch-boards__cell .board-icon__home-glyph {
  color: #1B365D;
}

.ch-boards__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ch-boards__see-all {
  font-size: 14px;
  font-weight: 600;
  color: #2860C9;
}

@media (min-width: 1025px) {
  .ch-grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  }
  .ch-grid--extras {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .ch-tile--big {
    min-height: clamp(300px, 35vh, 430px);
    padding: 20px;
    justify-content: flex-start;
    gap: 0;
  }
  .ch-tile--speak-main {
    --ch-accent: 95, 144, 186;
  }
  .ch-tile--reports {
    --ch-accent: 66, 152, 154;
  }
  .ch-tile--ideas {
    --ch-accent: 169, 134, 72;
  }
  .ch-tile--silver {
    --ch-accent: 148, 163, 184;
  }
  .ch-tile--big .ch-tile__chip {
    width: 66px;
    height: 66px;
    border-radius: 20px;
  }
  .ch-tile--big .ch-tile__icon {
    width: 38px;
    height: 38px;
  }
  .ch-tile--big {
    --ch-zone-gap: 26px;
  }
  .ch-tile--big .ch-tile__info {
    gap: 18px;
    padding: 22px 22px 42px;
  }
  .ch-tile--big .ch-tile__text {
    gap: 5px;
  }
  .ch-tile--big .ch-tile__cta {
    margin-top: var(--ch-zone-gap);
    padding: 0 20px;
    font-size: 18px;
    min-width: min(26.5ch, 100%);
  }
  .ch-tile--big .ch-tile__label {
    margin-top: 0;
    font-weight: 700;
    line-height: 1.15;
    color: #1B365D;
    text-wrap: balance;
  }
  .ch-tile--big .ch-tile__more {
    max-width: 34ch;
    font-size: 17px;
  }
  .ch-tile--big .ch-tile__sub {
    margin-top: 0;
    line-height: 1.3;
  }
  .ch-tile--silver .ch-tile__chip {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }
  .ch-tile--silver .ch-tile__icon {
    width: 26px;
    height: 26px;
  }
  .ch-tile--silver .ch-tile__label {
    margin-top: 0;
    font-size: 21px;
  }
  .ch-tile--silver .ch-tile__more {
    font-size: 15px;
  }
  .ch-tile--silver .ch-tile__cta {
    font-size: 16px;
    min-width: min(29ch, 100%);
  }
  .ch-tile--silver .ch-tile__sub {
    margin-top: 0;
  }
  .ch-tile--silver .ch-tile__info {
    column-gap: 16px;
  }
  .ch-tile--big .ch-tile__rule {
    font-size: 26px;
  }
}
@media (min-width: 1720px) {
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
}
@media (min-width: 1500px) and (max-width: 1719px) {
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  .ch-tile--big {
    padding: 14px;
    min-height: clamp(360px, 42vh, 470px);
  }
  .ch-tile--big .ch-tile__info {
    gap: 12px;
    padding: 14px 14px 30px;
  }
  .ch-tile--big .ch-tile__cta {
    padding: 0 14px;
  }
}
@media (min-width: 1025px) and (max-width: 1499px) {
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}
@media (max-width: 1100px) {
  .ch-rail {
    max-width: 320px;
  }
}
@media (max-width: 1024px) {
  .ch-rail__username {
    font-size: 18px;
  }
  .ch-comms {
    grid-template-columns: 1fr;
  }
  .ch-row {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .ch-tile--big .ch-tile__chip {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }
  .ch-tile--big .ch-tile__icon {
    width: 34px;
    height: 34px;
  }
  .ch-tile--silver .ch-tile__icon {
    width: 28px;
    height: 28px;
  }
  .ch-tile--big {
    --ch-zone-gap: 24px;
  }
  .ch-tile--big .ch-tile__info {
    gap: 16px;
    padding: 18px 18px 34px;
  }
  .ch-tile--big .ch-tile__text {
    gap: 5px;
  }
  .ch-tile--big .ch-tile__cta {
    margin-top: var(--ch-zone-gap);
    padding: 0 18px;
    font-size: 17px;
    min-width: min(26.5ch, 100%);
  }
  .ch-tile--big .ch-tile__label {
    margin-top: 0;
    line-height: 1.18;
  }
  .ch-tile--big .ch-tile__more {
    max-width: 34ch;
    font-size: 16px;
  }
  .ch-tile--big .ch-tile__sub {
    margin-top: 0;
    line-height: 1.3;
  }
  .ch-tile--big .ch-tile__rule {
    font-size: 23px;
  }
  .ch-tile--silver .ch-tile__label {
    font-size: 19px;
  }
  .ch-tile--silver .ch-tile__more {
    font-size: 14px;
  }
  .ch-tile--silver .ch-tile__cta {
    font-size: 15px;
    min-width: min(29ch, 100%);
  }
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .ch-grid--extras {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width: 900px) {
  .ch-tile--big {
    --ch-zone-gap: 20px;
    gap: 0;
    padding: 16px 14px;
  }
  .ch-tile--big .ch-tile__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
  .ch-tile--big .ch-tile__chip {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .ch-tile--big .ch-tile__icon {
    width: 31px;
    height: 31px;
  }
  .ch-tile--big .ch-tile__text {
    gap: 4px;
  }
  .ch-tile--big .ch-tile__label {
    margin-top: 0;
    font-weight: 700;
    line-height: 1.2;
    color: #1B365D;
  }
  .ch-tile--big .ch-tile__more {
    max-width: none;
    font-size: 14px;
  }
  .ch-tile--big .ch-tile__cta {
    width: auto;
    min-width: 0;
    margin-top: var(--ch-zone-gap);
    margin-left: 0;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 15px;
  }
  .ch-tile--big .ch-tile__sub {
    margin-top: 0;
    line-height: 1.3;
  }
  .ch-tile--big .ch-tile__rule {
    font-size: 20px;
  }
  .ch-tile--silver .ch-tile__icon {
    width: 26px;
    height: 26px;
  }
  .ch-tile--silver .ch-tile__label {
    font-size: 16px;
  }
}
@media (max-width: 550px) {
  .ch-tabs {
    display: none;
  }
  .ch-tabselect {
    display: block;
  }
  .ch-card--intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "title" "text" "cta";
    justify-items: center;
    text-align: center;
  }
  .ch-card--intro .ch-intro__icon {
    margin-bottom: 12px;
  }
  .ch-card--intro .ch-btn {
    justify-self: center;
  }
}
@media (max-width: 900px) {
  .ch-page {
    flex-direction: column;
  }
  .ch-rail, .ch-panel {
    max-width: none;
    width: 100%;
  }
  .ch-comms {
    grid-template-columns: 1fr;
  }
  .ch-card--intro {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title cta";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 6px 12px;
  }
  .ch-card--intro .ch-intro__content {
    display: contents;
  }
  .ch-card--intro .ch-card__title {
    grid-area: title;
    margin: 0;
  }
  .ch-card--intro .ch-btn {
    grid-area: cta;
    justify-self: end;
    width: auto;
  }
  .ch-card--intro .ch-intro__icon {
    grid-area: icon;
    margin-bottom: 0;
  }
  .ch-card--intro .ch-card__text {
    display: none;
  }
  .ch-rail__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .ch-row {
    gap: 10px;
    padding: 8px 12px;
  }
  .ch-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .ch-row__title {
    font-size: 14px;
  }
  .ch-row__arrow {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .ch-page {
    padding-right: 22px;
    padding-left: 22px;
    padding-bottom: 28px;
    gap: 16px;
  }
  .ch-tabs {
    flex-wrap: nowrap;
  }
  .ch-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.ch-rail__minor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ch-rail__minor-icon {
  flex: 0 0 auto;
  opacity: 0.85;
  transition: opacity 0.16s ease;
}

.ch-rail__minor:hover .ch-rail__minor-icon,
.ch-rail__minor:focus-visible .ch-rail__minor-icon {
  opacity: 1;
}

.shepherd-element.ch-tour__step {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 100%), rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(17, 26, 46, 0.14), 0 3px 10px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  max-width: 400px;
}

.shepherd-element.ch-tour__step .shepherd-content {
  background: transparent;
}

.shepherd-element.ch-tour__step .shepherd-header {
  padding: 20px 22px 0;
  background: transparent;
}

.shepherd-element.ch-tour__step .shepherd-title {
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #1B365D;
}

.shepherd-element.ch-tour__step .shepherd-text {
  padding: 12px 22px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
}

.shepherd-element.ch-tour__step .shepherd-footer {
  gap: 10px;
  padding: 16px 22px 20px;
}

.ch-tour__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(76, 134, 216, 0.12);
  border: 1px solid rgba(156, 163, 175, 0.28);
  color: #2860C9;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ch-tour__eyebrow-icon {
  flex: 0 0 auto;
}

.ch-tour__heading {
  display: block;
}

.ch-tour__lead {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
}

.ch-tour__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-tour__li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.4;
  color: #1B365D;
}

.ch-tour__li-check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: #1A7B7A;
}

.ch-tour__foot {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}

.shepherd-element.ch-tour__step .ch-tour__btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}

.shepherd-element.ch-tour__step .ch-tour__btn--primary {
  background: #2860C9;
  border-color: transparent;
  color: #fff;
}

.shepherd-element.ch-tour__step .ch-tour__btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(156, 163, 175, 0.38);
  color: #1B365D;
}

.shepherd-element.ch-tour__step .ch-tour__btn:focus-visible {
  outline: 3px solid #3A6BC7;
  outline-offset: 3px;
}

/* ── BASIC VIEW: ONE MENU HEIGHT ON EVERY PAGE THAT HAS THE RAIL (2026-10-01) ──────────
   Requested: "the menu needs to start at the same height it is on the home page".
   Every Basic rail shell (`.ch-page`, the account section, the org directory, the org pages) insets
   its rail 80px from the top of `#content`, so the rail's height is `#content`'s top padding plus
   that. The home page's `#content` carries `calc(var(--topbar-height) + 1rem)` (app.scss,
   `#content.home-page`) and so do the Focused org pages (_focused-view.scss); the rest fell back to
   the generic `+ 3rem` (app.scss `#within_ember #content`), so their rail sat 20px lower and moved
   as you went from Home to Logs (measured 94 vs 114). Every page that renders the rail takes the
   home page's padding here, so the rail starts at one height everywhere.
   `:has(.ch-rail)` names the condition directly: the rail renders only in Basic, on exactly these
   pages. `!important` matches the page-specific `#content` paddings it sits alongside. */
body.ll-view-basic #within_ember #content:has(.ch-rail) {
  padding-top: calc(var(--topbar-height) + 1rem) !important;
}

/* ── BASIC VIEW: THE ACCOUNT PAGE GETS THE SECTION RAIL BESIDE IT (2026-09-25) ──────────
   Requested: "on basic view account page we need to add the ch-rail to the account page ...
   for focused view, use the basic view focused ch-rail styles; for gentle view, use the basic
   view gentle ch-rail styles".

   THE STYLING IS ALREADY WRITTEN, which is the point of building the rail out of `ch-` classes:
   `.ch-rail` and `.ch-row` carry the glass panel, the rows and both layouts' treatments, so the
   new rail picks up gentle and focused exactly as the dashboard's does. Only the LAYOUT is new,
   and only in Basic -- three declarations, mirroring what `.md-shell--org-directory` does for
   the organizations page (above), which is the same problem solved the same way.

   `:has(> .ch-rail--account)` SCOPES IT TO THE PAGE THAT HAS ONE, and the shell class is
   deliberately NOT part of the test. The rail's presence is the condition: a page that never
   renders it cannot be turned into a row by accident, and a page that gains it needs no new rule.
   That is how this survived the rail following the whole section (2026-09-25) with the qualifier
   as its only edit.

   THE QUALIFIER WAS `.md-shell--user` UNTIL 2026-09-25, and widening it to `.md-shell` is what
   lets Reports in. Reports is the one section page with its OWN shell
   (`.md-shell--reports-view.md-shell--stats`, templates/user/stats.hbs) because `user.stats` is a
   bare route, so it never carried `--user` and every rule here missed it. Specificity is
   unchanged by the swap -- one class out of the compound, one class into the `:has()` argument,
   whose specificity counts -- so nothing this used to outrank it now loses to.

   `--account` RATHER THAN BARE `.ch-rail` IS LOAD-BEARING now that the shell class is gone.
   `templates/organizations.hbs` and the Basic home page render `<Dashboard::ClassicRail />` as a
   direct child of THEIR `.md-shell`, and those rails are plain `.ch-rail`. Testing for the bare
   class would have applied this account-section layout to the dashboard and the org directory.
   `ch-rail--account` is rendered in exactly one place in the app
   (components/dashboard/classic-account-rail.hbs:18), which is what keeps the blast radius at
   this one rail's two mount points.

   MODERN IS NOT TOUCHED: it never renders `.ch-rail--account` at all -- `showClassicAccountRail`
   is false for a non-classic user -- so the `:has()` is false there and every shell keeps its
   column. */
body.ll-view-basic .md-shell:has(> .ch-rail--account) {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  /* SIDE INSET ONLY. Without it the rail sits flush against the viewport edge -- this shell
     has no horizontal padding of its own, where `.ch-page` (the Basic home page) carries 28px.
     28 is that same figure, so the rail starts on the same line as the home page's does.
     The VERTICAL padding is deliberately left alone: the account page's top spacing in Basic
     was not part of this request, and the shorthand would have silently reset it. */
  padding-left: 28px !important;
  padding-right: 28px !important;
  /* AND DOWN FROM THE TOP OF THE PAGE (2026-09-25, requested). This shell had only the 30px
     `--ll-nav-clearance`, which put the rail at y=76 with the fixed header's bottom edge at 70
     -- six pixels of daylight under the navbar at 1280, and at 1024, where that clearance is 0,
     the rail started at 46 with its top 24px behind the header.
     80 / 44 / 48 ARE `.ch-page`'S OWN FIGURES at these three widths, measured on the Basic home
     page and the organizations directory: both put their rail at y=126 / 90 / 94. Matching them
     is what makes the three Basic pages that carry this rail start on one line, rather than
     picking a number that only looks right on the page in front of me.
     The content moves down with the rail, keeping the 40px offset it already had between them.
     AT EVERY WIDTH since 2026-10-01: the 44px (<=1024) and 48px (<=900) steps lifted the rail and
     the page 36px at 1024, so they are gone and 80px holds. */
  padding-top: 80px !important;
}

body.ll-view-basic .md-shell:has(> .ch-rail--account) > .md-workspace {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* THE CONTENT COLUMN STARTS WHERE THE RAIL DOES (2026-09-25, requested: "basic view gentle
   style: move the accounts page content up on the page").
   MEASURED at 1280 before the change: rail top 126, workspace top 166 -- the workspace carried a
   40px top MARGIN and a 40px top PADDING, so the content began 80px below the rail beside it and
   the two columns read as unrelated. Both go, which is exactly what
   `.md-shell--org-directory > .md-workspace` above does for the organizations page, for the same
   reason and with the same result: one top edge across the row.
   THE CONTENT KEEPS ITS OWN INSET -- `.md-main--user` has 35px of its own (app.scss), so this
   moves the block up without pushing the card against the shell's edge.
   BOTH LAYOUTS since 2026-10-01 (was Gentle only, as first asked; Focused sat 95px below the
   rail, measured 126 / 221). Holds at every width: the base `.md-workspace` steps its own margin and
   padding at 1024, so zeroing them here is also what keeps the page from moving there. */
body.ll-view-basic .md-shell:has(> .ch-rail--account) > .md-workspace {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ...AND THE CARD'S OWN INSET GOES TOO (2026-09-25, asked for straight after: "move it up more").
   With the workspace at 0 the only box left above the content was `.md-main--user`'s 35px
   (app.scss, `calc(var(--bottombar-height) - 24px)`, matched to its own bottom padding). That
   put the content 35px below the rail beside it, which is the gap that was still visible.
   At 0 the card's top edge and the rail's top edge are the same line -- the alignment the
   organizations directory has, and as far up as this content can go without moving the rail,
   which was deliberately placed at the home page's inset earlier today.
   TOP ONLY: the bottom keeps its 35px, as in the Modern narrow-width rule that does the same
   thing for the same reason. Only where the rail renders; both layouts since 2026-10-01 (above). */
body.ll-view-basic .md-shell:has(> .ch-rail--account) > .md-workspace > .md-main--user {
  padding-top: 0 !important;
}

/* STACKS WHERE EVERY OTHER BASIC RAIL STACKS. At 900 and below `.ch-rail` is already
   `max-width: none; width: 100%` and is built to sit ABOVE the content, not beside it (see the
   note at the collapse control) -- left as a row it would be a full-width panel squeezing the
   account card into whatever was left. Same breakpoint and same reason as `.ch-page` and the
   organizations directory. */
@media (max-width: 900px) {
  body.ll-view-basic .md-shell:has(> .ch-rail--account) {
    flex-direction: column !important;
    /* It still clears the fixed header: the 80px above holds here too (2026-10-01; it was 48px,
       which put the stacked rail 32px higher than the side rail). */
  }
}
/* Sides narrow with `.ch-page`'s at the same width, for the same reason. */
@media (max-width: 767px) {
  body.ll-view-basic .md-shell:has(> .ch-rail--account) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* THE CURRENT PAGE'S ROW, which the dashboard rail never needed. Its rows are actions, so none
   of them is ever "where you are"; every row here is a page, and one of them always is.
   BORDER AND WEIGHT, NOT A FILL: the rows sit on a glass panel whose contrast budget is
   already spent, and darkening one row enough to read as selected against it pushed the label
   below the section's own contrast floor. A heavier left edge in the brand teal plus the
   title's weight says "here" without touching the text colour. */
/* ── THE ACCOUNT RAIL'S ROWS SIT CLOSER AT 1024 AND BELOW (2026-09-25) ──────────────────
   Requested: "on 1024px basic view reduce the spacing between the buttons on the ch-rail for
   the account page".

   IT WAS TWO DIFFERENT GAPS, which is why this is two declarations. Measured on the account
   rail at 1024: Gentle 6px, Focused 12px. The 6 is `.ch-rail__list`'s own `gap`; Focused adds
   another 6 through `.ch-rail__item + .ch-rail__item { padding-top: 6px }` (_focused-view.scss,
   in a `min-width: 901px` block), which that rule's note calls "half of the 12px rhythm". So a
   single `gap` change would have tightened one layout and left the other reading loose.
   BOTH LAND ON 4px, one number rather than two proportional ones: the rows are 60px tall at
   this width and the two layouts otherwise sit 6px apart on a spacing nobody can see a reason
   for. Gentle gives up 2px, Focused 8px, and the rail reads the same density in both.

   SCOPED TO `.ch-rail--account`, as asked -- the dashboard and organizations rails keep the
   spacing they have. The Focused half is written here rather than beside its rule so the two
   halves of one change stay together; it is the same selector as that rule plus this rail's
   class, so it outranks it (0,4,0 against 0,3,0) inside this narrower range.
   <=1024 INCLUDES the grid layout below 901px, where `gap` governs both axes and the rows sit
   in columns -- the same 4px applies there and reads consistently. */
@media (max-width: 1024px) {
  .ch-rail--account .ch-rail__list {
    gap: 4px;
  }
  body.ll-layout-focused .ch-rail--account .ch-rail__item + .ch-rail__item {
    padding-top: 0;
  }
  /* THE BASIC HOME (dashboard) RAIL TIGHTENS TOO (requested 2026-10-13): reduce its row gap by 4px
     at 1024 and below, on the COLLAPSED rail only (the state it auto-collapses into at <=1024).
     Base is 6px (.ch-rail__list:914), so 2px here. `.ch-rail.ch-rail--collapsed` per the specificity
     note at :458; scoped away from the account and org rails, which carry their own 4px rule above. */
  .ch-rail.ch-rail--collapsed:not(.ch-rail--account):not(.ch-rail--org) .ch-rail__list {
    gap: 2px;
  }
}
/* THE ORG RAIL SAYS "YOU ARE HERE" THE SAME WAY (2026-09-25, requested: "Show Organizations as
   the active button we are on"). Listed with the account rail's rather than given its own rule:
   they are two instances of one idea, and `.ch-row.is-active` unqualified would also reach the
   Basic dashboard's rail, whose rows are ACTIONS -- none of them is ever a page you are on. */
.ch-rail--account .ch-row.is-active,
.ch-rail--org .ch-row.is-active {
  border-left: 4px solid #2A9D8F;
}

/* BOTH LABELS, because which one is on screen depends on the rail's state. `.ch-row__title`
   lives inside `.ch-row__body`, and `.ch-row__body` is CLIPPED in the collapsed rail (:446) --
   so the weight half of this treatment was invisible exactly when the rail is narrowest and the
   4px edge is the only other signal. `.ch-row__short` is the label that shows there (:471).
   THIS IS NOT A HYPOTHETICAL STATE: `classic-account-rail.js` auto-collapses the rail at 1024
   and below, and it shares its stashed collapse state with the dashboard rail, so someone who
   collapsed that one on the home page walks into this section collapsed.
   `.ch-row__short`'s own `font-weight: 650` is (0,2,0); this is (0,3,0) and wins. The expanded
   rail is unaffected -- `.ch-row__short` is `display: none` there (:396). */
.ch-rail--account .ch-row.is-active .ch-row__title,
.ch-rail--account .ch-row.is-active .ch-row__short,
.ch-rail--org .ch-row.is-active .ch-row__title,
.ch-rail--org .ch-row.is-active .ch-row__short {
  font-weight: 700;
}

/* ── BASIC VIEW: THE RAIL BESIDE A SELECTED ORGANISATION (2026-09-25, requested) ────────
   `templates/organization.hbs` mounts the rail in org mode; this is the layout that puts it
   beside the page instead of above it, and it is the same three-part shape the account rail and
   the org DIRECTORY already use: turn the shell into a row, let the workspace take the rest, and
   inset the pair from the viewport edge.

   `:not(.md-shell--org-directory)` KEEPS THE TWO APART. Both pages carry `.md-shell--org`, and
   the directory already has its own block further up this file with the SAME row treatment plus
   two things this page must not take: it zeroes the workspace's top margin AND padding to pull
   "My Organizations" level with the rail. The org detail pages have a different header
   (`.md-hero--org`, whose top padding was widened on large screens by an earlier request), so
   borrowing that would have moved content nobody asked to move. Hence a sibling block rather
   than adding a selector to theirs -- the layout is shared, the vertical trim is not.

   THE RAIL'S OWN INSET IS THE SAME 80 / 44 / 48 the other two Basic rails use, so all three
   pages start their rail on one line. */
body.ll-view-basic .md-shell--org:not(.md-shell--org-directory) {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: 80px !important;
}

body.ll-view-basic .md-shell--org:not(.md-shell--org-directory) > .md-workspace {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* ORG PAGES: NO TOP GAP, LEVEL WITH THE RAIL, AT EVERY WIDTH THE RAIL SITS BESIDE THEM.
   History: 2026-09-28 the Focused Rooms list only (requested: "remove the top margin and top
   padding" from the workspace); 2026-10-01 the rooms section in both layouts, then every org page
   (requested: content should not shift at 1024px and below, and should sit level with the top of
   the side menu -- "the alignment option").
   BOTH VALUES come from the base `.md-workspace` (`margin: 40px auto; padding: 40px ...`, both
   `!important`, app.scss), which is why this matches them with `!important` -- the same
   arrangement the org directory's block above uses for the same two boxes. That base also drops
   its margin to 0 and steps its padding 40 -> 52 -> 40 at 1024 and below, which is what moved
   these pages there (measured, Focused: rail 106 -> 70, page 186 -> 150; Gentle: rail 126 -> 90,
   page 206 -> 130 / 142); zeroing both here holds the page still across those steps, and the
   shell's 80px (above) holds the rail.
   ABOVE 900px only: at 900 and below the rail stacks over the page, and where the content lands
   under it is a layout change, not this gap. `margin-top` / `padding-top` longhands, so the sides
   and bottom are untouched. The page's own header keeps its inset (`.md-hero--org`'s padding). */
@media (min-width: 901px) {
  body.ll-view-basic .md-shell--org:not(.md-shell--org-directory) > .md-workspace {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* Stacks where every other Basic rail stacks: at 900 and below `.ch-rail` is already full-width
   and built to sit ABOVE the content, so left as a row it would squeeze the org page into
   whatever was left. Same breakpoint as the others; the 48px header clearance they take is not
   taken here (2026-10-01, see the rule). */
@media (max-width: 900px) {
  body.ll-view-basic .md-shell--org:not(.md-shell--org-directory) {
    flex-direction: column !important;
    /* No 48px top padding here any more (2026-10-01, the no-shift request above): the shell keeps
       its 80px, so the stacked rail starts where the side rail did. */
  }
}
@media (max-width: 767px) {
  body.ll-view-basic .md-shell--org:not(.md-shell--org-directory) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 1500px) {
  .ch-grid:not(.ch-grid--extras) .ch-tile--big {
    flex-direction: row;
    align-items: stretch;
    min-height: clamp(91px, 12vh, 125px);
    padding: 10px 12px;
    gap: 0;
    --ch-zone-gap: 0;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 4px 6px 6px;
    gap: 12px;
    background: none;
    box-shadow: none;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__info::after {
    display: none;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin-left: 0;
    padding: 0 12px 0 6px;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__sub {
    display: none;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__chip {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__icon {
    width: 24px;
    height: 24px;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__label {
    margin-top: 0;
    font-size: clamp(15px, 0.68rem + 0.42vw, 19px);
    line-height: 1.2;
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__rule {
    font-size: 21px;
    color: var(--ch-compact-arrow, rgba(27, 54, 93, 0.88));
  }
  .ch-grid:not(.ch-grid--extras) .ch-tile--big .ch-tile__more {
    display: none;
  }
}
.ch-grid--extras .ch-tile--silver {
  flex-direction: row;
  align-items: stretch;
  min-height: clamp(91px, 12vh, 125px);
  padding: 10px 12px;
  gap: 0;
  --ch-zone-gap: 0;
}
.ch-grid--extras .ch-tile--silver .ch-tile__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 4px 6px 6px;
  gap: 12px;
  background: none;
  box-shadow: none;
}
.ch-grid--extras .ch-tile--silver .ch-tile__info::after {
  display: none;
}
.ch-grid--extras .ch-tile--silver .ch-tile__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  padding: 0 12px 0 6px;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.ch-grid--extras .ch-tile--silver .ch-tile__sub {
  display: none;
}
.ch-grid--extras .ch-tile--silver .ch-tile__chip {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.ch-grid--extras .ch-tile--silver .ch-tile__icon {
  width: 24px;
  height: 24px;
}
.ch-grid--extras .ch-tile--silver .ch-tile__label {
  margin-top: 0;
  font-size: clamp(15px, 0.68rem + 0.42vw, 19px);
  line-height: 1.2;
}
.ch-grid--extras .ch-tile--silver .ch-tile__rule {
  font-size: 21px;
  color: var(--ch-compact-arrow, rgba(27, 54, 93, 0.88));
}
.ch-grid--extras .ch-tile--silver .ch-tile__more {
  display: none;
}
.ch-grid--extras .ch-tile--silver {
  padding: 6px 12px;
  min-height: 56px;
}
@media (max-width: 1024px) {
  .ch-grid--extras .ch-tile--silver {
    padding: 2px 12px;
  }
}
.ch-grid--extras .ch-tile--silver .ch-tile__info {
  grid-template-areas: none;
  grid-template-columns: none;
  row-gap: 0;
}
.ch-grid--extras .ch-tile--silver .ch-tile__label {
  font-size: clamp(15px, 0.68rem + 0.42vw, 19px);
}

@media (min-width: 1025px) {
  .ch-card--intro {
    margin-bottom: 8px;
  }
  .ch-grid--extras {
    margin-top: 10px;
    padding-top: 22px;
  }
  .ch-grid {
    gap: 16px;
  }
}
@media (min-width: 1301px) {
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .ch-grid--extras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1300px) {
  .ch-grid:not(.ch-grid--extras) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  .ch-grid--extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .ch-grid:not(.ch-grid--extras),
  .ch-grid--extras {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ch-rail .ch-row__arrow {
  display: none;
}

.ch-grid--extras .ch-tile--silver .ch-tile__rule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(156, 163, 175, 0.38);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 251, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 3px rgba(17, 26, 46, 0.1);
  font-size: 0;
  line-height: 0;
  color: #1B365D;
}
.ch-grid--extras .ch-tile--silver .ch-tile__rule::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  border-radius: 0 1.5px 0 0;
  transform: translateX(-1.5px) rotate(45deg);
}

@media (max-width: 1024px) {
  .ch-intro__cta-arrow {
    display: none;
  }
}
.ll-viewswitch {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--ll-viewswitch-offset, 12px);
}
@media (max-width: 766px) {
  .ll-viewswitch {
    position: static;
  }
}

.app-navbar__nav-header:not(:has(.app-navbar__home-actions)) {
  --ll-viewswitch-offset: 24px;
}

@media (max-width: 767px) {
  #within_ember:has(> header.header-index-with-dark-toggle:not(.header--unauthenticated):not(.header--hidden) .app-navbar-authenticated-inner .ll-viewswitch):not(:has(> header #speak)):not(:has(> header #nav_header)) {
    --ll-navbar-row2: 44px;
  }
  .app-navbar-authenticated-inner:has(.ll-viewswitch) {
    flex-wrap: wrap;
    row-gap: 11px;
  }
  .app-navbar-authenticated-inner:has(.ll-viewswitch) h1.app-navbar__brand {
    min-height: 56px;
  }
  .app-navbar-authenticated-inner:has(.ll-viewswitch) .ll-viewswitch {
    order: 99;
    flex: 0 0 100%;
  }
  .app-navbar-authenticated-inner:has(.ll-viewswitch) > .app-navbar__nav-header {
    --ll-viewswitch-offset: -25px;
  }
}
.ll-viewswitch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
  box-shadow: 0 2px 6px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #1B365D;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.ll-viewswitch__trigger:hover,
.ll-viewswitch__trigger:focus-visible {
  background: #fff;
  border-color: rgba(76, 134, 216, 0.45);
}

.ll-viewswitch__icon {
  flex: 0 0 auto;
}

.ll-viewswitch__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(27, 54, 93, 0.5);
  transition: transform 0.18s ease;
}

.ll-viewswitch.is-open .ll-viewswitch__caret {
  transform: rotate(180deg);
}

.ll-viewswitch__menu {
  display: none;
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
}
@media (min-width: 767px) {
  .ll-viewswitch__menu {
    min-width: 330px;
  }
}
@media (max-width: 766px) {
  .ll-viewswitch__menu {
    top: calc(100% + 14px);
    left: 12px;
    right: 12px;
    min-width: 0;
    max-height: calc(100vh - 96px - var(--ll-navbar-row2, 0px));
    max-height: calc(100dvh - 96px - var(--ll-navbar-row2, 0px));
    overflow-y: auto;
  }
}
.ll-viewswitch__menu {
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 13px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F6F8FB 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px rgba(17, 26, 46, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ll-viewswitch.is-open .ll-viewswitch__menu {
  display: block;
}

.ll-viewswitch__intro {
  width: 0;
  min-width: 100%;
  margin: 0 0 2px;
  padding: 6px 11px 7px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(27, 54, 93, 0.72);
  cursor: default;
}

.ll-viewswitch__group {
  padding: 5px 11px 1px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.72);
  cursor: default;
}

.ll-viewswitch__sep {
  height: 1px;
  margin: 3px 0;
  background: rgba(27, 54, 93, 0.1);
}

.ll-viewswitch__item {
  display: grid;
  grid-template-columns: 15px 1fr;
  column-gap: 9px;
  width: 100%;
  padding: 6px 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  text-align: left;
  color: #1B365D;
  cursor: pointer;
  transition: background 0.14s ease;
}

.ll-viewswitch__item::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background-color: transparent;
}

.ll-viewswitch__item.is-selected::before {
  background-color: #4C86D8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%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='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ll-viewswitch__item-label {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  font-size: 16px;
  font-weight: 600;
}

.ll-viewswitch__item-tag {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(76, 134, 216, 0.13);
  color: #4C86D8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ll-viewswitch__item-tag--soon {
  background: rgba(242, 185, 90, 0.45);
  color: #5F4B18;
}

.ll-viewswitch__item-desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(27, 54, 93, 0.72);
}

.ll-viewswitch__item:hover,
.ll-viewswitch__item:focus-visible {
  background: rgba(76, 134, 216, 0.12);
}

#nav_header .ll-viewswitch__trigger {
  padding: 6px 10px;
}

/* 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. */
/* SLIGHT GLASSMORPHISM FOR A CONTROL sitting on a dark frosted bar -- board-alt's header
   buttons, and the simulated ones on the create-board-new Basic preview.
   Distinct from `glass-bar-surface` above, which is a light SURFACE; this is the small-object
   treatment that goes ON one.

   IT DELIBERATELY DOES NOT TOUCH THE FILL. Translucency is the obvious way to make a control
   glassy, and here it is the wrong one: measured against the darkened bar (#282F3A), the
   identity button (#46505F) sits at 1.65:1 SOLID and the speak chips at 2.93:1, both already
   under the 3:1 WCAG 1.4.11 needs for a UI boundary, and thinning the fill pushes them
   further down. So the fill is left exactly as each control defines it -- `background-image`
   is a longhand and does not disturb the `background` shorthand's colour -- and the glass is
   carried by three things that ADD contrast instead of removing it:

     - an inset white RING, which is what actually restores the boundary. At 0.26 it measures
       3.14:1 against the bar on the worst control (identity) and 3.60-5.43:1 on the rest, so
       every control ends up with a boundary it did not have before this was applied.
     - a top specular highlight, the lit edge that reads as glass thickness.
     - a real backdrop blur. It has something to do: these sit on a bar that is itself
       translucent over the page, so what is behind them genuinely varies.

   `$ring` and `$sheen` are parameters because the preview's bar is shorter and lighter than
   the real header, not so callers can invent their own values. */
/* 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.
   NOT ON A DIALOG'S [data-autofocus] TITLE (2026-10-11). components/modal-dialog.js focuses that
   non-interactive heading (tabindex -1, not in the Tab order) so a screen reader announces it first;
   on a fresh page load the browser counts that scripted focus as keyboard focus, so the dialog
   opened with its title boxed in navy. It is not a control, so 2.4.7 does not ask for a ring; the
   controls Tab reaches next keep theirs. In the same `:not()` list, which keeps this rule's
   specificity at (1,2,0) so every override below still wins exactly as before. */
#within_ember *:focus-visible:not(.md-board-detail-edit-toolbar__search-input, [data-autofocus]) {
  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),
body.ll-layout-focused #within_ember .ch-card:not(.ch-card--intro) *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
body.ll-layout-focused #within_ember .ch-comm *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
body.ll-layout-focused #within_ember .ch-menu *:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
body.ll-layout-focused #within_ember .md-card--attention .md-card__view-all:focus-visible:not(.md-board-detail-edit-toolbar__search-input),
body.ll-layout-focused #within_ember .md-card--attention .md-attention__all: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(195, 162, 92, 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(195, 162, 92, 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(195, 162, 92, 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). */
/* 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 */
/* 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;
}

/* The GHOST outlet wrapper the comment above promises to collapse — the case was never
   actually written, so it kept `flex: 1 1 auto` from the rule above and split #content's
   column with #index_view. Measured on the classic home page at 1600x1200: the ghost took
   211px and pushed #index_view to top=237; at 1600x800 it took 22px and #index_view sat at
   top=48.5. Half of every extra pixel of viewport height went to the ghost, which read as
   the page being vertically centred (reported 2026-09-03).

   `:has(+ #index_view)` is what makes this safe to put in a shared file: the REAL wrapper
   CONTAINS #index_view, so only a wrapper that is a preceding SIBLING of it can match, and
   that is the ghost by definition. Matching on "no .md-shell inside" instead would also
   collapse the legitimate outlet on every non-dashboard route under this shell. */
#within_ember:has(.page-footer) #content.index.with_user > .ember-view:has(+ #index_view),
#within_ember.bento-page-with-footer #content > .ember-view:has(+ #index_view) {
  flex: 0 0 auto;
  min-height: 0;
}

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

/* 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 */
/* Authenticated-view main content: fit content height (no fixed height); overflow-x hidden to avoid horizontal scroll */
/* 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: var(--ll-navbar-row2, 0px) !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. 0 except when the navbar grows a second row for the View button at <=767px (_view-switcher.scss, TWO ROWS); then the page moves down with it. */
  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 {
  /* The load-error panel carries its own light card (see `.board-load-error`). In this mode
     that card has to go dark, or the white ink below sits on a near-white fill. Kept as a
     flat near-black with a visible edge rather than a gradient — this mode exists to remove
     tonal subtlety, not to restate it. */
}
#within_ember.color_black .board-load-error {
  background: #0a0a0a;
  border-color: #555;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92);
}
#within_ember.color_black {
  /* The title sets `color: $la-navy` explicitly, so unlike the rest of the panel it does NOT
     inherit the white above — without this it would be navy on the near-black card. */
}
#within_ember.color_black .board-load-error__title {
  color: #fff;
}
#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 {
  /* px, not rem — `html { font-size: 10px }`, so the 1.05rem this carried was a 10.5px
     button label. See the note on `.board-load-error__title`. The 48px floor already
     cleared the 44px WCAG 2.5.5 target minimum and is left alone; only the label grows. */
  font-size: 18px;
  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;
  /* Deliberately the SMALLEST tier in the panel — it is the fallback, not the way out.
     The two buttons above are the primary actions. 15px, not 1.05rem: that was rendering
     at 10.5px against a 10px root. 15px is the floor this panel goes to. */
  font-size: 15px;
  /* Navy at 0.85 rather than black at 0.55. On the panel's card that is 7.00:1 against
     4.61:1 — the old value cleared AA but with almost nothing to spare, and this is the
     one control that is a plain text link rather than a button. */
  color: rgba(27, 54, 93, 0.85);
  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: #1B365D;
}

/* A SELF-CONTAINED SURFACE, not text on the page ground. This panel renders over whatever
   the board area happens to be — the default white, a user's themed dark board, or the
   `.color_black` high-contrast mode — so any colour chosen for bare text is wrong on at
   least one of them. That is the bug in the screenshot: near-black copy on a dark slate
   board. Giving the panel its own card fixes the contrast once for every ground instead of
   once per theme. Measured on the card's darkest stop (#ECF1FA): message 10.70:1, the Try
   Again link 7.00:1; the card itself reads 6.91:1 against a mid-slate board ground.
   `.color_black` re-darkens the card below (search `.color_black`) — its white ink would
   otherwise land on this light fill. */
.board-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  /* `auto` inline margin is what centres the panel. It could not centre before: this markup
     replaces `{{outlet}}`, so it has no `.board` ancestor and `.board .board_status`
     (app.scss:8572) — the rule carrying `text-align: center` — never applied to it. */
  margin: 32px auto;
  padding: 36px 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff 0%, #ECF1FA 100%);
  border: 1px solid rgba(27, 54, 93, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
  color: #1B365D;
}

/* THREE TIERS, and a type scale sized for AAC rather than for the web default. The panel
   was a single sentence with nothing above it, so there was no shape to read: what went
   wrong, what it means, and what to do all arrived at one weight. Title carries the verdict,
   message explains it, and the buttons below are the only thing to act on.
   Measured on the card's darkest stop (#ECF1FA): title 10.70:1, message 6.42:1.
   -------------------------------------------------------------------------------------
   PX THROUGHOUT, NEVER rem/em. Bootstrap sets `html { font-size: 10px }`
   (node_modules/bootstrap/dist/css/bootstrap.css:1081), so a rem here is a TENTH of what it
   reads as: this block was written as 1.05-1.75rem and rendered 10.5px to 17.5px — four of
   the five tiers under 14px, which is why the panel looked tiny. Same trap, same fix, as
   `.md-home-boards-picker__load-more-btn` (app.scss:5595). A future edit that "tidies" these
   back into rem will silently shrink the panel by 37%. */
.board-load-error__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  max-width: 520px;
  color: #1B365D;
}

.board-load-error__message {
  /* The explanatory tier, separated from the title by weight and colour rather than by being
     small — at AAC sizes the supporting line still has to be comfortably readable, which is
     why it is muted only to 0.82 and sits well above the 14px floor. */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
  color: rgba(27, 54, 93, 0.82);
}

.board-load-error__retrying {
  font-size: 17px;
  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;
  /* The home-board icon (a dark symbol image) is LIGHT here, on the dark board header (2026-10-12,
     requested: "on basic view, the home board icon is dark, but on board-alt pages it needs to be
     light"). Same white as the header's text (rgba(255,255,255,0.9)). */
}
#within_ember.board-alt-view #board_id .board-id__home-icon,
#within_ember.board-alt-view #nav_header #board_id .board-id__home-icon {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

#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. */
/* ── 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. */
/* The shared board menu's anchor. `.dropdown` already carries `position: relative` from
   Bootstrap, but this is stated because the menu's placement now DEPENDS on it -- a future
   edit dropping the Bootstrap class would otherwise silently reparent the menu to the page. */
.ll-board-more-wrap {
  position: relative;
}

.la-board-hamburger-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.la-board-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Anchored to the hamburger's LEFT edge so the menu opens down-and-to-the-RIGHT.
     It was `right: 0`, which pins the two right edges together and makes a menu wider
     than its trigger grow LEFTWARDS — and this trigger sits at the left end of the
     header, so a 240px-min-width menu ran off the side of the page and clipped its own
     labels. Same correction, same reason, as `.ll-viewswitch__menu` in
     _view-switcher.scss: anchor a dropdown on the side its trigger is nearest. */
  /* CENTRED UNDER THE TRIGGER (2026-09-22). This was `left: 0`, which pinned the menu's left
     edge to the trigger's and opened it down-and-to-the-RIGHT -- correct while the trigger was
     the hamburger at the far left of the header, wrong now the menu hangs off the More button
     in the middle of the bar, where it read as sitting beside More rather than belonging to it.
     `translateX(-50%)` centres it on the trigger regardless of the trigger's width, so it holds
     for both the wide "More ▾" button and the zero-width wrapper the hamburger anchors to. */
  left: 50%;
  transform: translateX(-50%);
  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. */
  /* ONLY SCROLLS WHEN IT GENUINELY CANNOT FIT. This was `calc(100vh - 100px)`, a reserve that
     did not match where the menu actually starts: measured, its top sits at 65-66px in both
     anchoring modes, so 100px left ~34px unused and the menu scrolled while its content still
     had room on the page -- at a 700px-tall window it capped itself at 598px against 606px of
     content that would have fitted. 88px is the measured top plus a ~22px bottom margin, so the
     cap now tracks the space that is really available.
     Re-measure this if the header's height changes: the number encodes where the menu begins. */
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}

/* THE X CENTRING HAS TO BE REPEATED HERE, not just on the rule (2026-09-22). An animated
   `transform` overrides the declared one for as long as the animation is applied, so keyframes
   that set only `translateY` were wiping the `translateX(-50%)` that centres the menu under its
   trigger -- measured, the menu sat exactly half its own width (120px) to the right. Used by
   `.la-board-mobile-menu` alone, so folding the centring in is safe; if either the keyframes or
   the rule's transform changes, the other has to change with it. */
@keyframes la-board-menu-fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* THE LEFT-ANCHORED TWIN, for the widths where the HAMBURGER is the trigger. Identical to the
   one above except it carries no X shift, because the menu is not centred in that mode.
   IT HAS TO BE A SEPARATE ANIMATION rather than a `transform` override in the media query:
   an animated transform beats the declared one, so a rule setting `transform: none` there
   would still be overridden by these keyframes for the life of the animation -- the same trap
   that put the menu 120px off-centre before the centring was folded into the keyframes. */
@keyframes la-board-menu-fade-in-left {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* LEFT-ANCHORED WHEN THE HAMBURGER IS THE TRIGGER (2026-09-22), i.e. opening down-and-to-the-
   RIGHT from it. Centring is right for the More button, which is mid-bar and wide; it is wrong
   here, because at these widths the More wrapper the menu hangs off is ZERO-WIDTH, so centring
   a 240px menu on it puts 120px of the menu off the left edge of a narrow screen and clips it.
   The two widths match each view's collapse point, the same pair used for `.ll-compact-only`. */
@media (max-width: 460px) {
  #within_ember.board-alt-view .la-board-mobile-menu {
    left: 0;
    transform: none;
    animation-name: la-board-menu-fade-in-left;
    /* CLEARS THE HAMBURGER. `top: calc(100% + 8px)` works off the More WRAPPER, and at these
       widths that wrapper is zero-height (its button is hidden), so 100% resolves to 0 and the
       menu opened 14px ABOVE the hamburger's bottom edge -- measured -- overlapping the very
       control that opened it. 30px is the hamburger's height less the wrapper's own top offset,
       plus the same 8px breathing gap the centred variant gets. */
    top: calc(100% + 30px);
  }
}
@media (max-width: 1500px) {
  #within_ember:not(.board-alt-view) .la-board-mobile-menu {
    left: 0;
    transform: none;
    animation-name: la-board-menu-fade-in-left;
    /* CLEARS THE HAMBURGER. `top: calc(100% + 8px)` works off the More WRAPPER, and at these
       widths that wrapper is zero-height (its button is hidden), so 100% resolves to 0 and the
       menu opened 14px ABOVE the hamburger's bottom edge -- measured -- overlapping the very
       control that opened it. 30px is the hamburger's height less the wrapper's own top offset,
       plus the same 8px breathing gap the centred variant gets. */
    top: calc(100% + 30px);
  }
}
/* MENU ITEMS THAT ONLY APPEAR ONCE THE BAR HAS GIVEN UP THE SAME CONTROL. Hidden by default
   and revealed at each view's own collapse width, so the control is reachable in exactly one
   place at any width -- never duplicated on the bar AND in the menu, never missing from both.
   THE TWO WIDTHS ARE NOT THE SAME, and that is the point: board-alt drops its copies button at
   640px, the classic board view at 1500px, matching where each one's bar control actually goes.
   A single breakpoint here would leave the classic view with no route to Copies between 641px
   and 1500px. Keep these in step with the `display: none` rules on `.ll-copies-slot`. */
.ll-compact-only {
  display: none !important;
}

@media (max-width: 640px) {
  #within_ember.board-alt-view .ll-compact-only {
    display: flex !important;
  }
}
@media (max-width: 1500px) {
  #within_ember:not(.board-alt-view) .ll-compact-only {
    display: flex !important;
  }
}
.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. */
/* THE COLLAPSE ITSELF, stated once and applied at two different widths below. It was a
   single `@media (max-width: 1500px)` block covering both board views; board-alt now folds
   at 460px instead (requested 2026-09-22), and duplicating fifty lines of `!important`
   selectors to say the same thing twice is how the two would drift apart. */
/* ── Board page responsive: collapse action buttons into hamburger ──
   THE CLASSIC BOARD VIEW still collapses at 1500px. That number is not arbitrary: it was
   raised from 1024px so the right-side action cluster never overruns the header, so it is
   left exactly where it was rather than dragged down with board-alt. */
@media (max-width: 1500px) {
  #within_ember:not(.board-alt-view) {
    /* Show hamburger */
  }
  #within_ember:not(.board-alt-view) #inner_header .la-board-hamburger {
    display: flex !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Exit Boards (`#board_done`) is NOT hidden here — it folds into the hamburger at
       ≤640px instead, in the block further down (search "EXIT BOARDS FOLDS INTO THE
       HAMBURGER HERE"). It used to go at this same 1500px breakpoint, which took the
       primary way out of a board off screen on every laptop. */
    /* Hide the action buttons — use class on #normal_mode children. Exit Boards is NOT in
       this list: it sits OUTSIDE `#normal_mode`, so the selector below never reached it and
       the two rules that did have moved to the ≤640px block. */
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .btn,
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .btn-group,
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .dropdown:not(.ll-board-more-wrap),
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode a.btn,
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode span.btn {
    display: none !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Keep visible: back button (has glyphicon-arrow-left) */
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode a.btn:has(.glyphicon-arrow-left) {
    display: inline-flex !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Keep visible: speak mode button (#speak_mode) */
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode #speak_mode {
    display: inline-flex !important;
    margin-left: 8px !important;
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) {
    display: inline-flex !important;
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) .btn {
    display: inline-flex !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Keep visible: hamburger */
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar #normal_mode .la-board-hamburger {
    display: flex !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Shrink board ID text */
  }
  #within_ember:not(.board-alt-view) #board_id {
    font-size: 14px !important;
  }
  #within_ember:not(.board-alt-view) {
    /* Reduce header padding */
  }
  #within_ember:not(.board-alt-view) .nav-header__board-bar {
    gap: 4px !important;
  }
  #within_ember:not(.board-alt-view) header #normal_mode .btn {
    padding: 6px 10px !important;
    font-size: 14px !important;
    height: 36px;
  }
}
/* BOARD-ALT COLLAPSES AT 460px, NOT 1500px (requested 2026-09-22, for Focused and Gentle
   alike: "it shouldn't do that until 460px width or lower"). board-alt was folding its
   material into the hamburger on every laptop because it shares `.nav-header__board-bar`
   with the classic board view and therefore inherited that view's breakpoint.
   SCOPED WITH `#within_ember.board-alt-view` rather than the breakpoint simply being
   lowered, because lowering it would have taken the classic board view down with it and
   reintroduced the header overrun 1500px exists to prevent. Between 461px and 1500px
   board-alt now keeps its buttons on the bar, which is the whole point of the request. */
@media (max-width: 460px) {
  #within_ember.board-alt-view {
    /* Show hamburger */
  }
  #within_ember.board-alt-view #inner_header .la-board-hamburger {
    display: flex !important;
  }
  #within_ember.board-alt-view {
    /* Exit Boards (`#board_done`) is NOT hidden here — it folds into the hamburger at
       ≤640px instead, in the block further down (search "EXIT BOARDS FOLDS INTO THE
       HAMBURGER HERE"). It used to go at this same 1500px breakpoint, which took the
       primary way out of a board off screen on every laptop. */
    /* Hide the action buttons — use class on #normal_mode children. Exit Boards is NOT in
       this list: it sits OUTSIDE `#normal_mode`, so the selector below never reached it and
       the two rules that did have moved to the ≤640px block. */
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .btn,
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .btn-group,
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .dropdown:not(.ll-board-more-wrap),
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode a.btn,
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode span.btn {
    display: none !important;
  }
  #within_ember.board-alt-view {
    /* Keep visible: back button (has glyphicon-arrow-left) */
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode a.btn:has(.glyphicon-arrow-left) {
    display: inline-flex !important;
  }
  #within_ember.board-alt-view {
    /* Keep visible: speak mode button (#speak_mode) */
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode #speak_mode {
    display: inline-flex !important;
    margin-left: 8px !important;
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) {
    display: inline-flex !important;
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .btn-group:has(#speak_mode) .btn {
    display: inline-flex !important;
  }
  #within_ember.board-alt-view {
    /* Keep visible: hamburger */
  }
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .la-board-hamburger {
    display: flex !important;
  }
  #within_ember.board-alt-view {
    /* Shrink board ID text */
  }
  #within_ember.board-alt-view #board_id {
    font-size: 14px !important;
  }
  #within_ember.board-alt-view {
    /* Reduce header padding */
  }
  #within_ember.board-alt-view .nav-header__board-bar {
    gap: 4px !important;
  }
  #within_ember.board-alt-view header #normal_mode .btn {
    padding: 6px 10px !important;
    font-size: 14px !important;
    height: 36px;
  }
  /* Exit Boards folds here for board-alt, rather than at the 640px block below that still
     governs the classic board view. Same reasoning as that block's note -- it is the
     primary way out of a board, so it is the LAST thing to leave the header, not the
     first -- only the width differs. */
  #within_ember.board-alt-view #inner_header #board_done,
  #within_ember.board-alt-view .nav-header__board-bar #board_done,
  #within_ember.board-alt-view #inner_header:has(#nav_header) #board_done {
    display: none !important;
  }
}
@media (max-width: 640px) {
  /* EXIT BOARDS FOLDS INTO THE HAMBURGER HERE, not at the 1500px collapse above
     (moved 2026-09-15). It is the primary way out of a board, and at 1500px it vanished
     from the header on every laptop — leaving the hamburger, whose Exit Boards row is the
     last item in a long menu, as the only route out. The rest of the action cluster still
     collapses at 1500px: those are secondary controls and the header genuinely has no
     room for them, which is what that breakpoint was raised for.

     All four selectors that hid it are gathered here. `#board_done` sits OUTSIDE
     `#normal_mode`, so the `#normal_mode .btn` hides in the 1500px block never reached it
     — these four were the only thing hiding it. The board-alt / board-view pair is far
     higher specificity than the first two and has to travel with them, or it alone would
     keep the button hidden up to 1500px. */
  /* BOARD-ALT IS EXCLUDED HERE and folds Exit Boards at 460px instead, with the rest of
     its cluster (requested 2026-09-22). The first two selectors were unscoped, so they
     reached board-alt too -- `:not(.board-alt-view)` is what keeps them off it; without
     that the button would still have vanished at 640px and board-alt would have gone on
     collapsing material well above 460. */
  #within_ember:not(.board-alt-view) #inner_header #board_done,
  #within_ember:not(.board-alt-view) .nav-header__board-bar #board_done,
  #within_ember.board-view #inner_header:has(#nav_header) #board_done {
    display: none !important;
  }
  #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;
  }
  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;
}

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

/* 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).

   The horizontal padding insets BOTH end clusters at once (requested 2026-09-15):
   Speak Mode + the hamburger were sitting almost flush against the left edge and the
   identity avatar against the right. `#nav_header` (left cluster) and `#identity`
   (right cluster) are SIBLING flex children of this element, not nested, so padding on
   the shared parent moves them inward symmetrically — one rule instead of a left inset
   here and a right inset on `#identity`, which is global and would have shifted the
   avatar on every other page too. Vertical padding stays 0: `min-height` above owns the
   header's height, and adding vertical padding on top of it would grow the bar. */
#within_ember.board-alt-view header:has(#normal_mode) #inner_header {
  min-height: 84px !important;
  height: auto !important;
  padding: 0 18px !important;
  /* 4px GUTTERS AT <=1024px (requested 2026-09-22), so the header spends its width on the
     action cluster rather than on padding once the bar gets tight.
     NESTED IN THIS RULE rather than written as its own block, because this selector is
     (0,2,2) with `:has()` and `!important` -- a separate `#within_ember.board-alt-view
     #inner_header` rule is (0,2,1) and loses to it no matter where it sits in the file or
     how many `!important`s it carries. That was tried first and measured as a no-op.
     Left/right only: `min-height` above owns the bar's height and the base rule's vertical
     0 is deliberate, so only the horizontal values move. */
}
@media (max-width: 1024px) {
  #within_ember.board-alt-view header:has(#normal_mode) #inner_header {
    padding-left: 4px !important;
    padding-right: 4px !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;
}

/* GLASSMORPHISM, board-alt speak bar (requested).
   THE GLASS IS ON `#inner_header` -- background, blur and sheen all on the one element, which
   is where the bar's colour has always lived.

   The outer `header.speaking` is therefore TRANSPARENT rather than charcoal. That is not a
   spare change: `#inner_header` is its child, so an opaque parent is the only thing the
   child's `backdrop-filter` would ever see, and the blur would frost a flat colour and render
   as an ordinary solid bar. Clearing the parent lets the glass see the PAGE -- the header is
   `position: fixed`, so board content scrolls underneath it and there is something real to
   frost. `#inner_header` fills the header box (no padding or margin on `header.speaking` in
   this state, checked), so nothing shows through around it.

   SAFE TO PUT A BACKDROP-FILTER HERE, in this state, and it was checked rather than assumed:
   `backdrop-filter` makes an element the containing block for every `position: fixed`
   descendant, and the compiled CSS has NINE rules fixing `#inner_header` descendants
   (#header_search, the mobile auth nav, the support button, the create-board link). All nine
   need `.app-navbar` or `#nav_header` inside it, and
   `controllers/application.js#useAppNavbarInHeader` returns FALSE for `user.board-alt.index`,
   so board-alt never renders the navbar and this selector's `:has(#speak)` state renders the
   speak bar instead. If a future change puts the navbar back into board-alt's header, this
   blur must move to a pseudo-element first.

   ALPHA IS MEASURED, NOT EYEBALLED. The bar carries white text. On plain charcoal that is
   8.16:1; translucency erodes it, and the WORST case is the bar scrolled over white content.
   At 0.82 -- the value that looks right -- white text falls to 4.11:1 and FAILS AA. At 0.92 it
   holds 5.15:1 in that worst case and 6.22:1 over ordinary dark content. Not headroom an AAC
   surface should trade for a finish. The 0.10 white film is counted in both figures. */
#within_ember.board-alt-view header.speaking:has(#speak) {
  background: transparent !important;
}

#within_ember.board-alt-view header.speaking:has(#speak) #inner_header {
  /* Darkened in step with the non-speak bar above (same 28%-toward-black mix and the same
     halved sheen) so the two board-alt header states do not drift apart. Alpha can relax
     0.92 -> 0.86 here precisely BECAUSE the base is darker now: the 0.92 floor existed to
     protect white text on the lighter $brand-charcoal-blue, and that constraint moves with
     the colour. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.01) 100%), rgba(50.4, 57.6, 68.4, 0.86) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  /* The glass EDGE, not the light border this rule used to strip. The old `border-bottom:
     none` existed because the base `#inner_header:has(#speak)` rule leaks a pale border meant
     for light speak pages, which showed as a white sliver against the dark surround. This is a
     deliberate translucent-white hairline, which is what gives a glass panel its edge. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.16) !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;
}
.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;
}

/* Containing block for the absolutely-positioned board-intro button
   (`.extra-btn`, templates/application.hbs). That control used to be a CHILD of
   the sentence bar, which anchors it via `.button_list { ... position: relative }`
   further down this file. It had to move out of the bar to stop nesting a
   role="button" inside an <a href> (no-nested-interactive). Without a containing
   block here the next positioned ancestor is the FIXED header: measured +776px
   left / +17.5px top on dev, landing it beside the account avatar.

   DELIBERATELY UNPREFIXED. The rest of the speak-bar styling is scoped
   `#inner_header:has(#speak)`, but this one declaration must not be: an engine
   without `:has()` support would drop the whole block and take the anchor with
   it, reproducing the +776px bug, and this repo ships Cordova (Android System
   WebView) and Electron alongside the browserslist targets in config/targets.js.
   Before the control was un-nested the bar anchored it without needing `:has()`,
   so scoping this would make the fix strictly more fragile than what it replaced.
   The eval header carries the same declaration, also without `:has()`, in
   `#speak.md-eval-header .speak-bar__button-list-wrap` (added 2026-05-04,
   0e42a9471, for the quick-assessment layout) -- which is why eval mode never
   showed this bug. This matches that shape.

   This also matches the wrap in templates/brief.hbs, which has no absolutely
   positioned descendants, so the rule is inert there.

   Guarded by tests/integration/speak-bar-anchor-test.js: delete this, or re-scope
   it behind a selector the test does not reproduce, and that test goes red. No
   other CI gate can see it. */
.speak-bar__button-list-wrap {
  position: relative;
}

/* 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 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__logo-svg {
  height: 22px !important;
  width: auto !important;
  display: block !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;
}

.app-navbar .app-navbar__brand .nav-header__brand {
  display: inline-flex !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 {
  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;
}

/* 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 {
  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 {
  padding-top: 0 !important;
  padding-bottom: 5px !important;
}

/* NOTE: this global `h2` hammer is why `.ch-panel__title` / `.ch-card__title` in
   _classic-home.scss have to carry `!important` on font-size — an `!important`
   declaration can only be beaten by another one, regardless of specificity or order.
   Left as-is deliberately: it applies to every <h2> in the app and re-scoping it is a
   change with app-wide blast radius that does not belong in a classic-view fix. */
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;
}

/* ── 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 */
.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,
.page-footer .icons {
  padding-left: 10px;
  opacity: 0.7;
}

/* Size the footer social icons explicitly.
   They used to be inline 24x24 base64 PNGs, so their intrinsic size WAS the layout and no
   rule was needed. They are real assets now (x.svg, facebook.png) and facebook.png is
   64x64 to match every other logo in that folder — without this it would render at 64px
   beside 24px siblings. `.icons` appears in exactly these eight footer spans and nowhere
   else (page-footer.hbs, footer.hbs, brief.hbs and the Rails shared/_footer.html.erb), so
   this cannot reach anything unintended. Both selectors: the markup is `<footer>` in some
   of them and `.page-footer` in others. */
footer .icons img,
.page-footer .icons img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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

.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%;
  /* No vertical margin: the button strip sits inside `.la-utterance-card--message`,
     which owns the spacing between the quote and the strip. The old
     `-5px 0 20px` pulled it up under the quote and left a 20px tail that showed
     as dead space above the card's own padding. `#utterance` exists in exactly
     one template (templates/utterance.hbs:55) and no JS reads it, so this rule
     is edited in place rather than overridden. */
  margin: 0;
  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);
  }
}
/* DROPPED-IMAGE SPINNER (2026-10-02): covers a board button while an image dropped onto it in edit
   mode uploads (services/content-grabbers.js, drop_spinner_show). The button is its positioning
   context; the veil blocks clicks on it until the upload settles. */
.button:has(> .ll-drop-uploading) {
  position: relative;
}

.ll-drop-uploading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
}

/* "LIMITED" BADGE (2026-10-02): marks a Remote Modeling entry the signed-in supporter cannot use in
   full yet (utils/remote_modeling.js); a click explains why. One pill for every entry that shows
   it (Basic communicator menu, Modern caseload row and tiles, account Extras). */
.md-limited-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(26, 123, 122, 0.55);
  background: #FFFFFF;
  color: #1A7B7A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

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

/* 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;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18) !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(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 14px 30px rgba(27, 54, 93, 0.26), 0 4px 10px rgba(27, 54, 93, 0.14) !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.84) !important;
}
.md-home-boards-picker__board .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.78) !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.84) !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.8) !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.8) !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: #115C5B !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__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-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-submit {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  min-height: 44px;
  height: auto;
  align-self: stretch;
}

.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__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;
  /* SURFACE COMES FROM THE SHARED CHIP (requested 2026-09-14). This rule ties `board-card-
     modern` on source order — both are (0,3,0) and this one is later — so it was the one
     board-picker surface still painting its own near-white glass over the shared look. It
     keeps its own GEOMETRY above; only the three cosmetics are handed back. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18) !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 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 .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) */
  /* 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__img--pale {
  filter: brightness(1.12) saturate(0.92);
}
.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-dropdown__trigger-label {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.md-card--setup {
  /* Skin-tone row: 15% taller than default card height */
  /* Picture-display row: 10% taller than default card min-height */
}
.md-card--setup .md-card--setup .col-sm-10 + .col-sm-10 {
  margin-top: 1.5rem;
}
.md-card--setup {
  /* High-contrast filter only when High contrast is selected, not for plain Black background */
  /* 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 */
}

/* 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 {
  background: rgba(17, 26, 46, 0.06);
  border-color: rgba(17, 26, 46, 0.14);
}

/* Setup card (all steps): button row when not intro */
/* 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;
  }
}
.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 16px of top breathing room was removed
     on 2026-09-03 (requested), and the height comes down with it: 121px was 105px of
     content plus exactly that padding, on border-box, so keeping 121 would have moved
     the gap from above the chips to below them rather than removing it. 105px is the
     content row itself.

     Only the CLASSIC board renders this element -- `<div id="word_suggestions"
     class={{suggestion_class}}>` appears in templates/board/index.hbs:51 and
     templates/user/board-alt/index.hbs:51 and nowhere else; the modern board's
     `show_word_suggestions` branch builds different markup. So this is not shared.

     Still scoped to .with_images so the plain 55px row (which board sizing reserves via
     a hardcoded +55 in controllers/board/index.js:521) is untouched. Note that +55 does
     NOT track this variant's height and did not track the old 121 either -- a
     pre-existing mismatch, unchanged here. */
}
#word_suggestions.with_images {
  height: 105px;
}

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

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

.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_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);
  }
}
.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;
  /* A FLOOR AS WELL AS A CAP. This element paints the slate speak-mode background
     (`background: $brand-charcoal-blue`, app.scss:9876), and it had only a cap — so
     whenever its content was shorter than the viewport it collapsed to content height and
     the slate stopped partway down, leaving the page's white below it. The board grid
     normally fills it (board/index.js computeHeight), which is why this only showed up on
     the load-error panel, where the grid never renders at all. Pinning min = max makes the
     background independent of what is inside. Same failure the eval-quick page hit from the
     other side (_eval_quick.scss:55-62). */
  min-height: 100vh;
  min-height: 100dvh;
  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.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;
  /* NO BOTTOM INSET AROUND A MODERN SHELL (2026-10-12, requested: "md-shell doesn't extend to the full
     height of the page ... a recurring problem"). `.md-shell` carries the page's background, and this
     legacy 10px bottom padding left a strip of `#content` showing beneath it (measured on Home and
     Extras above 1024px). The -10px margin only cancelled the padding, so both go and nothing else
     moves. The `max-width: 1024px` and `950px` blocks zero this padding too: those were per-breakpoint
     patches for the same strip. */
}
#content.index.with_user .main_columns:has(> .md-shell) {
  padding-bottom: 0;
  margin-bottom: 0;
}
#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;
  /* #6b737d measured 1.70:1 on this slate — below the 3:1 non-text floor, and these
     borders are the only thing marking the boundary between #content and #sidebar,
     which are the same fill. $brand-cool-steel is 3.21:1. */
  border-left-color: #9CA3AF;
  border-bottom-color: #9CA3AF;
  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;
  /* Same 1.70:1 -> 3.21:1 correction. This one is a live <button>
     (components/sidebar-tease.hbs), so 1.4.11 applies to its boundary directly. */
  border-color: #9CA3AF;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Board Alt: ink on the slate ground.

   #content, #sidebar and .board are all $brand-charcoal-blue #46505F (L 0.0787).
   The four surfaces below either set no colour of their own — inheriting
   Bootstrap's body #333 (bootstrap.css:1084, loaded via vendor.css before
   frontend.css) — or carry a colour authored for a light ground. All four are
   normal weight, so the threshold is 4.5:1 for text and 3:1 for the borders
   above. Note .board_status is 20px/400: NOT WCAG large text, which needs 24px
   regular or 18.66px bold.

   The only ink rule that existed for .board_status is nested in
   #within_ember.color_black (line ~1293), so the black high-contrast mode was
   the one case where this copy was readable.
   --------------------------------------------------------------------------- */
/* "Loading...", "this board isn't set up yet", "Grid not defined!".
   Subject matches the base rule (.board .board_status) so this cannot reach the
   .board-load-error panel in board.hbs, which replaces {{outlet}} and therefore
   has no .board ancestor. 1.55:1 -> 8.16:1. */
#within_ember.board-alt-view .board .board_status {
  color: #fff;
}

/* 18px/400 fallback copy ("Word suggestions failed to load" / "Loading word
   suggestions..."). Set on the container because the strings are bare text
   nodes; the .suggestion chips inside carry their own fill and ink, so they are
   unaffected. 1.55:1 -> 8.16:1. */
#within_ember.board-alt-view #word_suggestions {
  color: #fff;
  /* A SHORTER RAIL WITH SMALLER TILES ON BOARD-ALT (requested 2026-09-22). The shared sizing
     above is built for the classic board: a 105px row carrying 50px images inside tiles padded
     `12px 30px`. On board-alt that rail eats a disproportionate slice of the board area, which
     is the part of the screen that actually matters in speak mode.
     Scoped rather than changed at source: the classic board and the eval word bar both render
     this same element and neither asked for a different size. */
  /* HUGS ITS TILES (requested 2026-09-22: less space above and below the rail). Measured, the
     74px box left 10px of dead space under the tiles while they already overhang its top edge
     by 6px, so the row read as a band with the tiles floating in it. A tile is 70px tall and
     sits at -6px, so it occupies 64px of the box; 66px is that plus the 2px bottom gap below,
     and nothing else. Re-measure if the tile's padding or image height changes -- this number
     is derived from them, not chosen. */
}
#within_ember.board-alt-view #word_suggestions.with_images {
  height: 66px;
}
#within_ember.board-alt-view #word_suggestions .suggestion {
  padding: 5px 14px;
  /* The -6px top margin is kept: it is what tucks the tile up under the row's top edge, and
     dropping it would give back the height this rule is removing. The bottom gap comes in
     from 10px to 2px, which is the "below" half of the request. */
  margin: -6px 5px 2px;
}
#within_ember.board-alt-view #word_suggestions .suggestion:hover,
#within_ember.board-alt-view #word_suggestions .suggestion:focus-visible {
  /* Mirrors the shared hover rule, which trades 1px of padding for 1px of border so the tile
     does not move on hover. Restated because the padding it offsets is different here. */
  padding: 4px 13px;
}
#within_ember.board-alt-view #word_suggestions .suggestion .image_holder {
  height: 32px;
}
#within_ember.board-alt-view #word_suggestions .suggestion img {
  height: 32px;
  max-width: 48px;
}

/* Secondary copy — kept a step below the #fff above so the hierarchy survives.
   #888 was authored for a light ground. 2.30:1 -> 6.88:1. */
#within_ember.board-alt-view #board_description {
  color: #E8ECF2;
}

/* Integration error copy (templates/board/index.hbs:5 and :15). Bootstrap's
   .text-danger #a94442 is 1.40:1 here — the worst ink on this page, on the
   strings a user most needs to read. Anchored to #content, which excludes
   <ModalContainer /> (a sibling of #content, not a descendant); descendant
   rather than child because ButtonListener renders its own div wrapper.
   Same hex as $ch-focused-error-ink (_focused-view.scss:3018), re-measured
   here: its 5.08:1 was against the alert card, this ground gives 4.81:1. */
#within_ember.board-alt-view #content p.text-danger {
  color: #FFB4AB;
}

.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;
  /* ONE LINE, FULL SIZE, CLIPPED — never wrapped (2026-09-15).
     This was `white-space: normal` with `word-wrap`/`overflow-wrap: break-word`, which
     let a label break MID-WORD onto a second line; `height: 23px` then fits only one
     line, so `overflow: hidden` cut the remainder off. A long label did not read as
     truncated, it read as misspelled: "want" rendered as "wa", "look" as "loo",
     "questions" as "questios", "again" as "agai". On an AAC board, where the label IS
     the word the user is selecting, a silently mangled word is worse than a visibly
     clipped one.

     The label now keeps its declared size and clips horizontally instead. No
     `text-overflow: ellipsis` on purpose: an ellipsis spends two or three characters of
     an already narrow button to say something the hard edge already says.

     Classic board grid only — the modern board (templates/user/board-detail.hbs) does
     not use this class. Both Classic render paths do share it: the template and the
     `fast_html` string builder in utils/button.js both emit `class='button-label'`, so
     fixing it here covers both without touching either. */
  white-space: nowrap;
  overflow: hidden;
  display: block;
  max-width: 100%;
  line-height: 1.1;
}

/* 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.
     BOARD-ALT IS EXCLUDED TOO (2026-09-15), for the same reason and by the same shape.
     Its holder is no longer the JS-sized inline-block this rule compensates for: the
     `#within_ember.board-alt-view .board a.button .img_holder` block below sizes the holder
     to the band the label leaves, so the label's space is already reserved and
     `object-fit: contain` means the symbol cannot crop against it. All this rule can do
     there now is shrink the symbol away from the band it is supposed to fill — 0.93x at a
     729px viewport, 0.6x at 400px. The legacy `board` route still renders through the JS
     inline sizing, so it keeps the compensation. */
  #within_ember:not(.board-alt-view) .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;
}

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

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

/* Nav button styles - Applied in: dashboard/authenticated-view.hbs big_buttons, various modals */
/* #bento-main - Applied in: dashboard/authenticated-view.hbs - main content column of bento dashboard */
/* 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;
}

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

.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: 480px) {
  .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 */
.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 */
/* 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__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;
}

/* 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-label {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 6px;
}

/* Search row: input is the dominant path, Search button beside it */
/* Card buttons (primary = verdigris, secondary = dusty-denim, outline = quiet) */
/* Quiet secondary: white with a blue outline, so it reads as an alternative
   action rather than competing with the primary Search button. */
/* 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);
}

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

#button_settings .md-bs-link-by-key {
  margin-top: 4px;
}

#button_settings .md-bs-link-by-key__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#button_settings .md-bs-link-by-key__input {
  flex: 1 1 auto;
  min-height: 50px;
}

#button_settings .md-bs-link-by-key__submit {
  flex: 0 0 auto;
  width: auto;
  min-width: 8.5rem;
  padding: 0 18px;
}

#button_settings .md-bs-link-by-key__results {
  margin-top: 10px;
}

/* Footer */
.modal-content:has(#button_settings) > .modal-footer {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.04), rgba(76, 134, 216, 0.04)), #F8F9FA;
  border-top: 1px solid rgba(27, 54, 93, 0.08);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-content:has(#button_settings) > .modal-footer .btn {
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.modal-content:has(#button_settings) > .modal-footer .btn-lg {
  padding: 10px 22px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
}

.modal-content:has(#button_settings) > .modal-footer .btn-lg:hover {
  background: #46505F;
  box-shadow: 0 2px 10px rgba(70, 80, 95, 0.3);
}

/* Arrow nav buttons in footer */
.modal-content:has(#button_settings) > .modal-footer > span .btn {
  border-radius: 8px;
  border: 1px solid rgba(27, 54, 93, 0.12);
  background: #fff;
  color: #4a5568;
}

.modal-content:has(#button_settings) > .modal-footer > span .btn:hover {
  background: #F0F4F8;
  color: #2A9D8F;
}

/* Tab content spacing */
#button_settings .content .form-group {
  margin-bottom: 16px;
}

/* Image search area */
#button_settings .image_search,
#button_settings .sound_search {
  border-radius: 12px;
}

/* ── 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). */
/* "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-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;
}

/* 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 {
  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 {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.4);
}

.la-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 ───────────────── */
/* Modify and Repair Message — modern modal.
   Same shape as .la-board-actions-wrap below: tinted gradient header, round close, pill
   buttons, matching footer. The template carried six inline style= attributes and plain
   bootstrap buttons, so it was the one modal in this flow still wearing the old app. */
.modal-dialog:has(.la-repairs-wrap) {
  width: 850px;
  max-width: 94vw;
  margin-left: auto;
  margin-right: auto;
}

.la-repairs-wrap {
  color: #374151;
}

/* The gradient still comes from the shared `.modal .md-modal-header` / `.md-modal-footer`
   block near the end of this file; the VERTICAL PADDING no longer does.

   The `.modal` qualifier is load-bearing. That shared block is (0,2,0) and sits later in
   source order, so an unqualified `.la-repairs-wrap > .modal-header` is also (0,2,0) and
   loses every property they both declare — which is why this rule used to carry no
   vertical padding at all. (0,3,0) makes this the authoritative header rule for this
   modal. Same pattern as `.modal .la-share-text-modal-wrap .la-modal-header` (:39295).

   Top/bottom is half the shared 28px. Longhands, not the `padding` shorthand: the shared
   block sets only top/bottom, so a shorthand here would also reset the left padding this
   rule does not own, and clobber the 56px right gutter the close button needs. */
.modal .la-repairs-wrap > .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 22px;
  padding-right: 56px;
  position: relative;
}

.la-repairs-wrap > .modal-header h3 {
  margin: 0;
  margin-right: auto;
  font-size: 20px;
  font-weight: 700;
  color: #1B365D;
  letter-spacing: -0.3px;
}

/* Outer scroll rail — pages the whole modal. Sticky, not fixed or absolute: `.modal-content`
   is the scrollport (modal-dialog.js:98) and this rail lives inside it, so any other
   positioning scrolls away with the content it exists to move. `height: 0` keeps it out of
   the flow so it cannot push the word grid down, and pointer-events is dropped on that
   zero-height band and restored on the buttons so it cannot swallow clicks aimed at content
   behind it. */
.la-repairs-scroll-rail {
  position: sticky;
  top: 8px;
  z-index: 4;
  height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.la-repairs-scroll-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

/* Gutter for the rail, and ONLY when the rail is rendered — it is behind an {{#if}}, so an
   unconditional padding would indent every non-scrolling repair modal for nothing. `:has()`
   is already used for this modal's dialog width at :14195. */
.la-repairs-wrap > .modal-body:has(.la-repairs-scroll-rail) {
  padding-right: 104px;
}

/* Deliberately the same skin as the Big Button modal's Up/Down (:39929): it is the paging
   control users have already learned, and this one does the same job on a different box. */
.la-repairs-wrap .btn.la-repairs-scroll-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), #7693B9;
  color: #46505F;
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.06), 0 6px 18px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: opacity 0.15s ease, background 0.15s ease;
}

/* Dimmed at the ends, NOT disabled. `scannable_targets` does not filter `[disabled]`, so a
   disabled button still stops the scanner on a dead control; see repairs.hbs. */
.la-repairs-wrap .btn.la-repairs-scroll-btn--end {
  opacity: 0.45;
}

/* The "Oops" control. Deliberately NOT red: it is something the user CHOOSES to do — it
   plays the correction sound so a listener knows a repair is coming — not a warning that
   something failed. The maroon border it used to carry, plus a float and a negative top
   margin, is the entire reason every reviewer read it as the modal reporting an error. */
/* `.btn.` in the selector so this wins over bootstrap's own .btn declarations without an
   !important — the control carries `btn` as a scanning hook (see repairs.hbs), not because
   it wants bootstrap's look. */
.la-repairs-oops.btn,
.la-repairs-oops {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  background: rgba(255, 255, 255, 0.75);
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.la-repairs-oops:hover {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.45);
  color: #1A7B7A;
}

.la-repairs-oops:focus-visible {
  outline: 2px solid #2A9D8F;
  outline-offset: 2px;
}

/* Pill buttons for the cursor nav, the action row and the footer's Cancel. Layered ON TOP
   of the existing .btn.btn-lg.btn-default rather than replacing them: #repairs' own layout
   rules and the button-listener scanning selectors both key off those class names, so
   swapping them out would be a far wider change than a restyle. */
.la-repairs-wrap .la-repairs-btn.btn {
  border-radius: 12px;
  border: 1px solid rgba(27, 54, 93, 0.14);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.la-repairs-wrap .la-repairs-btn.btn:hover {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.4);
}

.la-repairs-wrap .la-repairs-btn.btn:focus-visible {
  outline: 2px solid #2A9D8F;
  outline-offset: 2px;
}

/* The replace/insert row. Was two inline-block divs at a hard-coded 515px and 120px, which
   overflowed as soon as the dialog narrowed under max-width: 94vw. */
.la-repairs-insert-row {
  margin-top: 10px;
}

.la-repairs-insert-row > [class^=col-] {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.la-repairs-insert-field {
  flex: 1;
  min-width: 0;
}

/* No `.form-control` rule here on purpose. `.md-modal-body input.form-control`
   (app.scss:89272) already styles every modal input — radius, padding, border, 16px — and
   does it with `!important` on every declaration, so anything written here is dead unless
   it escalates specificity, which CLAUDE.md rule 7 forbids and which would fork the look of
   one modal's input from all the others. The `height: 100%` that used to be here was not
   needed either: that block's `height: auto !important` is precisely what lets the input
   stretch to the flex row. */
.la-repairs-insert-action {
  flex-shrink: 0;
}

/* The footer's gradient still comes from the shared block; its vertical padding does not.
   New rule rather than an edit, because this modal had no footer rule of its own — the
   only one here styles the primary button. `.modal` qualifier and longhands for the same
   two reasons as the header above (:14210): (0,2,0) would lose to the shared block, and a
   shorthand would reset horizontal padding this rule does not own. Half the shared 28px,
   matching the header so the two ends of the modal stay symmetrical. */
.modal .la-repairs-wrap > .modal-footer {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Footer chrome likewise comes from the shared block; only the primary button is styled
   here, and only because bootstrap's own .btn-primary is the thing being replaced. */
.la-repairs-wrap > .modal-footer .btn-primary {
  border-radius: 10px;
  padding: 10px 22px;
  background: #46505F;
  color: #fff;
  border: none;
  font-weight: 600;
}

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

/* Up/Down pager, pinned to the header so it stays put while the body scrolls under it.
   The header is already `position: relative` for the close button, and 56px of
   padding-right is reserved for that button, so the pager sits just inside it.

   Button styling is NOT here — these share the speak-menu pager's declaration block so
   the two cannot drift. Only placement differs, because the two headers differ: speak
   menu centres its pager (no title competing for the row), this one right-aligns beside
   the "Board Actions" title.

   The header grows to fit the 44px targets, which is deliberate: 44px is the WCAG 2.5.5
   floor and these are a primary affordance for anyone who cannot make a scroll gesture,
   so the control keeps full size and the header gives way. `flex-wrap` lets the pair drop
   under the title rather than collide with it on a narrow modal. */
/* Centred on the header, the same placement `.md-speak-menu__scroll-pager` uses.
   Absolute + 50%/50% rather than a flex row so the pager's width cannot shift the title
   or the close button as it appears and disappears with `menu_scrollable`.

   It clears both neighbours at the modal's full 680px: the title runs to roughly 174px
   and the close occupies 16px-60px from the right (`.md-modal-header .la-modal-close`,
   `right: 16px` on a 44px WCAG target), while a centred ~190px pager sits between 245px
   and 435px. */
.la-board-actions__scroll-pager {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Below this the modal is `94vw` rather than 680px (see `.modal-dialog:has(...)` above),
   and a centred pager starts overlapping the title — at a 360px phone it would run from
   74px to 264px, straight through it. Stacking rather than shrinking: these are 44px WCAG
   targets and a primary affordance for anyone who cannot make a scroll gesture, so the
   header gives way and the buttons keep their size. The pager follows the <h3> in source
   order, so dropping it back into flow puts it directly under the title. The close button
   moves off centre-vertical to the top for the same reason — on a two-row header it would
   otherwise float beside the gap between them. */
@media (max-width: 680px) {
  .la-board-actions__scroll-pager {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 12px;
  }
  .la-board-actions-wrap > .modal-header .la-modal-close {
    top: 14px;
    transform: none;
  }
}
/* 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. */
/* Breathing room between the explainer text and the moved View Style toggle. */
/* 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-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 {
  font-size: 14px;
  color: #6B7280;
  font-style: italic;
}

.la-translate-board-error {
  font-size: 14px;
  color: #C0392B;
}

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

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

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

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

/* ── 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 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;
  /* THIS is the rule that stops the bottom being cut off — not the max-height on
     .md-speak-menu below.

     modal-dialog.js:97 runs `$(el).find('.modal-content').css('maxHeight',
     $(window).height() - 50)` for EVERY modal in the app, as an INLINE style. Inline
     beats any stylesheet rule, so .md-speak-menu's own `100vh - --sm-menu-top - 16px`
     was being applied inside a parent capped 30px tighter (540 vs 510 at a 560px
     viewport, measured). The menu was therefore taller than its own container and the
     overflow was clipped HERE, one level up from every rule that kept being edited to
     fix it.

     Same override, same reason, as `.modal-content:has(.la-find-button-wrap)` — whose
     comment names this same line of modal-dialog.js. Neutralising the global cap lets
     the menu's own max-height govern, which already accounts for the 4px top offset
     speak-menu.js sets and leaves 16px below the fold.

     Verified with scripts/speak-menu-clip-qa.mjs, not by reading the cascade. */
  max-height: none !important;
}

.md-speak-menu {
  padding: 16px 20px 12px !important;
  font-size: 16px;
  background: #ffffff;
  border-radius: 20px;
  /* Never taller than the room left below the sentence bar, and SCROLLS rather than
     clipping when it would be.

     This used to be a bare `overflow: hidden` with no max-height, which meant the menu
     grew to whatever its content needed and everything past the bottom of the screen was
     simply cut off — unreachable, with nothing on screen to say so. Short viewports and
     the larger vocalization-size settings (which push the menu down by up to 160px, see
     --sm-menu-top) hit it first.

     `--sm-menu-top` is set by speak-menu.js#opening when it positions the dialog, so this
     subtracts the real offset rather than a second guess at it; the fallback matches the
     default 100px vocalization height. The x axis stays clipped for the 20px radius —
     `hidden` first so Safari < 16 keeps the old behaviour, then `clip`, because `hidden`
     on one axis computes the other to `auto` and would make this a scroll container in
     both directions. */
  max-height: calc(100vh - var(--sm-menu-top, 4px) - 16px);
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Header */
.md-speak-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* STICKY, so the title, the close control and the Up/Down scroll controls stay on screen
     however far the menu is scrolled -- the scroll controls are useless if scrolling can
     carry them away.

     The negative margins cancel `.md-speak-menu`'s own `padding: 16px 20px 12px` and the
     matching padding puts the same space back inside the bar. Without that the bar would
     sit inside the padding box and scrolled content would show through the 20px channel
     either side of it and the 16px above. Opaque background for the same reason: sticky
     only reserves space, it does not hide what passes underneath.

     The BOTTOM margin (third value) is the gap between the divider and whatever section
     leads the view. It was 14px, which left the first section label sitting almost on the
     rule. Raised here rather than padding the first section, because every view leads with
     a different one -- Punctuation on the main view, Repeat Words under Repeats -- and the
     spacing belongs to the header, not to whichever section happens to be first. */
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffff;
  margin: -16px -20px 24px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(27, 54, 93, 0.15);
}

/* Groups the scroll controls with the close button so the header's `space-between` keeps
   the title left and every control right, however many of them are currently rendered. */
/* ABSOLUTELY CENTRED on the header, for two reasons. It reads as centred regardless of how
   wide the title or the close button are, and -- the functional half -- taking it out of
   flow means the pair appearing or disappearing cannot move the title or the close button.
   The header is `position: sticky`, which already establishes the containing block. */
.md-speak-menu__scroll-pager {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* No rule of its own: `.md-speak-menu__scroll-btn` is applied ALONGSIDE
   `.md-speak-menu__phrase-page-btn` in the template, so both pagers are governed by that one
   declaration block (~:18900) and cannot drift apart. This class exists only as a hook --
   it is what modal.js#scannable_targets matches to make these reachable by switch scanning.
   Do not give it competing declarations here; edit the shared rule instead. */
.md-speak-menu__title {
  /* 22px. Was `1.25rem` with a comment claiming 20px — but the root font-size in this
     codebase is 10px, set by bootstrap on the html element and measured in the browser, so
     it rendered at 12.5px: a modal title smaller than the body text under it. px, so the
     number in the rule is the number on screen.

     NOTE — no braces in this comment, deliberately. A `{ }` pair inside a comment here
     silently swallowed the whole declaration block: the rule reached the served CSS intact
     and the browser applied none of it, leaving the h2 at its 25px user-agent default.
     Verified by removing them. Keep brace-free. */
  /* Fluid 14-22px, and `!important` is not a shortcut here — it is the only way to win.
     The bare element rule `h2` at app.scss:3614 declares `font-size: 25px !important`, so
     this class rule was losing and the title rendered at 25px, NOT the 22px above it. An
     important class selector 0,1,0 beats an important element selector 0,0,1; nothing
     without !important can. Scoping the global h2 rule instead would reach every h2 in the
     app, which is not this modal's call to make.
     Bootstrap is not the culprit, despite appearances in devtools: its `.h2, h2 30px` and
     `body 14px` sit BELOW the app rule in the cascade and were already being overridden.

     No arithmetic inside the clamp, deliberately: dart-sass strips a calc() wrapper inside
     a range function and emits bare mixed-unit math, which is what the CSS/SCSS guideline
     says SassC cannot evaluate. Three plain values avoid the question. 2.45vw reaches the
     22px ceiling at ~900px — the width above which this modal stops filling the screen —
     and bottoms out at the 14px floor around 571px — phone widths sit well below that
     crossover, so the title resolves to a flat 14px on every phone. The 14px floor is
     deliberate and sits below the app's usual minimum; do not raise it back to match the
     surrounding body copy. */
  font-size: clamp(14px, 2.45vw, 22px) !important;
  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 {
  /* 14px FLOOR, and nothing in this file reduces it — no responsive rule targets this
     selector, so 14px is what every viewport gets.

     Was `1rem` with a comment claiming 16px; at this codebase's 10px root that rendered
     at 10px, uppercase and letter-spaced, which is where a section heading stops being
     legible for the people this product is built for. Same trap as the title above. */
  font-size: 14px;
  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);
}

/* Actions: Share, Repeats, Repairs, Alerts, Hold Thought. Wraps to 3 across on a
   phone in the media block below — 5 across is not a reliable touch target at that
   width, the same judgement --3 and --7 already carry. */
.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));
}

/* Unread-alerts count on the Tools > Alerts button.

   Same two signals the navbar's speak-options badge uses
   (templates/application.hbs — `referenced_user.unread_alerts`, then
   `request_alert` as a bare `*`), so the two cannot disagree about whether there
   is something waiting. Written as a class here rather than the inline `style=`
   that one carries; the button is `position: relative` for it to anchor to. */
.md-speak-menu__btn--badged {
  position: relative;
}

/* 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 {
  /* 14px FLOOR — the label under every button in this modal: Actions (Share, Repeats,
     Repairs, Alerts, Hold Thought) and Phrases.

     Was `1.125rem` with a comment claiming "18px — AAC requirement". At this codebase's
     10px root that rendered at 11.25px, so the requirement the comment names was never
     actually met by the rule that names it. 14px, in px, is met.

     Not 18px, tempting as the old comment is: at 480px the punctuation row is still 7
     across and its buttons are 47px wide, and an 18px label does not fit one. If 18px is
     wanted, the 460px wrap has to move up to ~520px first — a separate decision about
     where the columns break, not a font change. */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #374151;
}

/* Unread-alerts count on the Alerts button, and the `*` for a pending request. Reads the
   same two signals as the navbar's speak-options badge (templates/application.hbs) so the
   two cannot disagree about whether something is waiting.

   `min-width` + `text-align` so a two-digit count and a single `*` are the same shape
   rather than one being a disc and the other a stripe. White on #C0392B is 5.44:1, which
   clears WCAG 1.4.3 AA for normal-size text — the bar 14px bold has to meet, being below
   the 18.66px where the large-text 3:1 allowance starts. */
.md-speak-menu__badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 22px;
  background: #C0392B;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  text-align: center;
}

/* -20% (2026-08-27, Traci): the marks were visually dominating the modal's first
   row. 42 -> 33.6 and 36 -> 28.8, rounded to the nearest whole pixel. Line-height is
   scaled with the size rather than left at 36px, which would have opened a gap under
   each glyph and undone the size change visually. */
.md-speak-menu__punctuation {
  font-size: 34px;
  line-height: 29px;
  display: block;
  color: #374151;
  font-weight: 700;
}

/* The contraction button's WORD label (e.g. "nursing home's"), not a glyph. Same -20%
   for consistency across the row: 22 -> 17.6 and 28 -> 22.4, rounded. 18px still sits
   above a typical web default, so the AAC size floor holds — but this is the one value
   in the row where shrinking costs real legibility, so revert this rule alone if it
   reads small on a device. */
.md-speak-menu__punctuation--sm {
  font-size: 18px;
  line-height: 22px;
}

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

/* Footer row: Save Phrase on the left, volume right-aligned on the SAME row. Volume moved here
   out of the Repeats group so it no longer costs an extra activation to reach.
   `.md-speak-menu__bottom-btn` is `width: 100%` by default (see below), which would push the
   volume group onto its own line — hence `width: auto` + `flex` here rather than a fixed width.
   The row is rendered even when Save Phrase is not (it needs a composed sentence), so volume
   stays reachable with an empty sentence bar; `margin-left: auto` keeps it right-aligned in
   both cases. */
.md-speak-menu__bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-speak-menu__bottom-row .md-speak-menu__bottom-btn {
  width: auto;
  flex: 1 1 auto;
}

.md-speak-menu__bottom-volume {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Compact, horizontal variant of the tile for this row. The default `.md-speak-menu__btn` is a
   tall COLUMN tile (icon over label) sized for the main grid, which would dominate the footer.
   Scoped to this container rather than adding a modifier class, so the moved markup keeps its
   ids and classes exactly as they were in the Repeats group. */
.md-speak-menu__bottom-volume .md-speak-menu__btn {
  flex-direction: row;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
}

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

/* The saved/stashed phrase rows, listed INSIDE the Phrases section rather than loose in
   the bottom bar. The indent and hairline are what say "these belong to the button above";
   without them the rows sat flush with the modal edge and read as a separate, unlabelled
   list.

   HEIGHT-CAPPED as a backstop. The list is composed to hold at most three rows — the
   parked entries plus one saved phrase, see speak-menu.js#opening — so this never bites
   today; it is here so the panel cannot grow without limit if that composition changes.
   `--sm-phrase-row` is the row height, matching the min-height the rows carry below.

   The gradients are the classic background-attachment: local scroll shadow: the white pair
   are painted with the CONTENT so they slide away at the top and bottom of the scroll,
   while the grey pair are painted against the SCROLLPORT so they stay put — the net effect
   is a shadow that appears only on the edge you can still scroll towards. No listener, and
   nothing to tear down. It is a supplement to the text hint below the list, never the only
   cue: an eye-gaze or switch user may never resolve a soft gradient at all. */
.md-speak-menu__phrase-list {
  --sm-phrase-rows: 4;
  --sm-phrase-row: 44px;
  margin-top: 8px;
  padding-left: 12px;
  /* Room on the right for the scrollbar AND for the rows' own border and shadow. The rows
     are `width: 100%`, so with no right padding they ran to the content edge and the
     scrollbar sat on top of them — the cards looked sliced off down that side.
     `scrollbar-gutter: stable` reserves the channel even when the list is short enough not
     to scroll, so the rows do not change width the moment a sixth phrase is added; a list
     that reflows as it grows is disorienting on a surface someone scans. */
  padding-right: 10px;
  scrollbar-gutter: stable;
  border-left: 2px solid rgba(27, 54, 93, 0.12);
  /* PAGED, not scrolled — and therefore NO max-height and NO overflow at all.
     speak-menu.js slices the list to PHRASE_PAGE_SIZE rows, so the ROW COUNT is what is
     bounded. An earlier version also capped the height at
     `--sm-phrase-rows * --sm-phrase-row`, which assumed a fixed 44px row; the rows are
     `min-height: 44px` and GROW when a phrase wraps, so four long phrases exceeded the cap
     and were clipped (measured: listScrolls true on three of four pages). Height is bounded
     instead by the row count plus the two-line clamp on the phrase text below — the same
     fix the contacts grid needed. --sm-phrase-row is retained only as the row FLOOR. */
  background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top/100% 20px no-repeat local, linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom/100% 20px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(27, 54, 93, 0.13), rgba(27, 54, 93, 0)) top/100% 8px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(27, 54, 93, 0.13), rgba(27, 54, 93, 0)) bottom/100% 8px no-repeat scroll;
}

/* Each phrase reads as its own pressable card rather than a line of text. The base
   .md-speak-menu__bottom-btn is a flat transparent row, which was right when these sat in
   the bottom bar among Send Reply and Un-Flip Text; inside a list of things you TAP TO SAY
   they need an edge, a surface and a press.

   `min-height: 44px` is the WCAG 2.5.5 AAA target size, and it is what makes five rows a
   predictable 220px — worth having on a control an AAC user aims at with a head pointer. */
.md-speak-menu__bottom-btn--remembered {
  /* FIXED height, not a min-height. speak-menu.js#recompute_phrase_page_size divides the
     available space by the row pitch to decide how many phrases fit on screen, and that
     arithmetic is only exact if every row is the same height. 60px (border-box) leaves a
     40px content box, which holds the two lines the phrase text is clamped to at
     16px/1.2 = 38.4px. Change either number and PHRASE_ROW_H in speak-menu.js has to
     follow — they are two halves of one calculation. */
  height: 60px;
  margin-bottom: 6px;
  padding: 9px 14px;
  font-size: 14px;
  color: #374151;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.14);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-speak-menu__bottom-btn--remembered:last-child {
  margin-bottom: 0;
}

.md-speak-menu__bottom-btn--remembered:hover {
  background: rgba(42, 157, 143, 0.07);
  border-color: rgba(42, 157, 143, 0.4);
}

/* The press itself. Kept to colour and shadow rather than a transform — this list is used
   by people driving a pointer they cannot hold perfectly still, and a row that moves under
   the cursor is a row that can slip out from under it. */
.md-speak-menu__bottom-btn--remembered:active {
  background: rgba(42, 157, 143, 0.14);
  box-shadow: none;
}

.md-speak-menu__bottom-btn--remembered:focus-visible {
  outline: 2px solid #2A9D8F;
  outline-offset: 2px;
}

/* RESUME — the parked Hold Thought, one step up the hierarchy from the saved phrases it
   sits above. It is the row with something at stake: unfinished, and gone if not picked up.
   Verdigris accent edge + tint rather than a bigger font, so it reads as a different KIND
   of row at a glance without making the list ragged. */
.md-speak-menu__bottom-btn--resume {
  border-color: rgba(42, 157, 143, 0.55);
  border-left: 4px solid #2A9D8F;
  background: rgba(42, 157, 143, 0.06);
  box-shadow: 0 1px 3px rgba(42, 157, 143, 0.18);
}

.md-speak-menu__bottom-btn--resume:hover {
  background: rgba(42, 157, 143, 0.13);
  border-color: rgba(42, 157, 143, 0.7);
  border-left-color: #2A9D8F;
}

.md-speak-menu__bottom-btn--resume svg {
  opacity: 1;
  color: #1A7B7A;
}

/* The "Resume:" / "Say:" label. Was bare text between the icon and the phrase; naming it
   lets Resume carry the weight without touching the phrase itself, which stays the loudest
   thing in the row in both cases — it is what the user is actually choosing between. */
.md-speak-menu__remembered-kind {
  flex-shrink: 0;
  font-weight: 600;
}

.md-speak-menu__bottom-btn--resume .md-speak-menu__remembered-kind {
  color: #1A7B7A;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* HELD THOUGHTS — a sub-heading INSIDE the Actions section, under the row of tiles, so it
   needs separation above it that a section label at the top of its own section does not.
   Reuses .md-speak-menu__section-label for the type treatment rather than restating it;
   this modifier only adds the gap. */
.md-speak-menu__held-label {
  margin-top: 14px;
}

/* Reuses .md-speak-menu__phrase-list for the rail and spacing. Unlike the phrase library
   it never pages -- it shows a short window and expands in place -- so it needs no row
   budget, and the `--sm-phrase-rows` custom property it inherits is simply unused here. */
.md-speak-menu__held-list {
  margin-top: 6px;
}

/* The overflow control, on the same glass-tile primitive as the GIF / Share / Alerts action
   tiles (`.la-gif-modal__action` ~:106638 and `.la-inbox__action`): white gradient over a
   tint, backdrop blur, and a four-layer shadow with a lit top edge. Reused rather than
   re-specified so depth and hover read identically wherever the treatment appears.

   Deliberately NOT `--resume`: it is a disclosure for the rest of the list, not a thought to
   pick up, so it must not carry the verdigris accent that marks a real held thought — a row
   that resumes nothing should not look like three that do. The glass tile separates it by
   MATERIAL instead of by colour, which keeps that distinction without a dashed edge. */
.md-speak-menu__bottom-btn--more-thoughts {
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.98);
  --tile-tint: #E8ECF1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.07), 0 2px 4px rgba(17, 26, 46, 0.1), 0 12px 30px rgba(17, 26, 46, 0.18), inset 0 1px 0 rgb(255, 255, 255);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.md-speak-menu__bottom-btn--more-thoughts:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgb(255, 255, 255);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.1), 0 3px 6px rgba(17, 26, 46, 0.12), 0 18px 40px rgba(17, 26, 46, 0.22), inset 0 1px 0 rgb(255, 255, 255);
}

.md-speak-menu__bottom-btn--more-thoughts:active {
  transform: translateY(1px);
}

.md-speak-menu__bottom-btn--more-thoughts .md-speak-menu__remembered-text {
  font-weight: 700;
  color: rgba(27, 54, 93, 0.85); /* same ~7.8:1 as the section label */
  flex: 0 0 auto; /* centred with the chevron, not stretched like a phrase row's text */
}

/* Chevron points DOWN to expand and flips UP once expanded, so the control reads as a
   disclosure rather than a link to somewhere else. Paired with `aria-expanded` on the
   button — the rotation is the sighted half of the same signal. */
.md-speak-menu__more-thoughts-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.md-speak-menu__bottom-btn--more-thoughts-open .md-speak-menu__more-thoughts-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .md-speak-menu__more-thoughts-chevron {
    transition: none;
  }
}
/* "3 more — scroll to see them", under the scroller. */
/* `.md-speak-menu__phrase-list--expanded` used to drop the row cap here and let the panel
   grow, falling back on .md-speak-menu's own scroll past the viewport. Removed: the
   expanded library is PAGED now, so one page is always exactly one page tall and no scroll
   region is created. See the pager rules below and the comment on `rememberedUtterances`
   in speak-menu.js. */
/* Up / Down pager under the phrase list. 44px targets (WCAG 2.5.5) because these are aimed
   at with a head pointer or eye gaze, not a mouse. */
.md-speak-menu__phrase-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-left: 12px;
}

/* The Board Actions modal's Up/Down pager is listed here rather than given a rule of its
   own, for the same reason `.md-speak-menu__scroll-btn` has no separate declarations: one
   block governs every pager in the app so they cannot drift apart. Only POSITIONING
   differs between them, and that lives on each modal's own `__scroll-pager` wrapper. */
/* GLASS SURFACE from the shared `ch-chip` recipe (_chips.scss) rather than the flat
   translucent-white fill this carried, so the pagers match the app's raised-glass objects.
   The mixin supplies background, border and box-shadow only — radius, size and type stay
   here, which is the split it documents ("same material, different object").

   INK IS `$la-navy`, NOT `$brand-slate-blue`. The chip is a silver ramp, not near-white:
   slate blue (#5A6A85) measures 3.88:1 on its darkest stop (#D2DAE5), under the 4.5:1 a
   14px/700 label owes — the flat white fill it used to sit on was hiding that. `$la-navy`
   measures 8.60:1 there, and `$indigo` on hover 10.10:1. */
.md-speak-menu__phrase-page-btn,
.la-board-actions__scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
  color: #1B365D;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover lifts the glass rather than flattening it to solid white: the chip's two insets
   are restated so the sheen survives, with the ambient shadow deepened. Restating is
   required — `box-shadow` is one property, so naming it here at all replaces the mixin's
   whole stack. */
.md-speak-menu__phrase-page-btn:hover:not([disabled]),
.la-board-actions__scroll-btn:hover:not([disabled]) {
  border-color: rgba(42, 157, 143, 0.5);
  color: #1b2a4a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 5px 12px rgba(27, 54, 93, 0.26);
}

.md-speak-menu__phrase-page-btn[disabled],
.la-board-actions__scroll-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.md-speak-menu__phrase-pager-status {
  font-size: 13px;
  font-weight: 600;
  color: #5A6A85;
  white-space: nowrap;
}

/* Chevron points DOWN collapsed (there is more below) and flips UP when expanded. */
/* Two lines max. With the list paged rather than scrolled, the panel's height is
   row-count x row-height — so a row that can grow without limit puts the height back out of
   control and, on a short viewport, pushes the panel into a scroll region an eye-gaze user
   cannot reach. Two lines is ~90 characters at this size, which covers most saved phrases;
   the full text is still what gets spoken when the row is selected. */
.md-speak-menu__bottom-btn--remembered .md-speak-menu__remembered-text {
  font-size: 16px;
  font-weight: 600;
  color: #1B365D;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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

/* NO ROW RE-WRAPPING AT 768px. There used to be a `@media (max-width: 768px)` block here
   dropping --3 to 2 columns, --5 to 3 and --7 to 4, on the reasoning that narrow screens
   need bigger touch targets.

   It did the opposite of helping. The modal is a FIXED 600px wide, so re-wrapping did not
   make the modal fit the screen — it made the BUTTONS BIGGER inside the same box and the
   box taller. Measured at 768px: punctuation went 7 columns x 72px to 4 columns x 134px,
   Actions 5 x 106px to 3 x 181px, and the menu grew from 705px to 834px and ran off the
   bottom of a 900px viewport. Wider buttons the user cannot reach because the panel they
   sit in has left the screen are not an accessibility win.

   The width rule below handles narrow screens the right way round: the MODAL takes a
   larger share of the viewport as the viewport shrinks, and the columns stay put. */
/* Speak menu dialog width. Same shape as every other modal in this file
   (`.modal-dialog:has(.la-…-wrap) { width: …; max-width: 94vw; }`) — a design width that
   yields to the viewport rather than a fixed one that overflows it. At 900px the menu uses
   67% of the screen, at 768px 78%, and below ~640px it is 94% throughout. */
.modal-dialog:has(#speak_menu) {
  width: 600px;
  max-width: 94vw;
  /* Bootstrap's `margin: 30px auto` is dropped on the vertical axis. speak-menu.js sets
     `top` on this element and the stylesheet sizes .md-speak-menu with
     `100vh - var(--sm-menu-top)` — a margin the JS does not know about is a second,
     invisible offset stacked on top of the one being compensated for, and the panel then
     hangs off the bottom by exactly that much. Measured at a 640px viewport: dialog
     starting at y=30 with a 624px max-height, so the last 14px sat below the fold with the
     Save Phrase row in it. The horizontal `auto` is kept below — that is what centres it. */
  margin-top: 0;
  margin-bottom: 0;
  /* Centred at EVERY width. Bootstrap only supplies `margin: 30px auto` from 768px up;
     below that its rule is a flat `margin: 10px`, which was harmless while the dialog was
     `width: auto` and filled the space, and is not once a width is declared here — the
     panel would sit hard against the left with all the slack on the right. Stated on both
     sides rather than relying on the shorthand a breakpoint away. */
  margin-left: auto;
  margin-right: auto;
}

/* Small screens: fill the width, 4px each side — same treatment as the Share Text modal.
   The 600px design width plus the 94vw cap left 20px a side at 640 and 11px at 375, and
   84px a side at 768 where the fixed 600px still wins. On a phone that is space the
   punctuation row and the phrase list can use.
   No `!important` needed here, unlike the Share Text modal: this modal passes no
   `@desired_width`, so modal-dialog.js#stretch takes its else branch and CLEARS the inline
   width rather than setting one. `width: auto` is .modal-dialog's Bootstrap default and
   fills the container minus margins — `100vw` would include the scrollbar and overflow.
   Breakpoint is 900px, not Bootstrap's 767px: at 768 the fixed 600px still won and left
   84px a side, which is the tablet-portrait case and the one that was reported. Above
   900px the menu keeps its 600px design width — a 7-column punctuation row stretched
   across a desktop screen is not an improvement. One number if that balance is wrong. */
@media (max-width: 900px) {
  .modal-dialog:has(#speak_menu) {
    width: auto;
    max-width: none;
    margin-left: 4px;
    margin-right: 4px;
  }
}
/* WRAP AT 460px, not 768. Below this the modal has run out of room to widen — it is
   already at its 94vw ceiling, so ~432px of dialog — and 7 punctuation targets across that
   is ~55px each, genuinely too small to hit with the motor accuracy this product is for.
   Here, and only here, re-wrapping is the right trade: the buttons that remain get wider
   because there is nowhere left for the PANEL to grow.

   460px is this codebase's existing narrow breakpoint (`viewport_very_narrow` in
   controllers/user/board-detail.js, and other @media blocks in this file already key off
   it) rather than a number invented for this rule.

   Note the direction of the trade compared with the 768px block this replaces: there, the
   modal had 168px of unused viewport and re-wrapping just inflated the buttons and pushed
   the panel off-screen. Here there is no unused viewport left. */
@media (max-width: 460px) {
  .md-speak-menu__row--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-speak-menu__row--5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .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;
}

/* The legacy `.share_buttons` block that used to live here (60px full-width
   `img` / 60px `.glyphicon` inside `.btn`) was removed 2026-08-27. Its only
   consumer was the Share Text modal, and at (0,2,1) it silently outranked every
   single-class `.la-share-text__*` rule below -- which is why the Facebook and
   X tiles rendered a 60px logo while their SVG siblings rendered at 22px.
   The `.la-share-text__*` block is now the single authority for that modal. */
.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;
  }
}
@media (max-width: 1024px) {
  #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-right {
    left: auto;
    right: 0;
  }
}
/* 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;
  }
  #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.new_index .main_columns .col:first-child {
    border-bottom-width: 20px !important;
  }
  #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;
  }
  .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;
  }
  .big_buttons .big_button {
    font-size: 18px;
  }
}
.really_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-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. */
/* Shell fills height only when NOT in footer layout (avoids min-height in cascade when bento-page-with-footer or :has(.page-footer)). */
/* Bento page with footer: override grid so app shell is flex; min-height: 0 so shell can shrink in flex chain. */
/* Decorative blurred orbs in background */
/* Celebration burst when authenticated index view first shows - runs once then holds still */
/* Celebration icon next to username after dismissing Getting Started */
@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. */
/* Main content: overflow visible so bar can overflow into frame's overflow-clip-margin. */
/* Scroll lives inside the frame so content is clipped to rounded bottom. */
/* Top bar - brand, welcome, getting started, search, profile */
/* 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, plus --ll-navbar-row2 when the View button takes its own row at <=767px (_view-switcher.scss, TWO ROWS) */
#within_ember > header.header-index-with-dark-toggle:not(.header--unauthenticated):has(.app-navbar):not(:has(#speak)):not(:has(#nav_header)) {
  height: calc(70px + var(--ll-navbar-row2, 0px)) !important;
  min-height: calc(70px + var(--ll-navbar-row2, 0px)) !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: calc(70px + var(--ll-navbar-row2, 0px)) !important;
  min-height: calc(70px + var(--ll-navbar-row2, 0px)) !important;
  max-height: calc(70px + var(--ll-navbar-row2, 0px)) !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: calc((100% - var(--ll-navbar-row2, 0px)) / 2) !important; /* row 1's centre; 50% unless the View button has its own row (_view-switcher.scss, TWO ROWS) */
    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: gutters between the
   circular β and the identity avatar so they don't touch when the row flows
   tight. Scoped to board-alt so other routes' header layouts aren't touched.

   THIS BLOCK IS SPACING ONLY — IT DOES NOT, AND DID NOT, FIX AN OVERLAP.
   It was written against a reported overlap of β / settings cog / avatar and
   claimed to give the cog breathing room; it never contained a settings-cog
   rule, and a margin could not have moved that cog anyway. The cog was
   `position: absolute` from the unscoped ≤1024px `.ll-header-settings-btn`
   rule (search "NOT ON THE CLASSIC BOARD PAGE" in this file), so it was out of
   flow and landed on top of the β regardless of what its neighbours did. The
   overlap was still reported afterwards. That rule is now scoped to exclude
   board-alt, which is what actually fixed it; these margins only tune the
   spacing of a row that is finally all in flow. */
@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;
}

/* Moved 1024px → 640px (2026-09-15) to follow `#board_done`. This row exists, per the note
   above, to give a secondary way out at the width where the header's own Exit Boards is
   gone. That now happens at ≤640px, so leaving this at ≤1024px would put TWO Exit Boards
   on screen between 641px and 1024px — one in the header, one in the dropdown. The two
   breakpoints have to move together. */
@media (max-width: 640px) {
  #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__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;
  }
}
.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__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 {
  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 {
  text-decoration: none !important;
  color: #ffffff !important;
}

/* Logo size: match unauthenticated header */
/* Brand app name: Maitree 25px, same colors as unauthenticated */
.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__link {
  color: var(--fs-dark-teal, #2A9D8F);
  text-decoration: none;
  font-weight: 600;
}

.ll-bento-bar-welcome__link:hover {
  color: #238a7e;
  text-decoration: underline;
}

/* Topbar icon buttons: same light bg as brand, white hover */
/* Refresh button icon (top arrow) uses brand green in all themes */
.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 {
  margin: 0 !important;
}

/* Inner header logo: 50% of default size */
/* App name in inner header: slightly lighter than black; Maitree 25px */
#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 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 {
  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 {
  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 .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-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 {
  text-decoration: none !important;
}

/* Authenticated nav brand: Maitree 25px, same colors as unauthenticated */
.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 */
/* When app header provides landing nav, hide the landing-alt topbar to avoid duplication */
/* 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__link {
  color: #4ECDC4 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.nav-header-welcome__link:hover {
  color: #6bd9d2 !important;
  text-decoration: underline !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__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 */
/* Upgrade in header: same light pill on dark nav in every color scheme */
/* Apply same nav Upgrade styling in all themes (override theme dock CTA colors) */
/* 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-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 */
/* 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__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-welcome {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.ll-bento-welcome__link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* Getting Started - progress block */
/* Home board card - same formatting and hover as Getting Started (--main) */
.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);
}

/* 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.

   NOT ON THE CLASSIC BOARD PAGE. That ancestor only exists when the modern
   navbar renders, and controllers/application.js#useAppNavbarInHeader returns
   false outright for `user.board-alt.index` — so on the classic board this rule
   pulled the gear out of #identity's flex row and resolved `right: 48px`
   against a different ancestor entirely, dropping it on top of the beta button.
   Visible from 1025px down to 769px: below that the ≤768px block further down
   takes over, and it already carries this same `:not(.board-alt-view)` guard
   "so board-alt's flex-flow header layout is preserved".

   The classic header has no empty right-hand slot to pin into — its View
   switcher, beta button, settings gear and identity dropdown are already
   siblings in one flex row (#inner_header is `display: flex`, #identity is a
   nested flex), so leaving all four IN flow is what spreads them correctly.
   The added `#within_ember` chain raises this to (1,2,0); verified against
   every other `.ll-header-settings-btn` rule that none sets position/top/
   right/transform, so nothing else changes hands. */
@media (max-width: 1024px) {
  #within_ember:not(.board-alt-view) .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 */
/* Wrapper for tabs + single underline that pulls them together */
/* Nav pills (e.g. Boards: Suggested/Mine/Community/Recent) - bento-aligned */
/* Main content area - same horizontal inset as tabs for alignment */
/* Boards section - home board card wrapper (full width of bento-content) */
/* Browse Boards - same styling as home board card / Getting Started for consistency */
/* Boards page – wrapper, header, toolbar, current home */
/* Toolbar: search + filter pills in one row */
.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 */
/* Ultra-modern board cards: large radius, image-first, scale + shadow on hover */
/* Section grouping - glass container with left bar to signify section */
/* Light theme: no left teal bar (only default theme has it, with toggle) */
/* 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;
}

/* Filter cards grid - 2x2 like primary actions */
/* Active filter card - subtle highlight */
/* Actions section - hero + grid layout */
/* Extras expanded - full width section with glass look */
/* Card components - hero and feature tiles */
/* Primary action button - distinct from Bootstrap .btn */
/* Feature grid - 2-column layout for action tiles */
/* Bottom dock - primary navigation bar; fixed height so it never stretches */
.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;
}

/* Mid-day mode - icy blue light gray, text converted for contrast */
/* Main section lighter than bento bar for contrast (like dark mode) */
/* Topbar modifier: applied directly on element when mid-day mode */
/* Dock - icy blue light gray; Upgrade and active item keep their styling */
/* Dock matches bento bar silver gradient */
/* Action card icons - 25% darker in mid-day */
/* Upgrade button - style guide coral in mid-day, navy text */
/* Dock labels - light text on darkened dock */
/* Light gray cards need dark text for contrast */
/* 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) */
/* 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 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;
}

/* Action card icons - glass look in dark mode */
/* Same as Browse boards pills (Suggested, Mine, Community) in dark mode */
/* Focus ring - keyboard focus only (no outline on mouse click/blur to prevent flash) */
/* 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) */
/* Light mode (default) – brand palette */
/* Gold theme – teal/coral accent */
/* #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;
}

/* Default shell: active pill gradient (7eb8e0 → 3a6bc7). */
/* Default palette shell: top-down gradient – blue, gold (subtle), green (subtle). */
/* Demo: color circles on bento bar (default theme only) – change ll-bento-main-content bg for client preview */
/* Thick state: icon shows wider bar (matches 24px section border) */
/* When border is toggled off, hide left bar on section groups (specificity must beat default-theme rule below) */
/* Default theme: when border toggle is off, remove teal left bar on all section groups (including Primary actions and filter) */
/* Default theme: thick border = 4px + 20px fill to the right (24px total teal strip) */
/* 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) */
/* Light mode (default): Help me… buttons – solid #3D7A5C, no box-shadow */
/* Gold theme: Help me… buttons use same 20% lighter blue */
/* Lifted card shadows – action cards and hero card look elevated off the page */
/* Speak mode = main action: 20% darker than default action button */
/* Default palette: speak button bg #357a5c at 50% lighter. */
/* Light mode: replace purplish pill colors with 3a6bc7 (darker) and 7eb8e0 (lighter) */
/* Default theme – headings use Lexend */
/* Responsiveness for bento layout */
/* Show company name in navbar on index/landing when screen is small (global h1 span is hidden below 1000px) */
/* 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-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-main {
  padding: 14px;
}

/* 14px — dock labels — minimum readable with weight 650 */
/* 15px */
/* 15px */
/* 15px */
/* 15px */
/* Line under each section header to define Actions, Your Boards, Supervisors, Reports */
/* Light teal shading above the line separator */
/* Unified "See all" expansion link in section headers – subtle, consistent */
/* 15px */
/* Stacked Spaces topbar & tabs */
/* Full-width gradient wrapper for main content – same as default shell */
/* Grouped sections: Actions, Boards, Reports – raised */
/* Speak Mode hero: same gradient as Getting Started card */
/* Last Board pill: coral 50% lighter then 20% lighter, small so it doesn't compete with Start Speaking */
/* 15px */
/* Three-column layout so supervisor names are centered over the full row */
/* Separator between Supervisors label and supervisor list – actual element so shadow applies */
/* Light teal band to the right of the line (same as ::before above other section lines) */
/* 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;
  }
}
.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;
  }
}

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

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

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

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

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

@keyframes aac-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.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;
}

.progress-bar {
  height: 8px;
  background: #EDE9E0;
  border-radius: 999px;
  overflow: hidden;
}

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

.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-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}

.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 > 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-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__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-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-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-feature-card h3,
.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 {
  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-feature-card h3,
.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 {
  font-family: "Lexend", sans-serif !important;
}

/* 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-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 */
  /* 1025-1219px (2026-10-02). With Basic Access as a fifth link the window-centred row wrapped to two
     rows here, and kept on one row (no-wrap) it ran under Try Free / Sign In: the logo side is
     narrower than the buttons side, so the row sits 120px nearer the buttons than the logo at every
     width in this range (measured with no-wrap at 1025, 1060, 1100 and 1180px: 91 / -29, 109 / -12,
     129 / 8, 169 / 48px). Shifting it 60px left centres it between the two. Still absolutely
     positioned, so the `flex: 1 !important` rules on `.header-unauth-nav` do not apply. Below
     1025px the hamburger takes over ($aac-breakpoint-lg); from 1220px nothing changes. */
}
@media (min-width: 1025px) and (max-width: 1219px) {
  .app-navbar .la-topbar-nav {
    left: calc(50% - 60px);
    white-space: nowrap;
  }
}

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

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

/* Tiny link to left of Try Free: toggles hero + sign-in/speak button colors (current vs previous slate) */
.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-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-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-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-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-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-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. */
/* 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 brand — small gap so the two discs read
     as left-aligned next to it, not flush against it. (Was "after the 180px Search
     field"; that field was removed 2026-09-02 and the brand is now what precedes
     this cluster. The View switch follows it on the right and carries its own
     12px lead — see _view-switcher.scss.) */
  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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%) !important;
  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;
}

/* Make the text region a flex column so its preview content can divide the region's height.
   `height: 100%` cannot do this — the region's own height comes from flex-growing inside
   .shepherd-content (`flex: 1 0 auto` above), so a percentage child has no definite height to
   resolve against; only a flex child of this column does.

   REPOINTED 2026-09-20, from `:has(.md-ds-options--with-previews)`. That marker belonged to the
   "Choose your display style" step, removed the same day, so the selector had stopped matching
   anything and the region had silently reverted to a plain block — which is why the customize
   page's preview and toggles stopped at their content height with an empty band beneath them.
   `.md-ds-preview--with-toggles` is the customize page's own marker, so the rule now applies
   where the height is actually needed. Kept as a `:has()` rather than dropped onto the bare
   element so a future step without a preview is not forced into this column layout. */
.shepherd-element.md-ds-modal--display .shepherd-text:has(.md-ds-preview--with-toggles) {
  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. */
/* 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. */
/* 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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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. */
/* "and/or" SITS ON THE MODAL'S CENTRE LINE (requested 2026-09-20), with one item to its left
   and one to its right.
   A CENTRED FLEX ROW CANNOT DO THIS. `justify-content: center` centres the GROUP, so the
   separator lands wherever the two labels' differing widths happen to put it — "Drag cards to
   move them around" and "Choose what appears on your dashboard" are nowhere near equal, so it
   sat noticeably left of centre.
   `1fr auto 1fr` pins the middle column to the true centre whatever the labels weigh: the two
   `1fr` tracks are always equal, so the `auto` track between them is centred by construction.
   The items then hug it via `justify-self`, keeping the gap symmetrical. */
.md-ds-howto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 14px;
  margin: 4px auto 16px;
}

.md-ds-howto > .md-ds-howto__item:first-child {
  justify-self: end;
}

.md-ds-howto > .md-ds-howto__item:last-child {
  justify-self: start;
}

.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) {
  /* Single column below 768px. This USED to be `flex-direction: column`, which the grid above
     made inert — a flex property on a grid container does nothing, so without this change the
     three-column row would have survived down to phone widths and squashed both labels.
     `justify-items: center` replaces the flex centring for the same reason. */
  .md-ds-howto {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
/* 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 {
  /* WAS `margin-top: 6px`, now 0 (2026-09-20). It never actually contributed 6px: as a block it
     collapsed into `.md-ds-howto`'s 16px bottom margin above it, so the gap was always 16px.
     A flex item does NOT margin-collapse, so once the parent became a flex column the 6px
     started adding on top — measured as a 6px scroll on a 760x640 viewport that had none
     before. Zero keeps the rendered gap exactly what it has always been. (`.md-ds-howto` is
     always rendered directly above this element: both are gated on the same `withToggles`
     flag in _gentlePreviewHtml.) */
  margin-top: 0;
  /* Grow into the flex column above (the `:has()` rule on .shepherd-text). Without this the
     grid is an auto-height block and its `minmax(0, 1fr)` row has no spare height to hand out,
     so `align-items: stretch` below would have nothing to stretch INTO. `min-height: 0` lets it
     shrink past its content on a short viewport instead of overflowing the modal. */
  flex: 1 1 auto;
  min-height: 0;
  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";
  /* STRETCH, not `start` (2026-09-20). Row 2 is already `minmax(0, 1fr)`, so it takes whatever
     height the modal has left — but `align-items: start` made both panels sit at the top of
     that row at their content height, leaving the empty band below them that was reported.
     The row was never the problem; the items simply were not growing into it. `stretch` is the
     grid default, so this line is now only here to document that the previous value was
     deliberate-looking and wrong. */
  align-items: stretch;
  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)
   filling the full height of its row, 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` REMOVED (2026-09-20): it re-applied the shrink per-item, so relaxing
     the container's `align-items` alone would have fixed the preview column and left this one
     short — the two had to change together. The pills inside still stack from the top; that is
     `.md-ds-sections`' own flex direction, not this. */
}

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

/* SAVE CHANGES — sits at the foot of the checklist panel (requested 2026-09-20). It is an
   alias for the modal footer's primary button, so it is gated with it.
   Gentle View reuses `.md-btn.md-btn--primary` wholesale (the class the Gentle dashboard's own
   action buttons carry), so only the layout/spacing is set here. */
.md-ds-save {
  /* Full panel width so it reads as the panel's own footer action rather than a stray chip,
     sitting directly under the last checkbox.
     NOT `margin-top: auto` to pin it to the panel's bottom edge: `.md-ds-sections` is a plain
     BLOCK (see its rule above), so auto margins do not distribute free space there, and making
     it a flex column to enable that would change how the panel's `max-content` grid track is
     measured — the `.md-ds-sections__title` width:min-content/min-width:100% pair depends on
     that measurement. A fixed gap gets "at the bottom of the list" without touching it. */
  display: block;
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.md-ds-save--disabled,
.md-ds-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* FOCUSED VIEW — the glossy dark-slate treatment of the My Caseload hero
   (.md-card--caseload-focused, ~55229 below) at button scale. That rule is scoped to
   `.md-grid--layout-focused.md-grid--hero-caseload` and is `!important` throughout (it has to
   beat the .md-card base), so it cannot be reused directly; this restates the recipe from the
   SAME shared tokens so the two cannot drift apart in colour. */
.md-ds-save--focused {
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  background: radial-gradient(ellipse at center, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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%);
  /* Same raised bevel as the hero — lit top edge, darker inner bottom lip, contact shadow and
     drop shadow — scaled down for a control this size rather than a 220px showcase card. */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), inset 0 -5px 10px rgba(27, 54, 93, 0.36), 0 2px 4px rgba(27, 54, 93, 0.26), 0 10px 20px rgba(27, 54, 93, 0.38), 0 0 18px rgba(42, 157, 143, 0.1);
}

.md-ds-save--focused:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -5px 10px rgba(27, 54, 93, 0.34), 0 4px 9px rgba(27, 54, 93, 0.28), 0 16px 30px rgba(27, 54, 93, 0.46), 0 0 30px rgba(76, 134, 216, 0.35);
}

.md-ds-save--focused:active {
  transform: translateY(2px);
  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);
}

/* 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";
    /* THREE rows here, so the two-row template above would leave row 3 implicit and put its
       `minmax(0, 1fr)` on the LEGEND — which, now that the items stretch, would blow the legend
       up to fill the modal and push the preview off the bottom. Restate the tracks so the
       flexible one is the live preview, matching the wide layout's intent. */
    grid-template-rows: auto auto minmax(0, 1fr);
    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;
  /* The positioning context for the drag-refusal message below, which must be able to
     appear WITHOUT taking part in this flex row -- see `--blocked`. */
  position: relative;
}

/* "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;
  /* Even 12px top and bottom (requested 2026-09-20), replacing the asymmetric 30/16 that sat
     the scaled grid lower in the frame. The horizontal 0 is unchanged: the cloned grid brings
     its own side gutters. `_fitPreviewZoom` reads this back via getComputedStyle (`padY`), so
     the zoom that fits the clone to the viewport tracks the new value with no JS change. */
  padding: 12px 0;
  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;
}

/* QUIET — Focused View renders the hint element empty so the drag-REFUSAL message has an
   element to be written into (display-style.js#setBlocked), without showing the drag
   instruction that view deliberately omits. Collapsed until `--blocked` arrives.
   `aac-sr-only`, NOT `display: none`: this element is an `aria-live` region, and a display:none
   element is removed from the accessibility tree — the region would not be observed, so the
   later text change would never be announced. The mixin's `position: absolute` also takes it
   out of `.md-ds-preview__legend`'s flex flow (an absolutely-positioned child is not a flex
   item), so it still contributes no gap to the `gap: 12px 14px` row — which was the original
   reason the element was dropped rather than hidden.
   (0,2,0) via the `:not()`, so it beats the base hint rule and yields cleanly once blocked. */
.md-ds-preview__legend-hint--quiet:not(.md-ds-preview__legend-hint--blocked) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* THE REFUSAL MESSAGE IS OUT OF FLOW, and that is the whole fix for the drag "shaking"
   (reported 2026-09-21: "when i try to drag and drop an action card over another row, the ui
   shakes"). It used to become a normal in-flow flex item the moment `--blocked` arrived,
   because `--quiet:not(--blocked)` above stopped matching and took `aac-sr-only` with it.
   Measured with the pointer held PERFECTLY STILL over a forbidden card: the hint went
   `position: absolute` -> `static` and 1px -> 23px tall, and the preview grid below it
   dropped from y=236.1 to y=271.2 -- a 35px jump. That jump moves the card out from under
   the cursor, so the next frame's hit-test finds no forbidden target, the message clears, the
   preview springs back, the cursor is over the card again, and the message returns. The
   oscillation IS the shake: the cue was destroying the geometry its own trigger was measured
   against.
   Absolutely positioned under the legend, it is visible and still announced (the element
   remains the `aria-live` region) while contributing nothing to layout, so the hit-test sees
   the same rects every frame and the loop cannot start. The not-allowed cursor the request
   asked for is already on the dragged card's overlay, above.
   Only reachable in Focused View -- `acceptsDrop` never refuses in Gentle -- so taking the
   blocked state out of flow cannot disturb the in-flow instruction Gentle shows. */
.md-ds-preview__legend-hint--blocked {
  color: #C0392B;
  font-weight: 600;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Undo the rest of `aac-sr-only`, which is no longer suppressed by the `:not()` above but
     whose clipping would otherwise be inherited from the mixin's shorthand. */
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  /* It now overlays the top of the preview, so it needs to be readable against whatever is
     under it and must never eat a pointer event mid-drag. */
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  z-index: 3;
  pointer-events: none;
}

/* 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 .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;
  }
  /* The title's 2rem top margin: the <=900px block after this one (2026-10-01). */
}
/* THE TITLE'S 2rem LEAD STARTS AT 900, NOT 1024 (2026-10-01, requested: "hold the full-size
   spacing"). Above 900 the tour chip it made room for is `position: fixed` (above), so the margin
   only moved the title down 20px at 1024. Below 900 it stays as it was, and the account section's
   11px (the next block) still overrides it there. */
@media (max-width: 900px) {
  .md-hero.md-hero--dashboard .md-hero__title {
    margin-top: 2rem !important;
  }
}
/* 2rem IS 20px, AND THE ACCOUNT SECTION KEEPS 11 OF IT BELOW 901 (2026-09-24, "move account
   page content up 64px"). The hero's own padding is 0 here, so this margin IS the title's lead
   -- the last empty box above the title once the workspace and main insets are gone, and the
   remainder of the 64 after those two give 55.
   SCOPED TO `.md-shell--user`, WHICH IS WHY IT IS A NEW RULE RATHER THAN AN EDIT ABOVE: the rule
   above is shared with the home dashboard's hero, which was not asked to move and must not. The
   scope is the difference between the two, not a specificity bid on the same one.
   11 rather than 0 so the heading is not flush against the region above it. */
@media (max-width: 900px) {
  .md-shell--user .md-hero.md-hero--dashboard .md-hero__title {
    margin-top: 11px !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);
}

/* "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-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-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__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-stat-label {
  font-size: 21.252px;
  color: #3D4F46;
  line-height: 1.6;
}

@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 {
  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 {
  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;
}

/* 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-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. */
/* 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__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__eyebrow {
  margin: 0;
  color: #8fe4df !important;
  font-size: 0.95rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.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__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 {
    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) {
    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 {
    gap: 20px;
  }
  #la-features .la-feature-card,
  #about-what-we-offer .la-feature-card,
  #faq-items .la-feature-card,
  #faq-questions .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 {
    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-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-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-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-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-panel {
  grid-area: panel;
  background: #F4F1EB;
  border-left: 1px solid #EDE9E0;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.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;
  /* A title, never a control. Two dialogs focus theirs on open so a screen reader announces it
     first (`[data-autofocus]`, components/modal-dialog.js); the global focus ring skips it (see
     `#within_ember *:focus-visible`), and this drops the browser's own outline too. */
  outline: none;
}

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

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

/* ── Switch Languages modal ──────────────────────────────────────────
   Replaces the Bootstrap horizontal-form grid this modal used to carry. The header and its
   close button come from the shared `.la-modal-header` chrome (already in the universal
   header list); the footer is registered in the universal footer alias list above, which is
   what gives it the shared gradient + padding — a `la-*-modal-footer` that is NOT in that
   list silently gets no chrome at all (styling-recurring-problems.md #7).
   The legacy `#languages_prompt .form-group .glyphicon` and `.big_select` rules were DELETED
   rather than left in place: both had zero consumers left repo-wide once the markup changed,
   and a legacy descendant rule that outlives its replacement is exactly how the Share Text
   restyle half-landed (see LEARNINGS 2026-08-27). */
/* The header label. Without this the shared `.la-modal-header-label` base applies, whose
   colour is $brand-honey-bronze (#F2B95A) — measured 1.68:1 on this header's $surface-100
   ground, against the 4.5:1 that 15px/800 text needs. That base is the legacy eyebrow
   treatment; every modernised modal overrides it the same way (devices :38468, add-app,
   colors, features, big-button), and this modal was simply missing the override rather than
   needing a new colour. var(--md-ink) is #111A2E => 17.5:1. `text-transform: uppercase` is
   deliberately left inherited: none of the sibling modals reset it, so the eyebrow keeps its
   house form and only the contrast changes. */
/* The icon TILE. There is no base `.la-modal-header-icon` rule — every modal's tile lives on
   its own modifier (`--app` :38407, `--devices`, `--colors`, `--valet`), so a modifier with no
   rule renders as a bare glyph with no box and no flex-shrink, which is why this one sat flush
   against the title. Verdigris tint to match the globe's own accent stroke. */
.la-modal-header-icon--languages {
  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-languages-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;
  /* Centred title. The header is `justify-content: space-between` with three children, and
     this one takes the space between the 46px icon tile and the 48px close button — so
     centring the text inside it lands within ~1px of the modal's true centre without having
     to take the close button out of flow. */
  text-align: center;
}

/* Half the shared 28px. `.modal` qualifier is load-bearing: the universal end-of-file
   `.modal .la-modal-header` rule is (0,2,0) and sits LATER, so an unqualified wrapper rule
   is also (0,2,0) and loses its vertical padding entirely. (0,3,0) makes this authoritative.
   Same pattern as `.modal .la-share-text-modal-wrap .la-modal-header`. */
.modal .la-languages-modal-wrap .la-modal-header {
  padding-top: 22px;
  padding-bottom: 22px;
}

.la-languages-modal-body {
  padding: 20px 24px;
}

.la-languages-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.la-languages-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-ink);
}

/* Label above control rather than the old 4/8 column split: at the widths this modal is
   actually shown, a side label left the select under ~180px and clipped long endonyms. */
.la-languages-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.la-languages-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-ink);
}

/* Was a 30px glyphicon font sitting on the label baseline; now an inline SVG sized to the
   text so it cannot drag the row height around. */
.la-languages-field__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #1A7B7A;
}

.la-languages-field__control {
  width: 100%;
}

/* Width only. `@select_class` lands on BoundSelect's OUTER `.bound-select` wrapper, not on a
   `<select>` — the visible control is `.bound-select__trigger`, which already carries the
   modern skin (44px min-height, its own chevron, focus ring). Restyling it from here would
   fork one modal's select from every other one for no reason, and the first draft of this
   rule did exactly that by aiming padding and borders at the wrapper, where they did nothing.
   Menu clipping is likewise already handled: `.modal-content .bound-select__list` (:98132)
   flow-positions the list for every modal (styling-recurring-problems.md #1). */
.la-languages-select {
  width: 100%;
}

/* Segmented pair, shown when the board offers exactly two languages. Equal flex basis so
   neither language's name dominates, and wrapping text rather than the old
   `max-width: 50%; overflow: hidden; text-overflow: ellipsis` inline style, which truncated
   the name of whichever language happened to be longer. */
.la-languages-segmented {
  display: flex;
  gap: 8px;
  width: 100%;
}

.la-languages-segmented__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17, 26, 46, 0.12);
  background: #F8F9FA;
  color: var(--md-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.la-languages-segmented__btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

/* Selected state carries BOTH a fill and a border change, not colour alone: the two options
   are language names, so a user who cannot separate the two hues has nothing else to go on
   (WCAG 1.4.1). `aria-pressed` carries it for assistive tech. */
.la-languages-segmented__btn--on {
  background: rgba(42, 157, 143, 0.12);
  border-color: #1A7B7A;
  color: #115C5B;
}

.la-languages-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* 20px, and NOT shrunk on small screens: this is the control that decides whether the second
   picker appears at all, and it is a touch target on a communicator's device. */
.la-languages-check__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  cursor: pointer;
}

.la-languages-check__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink);
}

/* Wraps rather than scrolls: three buttons, one of which is a long translated string. */
.la-languages-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  /* Horizontal padding has to be declared here. The universal footer rule this class is
     registered in sets ONLY padding-top/bottom, and this footer carries no Bootstrap
     `.modal-footer` class to inherit a horizontal value from — so without this the buttons
     sat flush against the modal's right edge and the primary one clipped. Matches the body's
     24px so the three columns line up. */
  padding-left: 24px;
  padding-right: 24px;
}

.la-languages-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-languages-btn:hover {
  background: #F0F4F8;
  border-color: rgba(20, 127, 130, 0.3);
}

.la-languages-btn--primary {
  background: #46505F;
  border-color: #46505F;
  color: #fff;
}

.la-languages-btn--primary:hover {
  background: #1B365D;
  border-color: #1B365D;
}

/* ── Saved Phrases modal (modern) ── */
/* Sit 4px from the top instead of Bootstrap's `margin: 30px auto` (measured: dialog top
   was 30px). Only margin-TOP is overridden, so the `auto` sides still centre it. */
.modal-dialog:has(.la-phrases-modal-wrap) {
  margin-top: 4px;
}

.la-phrases-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

/* `.modal` qualifier is load-bearing: the universal end-of-file rule
   `.modal .la-modal-header` forces 28px top/bottom on every modal and is the same
   specificity (0,2,0) but LATER in source order, so the 20px declared here never applied —
   measured at 28px in the browser. (0,3,0) makes this authoritative, and 14px is half the
   28px that was actually in force. Halving the 20px would have changed nothing visible. */
.modal .la-phrases-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 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);
}

/* "Clear all phrases" and its in-place confirm, sitting just above the modal footer.

   Deliberately quiet in its resting state — a text-weight button, not a red one. It is a
   housekeeping control that lives permanently on screen next to a list an AAC user reads
   often, and a standing red button invites the tap it is trying to guard. The DESTRUCTIVE
   colour appears only on the second step, on the button that actually deletes. */
.la-phrases-clear-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  /* Bottom padding, not 0. The footer below carries its own `border-top`, and with no gap
     the button sat right on that line — reading as part of the footer's button group
     rather than as an action on the list above it. 16px separates the two without
     needing a divider of its own. */
  padding: 10px 24px 16px;
}

.la-phrases-clear-prompt {
  flex: 1 1 220px;
  /* 15px in px, not `0.9375rem` — see the badge note above: the root is 10px here, so
     that would have rendered this confirmation at 9.4px, which is precisely the wrong
     place to be hard to read. */
  font-size: 15px;
  color: #1B365D;
}

.la-phrases-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(70, 80, 95, 0.3);
  background: transparent;
  color: #374151;
  font-size: 15px;
  cursor: pointer;
}

.la-phrases-clear-btn:hover {
  background: rgba(70, 80, 95, 0.06);
}

.la-phrases-clear-btn svg {
  opacity: 0.7;
}

/* White on #C0392B is 5.44:1 — passes WCAG 1.4.3 AA for normal-size text. */
.la-phrases-clear-btn--confirm {
  border-color: #C0392B;
  background: #C0392B;
  color: #fff;
  font-weight: 600;
}

.la-phrases-clear-btn--confirm:hover {
  background: rgb(166.9991489362, 49.5778723404, 37.4008510638);
}

/* Same story as the header, but it needs the WRAP in the selector too. The universal rule
   is itself `.modal .la-phrases-modal-footer` — identical specificity (0,2,0) and later in
   the file, so a `.modal`-qualified copy still loses. Measured: it stayed at 28px until the
   wrap was added, taking this to (0,3,0). 14px is half the 28px that was in force. */
.modal .la-phrases-modal-wrap .la-phrases-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 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) ── */
/* ── Share Text modal (share-utterance) — modern restyle ── */
/* Sit 4px below the top of the viewport instead of Bootstrap's `.modal-dialog`
   margin (30px auto at >=768px, 10px below it). Only margin-TOP is overridden, so
   the `auto` side margins still centre the dialog and the bottom margin still gives
   it clearance when the body is tall enough to scroll. `:has()` matches this modal
   only and is the same idiom every other per-modal dialog rule in this file uses. */
.modal-dialog:has(.la-share-text-modal-wrap) {
  margin-top: 4px;
}

/* Small screens: fill the width, 4px each side.
   Two things had to be overridden, and both need the force:
     * modal-dialog.js#stretch writes an INLINE `width: min(desired_width, 90vw)`, so at
       480px the panel was 432px and simply wasting 48px of a screen that has none spare.
       `width: auto` is .modal-dialog's own Bootstrap default — restoring it lets the block
       fill its container minus margins, which also sidesteps `100vw` (that would include
       the scrollbar and overflow).
     * Bootstrap only supplies `margin: 30px auto` from 768px up; below that its rule is a
       flat `margin: 10px`. With an inline width declared that is not centring at all —
       measured at 480px the dialog sat at left 10 / right 442, i.e. 10px one side and 38px
       the other. Stated on both sides rather than relying on `auto`. */
@media (max-width: 767px) {
  .modal-dialog:has(.la-share-text-modal-wrap) {
    width: auto !important;
    max-width: none !important;
    margin-left: 4px;
    margin-right: 4px;
  }
}
/* modal-dialog.js:97 puts an inline `max-height: window.height - 50` on .modal-content for
   every modal. With this modal sitting 4px from the top that caps it 46px short of the
   viewport and starts it scrolling earlier than it needs to (measured at vh=640: content
   capped 590 against 671 of content, dialog bottom 46px above the fold). Neutralised here
   and replaced with a cap this modal owns — 4px top + 4px bottom.
   Same override, same reason, as `.modal-content:has(.la-find-button-wrap)` and
   `:has(.md-speak-menu)`. */
.modal-content:has(.la-share-text-modal-wrap) {
  max-height: none !important;
}

.la-share-text-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
  /* Column so the header stays pinned and only the BODY scrolls — previously the whole
     modal scrolled, taking the title and close button off-screen with it. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8px);
}

/* `.modal` qualifier is load-bearing: the universal end-of-file rule
   `.modal .la-modal-header` (0,2,0) forces 28px top/bottom on every modal and
   beats an unqualified `.la-share-text-modal-wrap .la-modal-header` on source
   order. (0,3,0) here makes this the authoritative header rule for the modal. */
.modal .la-share-text-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

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

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

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

/* This modal has no footer element (see modal-dialog.hbs -- the component
   yields straight into .modal-content), so the body's bottom padding IS the
   modal's foot. Halved with the header: 20/24 -> 10/12. */
.la-share-text-modal-body {
  /* `min-height: 0` is required: a flex item's default `min-height: auto` refuses to
     shrink below its content, so without it this never becomes the scroller and the
     overflow escapes the wrap instead. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 24px 12px;
  /* Glass needs a ground. Without a tinted wash behind them the translucent
     buttons below sit on flat #fff and the blur/refraction has nothing to pick
     up. Same three brand stops as the universal modal-header gradient. */
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), #F8F9FA;
}

.la-share-text__quote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px 18px;
  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;
}

/* Sole occupant of the body in the empty state (share-utterance.hbs gates
   everything else behind `{{#if this.sentence}}`), so no trailing margin. */
.la-share-text__empty {
  margin: 0;
  padding: 14px 18px;
  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: 8px 0 12px;
}

.la-share-text__grid {
  margin: 0;
}

/* Glass tiles. Three layers do the work, and all three are needed:
   1. a white top-to-bottom gradient over a translucent tint  -> the pane itself
   2. `backdrop-filter` blur + saturate                        -> refracts the body wash
   3. `inset 0 1px 0` white                                    -> the lit top edge
   The gloss sweep across the upper half is the ::before below. */
.la-share-text-modal-wrap .btn.la-share-text__action,
.la-share-text-modal-wrap a.btn.la-share-text__action {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  /* Grow AND shrink, capped at 190px. `flex: 0 0 190px` held every tile at exactly 190px
     at every width, so a narrow modal did not scale its contents — it just wrapped them
     onto more rows and left slack at the edge. The 150px basis is the floor at which two
     lines of helper text still read; `justify-content: center` on the parent still centres
     a short row. */
  flex: 1 1 150px;
  max-width: 190px;
  /* Two lines of helper text is the tall case; pinning the floor here keeps the
     row even when one tile's helper wraps to two lines and its neighbour's does not. */
  min-height: 108px;
  padding: 12px 10px;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  /* Per-tile colour. The white gradient bottoms out at 0.72 over the tint, which
     keeps $brand-charcoal-blue label/helper text at >=5.4:1 on EVERY tile below
     (worst case Instagram) and each icon ink at >=3.7:1 -- AA text, AA non-text.
     Re-check both if a tint is ever darkened. */
  --tile-tint: #E8ECF1;
  --tile-ink: #46505F;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #46505F;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.06), 0 6px 18px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  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--copy {
  --tile-tint: #2A9D8F;
  --tile-ink: #1A7B7A;
}

.la-share-text-modal-wrap .btn.la-share-text__action--button {
  --tile-tint: #F2B95A;
  --tile-ink: #9A6B0F;
}

/* Email is SILVER rather than a brand hue: Copy/Button/Link each map to a product
   colour, and email is the one hand-off with no colour of its own. Same tile
   primitive and same gradient as the other three -- only the tint/ink swap, so it
   picks up the identical glass treatment, gloss sweep and shadow stack.
   Measured on the resulting tile (white gradient bottoms out at 0.72 over the tint,
   the worst case for contrast): label #46505F 6.46:1, icon ink 4.75:1 -- both clear
   the >=5.4 text / >=3.7 non-text floors this block documents above. */
.la-share-text-modal-wrap .btn.la-share-text__action--email {
  --tile-tint: #98A2B0;
  --tile-ink: #5A6472;
}

.la-share-text-modal-wrap a.btn.la-share-text__action--link {
  --tile-tint: #8585E6;
  --tile-ink: #5B4FC7;
}

/* #0866FF is Facebook's current brand blue (refreshed 2023, was #1877F2). Label
   measures 5.43:1 on the resulting tile — AA. */
.la-share-text-modal-wrap .btn.la-share-text__action--facebook {
  --tile-tint: #0866FF;
}

/* X (formerly Twitter). Its scheme is monochrome, so the tint is X's ink rather
   than a hue — but pure #0F1419 at the shared 0.72 gradient bottom leaves the
   $brand-charcoal-blue label at 4.34:1, under AA. This tile therefore lightens its
   own gradient to 0.80, which measures 5.28:1 for the label and 11.99:1 for the
   glyph. The mark itself is drawn at full strength via --tile-ink. */
.la-share-text-modal-wrap .btn.la-share-text__action--x {
  --tile-tint: #0F1419;
  --tile-ink: #0F1419;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.87) 45%, rgba(255, 255, 255, 0.8) 100%), var(--tile-tint);
}

.la-share-text-modal-wrap .btn.la-share-text__action--x:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
}

.la-share-text-modal-wrap .btn.la-share-text__action--instagram {
  --tile-tint: #E1306C;
}

.la-share-text-modal-wrap .btn.la-share-text__action--other {
  --tile-tint: #5A6A85;
  --tile-ink: #414D63;
}

/* Each action group is its own centred row. Row 2 (social) carries no helper text,
   so it gets a shorter floor rather than inheriting row 1's two-line height. */
.la-share-text__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px;
}

/* Row 2 sits on its own line, so these are square logo tiles rather than the wide
   helper-text tiles of row 1. 88x88 — double the 44px WCAG 2.5.5 touch-target
   minimum, which is the floor they may never go below. Labels are visible: a logo
   alone is recognisable but not nameable, and the label is also the button's
   accessible name. `Other` keeps the full-width tile — a generic share glyph needs
   its word more than a brand mark does. */
.la-share-text__actions--social {
  align-items: center;
}

.la-share-text__actions--social .la-share-text__action {
  min-height: 84px;
}

.la-share-text-modal-wrap .btn.la-share-text__action--facebook,
.la-share-text-modal-wrap .btn.la-share-text__action--x,
.la-share-text-modal-wrap .btn.la-share-text__action--instagram {
  flex: 0 0 88px;
  width: 88px;
  max-width: 88px;
  height: 88px;
  min-height: 88px;
  padding: 10px 6px;
  gap: 6px;
  justify-content: center;
  border-radius: 16px;
}

.la-share-text-modal-wrap .btn.la-share-text__action--facebook::before,
.la-share-text-modal-wrap .btn.la-share-text__action--x::before,
.la-share-text-modal-wrap .btn.la-share-text__action--instagram::before {
  border-radius: 16px 16px 50% 50%/16px 16px 18px 18px;
}

/* 14px, not the 15px of row 1: "Instagram" has to fit inside 88px minus padding.
   `normal` white-space so a longer localised label wraps rather than overflowing —
   these strings are translated, and several locales are wider than the English. */
.la-share-text__action--facebook .la-share-text__action-label,
.la-share-text__action--x .la-share-text__action-label,
.la-share-text__action--instagram .la-share-text__action-label {
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
}

/* The gloss: a highlight over the top of the pane, curved along its lower edge so
   it reads as a reflection rather than a flat band. Inert to pointer/hit-testing. */
.la-share-text-modal-wrap .btn.la-share-text__action::before,
.la-share-text-modal-wrap a.btn.la-share-text__action::before,
.la-share-text-modal-wrap .btn.la-share-text__contact-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  border-radius: 14px 14px 50% 50%/14px 14px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.la-share-text-modal-wrap .btn.la-share-text__action > *,
.la-share-text-modal-wrap a.btn.la-share-text__action > *,
.la-share-text-modal-wrap .btn.la-share-text__contact-btn > * {
  position: relative;
  z-index: 1;
}

.la-share-text-modal-wrap .btn.la-share-text__action:hover,
.la-share-text-modal-wrap a.btn.la-share-text__action:hover {
  /* Hover deepens the tile's OWN tint (less white on top) rather than washing every
     tile verdigris -- with per-tile colour that would read as a change of identity. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgba(255, 255, 255, 0.95);
  color: #1b2a4a;
  box-shadow: 0 2px 4px rgba(17, 26, 46, 0.07), 0 12px 26px rgba(17, 26, 46, 0.12), inset 0 1px 0 rgb(255, 255, 255);
  transform: translateY(-2px);
}

.la-share-text-modal-wrap .btn.la-share-text__action.btn-success {
  border-color: rgba(60, 154, 95, 0.55);
  --tile-tint: #3c9a5f;
  color: #2e7d4f;
}

.la-share-text__action-icon {
  display: block;
  color: var(--tile-ink);
}

/* Logos keep their brand colour now that every tile is tinted -- the old
   `grayscale(0.6)` existed to stop two full-colour logos shouting on an
   otherwise all-white row, which is no longer the situation. */
.la-share-text__action-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.la-share-text__action-label {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

/* What the button actually does. $brand-slate-blue is 5.34:1 on this surface —
   WCAG AA at this size — and 13px keeps it above the AAC legibility floor rather
   than dropping to a conventional 11-12px caption. */
.la-share-text__action-help {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #5A6A85;
}

/* One line for the whole contact group: every contact tile does the same thing,
   so a per-tile helper would be 14 repetitions and would undo the compact row. */
.la-share-text__section-help {
  width: 100%;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #5A6A85;
}

/* ── Contact list: a grid clamped to its first three rows ───────────────────
   The clamp is a HEIGHT, not a child index. The previous version hid from the
   13th/10th/7th child per breakpoint, which is only "three rows" if the rendered
   column count matches what the media query assumed — couple those two and any
   disagreement silently shows a fourth row. A fixed row height plus
   `max-height: 3 rows + 2 gaps` is exactly three rows for ANY column count, so
   the breakpoints below only have to decide how WIDE the tiles are, never how
   many are visible.
   The contact tile is therefore a fixed-height row (--contact-row), with its
   name clamped to two lines so a long username cannot grow the row and break
   the arithmetic.
   HOW MANY rows are visible lives in --contact-rows, and that custom property is
   the SINGLE SOURCE OF TRUTH: the clamp below computes from it, and the component
   READS it back off the computed style (`measure_contacts_overflow`) to decide
   whether the toggle is needed. Hardcoding the number in both places is the exact
   bug that shipped a fourth row earlier today — a layout fact duplicated on both
   sides of the CSS/JS line will eventually disagree. Change it here only. */
.la-share-text__contacts {
  --contact-row: 58px;
  --contact-gap: 8px;
  --contact-rows: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--contact-gap);
  width: 100%;
  margin: 0 0 10px;
}

/* N rows plus the TRAILING gap, not N-1 gaps. The tiles are glass and carry
   `0 6px 18px` of drop shadow below their border box; clamping to exactly N*row +
   (N-1)*gap cut that shadow off flush and the last row read as sliced. Adding the
   trailing gap is exactly right rather than a fudge: row N+1 begins at
   N*(row + gap), which is what this now equals — so the shadow is revealed and not
   one pixel of the next row is. */
.la-share-text__contacts--collapsed {
  max-height: calc(var(--contact-rows) * (var(--contact-row) + var(--contact-gap)));
  overflow: hidden;
}

@media (max-width: 991px) {
  .la-share-text__contacts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .la-share-text__contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Short viewports: one row, then "More Users". With three rows this modal needs
   roughly 730px of height (74 header + 60 quote + 190 contacts + 20 divider +
   108/88 action rows + 40 checkbox + padding); dropping to a single row gives back
   132px and brings it to about 600px. 820px is therefore a little above where three
   rows stops fitting, so the list shrinks BEFORE the modal would start scrolling
   rather than after. Only --contact-rows changes; the clamp and the toggle both
   follow from it. */
@media (max-height: 820px) {
  .la-share-text__contacts {
    --contact-rows: 1;
  }
}
.la-share-text__contacts-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 12px;
  padding: 7px 18px;
  border: 1px solid rgba(17, 26, 46, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  color: #5A6A85;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.la-share-text__contacts-more:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(42, 157, 143, 0.5);
  color: #1b2a4a;
}

.la-share-text__contacts-more-caret {
  transition: transform 0.15s ease;
}

.la-share-text__contacts-more[aria-expanded=true] .la-share-text__contacts-more-caret {
  transform: rotate(180deg);
}

.la-share-text-modal-wrap .btn.la-share-text__contact-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  width: 100%;
  height: var(--contact-row, 58px);
  --tile-tint: #7693B9;
  position: relative;
  overflow: hidden;
  padding: 7px 12px;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #46505F;
  /* Bootstrap's `.btn` is `white-space: nowrap`; the row layout is narrower than
     the old stacked tile, so a long contact name has to be allowed to wrap. */
  white-space: normal;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.06), 0 6px 18px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.15s ease, 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 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(17, 26, 46, 0.07), 0 12px 26px rgba(17, 26, 46, 0.12), inset 0 1px 0 rgb(255, 255, 255);
  transform: translateY(-2px);
}

.la-share-text__contact-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Two lines max: the tile is a fixed-height grid row now, so a third line would
   silently break the three-row clamp above rather than just looking cramped. */
.la-share-text__contact-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Trailing badge on the one contact that is a reply target. Sits at the end of
   the row rather than as an absolute overlay, so it can never sit on top of a
   name that wrapped to two lines. */
.la-share-text__contact-reply {
  flex-shrink: 0;
  margin-left: auto;
  color: #2A9D8F;
  font-size: 15px;
}

.la-share-text__textonly {
  margin: 12px 0 0;
  padding: 9px 14px;
  background: rgba(17, 26, 46, 0.03);
  border: 1px solid rgba(17, 26, 46, 0.08);
  border-radius: 10px;
}

.la-share-text__status {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.la-share-text__status--ok {
  color: #2e7d4f;
}

.la-share-text__status--err {
  color: #c0392b;
}

/* ── Big Button modal (modals/big-button) — modern restyle ───────────────────
   EVERY rule here is scoped under .la-big-button-modal-wrap on purpose. This
   template shares `cursor_holder`, `cursor_navigation`, `cursor_area.any_size`,
   `big_btn` and `repair_buttons` with timer.hbs, gif.hbs and repairs.hbs, so an
   unscoped restyle of any of them would silently redress three other modals. */
.modal-dialog:has(.la-big-button-modal-wrap) {
  margin-top: 4px;
}

.la-big-button-modal-wrap {
  color: var(--md-ink);
  border-radius: 18px;
  overflow: hidden;
}

/* `.modal` qualifier is load-bearing — see the same note on the Share Text header:
   the universal end-of-file `.modal .la-modal-header` rule is (0,2,0) and later in
   source order, so an unqualified wrapper rule loses its vertical padding. This
   header is deliberately slimmer than the Share Text one (36px icon, 10px padding
   = 57px total): every pixel here comes off the speak target below. */
.modal .la-big-button-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.modal .la-big-button-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;
}

.modal .la-big-button-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;
}

.modal .la-big-button-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

.la-modal-header-icon--big-button {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--md-line);
  flex-shrink: 0;
}

/* Body wash, so the glass panes below have a ground to refract (same reasoning and
   the same three brand stops as the Share Text modal). Replaces the inline
   `style="padding-top:5px;padding-bottom:5px"` that used to sit on this element. */
.la-big-button-modal-wrap .la-big-button-modal-body {
  padding: 8px 12px 10px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), #F8F9FA;
}

.la-big-button-modal-wrap .cursor_area.any_size {
  margin: 0 0 10px;
  padding: 6px 100px 6px 8px;
  border: none;
  border-radius: 16px;
  background: none;
}

/* Sized to FIT, so nothing scrolls. The shared rule this overrides pairs a fixed
   height with `overflow: auto` and a FIXED type scale (50px base, up to 100px for
   `huge`) plus a 25vh image — on any normal viewport that combination overflows the
   box and scrolls INSIDE the button, which is the scrolling being removed here.
   Three things had to change together: the button became a centred flex column, the
   image became shrinkable with a vh cap, and the type scale became viewport-relative
   (both below). `overflow: auto` is deliberately KEPT as a floor for pathological
   text lengths — `snapScroll()` disables Up/Down whenever nothing actually
   overflows, so in the normal case those controls simply grey out.
   NOT a clamp(): `clamp(180px, calc(100vh - 230px), 900px)` compiles here, but
   dart-sass UNWRAPS the calc and emits `clamp(180px, 100vh - 230px, 900px)` — the
   bare mixed-unit expression the CSS/SCSS guideline says SassC cannot evaluate. The
   height/min-height/max-height triple below is exactly equivalent, and a top-level
   `calc()` that is the whole value is never unwrapped.
   Scoped: timer.hbs uses the same `.cursor_area.any_size .big_btn` rule and keeps
   the original fixed sizing. */
.la-big-button-modal-wrap .cursor_area.any_size .big_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5vh;
  height: calc(100vh - 230px);
  min-height: 180px;
  max-height: 900px;
  padding: 2vh 3vw;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.86) 100%), #2A9D8F;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #111A2E;
  box-shadow: 0 2px 6px rgba(17, 26, 46, 0.07), 0 14px 34px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgb(255, 255, 255);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 45%, rgba(255, 255, 255, 0.78) 100%), #2A9D8F;
}

/* Shrinkable: `flex: 0 1 auto` + `min-height: 0` lets the flex algorithm take space
   back from the artwork when the text needs it, instead of the old fixed 25vh that
   pushed the text out of the box. */
.la-big-button__speak-art {
  flex: 0 1 auto;
  min-height: 0;
  height: 20vh;
  max-height: 150px;
  width: auto;
}

/* Viewport-relative type scale, replacing the shared fixed px steps. `text_class`
   (big-button.js) still picks the STEP from the text length; each step is now a
   RANGE rather than one size, so the same step also adapts to the screen. vmin, so
   a short-but-wide window scales down too and not only a narrow one.
   Scoped — timer.hbs shares these class names and keeps the fixed px scale. */
.la-big-button-modal-wrap .cursor_area.any_size .big_btn,
.la-big-button-modal-wrap .cursor_area.any_size .big_btn span {
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: break-word;
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn {
  font-size: clamp(24px, 6vmin, 50px);
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn .huge {
  font-size: clamp(34px, 10vmin, 100px);
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn .big {
  font-size: clamp(30px, 8vmin, 80px);
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn .medium {
  font-size: clamp(22px, 4.5vmin, 30px);
}

.la-big-button-modal-wrap .cursor_area.any_size .big_btn .small {
  font-size: clamp(17px, 3vmin, 20px);
}

/* ── Up / Down pager skin — SHARED by every modal that has one ──────────────
   Three modals use the `cursor_holder > cursor_navigation` pager: big-button,
   gif and repairs. (timer.hbs shares the other cursor_* classes but has no
   pager.) They had three different vintages — big-button on this glass skin,
   repairs on an earlier flat one, gif still on raw Bootstrap — so they are
   unified here rather than re-specified three times.

   Selector notes, both load-bearing:
   - Scoped per WRAP, not to a bare `.cursor_navigation`, because those classes
     are shared and an unscoped rule would silently redress other modals (the
     reason the big-button block above is scoped in the first place).
   - `.btn` INSIDE `.cursor_navigation` is what limits this to the pager. repairs
     puts `.la-repairs-btn` on 12 buttons, only 2 of which are the pager, so
     targeting that class would restyle the whole modal. The repairs arm also
     carries `.la-repairs-btn` to reach (0,4,0) and beat
     `.la-repairs-wrap .la-repairs-btn.btn` (0,3,0) outright, rather than relying
     on source order between two equal-specificity rules.

   Up / Down stay absolutely positioned against `.cursor_holder` (that is what the
   100px right padding reserves room for) — only their skin changes. `.up` / `.down`
   are load-bearing for that positioning (app.scss:4605) — do not remove them. */
.la-big-button-modal-wrap .cursor_navigation .btn,
.la-gif-modal-wrap .cursor_navigation .btn,
.la-repairs-wrap .cursor_navigation .btn.la-repairs-btn {
  width: 84px;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), #7693B9;
  color: #46505F;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.07), 0 2px 4px rgba(17, 26, 46, 0.1), 0 12px 30px rgba(17, 26, 46, 0.18), inset 0 1px 0 rgb(255, 255, 255);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.la-big-button-modal-wrap .cursor_navigation .btn .glyphicon,
.la-gif-modal-wrap .cursor_navigation .btn .glyphicon,
.la-repairs-wrap .cursor_navigation .btn.la-repairs-btn .glyphicon {
  display: block;
  font-size: 20px;
  color: #2A9D8F;
}

.la-big-button-modal-wrap .cursor_navigation .btn:hover,
.la-gif-modal-wrap .cursor_navigation .btn:hover,
.la-repairs-wrap .cursor_navigation .btn.la-repairs-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), #7693B9;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.1), 0 3px 6px rgba(17, 26, 46, 0.12), 0 18px 40px rgba(17, 26, 46, 0.22), inset 0 1px 0 rgb(255, 255, 255);
}

.la-big-button-modal-wrap .cursor_navigation .btn:focus-visible,
.la-gif-modal-wrap .cursor_navigation .btn:focus-visible,
.la-repairs-wrap .cursor_navigation .btn.la-repairs-btn:focus-visible {
  outline: 3px solid #2A9D8F;
  outline-offset: 2px;
}

.la-big-button-modal-wrap .cursor_navigation .btn[disabled],
.la-gif-modal-wrap .cursor_navigation .btn[disabled],
.la-repairs-wrap .cursor_navigation .btn.la-repairs-btn[disabled] {
  opacity: 0.4;
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: none;
}

.la-big-button__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Replaces `.repair_buttons .btn` for this modal's footer only — that rule is
   shared with three other templates, so the footer opts out of it entirely rather
   than fighting it with specificity. */
.la-big-button-modal-wrap .btn.la-big-button__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 116px;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  --tile-tint: #E8ECF1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #46505F;
  font-size: 14px;
  font-weight: 700;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.06), 0 6px 18px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.la-big-button-modal-wrap .btn.la-big-button__action--speak {
  --tile-tint: #2A9D8F;
}

.la-big-button-modal-wrap .btn.la-big-button__action .glyphicon {
  display: block;
  font-size: 22px;
}

.la-big-button-modal-wrap .btn.la-big-button__action:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(17, 26, 46, 0.07), 0 12px 26px rgba(17, 26, 46, 0.12), inset 0 1px 0 rgb(255, 255, 255);
  transform: translateY(-2px);
}

.la-big-button-modal-wrap .btn.la-big-button__action[disabled] {
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

.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 input#word_suggestions[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
}

.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-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;
  }
  /* 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.
     THE VIEW BUTTON COUNTS TOO (2026-09-30): it sits right of the brand in the same row, so
     on a page with no discs (the search page, for one) the growing brand pushed it to the far
     edge, under the fixed settings gear and menu button. */
  .app-navbar .app-navbar__nav-header:has(.app-navbar__home-actions, .ll-viewswitch) h1.app-navbar__brand,
  #inner_header .app-navbar .app-navbar__nav-header:has(.app-navbar__home-actions, .ll-viewswitch) 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 .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.

     ALSO EXEMPT: `.ll-viewswitch`, the app-wide Classic/Card switch. It is a direct
     child of .app-navbar__nav-header (components/view-switcher.js is `tagName: ''`,
     so its own <div class="ll-viewswitch"> is the child), so without this it fell
     into the hidden bucket on EVERY viewport <=1024px — every tablet and phone, which
     is the primary AAC device class. That left no way to reach Classic except opening
     a board and using Board Actions -> View Style. Same treatment as the home-actions
     discs above and for the same reason: it is a navbar entry point that has to stay
     reachable at every width.

     `:not(#header_search)` is kept although the search field was removed on
     2026-09-02: this comment records that its id-specificity is what lets this rule
     win the cascade, so dropping it would silently demote the whole selector. Dead as
     a match, load-bearing as specificity. */
  .header-index-with-dark-toggle .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions):not(.ll-viewswitch),
  #inner_header .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions):not(.ll-viewswitch),
  .app-navbar .app-navbar__nav-header > *:not(h1):not(#header_search):not(.app-navbar__home-actions):not(.ll-viewswitch) {
    display: none !important;
  }
  /* Search icon only (hide input) on small screens */
  .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-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;
  }
}
@media (max-width: 768px) {
  .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-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-a11y-display-text {
    font-size: 20px;
  }
  .la-cta-section {
    padding: 40px 20px;
  }
}
@media (max-width: 640px) {
  .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-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-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-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 .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);
}

/* 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 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.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: 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 {
  /* 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__link {
  color: #147F82;
  font-weight: 500;
  text-decoration: none;
}
.ub-search-page .ub-search-page__link:hover {
  text-decoration: underline;
}
.ub-search-page {
  /* No-results message: 60% larger than .ub-boards-page__loading (0.92rem) */
  /* 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. */
  /* 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. */
}

/* Search page: flex wrap, full-width row — ~3×280px + gaps on desktop; wraps on smaller viewports */
/* Narrow: one fluid column so cards use available width */
/* ===== 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. */
@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);
  /* The My Caseload card-as-button's glass surface, named once so other cards can wear it. */
  --md-caseload-glass-bg:
    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.90) 55%, rgba(245, 246, 249, 0.88) 100%);
  /* ...and its raised-glass shadow with the verdigris showcase halo (the card's rest state). */
  --md-caseload-glass-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);
  --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;
}

/* THE APP'S PAGE WASH — the five-radial mesh over a stone ramp, in ONE place.
   It was written out twice (the base `.md-shell` below and `#content:has(.md-shell--user)`
   under it) and a third copy was about to be added for the narrow-viewport case, so it is a
   mixin now: both existing users include it and render identically, and a palette change
   reaches every surface that paints the wash.
   Carries its own `!important` because both original declarations did. */
.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;
}

/* ── EVERY GENTLE MODERN PAGE GETS THE ACCOUNT PAGE'S BACKDROP (2026-09-24) ─────────────
   Requested: "modern view gentle: make the shell bg the same bg as the account page
   md-workspace bg".

   THE ACCOUNT WORKSPACE PAINTS NOTHING -- checked before changing anything: at 1280 its
   background-color is transparent and its background-image is `none`. What is being pointed at
   is what shows THROUGH it, which is the rule directly above: `#content` carrying
   `md-page-wash` with `background-attachment: fixed`.

   SO THE TWO SURFACES ALREADY SHARED A MESH, and only one property differed. `.md-shell`
   includes the same mixin, but the mixin sets no attachment, so the shell's copy defaults to
   `scroll` -- and a scrolled background is sized to ITS OWN box. The shell is as tall as the
   page (`min-height: 100vh`, growing with content), so `radial-gradient(... at 90% 15%)` landed
   at 15% of 1600-odd px there against 15% of the 900px viewport on the account page. Same six
   layers, same colours, visibly different wash: paler, with the teal pushed down the page.
   Pinning the shell's copy to the viewport is therefore the whole difference, and it is one
   declaration rather than a second copy of the palette to keep in step.

   NOT FOLDED INTO THE MIXIN, which would have been tidier, because the mixin also paints
   Focused (per page, in `_focused-view.scss`) and the `.ll-appshell` band below 901px. The
   request names gentle Modern, so the scope does too.
   `!important` matches the mixin's own, which the shorthand carries into every longhand it
   expands to; the body classes supply the weight to reach past it. */
body.ll-view-modern:not(.ll-layout-focused) .md-shell {
  background-attachment: fixed !important;
}

/* ── THE WASH REACHES THE TOP OF THE PAGE BELOW 901px (2026-09-21) ──────────────────────
   Requested, for Gentle and Focused alike: "the shell bg needs to extend all the way up to
   the top of the page". Measured at 900 and 820: the rail stops being a fixed panel and
   becomes an IN-FLOW band across the top, so `.ll-appshell__main` starts below it and the
   shell -- which paints the wash -- began at y=291 (900px) and y=345 (820px). Everything
   above that, the whole rail band, sat on bare page background.

   PAINTED ON `.ll-appshell`, NOT ON `#content`, and the reason is worth keeping. The obvious
   move is the one this file already uses for the account pages one rule above: paint the mesh
   on `#content` and make the shell transparent. Tried that first and it broke two pages --
   `#content.index.with_user` and the extras page paint their own `#content` background and
   outranked the new rule, so the mesh never landed while the companion rule had ALREADY made
   the shell transparent: the dashboard and extras rendered with no wash at all. Raising it to
   two ids was not enough either; those pages have (2,3,0) rules. `.ll-appshell` has no
   competing background at all, so one class-level rule lands everywhere with nothing to fight.
   The lesson is the cheap one: a two-part change where half wins the cascade and half does not
   is worse than either half, and only checking more than one page shows it.

   IT STARTS AT THE APPSHELL'S OWN TOP (y=26), not y=0, and that is not a shortfall: the app
   header is `position: fixed` across 0-70, so everything above 70 is behind it at every
   scroll position. The wash is visible from the header's underside down, which is what "the
   top of the page" means on screen.

   The shell is made transparent so the two do not stack -- both paint the SAME translucent
   mesh, and two of them overlapping would darken the lower part of the page rather than
   match it. `min-height: 0` for the reason the account-page rule gives: the shell's own 100vh
   would double-count against the space above it and overflow.
   Both views, as asked; scoped to the Home-section pages by `:has(.ll-appshell__navbar)`,
   which leaves the account pages to the rule above.

   SUPERSEDED 2026-10-10: THE WASH IS THE SHELL'S AGAIN, AND IT COVERS THE WHOLE PAGE. Requested:
   "the md-shell bg should be the only bg showing: it should stretch all the way up to the
   navbar and all the way to the bottom of the page". On `.ll-appshell` it stopped one viewport
   down: the appshell measured 900px tall against 945-1017px of page, so scrolling showed
   `#content`'s own background below it (a flat grey on Boards, a second gradient on the
   dashboard) -- two backgrounds on one page.
   NOW A VIEWPORT-FIXED LAYER BEHIND THE SHELL, as its `::before`: `position: fixed; inset: 0`
   fills the screen at every scroll position, so the wash runs from the navbar to the bottom on a
   short page and a long one alike, with nothing to measure. A fixed box adds no scroll height,
   and escapes the shell's `overflow-x: clip` and `#content`'s scrolling, neither of which is its
   containing block. The shell's own background stays transparent so its box cannot paint a
   second, scroll-sized copy over the layer.
   `isolation: isolate` gives the shell its own stacking context, which `z-index: -1` needs to
   sit behind the shell's content and still above `#content`'s background. That context sits
   in the same layer as the rail, which comes first in the page; the rail's ≤900px rule gives it
   `z-index: 1` so its dropdown is not covered. */
@media (max-width: 900px) {
  #content:has(.ll-appshell__navbar) .ll-appshell {
    min-height: 100vh;
  }
  #content:has(.ll-appshell__navbar) .ll-appshell .md-shell {
    background: transparent !important;
    min-height: 0 !important;
    isolation: isolate;
  }
  #content:has(.ll-appshell__navbar) .ll-appshell .md-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    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;
  }
}
/* 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: var(--md-workspace-margin-top, 40px) auto 40px !important; /* top from a variable (2026-10-02) so ONE page can tighten it without a competing !important: see .md-shell--offline-boards */
  padding: var(--md-workspace-padding-top, 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 */
/* ---------- 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">`). A `.md-pillnav--user` variant further
     down used to re-declare the same 4px top/bottom values; it went with
     the account pill row it styled (2026-09-21). */
  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;
}

/* Unread counter on the Updates pill (added 2026-09-14) — the Card-view twin of classic's
   `.ch-tab__badge`, same $brand-danger disc and white numeral so the two views count the
   same things in the same language.
   20px rather than classic's 22: this pill is `min-height: 32px`, and a 22px disc plus the
   pill's 4px vertical padding would drive the whole nav row taller. 14px type is held — it
   is this app's floor for anything a user reads, and a counter is not an exception.
   White on $brand-danger measures 5.44:1, so the numeral clears AA on its own disc.
   COLOUR IS NOT THE ONLY CUE: the disc carries the number, and the pill's own text label
   says "Updates" beside it, so nothing here depends on red being perceived as red. */
/* The pill has to become a flex row for the label and badge to centre against each other.
   `!important` only because `.md-pillnav__pill` above declares its own layout that way —
   this matches the weight it has to sit beside, it is not winning an unrelated cascade. */
.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;
}

/* Unread-count badge, shared by the dashboard and user pill navs.

   COLOUR: `$brand-danger`, NOT `--md-coral`. White on coral (#F06A5B) measures 3.04:1,
   under the 4.5:1 a 14px/700 numeral owes; `$brand-danger` (#C0392B) measures 5.44:1 and
   matches the classic `.ch-tab__badge` this is meant to read as. The `!important` here is
   inherited from the rule's original form, not added — every declaration in this block
   already carried it, and the active-pill override above is `!important` too, so dropping
   it on `background` alone would flip which rule wins.

   The geometry below (flex centring, 20px round target) is declared HERE rather than in a
   separate earlier block: an identical-specificity rule whose properties are all
   `!important` beats a later plain one regardless of source order, so a second block could
   only restate what this one already owns. */
.md-pillnav__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-left: 6px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #C0392B !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* User page: same shell/workspace as dashboard; main content area */
.md-shell--user > .md-workspace > .md-main--user {
  /* TOP MATCHES BOTTOM (requested 2026-09-21). The base `.md-main` gives every main
     `padding: 18px 16px 24px`, and the line below has long overridden the BOTTOM for the
     account section, so these pages sat 18px from the top and 35px from the bottom -- a
     visible asymmetry once the section's pages gained headers.
     Written as the SAME expression rather than a literal 35px so the two keep tracking each
     other if `--bottombar-height` ever changes. Sides are untouched.
     This is the shared `.md-main--user`, so it applies to EVERY account-section page
     (account, goals, logs, recordings, settings, subscription, supervision, ...), which is
     the point: they are one section and should have one vertical rhythm. */
  padding-top: calc(var(--bottombar-height, 59px) - 24px) !important;
  padding-bottom: calc(var(--bottombar-height, 59px) - 24px) !important;
}

/* ...BUT NOT AT 900 AND BELOW (2026-09-24, "move account page content up 64px"). The symmetry
   above answers a page whose main is the first thing under the chrome; below 901 it is not --
   the rail has dropped in flow above it, and this 35px became the third empty box in a row
   between the rail and the title. It is the largest single term in that band, so it gives the
   largest share of the 64.
   TOP ONLY: the bottom keeps its 35px. The pair was matched to each other, not to a constraint,
   and only the top is in the band being closed. */
@media (max-width: 900px) {
  .md-shell--user > .md-workspace > .md-main--user {
    padding-top: 0 !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;
}

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

/* Calendar glyph before "Joined" — muted, sits inline with the text. */
/* 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__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) */
/* Last active: charcoal blue accent (50% lighter) */
/* 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;
}

/* Reports view from dashboard: outlet inside md-workspace, no extra outer constraint */
/* 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 > 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: var(--dn-main-pad-top, 18px) 16px var(--dn-main-pad-bottom, 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 */
/* Support page only: centered hero, 25% larger fonts (except hero title), condensed layout */
/* Support hero: header from left */
/* Contact page only: 25% larger fonts (except hero title), condensed layout */
/* Contact hero: header from left, subheader from right (same animations as dashboard) */
.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;
}

/* ---------- Grid ---------- */
.md-grid {
  display: grid !important;
  gap: var(--dn-grid-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;
  }
}
/* SPEAK MODE KEEPS ITS FULL-WIDTH LOOK, AT HALF WIDTH (restored 2026-10-10, requested: "give
   speak mode button back the image and styles it had when it was full width (except for the full
   width part)"). These came from the `md-grid--fullspan-speak` rules, removed in f2a909d98 once
   Speak stopped being a full-width row (bb07e4d7b paired it with Extras). Restated on the Gentle
   Speak card itself, which is always placed in Gentle (dashboard_sections.js, the sweep in
   tests/unit/utils/dashboard-grid-placement-test.js):
     - the speak-circle image IS the icon (144px; its tile fill, border, shadow and SVG glyph go);
     - above 950px the icon + text cluster is centred, the title and status left-aligned beside it.
   NOT RESTORED: the 230px min-height. In a shared row it would stretch Extras too and undo the 12px
   card padding asked for the same day.
   76px, NOT THE FULL-WIDTH 144px (requested the same day: "make the speak mode image shrink to fit
   its new height"). The main cards' floor is now 100px with 12px of padding top and bottom, which
   leaves 76px; at 144px the image held the whole Speak / Extras row at ~168px.
   (0,6,0) beats the base speak icon-tile rules, as the full-span rules did. */
.md-grid.md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__icon {
  /* 95px: the 76px fit, then 25% larger (requested 2026-10-10). The card grows past its 100px
     floor to hold it (95 + 12px padding top and bottom). */
  width: 95px !important;
  height: 95px !important;
  background: url(/../images/speak-circle-light.png) center/contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}

.md-grid.md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__icon-glyph {
  display: none !important;
}

/* EXTRAS IS CENTRED THE SAME WAY (requested 2026-10-10: "make the extras button content
   centered (like the speak mode button)"), so the two cards sharing the row read as a pair. */
@media (min-width: 951px) {
  .md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__head,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__head {
    justify-content: center !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__titles,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__titles {
    text-align: left !important;
  }
}
/* Supervisor home (with-caseload): Speak is Tier 2 there, so its image is the medium 110px it
   was as a full-width card. (0,7,0) beats the rule above. */
.md-grid.md-grid--with-caseload.md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__icon {
  width: 110px !important;
  height: 110px !important;
}

@media (min-width: 951px) {
  /* My Caseload full-span hero (Gentle supervisor home): 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). 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;
  }
}
/* EVERY GENTLE MY CASELOAD BUTTON SHOWS THE CASELOAD-LIGHT IMAGE, not the icon on its icon background
   (2026-10-12, requested: "the my caseload button should not have an icon or icon bg, it should have a
   caseload image - on modern gentle, it should be caseload-light"). This swap was inside the >=951px
   full-width block above, so the button lost it once it shared the Caseload | Speak | Extras row. */
.md-grid.md-grid--layout-gentle .md-card.md-card--caseload.md-card--caseload-as-button .md-card__icon {
  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-card.md-card--caseload.md-card--caseload-as-button .md-card__icon > svg {
  display: none !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;
}

/* 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:not(.md-grid--caseload-row) .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;
}

/* GENTLE: MY CASELOAD | SPEAK MODE | EXTRAS (2026-10-12, requested: Caseload "top left on the page, the
   same height as the speak mode button, then speak mode, then extras ... in equal sizes ... The heights
   should match the buttons on the focused view home page"). The row comes from caseloadRowFirst
   (utils/dashboard_sections.js), which flags the grid md-grid--caseload-row (-3 with all three).
   Heights, padding and image sizes are Focused's Speak and Extras curves (the `max-width: 1200px` and
   `1024px` blocks after the Focused Extras arrow rule): 120px tall above 1200px, linear to 84px at
   901px, 84px when stacked. A fixed `height` (not min-height), so the three are always equal. */
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button {
  /* 12px taller (requested 2026-10-14): 84->96 floor, 120->132 ceiling, and the vw middle term +12
     (-24 -> -12) so the whole curve lifts by 12px. */
  height: clamp(96px, 12vw - 12px, 132px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-top: clamp(8px, 1.3333vw - 4px, 12px) !important;
  padding-bottom: clamp(8px, 1.3333vw - 4px, 12px) !important;
  box-sizing: border-box !important;
  /* Centre the content (the icon + titles head) vertically in the taller card. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__icon,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__icon,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__icon {
  width: clamp(65.8px, 9.4vw - 18.8px, 94px) !important;
  height: clamp(65.8px, 9.4vw - 18.8px, 94px) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Inside, the Focused arrangement at every width: the image on the left, the title and subtitle beside
   it, the pair centred, at Focused's title and subtitle sizes. Gentle's own small-screen rules (text
   centred at <=950px, the image stacked above the text at <=640px) do not fit a fixed-height button. */
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button {
  padding-left: clamp(12px, 2.6667vw - 12px, 24px) !important;
  padding-right: clamp(12px, 2.6667vw - 12px, 24px) !important;
}
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__head,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__head,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__head {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 2.3333vw - 18px, 24px) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__titles,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__titles,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__titles {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__title,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__title,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__title {
  font-size: clamp(15px, 1.6667vw + 1px, 21px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__sub,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__status,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__sub,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__status,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__sub,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__status {
  font-size: clamp(12px, 0.6667vw + 7px, 15px) !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
}
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__sub,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__sub,
.md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__sub {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* THREE ACROSS AT 901-1200px leaves each card about 190-265px wide, so a Focused-size image left the
   text ~100px and cut every title. Here the image is 80% of Focused's, the title steps 18px -> 14px (it
   may wrap between words), and the subtitle keeps to one line below 1101px. The height is unchanged. */
@media (min-width: 901px) and (max-width: 1200px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button .md-card__icon, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button .md-card__icon, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button .md-card__icon {
    width: clamp(52.64px, 7.52vw - 15.04px, 75.2px) !important;
    height: clamp(52.64px, 7.52vw - 15.04px, 75.2px) !important;
  }
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button .md-card__title, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button .md-card__title, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button .md-card__title {
    font-size: clamp(14px, 1.3333vw + 2px, 18px) !important;
  }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button .md-card__icon, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button .md-card__icon, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button .md-card__icon {
    width: clamp(44.74px, 6.392vw - 12.784px, 63.92px) !important;
    height: clamp(44.74px, 6.392vw - 12.784px, 63.92px) !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button .md-card__sub, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button .md-card__sub, .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button .md-card__sub {
    -webkit-line-clamp: 1 !important;
  }
}
@media (max-width: 1024px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button .md-card__icon,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button .md-card__icon,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button .md-card__icon {
    width: clamp(55.93px, 7.99vw - 15.98px, 79.9px) !important;
    height: clamp(55.93px, 7.99vw - 15.98px, 79.9px) !important;
  }
}
/* 901-950px is Gentle's wrapping flex layout (the `max-width: 950px` block, where buttons are half a row
   and Caseload a full row): the row keeps its cards side by side, a half or a third each. */
@media (max-width: 950px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button {
    width: calc(50% - 8px) !important;
  }
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button {
    width: calc((100% - 32px) / 3) !important;
  }
}
/* 900px and below: one per row, as Focused stacks Speak and Extras (decided 2026-10-12). */
@media (max-width: 900px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--caseload-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row > .md-card.md-card--extras.md-card--as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--caseload-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle.md-grid--caseload-row.md-grid--caseload-row-3 > .md-card.md-card--extras.md-card--as-button {
    width: 100% !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.)
     EXCEPT Focused's badge-action cards (Create a Board / Edit Dashboard), which keep their
     desktop row -- icon left, text beside it, arrow pinned right (requested 2026-10-05). The
     first two selectors are the old `.md-grid--dashboard .md-card.md-card--as-button` split
     into "not Focused" and "not badge-action", which between them cover every card except
     that pair. */
  .md-grid--dashboard:not(.md-grid--layout-focused) .md-card.md-card--as-button .md-card__head,
  .md-grid--dashboard .md-card.md-card--as-button:not(.md-card--badge-action) .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:not(.md-grid--layout-focused) .md-card.md-card--as-button .md-card__titles,
  .md-grid--dashboard .md-card.md-card--as-button:not(.md-card--badge-action) .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. The stack is :root --md-caseload-glass-shadow. */
  box-shadow: var(--md-caseload-glass-shadow) !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.
   ORGANIZATIONS ONLY SINCE 2026-10-05: on an org dashboard Caseload and Speak now render as
   the badge-action `--caseload-action` / `--speak-action` cards and take the Create a Board
   18px title, so the as-button selectors that used to share this rule are gone. */
@media (min-width: 475px) {
  .md-grid.md-grid--hero-org .md-card.md-card--org-management .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;
}

.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;
  /* Showcase atmosphere + surface (:root --md-caseload-glass-bg): three soft teal/blue glows, an
     ultra-soft horizontal "flow" connecting the left content cluster to the right side (same
     gentle communication airflow as the Speak Mode card), over a near-white glass base. */
  background: var(--md-caseload-glass-bg) !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: var(--dn-card-title, 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: var(--dn-card-pad, 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;
}

/* The Rooms header row's top and bottom padding: 0 unless Compressed View sets
   --dn-card-head-pad-y, where "View all rooms" has moved to the bottom of the card and this row
   keeps the spacing it had with the button in it. Rooms only: `.md-card--rooms__top` is shared
   with My Organizations. */
.md-card--rooms .md-card--rooms__top {
  padding-top: var(--dn-card-head-pad-y, 0);
  padding-bottom: var(--dn-card-head-pad-y, 0);
  /* 8px in from the card's content edge (requested 2026-09-29), matched on the Need Attention
     header. */
  padding-left: 8px;
}

/* 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: var(--dn-room-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.) */
/* HOME ROOMS CARD: SEVERAL ROOMS TO A ROW WHEN THEY FIT (requested 2026-10-05, Focused first,
   then Gentle the same day). The 360px track above suits the org pages' wide room cards; on the
   home card it left one room per row in Gentle's column. 220px fits the room tile (door, name,
   arrow, padding) with the name still readable, and auto-fill adds a column whenever another
   220px track fits. `min()` keeps a single track from overflowing a narrow card. The
   `:not(.ll-density-compressed)` is from Compressed View, removed 2026-10-10: it always matches
   now and is kept so these rules' specificity, and so the cascade, is unchanged. */
body:not(.ll-density-compressed) .md-grid .md-card.md-card--rooms .md-rooms__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

/* CAPPED AT NARROWER WIDTHS (requested 2026-10-05): at most two rooms per row at <=1024px and
   one at <=640px, so a long room name has room before it ellipsizes. Above 1024px auto-fill
   still adds a column whenever another 220px track fits. */
@media (max-width: 1024px) {
  body:not(.ll-density-compressed) .md-grid .md-card.md-card--rooms .md-rooms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body:not(.ll-density-compressed) .md-grid .md-card.md-card--rooms .md-rooms__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.md-shell--org-directory .md-rooms__grid .md-room-card:only-child {
  grid-column: 1/-1;
}

/* NO TOP MARGIN ON THE ROOMS GRID, DELIBERATELY (2026-09-23, requested: "is it because of the
   top margin here? remove it").
   THE HISTORY, so it is not re-added a fourth time: the gap originally belonged to an
   `<hr class="md-org-report-divider">` that opened `.md-stats-main` -- 1px of line plus its own
   `margin: 0 0 24px`. The line was removed because it had nothing above it inside the container
   and read as a stray top border. Its 24px was then briefly restored here as a grid margin,
   while the page was still sitting 132px too low in Focused; once that was fixed
   (_focused-view.scss, "THE ORG DETAIL PAGES ARE THE GENTLE ONES") the compensation was slack
   and was removed.
   `.md-stats-main` carries no padding and no border, so a top margin on its only child COLLAPSES
   THROUGH it -- which is why this space showed up in DevTools as part of `.md-main--org`'s
   content box rather than above the grid, and why it looked like a padding problem on the wrong
   element. The grid now sits directly on `.md-main--org`'s own 29px of padding. */
/* `.md-shell--org .md-rooms__grid` ADDED 2026-09-23. The room card was styled only under the
   Modern dashboard's cards and under `.md-shell--org-directory` -- the org LIST page. The org
   DETAIL pages carry `.md-shell--org` WITHOUT `--org-directory`, so the supervisor rooms list
   on `/organizations/:id/rooms` matched neither and rendered as bare links with an arrow.
   Scoped through `.md-rooms__grid` so it reaches room cards and not, say, the switcher.
   Added to this existing selector list rather than as a new block, so the three surfaces keep
   one definition of the card. */
.md-grid .md-card.md-card--rooms .md-room-card,
.md-grid .md-card.md-card--attention .md-attention-item,
.md-grid .md-card.md-card--org-management .md-room-card,
.md-shell--org .md-rooms__grid .md-room-card,
.md-shell--org .md-rooms__grid .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;
  /* `--dn-room-card-pad`: a density hook left from Compressed View (removed 2026-10-10); unset. */
  padding: var(--dn-room-card-pad, 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);
  /* Modern + Focused lightens this on the Rooms list (--dn-room-card-shadow, _focused-view.scss);
     the fallback is the shadow every other host keeps. */
  box-shadow: var(--dn-room-card-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--attention .md-attention-item:hover,
.md-grid .md-card.md-card--attention .md-attention-item: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 .md-rooms__grid .md-room-card:hover,
.md-shell--org .md-rooms__grid .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;
}

/* STANDALONE, AFTER the rule above closes. These were twice inserted between a selector
   LIST and its opening brace -- those lists end in commas, so `.md-room-card__sub` was
   absorbed into the group and the dashboard's own room-card rules rendered with the
   sub-label's `display: block; font-size: 13px` in place of their flex layout and hover
   shadow. That is what turned the focused Modern home page's room tiles into full-width
   bars. Verified by diffing compiled CSS against the pre-change build: no pre-existing
   room-card rule differs now. */
/* MOVED HERE 2026-09-23. These two sat between the base card rule's SELECTOR LIST and its
   opening brace -- the list ends in a comma, so `.md-room-card__sub` was swallowed into the
   group and the dashboard's own `.md-grid .md-card--rooms .md-room-card` rendered with the
   sub-label's `display: block; font-size: 13px` instead of the card's flex layout. That is
   what turned the focused Modern home page's room tiles into full-width bars. Standalone
   rules below, after the group closes, so nothing can be absorbed again. */
/* ORG PICKER ON THE ROOMS PAGE (2026-09-23). Two additions to the room-card pattern the
   Organizations directory already uses, so the picker reads as the same component rather than
   a new one: a sub-line for the room count, and a non-link state for the org being viewed.

   The current org is a <div>, not a <a>: there is nowhere to go, and `aria-current="page"` on
   an inert element is what says "this is the one you are on". It is dimmed with a background
   and a cursor, NOT with lowered text contrast -- the name still has to be readable, and it is
   the one row a screen-reader user is most likely to be looking for. */
.md-room-card__icon {
  flex: 0 0 auto;
  /* `--dn-room-card-icon`: a density hook left from Compressed View (removed 2026-10-10); unset. */
  width: var(--dn-room-card-icon, 55px);
  height: var(--dn-room-card-icon, 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,
.md-grid .md-card.md-card--attention .md-attention__list .md-attention-item {
  padding-top: var(--dn-room-pad-y, 10px);
  padding-bottom: var(--dn-room-pad-y, 10px);
}

.md-card--rooms .md-room-card__icon {
  width: var(--dn-room-icon, 46px);
  height: var(--dn-room-icon, 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 .md-rooms__grid .md-room-card,
.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,
.md-attention__all {
  flex-shrink: 0;
}

/* "View all communicators" as a header button: it matches "View all rooms" and sits at the right of
   the Need Attention header. That header has no space-between wrapper like `.md-card--rooms__top`,
   so `margin-left: auto` pushes it right. Focused since 2026-10-05; Gentle too since 2026-10-12
   (requested: "move view all communicators from the bottom ... to the top header right-aligned. Make
   the button 44px tall (do it on both focused and gentle view)"). The link under the list is gone
   from the template, so the per-layout show/hide that lived here went with it. 44px is also the
   minimum touch target. */
.md-attention__all {
  margin-left: auto;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* 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: var(--dn-card-pad, 20px 24px) !important;
  border-radius: var(--md-r-lg) !important;
  background: var(--dn-attention-bg, 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;
  /* `--dn-card-head-pad-y`: a density hook left from Compressed View (removed 2026-10-10); unset. */
  padding-top: var(--dn-card-head-pad-y, 0) !important;
  padding-bottom: var(--dn-card-head-pad-y, 0) !important;
  /* 8px in from the card's content edge (requested 2026-09-29), matched on the Rooms header. */
  padding-left: 8px !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).
   NOT the badge-action Caseload (`--caseload-action`, Focused org dashboard, 2026-10-05):
   that card keeps the Create a Board row at every width, so it is excluded here. */
@media (max-width: 460px) {
  .md-card--org-management .md-card--rooms__head,
  .md-card--caseload:not(.md-card--badge-action) .md-card__head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}
/* ≤768px (requested 2026-10-05): the Communicators Need Attention header stacks — the
   illustration on top, title and subtitle centred below, then the Focused "View all
   communicators" button centred under them (margin-right joins its margin-left: auto). Was
   ≤460px with the other heads above; the header button added 2026-10-05 made the row too
   cramped well before that. The communicator cards go to one column at the same width
   (_focused-view.scss, Focused's card grid; Gentle's list is already a single column). */
@media (max-width: 768px) {
  .md-card--attention .md-card--attention__head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .md-card--attention .md-attention__all {
    margin-right: auto;
  }
}
/* 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: var(--dn-card-title, 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 chip beside the title — shared by Communicators Need Attention, Rooms and My
   Organizations so they stay identical (one authoritative rule, no drift), in every view.
   2026-09-29 (requested: "sleek and modern", not "bulky and juvenile"): a slim tinted chip
   instead of a solid 26px verdigris pill with a glow. The verdigris stays as the tint and hairline
   so it still reads as a count; the digits are $la-navy because verdigris-dark text drops to
   3.92:1 on Focused's #AEB9C9 header band, while navy on the tinted chip measures 5.65:1 there and
   10.41:1 on a white card. 14px is the AAC token floor; tabular figures keep 9 and 10 the same
   width. */
.md-attention__count,
.md-rooms__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 22px;
  height: 22px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.38);
  background: rgba(42, 157, 143, 0.14);
  color: #1B365D;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

/* Need Attention sub-line: the full phrase at desktop, a short "Follow up needed"
   at ≤1024px where the header is tighter (requested 2026-10-13). One sub-line is
   shown at a time; the other is display:none so it stays out of layout. */
.md-attention__sub-short {
  display: none;
}

@media (max-width: 1024px) {
  .md-attention__sub-full {
    display: none;
  }
  .md-attention__sub-short {
    display: inline;
  }
}
/* ≤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: var(--dn-list-gap, 8px);
}

/* COMMUNICATOR ROWS WEAR THE ROOM CARD (requested 2026-09-29: "the same styles as the rooms
   cards"): they are in the room card's own rules above (base, hover and the dashboard padding), in
   Gentle and in Focused (_focused-view.scss), so the two cannot drift. What stays here is the
   HEIGHT: a room card's height comes from its icon, which the rows do not have, so the row takes
   the same total from the same tokens (icon + top and bottom padding + the 1px borders). */
.md-grid .md-card.md-card--attention .md-attention-item {
  min-height: calc(var(--dn-room-icon, 46px) + 2 * var(--dn-room-pad-y, 10px) + 2px);
}

/* Hover = lift: the Speak card's intensified shadow stack + verdigris halo + 1px rise. */
.md-attention-item__avatar {
  flex: 0 0 auto;
  width: var(--dn-avatar, 40px);
  height: var(--dn-avatar, 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 ICON + TEXT, no pill (requested 2026-09-29: a more modern presentation than badges,
   in every style). The label is plain text in the row's own dark ink, so it reads as part of the
   row and needs no per-hue contrast tuning; the COLOUR lives only in the icon, which reinforces
   the status rather than carrying it (the text names it). Each status sets its icon colour as
   `--status-ink` below; the base is the neutral slate (e.g. unchecked/unknown). */
.md-attention-item__status {
  --status-ink: #5A6A85;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1B365D;
}

/* Modern representative status icon — a small line-icon before each label, masked and painted in
   the status colour (`--status-ink`). Decorative (the label text already names the status), so no
   ARIA is needed. */
.md-attention-item__status::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--status-ink, 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");
}

/* Icon colours. Amber — evaluation-related waits (Waiting for Evaluation / for Recommendation). */
.md-attention-item__status[data-status=hourglass],
.md-attention-item__status[data-status=equalizer] {
  --status-ink: 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] {
  --status-ink: #2860C9;
}

/* Teal — needing additional support. */
.md-attention-item__status[data-status=exclamation-sign] {
  --status-ink: #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,
.md-grid .md-card.md-card--caseload-action {
  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;
}

/* 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-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 ---------- */
/* PROFILE HEADER (rebuilt 2026-09-17).
   Three zones on a grid -- avatar | identity | status -- replacing the old
   avatar + flex-body + absolutely-positioned chip arrangement. The grid is what
   removes the two structural faults of the old card: the name no longer shares a
   row with the username (so it stops wrapping while space is free), and the AAC
   block and status no longer float against the card's bottom edge.
   The AAC chip used to be `position: absolute`, which kept it out of the flow and
   therefore out of the card's measured height -- the reason it could collide with a
   taller body. It is a normal grid-column child now. */
.md-hero--user {
  /* !important beats the shared `.md-hero { position: static !important }` (~42670).
     No longer needed as a positioning context for the AAC chip, but `.online_marker`
     inside the avatar is still absolutely positioned against this card. */
  position: relative !important;
  display: grid;
  /* Avatar and status sized to CONTENT, identity takes the rest. `minmax(0, 1fr)` rather
     than `1fr` so a long unbroken word in the identity column cannot push the grid wider
     than its container.
     THREE columns: avatar | identity | rail. All three start at the top, so the card's
     height is simply its tallest column plus padding -- there is no row that distributes
     content down an oversized canvas, and nothing is anchored to a bottom edge.
     COLUMN BUDGET. This card is capped at ~804px by `.md-workspace`
     (max-width: min(1200px, 100% - 24px)) minus the 208px account rail, on EVERY screen from
     1200px up -- it does not grow with the viewport. Three columns therefore have ~732px of
     content box to share, and the brief's 240-290px rail plus a 170px avatar left the identity
     column ~264px, which wrapped the role onto three lines. Avatar 144 + rail 208 + 64 of gaps
     leaves it ~316px, enough for two. The numbers are below the brief's ranges deliberately:
     they were written for a card that can reach 1200px, and this one cannot. */
  grid-template-columns: minmax(132px, 144px) minmax(0, 1fr) minmax(188px, 208px);
  align-items: start; /* every column starts at the top; the avatar never floats mid-card */
  column-gap: 32px;
  row-gap: 24px;
  padding: 36px !important;
  /* Guard for ultrawide, should the page's own 1200px cap ever lift: the columns stop
     drifting apart rather than stretching across the screen. Does not bind today. */
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* Cleaner glass: a mostly-white surface with a restrained cool tint, in place of the
     broad grey-blue wash that made the card look foggy. `!important` beats the shared
     `.md-hero { background: transparent !important }` (~42675). */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 250, 253, 0.93) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(17, 26, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-radius: var(--md-r-lg, 28px);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ONE frame around the avatar, not several concentric rings. The ring that remains is
   a single hairline; the online marker inside is a real status indicator and stays. */
.md-hero--user__avatar-wrap {
  position: relative;
  grid-column: 1;
  flex-shrink: 0;
  line-height: 0;
}

.md-hero--user__avatar {
  /* Fills its grid column (140-156px) rather than being a fixed size that leaves a sliver of
     dead space beside it. aspect-ratio keeps it square at whatever width the column resolves. */
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 30px;
  object-fit: cover;
  /* INTERNAL INSET (requested 2026-09-18): the picture reads ~15% smaller while the card it
     sits in keeps the grid column's full width. Everything here is border-box, so this takes
     11px off each side of a 132-144px box -- about 15% off the image -- without moving the
     column, the identity text, or anything else in the header.
     It shows as white because of the `background` below: the padding band is the element's
     own background, so the avatar becomes a picture mounted in a card rather than a picture
     with a border drawn round it. */
  padding: 11px;
  border: 1px solid rgba(17, 26, 46, 0.1);
  background: #fff;
  box-shadow: 0 4px 14px rgba(17, 26, 46, 0.1);
}

/* THE IDENTITY STACK. One column, so every line shares a left edge with the name. */
.md-hero--user__body {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Groups are separated by their own margins below; this is the base rhythm. */
  gap: 0;
}

.md-hero--user__name {
  margin: 0;
  height: auto;
  font-family: "Lexend", "Nunito Sans", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.18;
  color: var(--md-ink);
  /* Wrap only when the NAME itself is too long -- never truncate a person's name. */
  overflow-wrap: break-word;
}

.md-hero--user__username {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  /* 0.78 on the pale surface keeps this above the 4.5:1 text floor; the old muted token
     at full strength was the low-contrast grey-on-grey called out in review. */
  color: rgba(27, 54, 93, 0.78);
  overflow-wrap: break-word;
}

.md-hero--user__role {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--md-ink);
}

/* Organisation/location line. Only `location` reaches it today -- the model has no
   organisation field -- so there is no separator to leave orphaned when one is missing;
   the whole line is `{{#if}}`-gated in the template. */
.md-hero--user__org {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(27, 54, 93, 0.78);
}

/* CURRENT AAC, in the identity column rather than pinned to a corner. */
/* THE RAIL — Current AAC above the profile controls, one aligned group in column 3. */
.md-hero--user__rail {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  min-width: 0;
}

.md-hero--user__aac-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
}

/* Status and Edit side by side when the rail is wide enough, wrapping to a stack when not --
   no separate breakpoint needed, and they stay aligned to the same left edge either way. */
.md-hero--user__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  width: 100%;
}

/* Small uppercase label. Uppercased in CSS so the translated string stays a normal
   sentence for translators and screen readers; letter-spacing kept modest, since wide
   tracking on small uppercase text is harder to read, not easier. 0.8 alpha clears the
   4.5:1 floor on this surface. */
.md-hero--user__aac-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(27, 54, 93, 0.8);
}

/* A real button (it opens the Current AAC Solution modal), so it reads as one: inset
   surface, chevron affordance, and a 44px minimum height for touch. */
.md-hero--user__aac {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17, 26, 46, 0.1);
  background: rgba(76, 134, 216, 0.06);
  cursor: pointer;
  text-align: left;
  color: var(--md-ink);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.md-hero--user__aac:hover {
  background: rgba(76, 134, 216, 0.11);
  border-color: rgba(17, 26, 46, 0.16);
}

.md-hero--user__aac:focus-visible {
  outline: 2px solid #4C86D8;
  outline-offset: 2px;
}

/* Compact icon container rather than a large nested pill. */
.md-hero--user__aac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.08);
  color: #4C86D8;
}

.md-hero--user__aac-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
}

.md-hero--user__aac-name {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
}

.md-hero--user__aac-chevron {
  flex-shrink: 0;
  color: rgba(27, 54, 93, 0.55);
}

/* ZONE 3 — profile status and owner actions, aligned top-right. */
/* Informational, NOT a control: the visibility status is a span here and changing it lives
   on the profile edit page, so it deliberately gets no button affordance. Both states use
   this same block with their own icon, and each NAMES its state in text rather than relying
   on the icon or colour to carry it. */
.md-hero--user__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(76, 134, 216, 0.1);
  border: 1px solid rgba(17, 26, 46, 0.1);
  color: #1B365D;
}

.md-hero--user__status-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

/* The one owner action, and it is an EXISTING destination (user.edit, the same Profile
   page the account rail links to) -- no new behaviour was invented for this header. */
.md-hero--user__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px, the touch-target floor this app holds itself to (WCAG 2.5.5 / AAC minimum) --
     the same reason the AAC button above carries it. */
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1B365D;
  background: #fff;
  border: 1px solid rgba(17, 26, 46, 0.14);
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.05);
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.md-hero--user__edit:hover {
  background: #f8fafc;
  border-color: rgba(17, 26, 46, 0.22);
  text-decoration: none;
}

.md-hero--user__edit:focus-visible {
  outline: 2px solid #4C86D8;
  outline-offset: 2px;
}

.md-hero--user__url {
  margin: 14px 0 0;
  font-size: 14px;
  word-break: break-word;
}

.md-hero--user__url a {
  color: #4C86D8;
}

/* RESPONSIVE. Content-driven breakpoints: the first one is where the three-column grid
   stops leaving the identity column a comfortable measure, not a device width. */
/* MEDIUM (<=1099px) — two columns. The rail's content moves BENEATH the identity stack in
   the same column, so the reading order is name, role, AAC, controls, and the avatar keeps
   its own column rather than the whole card stacking early. */
/* MID (<=1200px) -- the rail stops being a column and becomes a horizontal band
   (requested 2026-09-18; this breakpoint was 1099px). */
@media (max-width: 1200px) {
  .md-hero--user {
    grid-template-columns: minmax(120px, 140px) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 22px;
    /* 36px -> 28px TOP AND BOTTOM (requested 2026-09-18). At this width the rail has become a
       full-width band at the foot of the card, so the last thing above the bottom padding is a
       row of controls rather than the end of a text column, and the card as a whole is
       shorter and denser than the three-column version -- 36px of vertical inset reads as
       generous there and loose here.
       `!important` because the base `padding: 36px` is itself `!important`; equal specificity,
       so these win on source order, being the later rule. Only the vertical sides are named,
       so left and right keep 36px. */
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .md-hero--user__rail {
    /* FULL CARD WIDTH, not just the identity column (requested 2026-09-18). Measured at
       1030px: the AAC chip is ~172px and the two controls ~222px, which with the 32px gap
       needs ~426px -- but `grid-column: 2` gives only the identity column's ~386px, so the
       pair wrapped and Current AAC sat on its own row above the buttons. Spanning both
       columns gives ~535px and the row fits with room to spare.
       This is why forcing `flex-wrap: nowrap` inside the narrow column failed: there was no
       space to take, so the chip collapsed and `__aac-name`'s `overflow-wrap: break-word`
       broke "External AAC" one letter per line. The width has to come from the grid, not
       from squeezing a child. */
    grid-column: 1/-1;
    /* Containing block for the divider below. The rail is a flex container, so the rule has
       to be an ABSOLUTE pseudo-element -- a static one would become a third flex item beside
       the AAC block and the controls and stretch the band. */
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    /* SPREAD across the bottom rather than packed left (requested 2026-09-17). Once the rail
       stops being a column it spans the full width of the identity column, and left-packing
       left a wide dead strip to the right of Edit Profile. `space-between` puts Current AAC
       at one end and the profile controls at the other, so the bottom band carries the width
       instead of leaving it empty.
       This is the opposite of the large-screen rule on purpose: up there the rail IS a
       column and spreading would scatter related items down an oversized canvas; here the
       rail is a single horizontal band and spreading is what fills it. */
    justify-content: space-between;
    gap: 22px 32px;
    width: 100%;
  }
  /* Both groups GROW to fill the band. `space-between` alone was not enough: when the two
     groups together exceeded the rail width they wrapped onto separate rows, and each row was
     then left-packed with the same dead strip the spread was meant to remove (measured at
     1050, 760 and 620px). Growing from a 200px basis means they share the row evenly when
     both fit, and each fills the row on its own when they do not -- there is no width left
     over either way. */
  /* Natural widths, not grown. `flex: 1 1 200px` on both stretched each group to fill half
     the band; with the row now wide enough, they sit at their own size instead -- Current
     AAC hard left, the controls hard right, via the `space-between` above. `flex-wrap` is
     deliberately left at `wrap`: if a long AAC solution name ever does exceed the row, the
     groups drop onto two lines, which is the graceful failure. They never shrink below their
     content, so the chip cannot collapse. */
  .md-hero--user__aac-block {
    width: auto;
    flex: 0 1 auto;
  }
  .md-hero--user__controls {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  /* THE SAME GROOVE THE NAV PANEL USES (requested 2026-09-18), above the Current AAC /
     Public profile / Edit Profile band. Only at this width: above 1200px the rail is the
     card's third COLUMN, and a horizontal rule above a column would cut across the card
     rather than separate two stacked things. Here the rail is a full-width band under the
     identity stack, which is exactly the shape a divider is for.

     Identical recipe to the panel's dividers -- a solid dark wall with a 1px lit wall
     beneath, so the two surfaces read as the same material: see the Home Page / Home Board
     rules.

     Centred in the card's 22px `row-gap` at -11px, so it sits between the identity stack and
     the band rather than hugging either. If that gap changes, this moves with it. */
  .md-hero--user__rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    border-top: 1px solid rgba(27, 54, 93, 0.38);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    pointer-events: none;
  }
}
/* NARROW (<=640px) — one column, everything stacked (requested 2026-09-17). Below this the
   avatar no longer earns a column of its own: the identity stack and the rail both need the
   full width, and squeezing a 3-column-derived layout into ~380px was what produced the
   cramped, part-centred card.
   CENTRED throughout (requested 2026-09-17). Centring is applied at every level that owns an
   axis -- the grid centres its items, each flex column centres its children, and the control
   row centres itself -- because setting `text-align` alone would centre the COPY while
   leaving the avatar, the AAC button and the pills aligned left, which is the half-centred
   look this replaced. */
@media (max-width: 640px) {
  .md-hero--user {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    padding: 24px !important;
    border-radius: 20px;
    text-align: center;
    justify-items: center; /* centres each grid item in its column */
  }
  .md-hero--user__avatar-wrap,
  .md-hero--user__body,
  .md-hero--user__rail {
    grid-column: 1;
  }
  .md-hero--user__avatar {
    width: 96px;
    height: 96px;
    aspect-ratio: auto;
    border-radius: 22px;
  }
  .md-hero--user__name {
    font-size: 26px;
  }
  .md-hero--user__username {
    font-size: 15px;
  }
  .md-hero--user__role {
    font-size: 17px;
    margin-top: 18px;
  }
  /* Stacked, so `flex` must be reset: the medium tier's `flex: 1 1 200px` is a basis on the
     MAIN axis, and in a column that is a HEIGHT -- it inflated this rail to 418px on a 480px
     screen before this reset existed. */
  .md-hero--user__rail {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
  }
  /* Each flex column centres its OWN children -- the grid's `justify-items` only places the
     boxes, it does not reach inside them. */
  .md-hero--user__body {
    align-items: center;
  }
  .md-hero--user__aac-block {
    width: 100%;
    flex: 0 0 auto;
    align-items: center;
  }
  .md-hero--user__controls {
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
  }
  /* Natural width so the button is a centred control rather than a full-width band with its
     label pushed to the left edge, which reads as un-centred in a centred stack. */
  .md-hero--user__aac {
    width: auto;
    max-width: 100%;
  }
  /* Natural widths, NOT stretched. Letting these grow turned a compact status pill into a
     full-width band that read like a button -- the visibility status is informational, and
     the brief calls out not stretching it. They wrap if they cannot share a row. */
  .md-hero--user__controls > * {
    flex: 0 0 auto;
  }
}
/* Honour a reduced-motion preference for the only transitions this card has. */
@media (prefers-reduced-motion: reduce) {
  .md-hero--user__aac,
  .md-hero--user__edit {
    transition: none;
  }
}
.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);
}

/* ============================================================================
   ACCOUNT RAIL — the account page's own left-hand menu (2026-09-14)
   ============================================================================
   Replaces the pill row that used to sit at the top of this page; see
   `accountRailContext` in controllers/user.js for why that row is suppressed here.

   IT BORROWS THE CLASSIC RAIL'S LANGUAGE WITHOUT BORROWING ITS SELECTORS. `_classic-home.scss`
   opens by stating that it "deliberately shares NO selector" with the modern (`md-`) pages, so
   reaching in for `.ch-rail` / `.ch-row` would break that file's stated contract and couple two
   pages that are meant to move independently. What IS shared is the one thing that should be:
   the icon chip comes from `ch-chip` in `_chips.scss`, which is already a scheme-neutral module
   this file uses for the board cards.

   ABSOLUTE + PAGE PADDING, NOT A FLOAT. No wrapper can enclose "everything above the boards":
   `.md-user-summary` spans the whole template and the boards block sits inside an `{{#if}}`,
   so such an element would be unbalanced inside that block and Glimmer rejects it.
   A float was the first attempt and it does not hold. Several blocks on this page are grid or
   flex containers, which establish their own formatting context and therefore MUST NOT overlap
   a float — so when one is too wide for the band beside the rail the browser drops it BELOW the
   rail instead of narrowing it. `.md-acct-actions` (the four action cards) is exactly that: a
   `width: fit-content` grid with auto margins, which landed under the rail and then centred
   itself across the full page.
   Reserving the space with padding on the container and taking the rail OUT of flow removes
   the interaction entirely: every child is laid out inside the padded box, wherever it sits in
   the template and whatever its display type. The boards block then reclaims the gutter with a
   negative margin — the standard break-out — which is the one place that wants full width. */
.md-acct-rail {
  /* FIXED FULL-HEIGHT PANEL (requested 2026-09-18). It runs from just under the topbar to the
     bottom of the viewport and stays put while the page scrolls, so the account menu is
     reachable from anywhere on the page instead of scrolling away with the card.

     OUT OF FLOW + PAGE PADDING, which is what this file used before: the rail was made an
     in-flow flex item only to satisfy "the panel's bottom should match the action cards'
     bottom", and that requirement was dropped on 2026-09-18 ("the menu height shouldn't
     stretch to match the content next to it"). With the anchor gone, nothing needs the rail
     to be a sibling of the content, and being out of flow is what lets it outlive
     `.md-acct-top` -- which wraps only the top section, so `position: sticky` would unstick
     at the action cards rather than holding for the page.

     FLUSH to the viewport's left edge (`left: 0`), not inset to the content column: this is a
     page-level panel, so it meets the window edge and squares off its corners rather than
     floating as a card. `--topbar-height` rather than a literal: it is 68/70/16/0
     depending on the shell, and the panel must sit under whichever is live.

     `overflow-y: auto` so a menu taller than the viewport scrolls inside the panel rather
     than being clipped -- nine rows fit today, but a tenth must not fall off the bottom. */
  position: fixed;
  /* NOT `var(--topbar-height)` alone. On an authenticated page that variable is 16px
     (app.scss, "When user is logged in, use a shorter top navbar") -- a tuck-under offset for
     `#content` padding, not the bar's real height. The app-navbar is 70px, as the
     `--topbar-height: 70px` rule's own comment states. Anchoring to the variable put the panel
     16px from the top and hid its first row behind the navbar.
     `max()` takes whichever is larger, so this still follows the variable on any shell where
     the chrome is genuinely taller, and never sits above 70px of app-navbar. */
  /* FALLBACK IN THE var(), not just the max(). `--topbar-height` is set by `:has()` rules on
     `#within_ember`; if none of them match in a given shell the property is undefined, and a
     bare `var(--topbar-height)` makes the whole `max()` invalid at computed-value time. An
     invalid `top` on a fixed element is not 0 -- it is `auto`, which drops the panel at its
     STATIC position, part-way down the page inside `.md-acct-top`. The fallback keeps the
     expression valid whatever the shell does. */
  top: max(var(--topbar-height, 70px), 70px);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 5;
  /* 244 -> 208px (requested 2026-09-14: "thinner", meaning NARROWER). The floor is the
     longest label: that was "My Subscription" at about 118px (15px/650) when this was
     measured; the label lost its "My" on 2026-09-16, so the floor only moved DOWN and the
     208px keeps more slack than the arithmetic below claims. The row spends
     32 (icon) + 10 (gap) + 20 (row padding) + 20 (panel padding) + 2 (borders) = 84px around
     it, so 208 leaves ~124px of label — the longest fits on one line with slack. Below about
     200 it would wrap and the rows would grow taller, which is the opposite of the ask.
     READ FROM `--ll-rail-width` (2026-09-28) so the panel, the main column's offset and the
     fixed pill nav's `left` share one number and move together when the rail collapses --
     see that property on `.ll-appshell`. The fallback keeps 208px if the rail ever renders
     outside the shell. */
  width: var(--ll-rail-width, 208px);
  display: flex;
  flex-direction: column;
  /* One list, one gap. This was 14px to separate two `__group` wrappers; those are gone
     (2026-09-14 — all nine rows are direct children of the nav now), so this is the gap
     BETWEEN ROWS and takes the value the groups used internally.

     4px -> 12px (requested 2026-09-18). At 4px the nine rows read as one ridged block rather
     than nine separate targets, which matters more here than elsewhere: this is the page's
     primary navigation and a user driving it with a switch or a head pointer needs the
     boundaries legible, not just the 44px hit areas.
     HEADROOM: the panel runs from 70px to the viewport bottom, so on the shortest viewport
     this page has been checked at (729px) it has ~659px. Nine 48.125px rows plus 34px of
     panel padding is ~467px, which leaves ~192px for eight gaps -- a ~24px ceiling.
     8px on full-size screens (requested 2026-10-11: 12px -> 4px, then 4px more), 4px at 1200px
     and below (the media rule below), so the panel does not need to scroll. */
  gap: var(--dn-rail-gap, 8px);
  box-sizing: border-box;
  /* THE PANEL (requested 2026-09-14). The nav element IS the panel — no wrapper div was
     added, because a background, a border and padding are all it takes and the element was
     already there. A translucent tint one step down from the rows it holds, so the rows read
     as sitting ON it rather than merging into it.
     Nothing places text directly on this surface — every label is inside a row with its own
     background — so the panel carries no contrast requirement of its own. */
  /* 24px -> 10px (2026-09-18). The extra top inset was added to clear the navbar's shadow and
     the Beta feedback pill, but `top: max(var(--topbar-height), 70px)` above already puts the
     panel below the bar -- this was breathing room on top of clearance, and it was the last
     14px keeping an eleven-row menu from fitting a 768px-tall viewport without scrolling.
     Uniform 10px now, matching the other three sides. */
  padding: 10px;
  /* SQUARE (2026-09-18). The 20px radius was right while this was a floating card inset in
     the page; flush against the window edge a rounded corner reads as a rendering fault, and
     the left border is on an edge nobody can see. Kept on the right, which is the only edge
     that now separates the panel from the content. */
  border-radius: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(27, 54, 93, 0.05) 100%);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 22px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* THE TOP REGION — rail | account content, as a real two-column row. `align-items: stretch`
   is the whole point: it makes the rail's panel exactly as tall as the content beside it, so
   its bottom lands on the bottom of the action cards without anyone computing a height. */
/* THE WORKSPACE'S TOP INSET, on the account page only.
   `.md-workspace` carries `margin: 40px auto` PLUS `padding: 40px` — 80px above the fold —
   and that was sized to seat the pill row that used to be its first child. This page renders
   the rail instead and suppresses that row (`accountRailContext`, controllers/user.js), so
   the 80px became empty space with nothing in it.
   Dropping the margin leaves the 40px of padding, which is exactly what `.md-workspace`
   already does for itself at 1024px and below — so this makes the wide case agree with the
   narrow one rather than inventing a third number.
   SCOPED TO `--user-rail`, not `--user`: every other user.* route (profile, settings, logs,
   goals, recordings) still renders the pill row and still needs the space for it. */
@media (min-width: 1025px) {
  .md-shell--user-rail > .md-workspace {
    margin-top: 0 !important;
  }
}
/* Reserves the fixed panel's width. The rail is out of flow (see `.md-acct-rail`), so without
   this the page would run underneath it.

   ON THE SHELL, not on `.md-user-summary`. The summary is not the outermost box and the
   boards block deliberately BREAKS OUT of it with a negative margin (see the note above
   `.md-acct-rail`), so padding there is escaped by exactly the block that is widest --
   content still slid under the panel. `.md-shell--user-rail` wraps `.md-workspace`
   (templates/user.hbs), so padding here moves everything, break-outs included, and the
   centred workspace re-centres inside what is left.

   Scoped to >900px: below that the rail is an in-flow grid across the top, and it is also
   where the shell class stops being the right hook -- there is nothing to clear. */
.md-acct-top {
  display: flex;
  /* `flex-start`, NOT `stretch` (requested 2026-09-18). Stretch made the rail as tall as
     `.md-acct-main` beside it, and since the rows divide the rail's height between them
     (see `.md-acct-rail__row`) the nav grew with whatever happened to sit in the main
     column -- nine ~76px slabs at 1030px, where the profile card and the action cards are
     tall. The nav's height is a property of the nav, not of the page beside it, so the rail
     now ends after its last row. */
  align-items: flex-start;
  gap: 28px;
}

.md-acct-main {
  /* `min-width: 0` so this column can shrink below its content's min-content width. Without
     it the long board key inside the action cards would push the column wider than the row
     and squeeze the rail. */
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  /* Stacked: a 208px column plus a readable account card no longer fit. */
  .md-acct-top {
    display: block;
  }
}
/* (The reserved `padding-left` gutter that stood here is gone: the rail is a real column of
   `.md-acct-top` now, so no space needs holding open for it.) */
/* `.md-acct-rail__group` is gone with its markup (2026-09-14). It wrapped the nav's rows in
   two sets; they are one set now, so the rail itself is the list and its own `gap` spaces the
   rows. Deleted rather than left behind — a rule matching nothing is a trap for the next
   reader, who cannot tell from the stylesheet that it is orphaned. */
.md-acct-rail__row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* SHARE THE PANEL'S HEIGHT. The rail is stretched to the height of the account content
     beside it (`.md-acct-top` is `align-items: stretch`), which left the nine rows sitting at
     the top with dead space under the last one. `flex: 1` lets them divide that space evenly,
     so the list fills the panel and every row stays the same height as its neighbours.
     `min-height` below is still the floor, for a viewport where the content beside the rail
     is shorter than nine 44px rows.
     Inert in the narrow layout: there the rail is a GRID, and `flex` does nothing to a grid
     item — the rows size from the track instead.

     SUPERSEDED 2026-09-18: `.md-acct-top` is `align-items: flex-start` now, so the rail is
     only as tall as its rows and there is no leftover height to divide. `flex: 0 0 auto`
     states that directly instead of leaving a grow factor that depends on a stretch which
     no longer happens. */
  flex: 0 0 auto;
  /* 44px, which is WCAG 2.5.5 Target Size (Enhanced, AAA) and what this rail owes: these are
     the page's primary navigation and an AAC user may be driving them with a switch or a head
     pointer. It was briefly cut to 38px when "thinner" was read as shorter; the ask was
     narrower, and the width above is where that is paid instead. Do not trade this back. */
  min-height: 44px;
  /* CEILING for the growth above (requested 2026-09-18). `flex: 1 1 auto` divides the rail's
     leftover height between the nine rows, which is right when there is a little to divide
     and wrong when there is a lot: at 1030px the card and the action cards beside the rail
     are tall enough that each row grew to ~76px, so the nav read as nine oversized slabs
     rather than a list. Capped at the height a row settles at on a wide viewport, so the
     rows look the same at every width and the rail simply ends above the action cards'
     bottom instead of stretching to meet it.
     Sits ABOVE the 44px floor, so the WCAG 2.5.5 target size is untouched. */
  max-height: 48.125px;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.66) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #1B365D;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  /* ELEMENT-AGNOSTIC (2026-09-18). Eight of these rows are <LinkTo> anchors; Supervision is a
     <button>, because it opens a modal through `supervision_settings` rather than visiting a
     route. A button does NOT inherit font-family from the page -- it takes the UA's default --
     and there is no global button reset in this stylesheet, so without this the one button row
     would render in a different typeface to the eight beside it. `text-align` and `cursor` are
     the same story: buttons centre their text and show the default arrow, anchors do not. */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
}

.md-acct-rail__row:hover,
.md-acct-rail__row:focus-visible {
  text-decoration: none;
  color: #1B365D;
  box-shadow: 0 6px 16px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The current page. A filled row rather than a tinted one, matching how the pill row it
   replaces marked its active item, and `aria-current="page"` carries it non-visually so the
   state is not colour-only. */
.md-acct-rail__row.is-active {
  background: linear-gradient(135deg, #367D8E 0%, #536FAE 100%);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* HOME CARRIES MORE WEIGHT (requested 2026-09-18). The other eight rows are `user.*` pages
   WITHIN the account section; Home leaves it for the app home. It stays a BUTTON like the
   rest -- same shape, same 44px floor, same 15px type -- but sits forward of them, and a
   dashed rule separates the level-up from the eight section pages.

   Emphasis is spent on OPACITY AND DEPTH, not colour: the base rows are a translucent white
   gradient over the page, so a solid surface with a deeper shadow reads as nearer without
   introducing a second accent that would compete with `.is-active`'s teal-to-blue gradient.
   That distinction has to stay legible -- active means "you are here", emphasis here means
   "this is the way out" -- so they must not resemble each other.

   Size is deliberately NOT the lever. Scaling a target to express hierarchy would trade
   accessibility for a visual cue, and this is primary navigation an AAC user may be driving
   with a switch or a head pointer. The 44px floor and the label size are untouched. */
.md-acct-rail__row--home:not(.is-active),
.md-acct-rail__row--board:not(.is-active) {
  position: relative; /* containing block for the divider pseudo-element */
  /* LIT, not coloured in. The eight section rows are a translucent white gradient over the
     page; Home is opaque white falling to a wash of $brand-dusty-denim, which is the same
     hue its own icon is stroked in (#4C86D8) -- so the emphasis comes from the row's existing
     identity rather than a new accent.

     The glow is a spread-only ring in that hue plus a soft outer bloom. Deliberately kept
     LIGHT: `.is-active` is a saturated teal-to-blue fill with white text meaning "you are
     here", and this must stay clearly a lit white button rather than a second filled state,
     or the two compete for the same signal. */
  background: linear-gradient(155deg, #fff 0%, rgba(76, 134, 216, 0.12) 100%);
  border-color: rgba(76, 134, 216, 0.38);
  box-shadow: 0 0 0 3px rgba(76, 134, 216, 0.1), 0 4px 16px rgba(76, 134, 216, 0.22), 0 2px 6px rgba(17, 26, 46, 0.06), inset 0 1px 0 rgb(255, 255, 255);
  font-weight: 700;
  /* Separates the level-up from the eight section rows. ADDED to the nav's own `gap`, so the
     clear space between Home Page and Account is 12 + 12 = 24px. Was 20px; trimmed as part of
     fitting eleven rows into a 729px-tall viewport. Change this and the divider offset must
     follow. */
  margin-bottom: 12px;
}

/* THE DIVIDER ON THE HOME PAGE TOO, IN THE EXPANDED MENU (requested 2026-10-10: "the Home Page button
   needs to move up to make space for a divider below it"). The rule above, and the divider below,
   were only for Home Page when it is NOT the current page; on the home page itself the row is lit
   (`.is-active`) and had neither. Here it gets the same room and the same divider, and keeps the
   active look. The collapsed icon menu is unchanged. */
.md-acct-rail:not(.md-acct-rail--collapsed) .md-acct-rail__row--home.is-active {
  position: relative; /* containing block for the divider */
  margin-bottom: 12px;
}

/* THE DIVIDER, as a line in the gap -- not the row's own `border-bottom`. That was the first
   attempt and it is invisible by construction: the row is a 12px rounded card, so a bottom
   border is read as the button's own edge rather than a rule between two groups. A pseudo
   element sits in the margin below the button, where a separator belongs.

   `position: absolute` matters: `.md-acct-rail__row` is `display: flex`, so a static
   `::after` would become a THIRD flex item beside the icon and label and stretch the row.
   Taking it out of flow leaves the row's own layout untouched.

   Full-bleed to the panel's padding edges (`left/right: -10px` against the panel's 10px
   padding) so it reads as a division of the whole list, not an underline of one button. */
.md-acct-rail__row--home:not(.is-active)::after,
.md-acct-rail:not(.md-acct-rail--collapsed) .md-acct-rail__row--home.is-active::after {
  content: "";
  position: absolute;
  /* FULL BLEED across the panel. -10px cancels the panel's own 10px side padding, so the
     groove runs wall to wall rather than stopping short of the edges -- a channel cut across
     the whole surface, which is what sells the depth. Indenting it to the rows' text column
     was the earlier attempt and it read as an underline belonging to one button. */
  left: -10px;
  right: -10px;
  /* CENTRED IN THE SPACE BELOW HOME PAGE (requested 2026-10-10: "the expanded menu's home page
     divider should be centered"). It used to sit 4px low on purpose (`bottom: -14px`, to clear
     Home Page's glow), which measured 12px below / 10px above at the 12px gap and 12 / 2 at
     1200px and below, where the gap is 4px. The space is this row's 12px `margin-bottom` plus the
     nav's gap; the 2px line (rule + highlight) starts at half of it. `top` is measured from the
     padding box, which the row's 1px bottom border sits outside, so half the space is exact.
     12 + 8 = 20 on full-size screens, so the line starts at 10; at 1200px and below (a 4px gap) the
     media rule after this one puts it at 8. */
  top: calc(100% + 10px);
  /* 0.22 -> 0.38. At 0.22 the dash was barely separable from the panel's own gradient; this
     is still well short of the row borders, so the rule divides without competing with the
     buttons it sits between. */
  /* SOLID, not dashed. A dashed groove is broken by construction: the highlight below shows
     through every gap, so the channel reads as a row of ticks rather than one cut. Solid is
     what makes the two walls continuous. */
  border-top: 1px solid rgba(27, 54, 93, 0.38);
  /* CARVED, not drawn on. A single dark rule sits ON the surface; a groove needs two lines --
     the dark one is the shadowed top wall, and a 1px highlight directly beneath it is the lit
     bottom wall catching the light from above. That pairing is what the eye reads as depth, and
     it is why the highlight has to be lighter than the panel rather than merely different: the
     panel's own gradient is white falling to a navy wash, so near-white reads as lit against
     it at every point down the list.
     `box-shadow` rather than a second element: the pseudo-element is already the rule, and a
     0-height box's shadow lands exactly 1px under its border with no extra markup. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* 1200px and below the nav's gap is 4px, so the space is 12 + 4 = 16px and the line starts at 8. */
@media (max-width: 1200px) {
  .md-acct-rail__row--home:not(.is-active)::after,
  .md-acct-rail:not(.md-acct-rail--collapsed) .md-acct-rail__row--home.is-active::after {
    top: calc(100% + 8px);
  }
}
/* HOME BOARD mirrors Home Page at the far end: its divider faces UP, into the section rows,
   so the eight of them sit between two dividers as one group. Same clear space as under Home
   Page (12px margin + the nav's gap), rule centred in it. */
.md-acct-rail__row--board:not(.is-active) {
  margin-top: 12px;
  /* TWO LINES here, unlike every other row, so the height cap that keeps the section rows
     uniform has to come off -- it exists to stop them stretching, not to clip content. The
     44px floor still applies. */
  max-height: none;
}

.md-acct-rail__row--board:not(.is-active)::before {
  content: "";
  position: absolute;
  /* Full bleed and solid, matching the rule under Home Page. */
  left: -10px;
  right: -10px;
  /* CENTRED in the space above Home Board (requested 2026-10-10, with Home Page's): this row's 12px
     `margin-top` plus the nav's 8px gap: half of 20, plus the 2px line, measured from inside the
     row's 1px top border. The 1200px-and-below value (a 4px gap) is in the media rule right after
     this one. */
  top: -12px;
  border-top: 1px solid rgba(27, 54, 93, 0.38);
  /* Same groove as the rule under Home Page. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* 1200px and below the nav's gap is 4px, so the space above Home Board is 12 + 4 = 16px: half of
   16, plus the 2px line. After the rule above so it wins at equal weight. */
@media (max-width: 1200px) {
  .md-acct-rail__row--board:not(.is-active)::before {
    top: -10px;
  }
}
/* The board's own name under the row label. Quieter than the label so the row still reads
   "Home Board" first and "which one" second. */
.md-acct-rail__sublabel {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(27, 54, 93, 0.72);
  overflow-wrap: anywhere;
}

/* Hover lifts the same glow rather than introducing a new colour, so the button brightens
   instead of changing character. */
.md-acct-rail__row--home:not(.is-active):hover,
.md-acct-rail__row--home:not(.is-active):focus-visible,
.md-acct-rail__row--board:not(.is-active):hover,
.md-acct-rail__row--board:not(.is-active):focus-visible {
  border-color: rgba(76, 134, 216, 0.55);
  box-shadow: 0 0 0 4px rgba(76, 134, 216, 0.14), 0 6px 20px rgba(76, 134, 216, 0.3), 0 2px 6px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgb(255, 255, 255);
}

.md-acct-rail__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px -> 30px (2026-09-18). Everything here is border-box, so a row's height is
     `max(min-height, icon + 12px padding + 2px border)`. At 32px that came to 46px and the
     44px floor never governed -- eleven rows were quietly 22px taller than the floor implies.
     At 30px the arithmetic lands exactly on 44px, which is what `min-height` was written to
     guarantee (WCAG 2.5.5 Target Size), so the row height stops being an accident of the glyph
     size. The TARGET is unchanged at 44px; only the chip inside it is 2px smaller. */
  width: 30px;
  height: 30px;
  border-radius: 10px;
  /* The shared chip — the same surface the classic rail icons and every board card carry. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
}

.md-acct-rail__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* THE BOARDS BLOCK BREAKS OUT of the gutter — the literal "not left of the boards content"
   half of the request. A negative margin equal to the container's padding, so the boards
   browser starts at the page's true left edge and takes the full width, while everything
   above it stays in the column beside the rail. */
/* NO `margin-top` HERE ANY MORE. 28px was added while the rail was absolutely positioned: out
   of flow, it contributed no height, so nothing pushed the boards below it and the section
   needed its own clearance. The rail is a real column of `.md-acct-top` now, so the row's own
   height separates them — and `.md-acct-actions` already ends with `margin-bottom: 24px`, so
   the 28px was stacking on top of that for 52px of gap.
   The boards section is also a SIBLING of that row rather than a child, so it is already the
   page's full width and needs no negative-margin break-out either. Nothing to declare. */
/* WIDE (>1200px) -- the panel breathes (requested 2026-09-18). Above this width the viewport
   is tall as well as wide in practice, so the menu can afford a deeper top inset and looser
   rows; at and below 1200px the same values would crowd the panel against its own scroll.

   ALSO GATED ON HEIGHT (requested 2026-09-18: no scrolling at 768px tall and above). Width
   alone was the wrong condition -- a wide screen is not necessarily a tall one, and these two
   values are what tipped the panel into overflow at 768px.

   BUDGET, eleven rows (Home Page, eight section rows, Supervision, Home Board):
     ten rows at 46px                                460px
     Home Board's two-line row                        49px
     Home Page + Home Board bookend margins           40px
     ten gaps                             10 x 12 =  120px   10 x 18 =  180px
     padding (top + bottom)                           20px            50px
                                          base ---->  689px   wide -> 779px
   ROWS ARE 46px, NOT 44px. `min-height: 44px` is a FLOOR and everything here is border-box
   (the global `*, *:before, *:after` rule), so the 32px icon plus 12px padding plus 2px
   border overflows it by 2px. An earlier version of this budget assumed 44 and was 22px
   short across eleven rows -- which is why the pager was still appearing on screens that
   should have fitted.
   The panel is `100vh - 70px`, so base needs 759px of viewport height and wide needs 849px.
   860px rather than 849px so the threshold is not sitting on the arithmetic. Between 759 and
   859px tall the panel uses base spacing and does not scroll. */
@media (min-width: 1201px) and (min-height: 860px) {
  .md-acct-rail {
    padding-top: var(--dn-rail-pad-top-tall, 40px);
    gap: var(--dn-rail-gap-tall, 18px);
  }
  /* THE EXPANDED MENU NEVER SPACES ITS ROWS MORE THAN 8px (requested 2026-10-10: "no more than
     12px grid gap on the expanded menu"; 2026-10-11: 8px less, then 4px more, on full-size screens).
     `min()` keeps a smaller value; the collapsed icon menu keeps its own 4px. */
  .md-acct-rail:not(.md-acct-rail--collapsed) {
    gap: min(var(--dn-rail-gap-tall, 18px), 8px);
    /* Home Page 12px higher, the room its divider takes (see "THE DIVIDER ON THE HOME PAGE TOO"),
       so the rows under it stay where they were. Only here: elsewhere the top padding is 10px. */
    padding-top: calc(var(--dn-rail-pad-top-tall, 40px) - 12px);
  }
}
/* 4px AT 1200px AND BELOW (requested 2026-10-10: "on 1200px and smaller, the acct rail nav grid gap
   should be 8px smaller"; full-size screens are 8px since 2026-10-11). Below 901px the rows are in
   the dropdown panel, which sets its own 4px gap, so this governs the side panel from 901 to 1200. */
@media (max-width: 1200px) {
  .md-acct-rail {
    gap: var(--dn-rail-gap, 4px);
  }
}
/* ACCOUNT PAGE ONLY: drop the folders tagline below 768px (requested 2026-09-18).
   `.ub-boards-page__folders-subtitle` is "Organize your boards", the inline hint beside the
   folder-count chip. At this width the account page's folder header has less room than the
   boards page's -- the fixed nav panel takes 208px of it above 900px, and below that the nav
   grid sits above the same content -- so the tagline wraps under the chip and pushes the
   header onto a second line. The chip and the toggle already say what the strip is.

   SCOPED to `.md-user-summary`, the account page's own wrapper, because <BoardsBrowser> is
   shared with the boards page (templates/user/boards.hbs) where the hint still has room and
   is still wanted. A bare rule here would have taken it off both.

   NOT a duplicate of the existing hide: that one lives in
   `@mixin boards-folders-narrow-header`, applied by a `@container boards-folders
   (max-width: 420px)` query for the side-by-side layout's narrow COLUMN and by a
   `@media (max-width: 640px)` block. Neither covers a 768px viewport in the stacked layout,
   which is the case this handles. */
@media (max-width: 768px) {
  .md-user-summary .ub-boards-page__folders-subtitle {
    display: none;
  }
}
/* ACCOUNT PAGE, <=1200px: 12px off each side gutter (requested 2026-09-18). The base
   `.md-workspace` is `padding: 40px` all round; this takes the sides to 16px (40 -> 28 -> 16,
   trimmed twice the same day) and leaves the top and bottom alone. 16px is also what the
   Focused Boards and Reports pages use for their side gutters, so the account page lines up
   with them rather than sitting 24px wider.

   WHY THIS PAGE AND THIS WIDTH. 1200px is where the account page's boards insert stops being
   side-by-side and stacks (see the `.md-user-summary &` block on the split rule), and it is
   also where the fixed 208px nav panel is still taking width off the content column. Below
   that point the page is paying for a gutter it can no longer afford, while a page with no
   nav panel has the same 40px and plenty of room for it.

   SCOPED to `.md-shell--user`, deliberately NOT the bare `.md-workspace`: 21 templates use
   that class and 86 rules already touch it, so a global change here would reshape the gutters
   on every page in the app -- boards, reports, settings, logs, the dashboard -- for a problem
   that only this page has.

   `(0,2,0)` plus `!important`, which is what it takes to beat the base padding: that rule is
   `(0,1,0)` and already `!important`. Only the sides are named, so the top keeps whatever the
   view scheme set (40px in Gentle, 20px in Focused -- see _focused-view.scss) and the bottom
   keeps its `calc(40px - 9rem)`. */
@media (max-width: 1200px) {
  .md-shell--user > .md-workspace {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* THE UPDATES PAGE'S 64px OF HEADROOM IS GONE (2026-09-21), and this note is what is left of
   it. Requested 2026-09-20, it cleared the pill nav back when the nav rendered INSIDE the
   page on that one route. The nav was hoisted above the page later the same week and the app
   shell now supplies that clearance for every destination
   (`.ll-appshell .md-shell`, `--ll-nav-clearance`), so the 64px had become a second helping:
   measured, `.md-main` sat at y=262 on the Updates page against y=218 on its own log-detail
   page and y=176 on the dashboard. Removed with the requester's agreement rather than
   silently, because it was an explicit styling request.
   `homeNavContext` (controllers/user.js) keeps its other consumer and is untouched. */
/* The 208px gutter for bare-layout pages that carry the rail (currently only Reports,
   user.stats). `.md-shell--user-rail` cannot do this job here: bare routes never render that
   shell. Scoped to its own wrapper rather than to `.md-shell--reports-view`, which Boards
   also uses -- Boards has no rail, so padding that shell would give it a 208px gutter
   against nothing.
   Above 900px only, matching the main gutter rule: below that the rail is an in-flow grid
   across the top and there is nothing to clear. */
/* `.md-bare-rail-gutter` is retired (2026-09-21): templates/user.hbs no longer wraps the
   bare-route outlet, because `.ll-appshell__main` now clears the rail for every route
   uniformly. Kept as a note rather than silently deleted so the reason is findable. */
/* Supervision page heading: see `.md-billing__header` further down, which this now shares a
   definition with (2026-09-21, requested). It used to be a standalone 26px/700/$la-navy rule
   here; that was a THIRD heading scale for one page, and the definition was moved rather than
   duplicated so the two account-section page headers cannot drift apart. */
/* ── THE COLLAPSED RAIL (requested 2026-09-28) ──────────────────────────────────────────
   Icon over a short label, the way Basic's collapsed rail reads (_classic-home.scss, the
   `.ch-rail--collapsed` block), toggled by `.md-acct-rail__toggle` (components/account-rail.hbs)
   and stashed as `modern_rail_collapsed`.
   WIDE-SCREEN ONLY, for the reason Basic learned the hard way (_classic-home.scss, "EVERYTHING
   BELOW IS THE COLLAPSED RAIL, AND IT IS WIDE-SCREEN ONLY"): at 900px and below the rail is an
   in-flow grid across the top, so nothing here is emitted there and the toggle is hidden, and a
   collapse made on a laptop cannot leave a phone layout half-collapsed with no way back.
   124px: the label box is 124 - 1 (panel border) - 20 (panel padding) - 8 (row padding)
   - 2 (row borders) = 93px, which holds "Subscription", the longest English label, at 14px/650.
   A longer translation ellipsises; the full text stays the link's accessible name. */
.md-acct-rail__toggle {
  display: none;
}

@media (min-width: 901px) {
  /* `:has()` so the rail's own class drives the shell: one piece of state, no second reader in
     controllers/application.js. (0,2,0), so it beats the base `.ll-appshell` value on
     specificity rather than source order -- the same arrangement as `--ll-nav-clearance`. */
  .ll-appshell:has(> .ll-appshell__main > .md-acct-rail--collapsed) {
    --ll-rail-width: 124px;
  }
  /* STRADDLES THE PANEL'S RIGHT BORDER, fixed to the app frame. `.ch-rail__toggle` (reused from
     Basic) supplies the round chevron look and its 44px hit area; this places it. The panel is
     `overflow-y: auto`, which clips on both axes, so the button cannot live inside it and still
     straddle. z-index 61 clears the fixed pill nav (60) whose band starts at the same edge. */
  .md-acct-rail__toggle {
    display: inline-flex;
    position: fixed;
    top: calc(max(var(--topbar-height, 70px), 70px) + 16px);
    left: calc(var(--ll-rail-width) - 16px);
    z-index: 61;
  }
  /* EXPANDED: CENTRED ON THE DIVIDER UNDER HOME PAGE (requested 2026-10-10: "the expand/collapse arrow
     should be centered on that divider"). The divider is 56px below the top of the Home Page row
     (the 44px row plus `bottom: -14px`, ~1px), and the button is 32px tall, so its top is the row's
     top + 40px. The row's top is the panel's top + its top padding: 10px, or the tall-screen value
     less 12px (the media rule below). */
  .md-acct-rail:not(.md-acct-rail--collapsed) + .md-acct-rail__toggle {
    top: calc(max(var(--topbar-height, 70px), 70px) + 10px + 40px);
  }
  /* The chevron points left to collapse and right to expand, keyed on the attribute that
     states the state, so the icon cannot disagree with what a screen reader hears. */
  .md-acct-rail__toggle[aria-expanded=false] .ch-rail__toggle-icon {
    transform: rotate(180deg);
  }
  .md-acct-rail--collapsed .md-acct-rail__row {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* 10 -> 4px sides: the label's width comes from here, not from a wider rail. */
    padding-left: 4px;
    padding-right: 4px;
    /* The 48.125px cap is the one-line row's; this row is two lines. */
    max-height: none;
  }
  .md-acct-rail--collapsed .md-acct-rail__label {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Visually hidden, still announced: Home Board's board name.
     The same clip pattern Basic's collapsed rail uses (and Bootstrap's `.sr-only`). */
  .md-acct-rail--collapsed .md-acct-rail__sublabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
/* The tall-screen rail starts its rows 12px lower than elsewhere (its own top padding, less 12), so
   the expanded toggle follows. After the rule above so it wins at equal weight. */
@media (min-width: 1201px) and (min-height: 860px) {
  .md-acct-rail:not(.md-acct-rail--collapsed) + .md-acct-rail__toggle {
    top: calc(max(var(--topbar-height, 70px), 70px) + var(--dn-rail-pad-top-tall, 40px) - 12px + 40px);
  }
}
/* 901-1024px: the panel's top padding is 12px there ("NARROWER (<=1024px)"), not 10. */
@media (min-width: 901px) and (max-width: 1024px) {
  .md-acct-rail:not(.md-acct-rail--collapsed) + .md-acct-rail__toggle {
    top: calc(max(var(--topbar-height, 70px), 70px) + 12px + 36px);
  }
}
/* 1200px and below the divider sits 4px higher (half of a 4px-smaller space: row top + 52px, not 56),
   so the arrow does too: +36 rather than +40. 901-1024px is the rule above. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .md-acct-rail:not(.md-acct-rail--collapsed) + .md-acct-rail__toggle {
    top: calc(max(var(--topbar-height, 70px), 70px) + 10px + 36px);
  }
}
/* COLLAPSED: THE ARROW SITS IN THE GAP UNDER HOME PAGE (requested 2026-10-10: "make the collapse arrow
   show inbetween the home page button and its next button"). It was fixed at the top of the panel,
   over Home Page's corner. Home Page's collapsed row is 65px tall (icon over label) and starts 8px
   under the navbar; the space below it is 8px where it has its divider (every page but the home
   page) and the 4px gap where it does not. The 32px button is centred in that space. */
.md-acct-rail.md-acct-rail--collapsed + .md-acct-rail__toggle {
  top: calc(max(var(--topbar-height, 70px), 70px) + 8px + 65px + 4px - 16px);
}

.md-acct-rail.md-acct-rail--collapsed:has(.md-acct-rail__row--home.is-active) + .md-acct-rail__toggle {
  top: calc(max(var(--topbar-height, 70px), 70px) + 8px + 65px + 2px - 16px);
}

/* THE COLLAPSED MENU'S SPACING (requested 2026-10-10, in three steps: "no more than 8px, no matter
   the screen size", asked twice, then "on the buttons not home page and the bottom divider, make the
   grid gap 4px"). Above 1200px it was 12px, or 18px on a tall screen; at 1200px and below 4px; and
   Home Page and Home Board each added 12px of margin for their dividers, so the space either side of
   the middle group was 20px (16px at 1200 and below).
   Now, at every width: 4px between the buttons, and 8px at the divider under Home Page (the 4px gap
   plus a 4px margin), with the line centred in that 8px (`--ll-rail-divider-space-collapsed`).
   NO DIVIDER ABOVE HOME BOARD here (requested 2026-10-10: "remove the bottom divider (ensuring the
   same grid space with the other buttons)"): it is not generated, and Home Board takes no extra
   margin, so it sits the same 4px from the row above as every other button. (0,2,0) or more, so
   these outrank the `.md-acct-rail` gap rules. */
@media (min-width: 901px) {
  .md-acct-rail.md-acct-rail--collapsed {
    --ll-rail-divider-space-collapsed: 8px;
    gap: 4px;
  }
  .md-acct-rail--collapsed .md-acct-rail__row--home:not(.is-active) {
    margin-bottom: 4px;
  }
  .md-acct-rail--collapsed .md-acct-rail__row--board:not(.is-active) {
    margin-top: 0;
  }
  /* The line is 2px (its 1px rule and 1px highlight), so it starts 1px short of the middle; that
     1px is cancelled by the row's own 1px bottom border, which `100%` (the padding box) does not
     include. */
  .md-acct-rail--collapsed .md-acct-rail__row--home:not(.is-active)::after {
    top: calc(100% + var(--ll-rail-divider-space-collapsed) / 2);
    bottom: auto;
  }
  .md-acct-rail--collapsed .md-acct-rail__row--board:not(.is-active)::before {
    content: none;
  }
}
/* COLLAPSED: HOME PAGE 8px UNDER THE NAVBAR, AT EVERY WIDTH (requested 2026-10-10: "about 12px below
   it", then "only show 8px between home page button and navbar"). The panel starts at the navbar's
   bottom edge; its top padding was 40px on a tall wide screen, 12px at 1024px and below and 10px
   otherwise. (0,2,0), so it outranks each of those `.md-acct-rail` rules. */
@media (min-width: 901px) {
  .md-acct-rail.md-acct-rail--collapsed {
    padding-top: 8px;
  }
}
/* MOTION IS OPT-IN, as on Basic's rail. Everything that reads `--ll-rail-width` moves together. */
@media (prefers-reduced-motion: no-preference) {
  .md-acct-rail {
    transition: width 0.22s ease;
  }
  .ll-appshell__main {
    transition: margin-left 0.22s ease;
  }
  .ll-appshell__navbar,
  .md-acct-rail__toggle {
    transition: left 0.22s ease;
  }
}
/* NARROWER (<=1024px) -- less headroom above the list (requested 2026-09-18). The 24px base
   inset was chosen to clear the navbar's shadow and the Beta feedback pill on a roomy screen;
   at this width the viewport is usually shorter too, and eleven rows plus two 32px bookend
   gaps are competing for the same vertical space. Spending 12px there instead buys a row's
   worth of it back before the panel has to scroll.

   Completes the scale: 40px above 1200, 24px between, 12px at or below 1024. Only the top
   changes -- the 10px on the other three sides is the panel's own inset and is not what is
   under pressure. */
@media (max-width: 1024px) {
  .md-acct-rail {
    padding-top: 12px;
  }
}
/* THE DROPDOWN'S PARTS, HIDDEN / INERT ABOVE 900px (2026-10-10). The trigger only exists for the
   narrow dropdown below; the rows wrapper is `display: contents` so the side panel lays out its
   rows exactly as it did before the wrapper existed (no rule targets them as direct children). */
.md-acct-rail__menu-trigger {
  display: none;
}

.md-acct-rail__rows {
  display: contents;
}

/* NARROW: the rail stops floating and becomes a block above the content. Below this width there
   is not enough room for a 244px column plus a readable account card, and a floated rail would
   squeeze the content beside it rather than wrapping. SINCE 2026-10-10 IT IS A DROPDOWN HERE, not
   a full-width grid of rows (requested: "on 900px and smaller, the acct rail contents should
   collapse to a dropdown (very similar to our pillnav dropdown that shows on smaller screens, but
   with a different bg (same as the current bg of most of the acct-rail row elements)"). The
   trigger and the open panel are modelled on the pill nav's dropdown as measured at 420px
   (`.md-pillnav-dropdown__trigger` 48px, radius 14px, 15px/600; `__list` white, radius 14px,
   `0 8px 24px rgba(0,0,0,.1)`, 6px below the trigger); the trigger takes the rows' white glass. */
@media (max-width: 900px) {
  /* No gutter reset needed here — it is scoped to `min-width: 901px` above, so the page's own
     padding applies below this width without being zeroed and put back. */
  /* ONE GRID FOR ALL NINE. The rows are direct children of the nav, so the grid goes here and
     they flow continuously across it. (This was first done with `display: contents` on two
     group wrappers; the wrappers were then removed outright, which is simpler and gives the
     same single grouping at EVERY width rather than only this one.)
     190px, not 170: "My Subscription" needed about 182px at this row's size, and at 170 it
     wrapped to two lines and made that one row taller than the rest. That label is now just
     "Subscription" (2026-09-16), so 190 has gained slack rather than lost it -- kept as is,
     since the next-longest labels ("Recordings", "Subscription") still want most of it. */
  .md-acct-rail {
    /* BACK IN FLOW. Undoes the fixed panel above -- below this width the rail is a grid
       across the top of the page, not a side column, so every one of its positioning
       properties has to be returned to its initial value or the grid would be pinned to the
       viewport. */
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    overflow-y: visible;
    z-index: auto;
    width: 100%;
    /* 22px of TOP margin (requested 2026-09-18): back in flow, the grid starts hard against
       whatever sits above it, and the fixed panel's own breathing room came from `top`, which
       is reset to `auto` just above. The bottom 20px was already here and is unchanged --
       this sets the leading edge to match. */
    /* 60px TOP since 2026-10-10 (was 22px), requested: "center it on the page and position it below
       the navbar with a bit of space in between". Measured: the rail's in-flow top sits exactly 44px
       above the fixed navbar's bottom at both navbar heights (70px from 768px up, 114px below), so
       22px left the dropdown trigger 22px UNDER the navbar; 60px puts it 16px clear of it. */
    margin: 60px 0 20px;
    /* PADDING (requested 2026-09-20): +32px on top, and sides set to ALIGN WITH THE WORKSPACE.
       Top was 12px here -- set by the `max-width: 1024px` block above, which this later,
       narrower query overrides at equal specificity -- so +32 lands at 44.
       SIDES ARE 52px, AND THE RAIL IS DELIBERATELY INSET MORE THAN THE CONTENT BELOW IT.
       Read this before "fixing" it to match the workspace: at these widths the workspace does
       NOT inset by 52px. `@media (max-width: 950px) .md-workspace` resets it to `margin: 0`
       with `padding: … 16px …` (and `<=820px` takes the sides to 12px), so workspace content
       starts 16px from the shell edge, not 52. Measured in headless Chrome at a 900px
       viewport: workspace computed padding-left 16px, max-width 100%, margin-left 0.
       16px was therefore tried FIRST and rejected by eye -- it is exactly the workspace's own
       inset, and at that width everything sits so close to the edge that the rail read as
       having no padding at all. 52px is the value that makes the rail's rows visibly inset;
       it is a deliberate 36px MORE than the content under them, not an alignment.
       (An earlier version of this comment claimed 52 = 12px centring + 40px padding and called
       it "aligned with the workspace". That arithmetic came from the BASE `.md-workspace`
       rule, which the <=950px rule above overrides -- it never applies at this width.)
       Bottom is restated as its existing 10px rather than left out, because this is the
       shorthand.
       NOT scoped to modern view, deliberately. `body.ll-view-modern` exists (app.js
       `set_view_scope`) but has ZERO uses in any stylesheet, and app.js notes an unrecognised
       preference leaves BOTH view classes off -- so keying on it would silently drop this
       padding. More importantly the same rail renders on the account-section pages in Basic
       view too, and giving the two views different padding at the same width would read as a
       bug rather than a choice. */
    /* THE DROPDOWN HOST, not a grid (2026-10-10). The panel's own surface goes too: it was one of
       the three backgrounds competing at this width (requested the same day). Padding is just the
       page's side inset; the rows live in the panel below the trigger. */
    padding: 0 16px;
    display: flex;
    justify-content: center;
    position: relative;
    /* Above the shell's stacking context (its fixed wash layer; see "THE WASH IS THE SHELL'S
       AGAIN"), which shares this layer and comes later in the page. */
    z-index: 1;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .md-acct-rail__menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(360px, 100%);
    /* Centred on the page whatever the host's display ends up being. */
    margin: 0 auto;
    min-height: 48px;
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    /* The rows' own surface (`.md-acct-rail__row`): white glass, white rim, soft shadow. */
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.66) 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(17, 26, 46, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #1B365D;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  /* BELOW THE PILL NAV, NOT ABOVE IT (requested 2026-10-10: "actually position it below the pill
     nav menu instead"). In the DOM the pill nav and then the rail sit inside `.ll-appshell__main`,
     in the order they are drawn (for keyboard users). On pages that have the pill nav the shell
     becomes a flex column and `__main` steps out of the box tree (`display: contents`) so `order`
     can lay out the nav, then this dropdown, then the page. Pages with no pill nav (the account pages) keep the dropdown where it
     is, just below the navbar. The nav bar's `margin-bottom: -48px` (it floats over the page's
     wash) is dropped in this arrangement: with it, the next item started 52px INSIDE the bar and
     the trigger overlapped the pills (measured at 860 / 600 / 390). Without it the dropdown simply
     follows the bar, and its own small top margin is the gap. */
  .ll-appshell:has(> .ll-appshell__main > .ll-appshell__navbar) {
    display: flex;
    flex-direction: column;
  }
  .ll-appshell:has(> .ll-appshell__main > .ll-appshell__navbar) > .ll-appshell__main {
    display: contents;
  }
  /* The bar is `position: sticky` with `top: max(var(--topbar-height, 70px), 70px)` (its base rule
     near the end of this file): at rest that DRAWS it lower than its place in the flow without
     moving what follows, so the dropdown landed under the bar (measured: bar drawn 96..160, its
     flow box 26..90, trigger at 98). Here its flow place is moved to where it is drawn, with a
     margin of the SAME offset, so following items clear it and it sticks where it is drawn. */
  .ll-appshell:has(> .ll-appshell__main > .ll-appshell__navbar) > .ll-appshell__main > .ll-appshell__navbar {
    order: 1;
    margin-top: var(--ll-navbar-sticky-top);
    margin-bottom: 0 !important;
  }
  .ll-appshell:has(> .ll-appshell__main > .ll-appshell__navbar) > .ll-appshell__main > .md-acct-rail {
    order: 2;
    margin-top: 8px;
  }
  .ll-appshell:has(> .ll-appshell__main > .ll-appshell__navbar) > .ll-appshell__main > .ll-appshell__content {
    order: 3;
  }
  .md-acct-rail__menu-chevron {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
  }
  .md-acct-rail__menu-trigger[aria-expanded=true] .md-acct-rail__menu-chevron {
    transform: rotate(180deg);
  }
  .md-acct-rail__rows {
    display: none;
  }
  .md-acct-rail__rows.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, 100% - 32px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 1500;
  }
  /* THE BOOKENDS BECOME ORDINARY CELLS HERE. Home Page and Home Board are set apart in the
     side panel by a dashed rule and 20px of extra margin, because there the nav is a vertical
     list and "above the group / below the group" is a direction a reader can follow. In this
     grid the rows flow left-to-right and wrap, so neither one is reliably at an end of
     anything -- a divider would cut across the middle of a row, and the extra margin would
     knock a single cell out of alignment with its neighbours.

     `content: none` rather than `display: none`: it stops the pseudo-element being generated
     at all instead of generating one and hiding it. The margins go back to 0 so the grid's own
     8px `gap` is the only spacing, which is what makes every cell match. */
  .md-acct-rail__row--home:not(.is-active),
  .md-acct-rail__row--board:not(.is-active),
  .md-acct-rail:not(.md-acct-rail--collapsed) .md-acct-rail__row--home.is-active {
    margin-top: 0;
    margin-bottom: 0;
  }
  .md-acct-rail__row--home:not(.is-active)::after,
  .md-acct-rail__row--board:not(.is-active)::before,
  .md-acct-rail:not(.md-acct-rail--collapsed) .md-acct-rail__row--home.is-active::after {
    content: none;
  }
  /* (No `display: contents` on a group wrapper any more — there is no wrapper to flatten,
     so the rows are already direct grid items here.) */
}
.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` / `__quick-pill` removed with their markup (2026-09-14) —
   the four links they styled now live in `.md-acct-rail` above. Deleted rather than left
   behind: rules matching nothing are a trap for the next reader, who has no way to tell from
   the stylesheet that they are orphaned. */
/* ── 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);
  }
}
/* The mirror of the above, for an element that should arrive from the other side. Same 30px
   and the same easing where it is used, so a pair animating together reads as one movement
   rather than two effects that happen to overlap. */
@keyframes md-slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ── THE ACCOUNT-SECTION HEADERS THAT SLIDE IN, IN GENTLE (2026-09-25) ──────────────────
   Requested: "on user recordings gentle view, add movement to the header, same as the Profile
   page", then "on gentle, add movement to the Training page as well and the goals page".

   SAME ANIMATION AS PROFILE, to the character: `md-slide-in-from-left`, 0.75s, the same easing
   (`.md-edit-profile__header` below). Copied rather than invented so the section's headers all
   arrive the same way; a page that wants this adds its selector to the list here rather than a
   fifth copy of the declaration.

   GENTLE ONLY, EXPRESSED AS `body:not(.ll-layout-focused)` RATHER THAN AS A BASE RULE PLUS AN
   OVERRIDE. Profile, Settings and Logs get there the other way -- an unscoped animation here and
   `animation: none` under `body.ll-layout-focused` in _focused-view.scss -- which takes two
   edits in two files and breaks silently if someone adds a page to one list and not the other.
   One scoped rule says the same thing once and cannot fall out of step. (0,2,1) against the base
   blocks' (0,1,0), so it wins on specificity regardless of where @use places this partial.

   REPORTS IS ABSENT FROM THIS LIST BUT DOES MOVE -- it is fixed elsewhere, and the reason is
   worth stating because I got it wrong first time. Its Gentle header is a HERO, not an
   icon+title block, and it has its OWN motion rules: `.md-hero__title--from-left` slides the
   title in over 1s and `.md-hero__sub--from-right` follows at 0.5s (:34501). I assumed that
   meant Reports already moved. It did not, in Basic: a rule added 2026-09-23 for the ORG header
   stilled `body.ll-view-basic .md-hero--dashboard ...`, and the reports hero carries
   `--dashboard` too, so it was caught as collateral. Checked with `getAnimations()`, which
   reports what is actually attached rather than what a rule looks like it should do.
   THE FIX IS IN `_classic-home.scss`, at that rule, by excluding Reports from it -- not here.
   Giving Reports a slide-in here as well would have put a second animation on a header that
   already has two of its own.

   `.md-lessons__header` and the shared family: the animation is NOT added to the
   `.md-billing__header, .md-supervision-page__header, ...` block that Trainings joined earlier
   today, because that block also styles Subscription, Supervision and the two Focused-only
   heads -- pages nobody asked to animate. Trainings takes the movement by name, here. */
body:not(.ll-layout-focused) .md-recordings__header,
body:not(.ll-layout-focused) .md-lessons__header,
body:not(.ll-layout-focused) .md-goals__header {
  animation: md-slide-in-from-left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Movement is a preference, not a decoration. `.md-preferences__header` is guarded the same way
   (further down this file); `.md-edit-profile__header` is NOT, which is a gap in the page this
   was copied from rather than a pattern worth copying. Reported, not silently "fixed" here. */
@media (prefers-reduced-motion: reduce) {
  body:not(.ll-layout-focused) .md-recordings__header,
  body:not(.ll-layout-focused) .md-lessons__header,
  body:not(.ll-layout-focused) .md-goals__header {
    animation: none;
  }
}
.md-edit-profile__header,
.md-compact-head {
  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,
.md-compact-head__title,
.md-cl-head__title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--md-ink);
}

/* A qualifier after a page label's title, such as the organisation in "Rooms - <name>"
   (templates/organization.hbs; requested 2026-09-30: "a bit smaller and less bold"). Relative to
   the title, so it follows the title's size at every breakpoint. */
.md-compact-head__aside {
  font-size: 0.8em;
  font-weight: 600;
}

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

/* ACCOUNT-SECTION PAGE HEADER: icon + title on one rule, shared by the Subscription and
   Supervision pages (supervision joined 2026-09-21, requested — "match the subscription
   header"). Listed together rather than copied so the two cannot drift; a third page wanting
   this header adds its selector here rather than a fourth scale of its own.
   TRAININGS JOINED 2026-09-25 (requested: "add a Training header and icon just like the Goals
   page has"). It had a BARE `<h2>` and no icon — the only page in the section with neither.
   IT JOINED HERE RATHER THAN COPYING `.md-goals__header`, which is a byte-identical copy of the
   block below made before this family existed. That copy is also why Goals renders a 25px title
   while everything here renders 26: `.md-goals__title` sets `font-size: 2.1rem` with no
   `!important`, so it loses outright to `h2 { font-size: 25px !important }` (:4039) and its
   declared value never applies. Folding Goals in here would fix that and cost it 1px; left
   alone deliberately, since nobody asked for Goals to change.
   The `> svg` sizing lives here so a consumer does not have to borrow
   `.md-extras-card__svg-icon` from the extras grid to get 28px. Subscription still carries
   that class in its markup and the values are identical, so nothing changes for it. */
.md-billing__header,
.md-supervision-page__header,
.md-user-summary__focus-head,
.md-stats-main__focus-head,
.md-lessons__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__header > svg,
.md-supervision-page__header > svg,
.md-user-summary__focus-head > svg,
.md-stats-main__focus-head > svg,
.md-lessons__header > svg {
  width: 28px;
  height: 28px;
  flex: none;
}

/* `.md-user-summary__focus-head` is the ACCOUNT page's Focused-View-only header
   (templates/user/index.hbs gates it on `effectiveLayout`, so it is never built in Gentle,
   where the hero serves instead). It joined this family on 2026-09-21: it had been using
   `.md-card__title` at 18px, the only page in the section not at 25px/900, and carried a
   subtitle none of its siblings has. Joining here also gives it the family's border-bottom,
   which replaced the separate `md-card--boards__divider` element it used to render. */
.md-billing__title,
.md-supervision-page__title,
.md-user-summary__focus-title,
.md-stats-main__focus-title,
.md-lessons__title {
  margin: 0;
  /* 26px, set in px on purpose (requested 2026-09-24). This was `2.1rem`, which is 21px at this
     app's 10px root -- and it was NOT what rendered either: the heading is an `<h2>`, and a bare
     `h2 { font-size: 25px !important }` in this same file beats any class selector without one.
     Traced in the browser rather than guessed; the `!important` here is MATCHED to that rule,
     not added to win a specificity race. An absolute value says what it means and cannot drift
     with the root size, which is what the rem was buying and what this heading does not want. */
  font-size: 26px !important;
  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) ── */
/* SEVEN ACCOUNT PAGES, MODERN GENTLE (requested 2026-10-02): Goals, Logs, Profile, Recordings,
   Settings, Subscription and Supervision lose the workspace's top margin. `md-workspace--flush-top`
   is set by controllers/user.js (`flushTopWorkspace`); this sets the variable the global
   `.md-workspace` rule reads. Above 900px only, as for offline boards: the stacked layout below
   that already has no top margin. Basic and Focused are untouched. */
body.ll-view-modern:not(.ll-layout-focused) .md-shell--user > .md-workspace--flush-top {
  --md-workspace-margin-top: 0px;
}

/* ALWAYS-AVAILABLE BOARDS, GENTLE (requested 2026-10-02): the workspace sits 20px below the header
   with no top padding, so the page's content starts higher. Sets the two variables the global
   `.md-workspace` rule reads for its top margin and padding (40px everywhere else). Above 900px only
   by construction: at <=900px the stacked-layout `.md-workspace` rules set their own values, which
   keep the content clear of the fixed header. Focused is untouched. */
body:not(.ll-layout-focused) .md-shell--offline-boards > .md-workspace {
  --md-workspace-margin-top: 20px;
  --md-workspace-padding-top: 0px;
}

.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 {
  /* COLUMN, unlike the other account-section headers: this one carries the page's filter
     controls below the title (requested 2026-09-21), where the rest carry a title alone.
     `align-items: flex-start` because a stretched column would make the links span the full
     width and put their hover targets miles from the text. The 10px gap is title-to-links,
     deliberately tighter than the 14px icon-to-title gap the row-based headers use. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(17, 26, 46, 0.12);
}

/* GENTLE: THE HEADER ARRIVES FROM THE LEFT, ITS LINKS FROM THE RIGHT, AND BOTH FINISH CENTRED
   (requested 2026-09-21: "make the header and links below it move in from the left and right
   from the page, respectively, centered when they are done (like the other pages on gentle
   view)").
   Half of this already existed: `.md-logs__header` carries `md-slide-in-from-left` further
   down this file, so only the links were missing their half of the movement, and the block was
   left-aligned rather than centred like the other Gentle pages' headers.
   `align-items: center` rather than `text-align` alone: this is a flex column, so centring the
   ITEMS is what moves the links; `text-align` then centres the title's own wrapped lines. It
   does not stretch them, so the links keep their shrink-wrapped hover targets -- which is the
   reason the base rule gives for choosing `flex-start` over `stretch`, and it still holds.
   Gentle only, as asked; Focused keeps the left-aligned header. */
body:not(.ll-layout-focused) .md-logs__header {
  align-items: center;
  text-align: center;
  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);
}

/* Was `.md-logs__title a`, when the filter links lived inside the <h2>. They are a sibling
   of it now, so the selector followed them rather than being duplicated. */
/* The links' half of the movement above. Same duration and easing as the header's
   `md-slide-in-from-left`, so the two sides meet rather than racing. */
body:not(.ll-layout-focused) .md-logs__filters {
  animation: md-slide-in-from-right 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ARRIVED FROM THE UPDATES PILL-NAV — centre the page title and the filter links under it
   (requested 2026-09-22). Keyed on `.md-main--updates-arrival` (templates/user.hbs), set from
   the same `homeNavContext` the nav choice uses, so this cannot reach the logs page opened
   from the account rail, nor any other account-section page.

   `align-items`, NOT JUST `text-align`. A first attempt set `text-align: center` on the title
   and the links and did nothing: `.md-logs__header` is `display: flex; flex-direction: column;
   align-items: flex-start` (~51721), so its children shrink-wrap to their content at the left
   edge and there is no spare width for text-align to centre within. Overriding the cross-axis
   alignment is what actually moves them; text-align then centres the wrapped lines of a long
   title. Both are needed.

   Not scoped to Focused View: the marker describes the ARRIVAL, not the view. It is a no-op in
   Gentle, where `body:not(.ll-layout-focused) .md-logs__header` already centres — so this
   brings Focused into line rather than introducing a new behaviour. */
.md-main--updates-arrival .md-logs__header {
  align-items: center;
  text-align: center;
}

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

/* The in-content New Note / Quick Assessment pair on the Updates view (`?type=note`, the
   `messages_only` branch of templates/user/logs.hbs). Right-aligned in EVERY view — the
   request named no layout, so this is deliberately not scoped to Gentle or Focused.
   Distinct from `.md-logs__action-pills` below, which is the floating pill row above the card
   and is left as it was. `gap` + `flex-wrap` so the two do not collide on a narrow screen,
   where they would otherwise be pushed together against the right edge. */
.md-logs__note-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.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` removed with its markup (2026-09-14) — it styled one element on one
   page (user/logs.hbs), and that element is gone. Deleted rather than left behind: a rule
   matching nothing is a trap for the next person, who has no way to tell it is dead.
   The near-identical rows on user/goals.hbs and user/recordings.hbs use
   `.md-billing__back-btn` for the button but had no shared row class, so nothing else
   referenced this one. */
@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;
}

/* A `.md-preferences__header` rule sat here until 2026-09-21: a byte-identical copy of
   `.md-goal-actions` directly above, in the GOAL-LIST section, which has nothing to do with
   the Settings page header. A copy-paste that renamed the selector and kept the
   declarations. Its `justify-content: center` was the only thing centring that header, which
   is why Settings read differently from the Subscription and Supervision headers it now
   shares a definition with. Deleted rather than overridden -- the real rule is
   `.md-preferences__header` further down, beside `.md-billing__header`.
   `flex-wrap`, `margin-top: 18px` and `clear: both` went with it; the header has two
   children and sits at the top of the page, so none of them was doing anything either. */
/* 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__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;
  }
}
/* REMOVED 2026-09-17 with the profile-header rebuild:
     __status-card, __avatar-divider, __profile-pill, __profile-pill:hover, __status-label
       -- orphaned before this change; none of the four appeared in any template.
     __status and its ::before emoji globe/lock
       -- superseded by the status block in the header rules above, which uses inline SVG
          from the app icon system instead of emoji (emoji render differently per platform
          and are announced inconsistently by screen readers) and names each state in text. */
/* ~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 .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 ---------- */
/* Bootstrap .row clearfix ::before/::after become flex items and shift the first row; disable them */
/* Flex + Bootstrap columns: column width from Bootstrap at each breakpoint; min-width keeps card from being cut off */
/* 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) */
/* CLASSIC HOME, Boards tab — square glass cards.
   Follows the documented surface pattern: `@include board-card-modern` inside a
   `<surface> .simple_board_icon` rule, which brings the glass fill, the outline, the top
   edge-light, the type hierarchy and the hover lift without touching layout.

   SQUARE, WITHOUT CLIPPING — the two halves of the request pull against each other, so both
   are stated. `aspect-ratio` makes the card square; `min-height: max-content` is the safety
   net, because `board-card-modern` sets `overflow: hidden` and a square that is too short
   would CUT the content rather than show it. With both, a card is square whenever the
   content fits and grows taller when it genuinely cannot — and since grid rows stretch, a
   whole row grows together and stays even.

   THE THUMBNAIL AND PADDING ARE TRIMMED so the safety net is rare rather than routine. The
   mixin's own stack measures about 261px (28 padding + 104 image + 20 margin + 44 two-line
   title + 15 author + 20 language pill + 30 preview pill) against a 228px card at the
   narrowest three-column width — a 1100px viewport, where the rail is 320px. At 72px of
   thumbnail and tighter padding the stack is about 219px and fits.

   `!important` only where the mixin already uses it (it marks its cosmetics `!important` so
   the shared look wins over each surface's bespoke rules) — these have to outrank it in turn.

   The long author tokens are the horizontal half of the clipping: "marcus_williams_slp" is
   one unbreakable run, so it needs an explicit break opportunity or it overflows and is cut
   by the card's `overflow: hidden`. */
.ch-boards__cell .btn.simple_board_icon {
  position: relative;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18) !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;
}
.ch-boards__cell .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;
}
.ch-boards__cell .btn.simple_board_icon:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 14px 30px rgba(27, 54, 93, 0.26), 0 4px 10px rgba(27, 54, 93, 0.14) !important;
}
.ch-boards__cell .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%. */
}
.ch-boards__cell .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;
}
.ch-boards__cell .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. */
}
.ch-boards__cell .btn.simple_board_icon img[src*=lingolinq-board-icon] {
  padding: 0 !important;
  object-fit: cover !important;
}
.ch-boards__cell .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. */
}
.ch-boards__cell .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;
}
.ch-boards__cell .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;
}
.ch-boards__cell .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.84) !important;
}
.ch-boards__cell .btn.simple_board_icon .author__label {
  color: rgba(27, 54, 93, 0.78) !important;
}
.ch-boards__cell .btn.simple_board_icon .author__username, .ch-boards__cell .btn.simple_board_icon .author__username--long {
  color: rgba(27, 54, 93, 0.84) !important;
  font-weight: 600 !important;
  font-size: max(12px, 0.9rem) !important;
}
.ch-boards__cell .btn.simple_board_icon {
  /* Size chip — soft navy-gray glass (was a utility sticker). */
}
.ch-boards__cell .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.8) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.ch-boards__cell .btn.simple_board_icon .board-icon__info-icon, .ch-boards__cell .btn.simple_board_icon .board-icon__info-size {
  color: rgba(27, 54, 93, 0.8) !important;
}
.ch-boards__cell .btn.simple_board_icon {
  /* Language pill — soft verdigris glass. */
}
.ch-boards__cell .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: #115C5B !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ch-boards__cell .btn.simple_board_icon {
  /* Preview pill — integrated dusty-denim glass. */
}
.ch-boards__cell .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;
}
.ch-boards__cell .btn.simple_board_icon {
  min-width: 0;
  width: 100%;
  height: 100%;
}
.ch-boards__cell .btn.simple_board_icon img {
  height: 80px !important;
  margin-bottom: 10px !important;
}
.ch-boards__cell .btn.simple_board_icon .name,
.ch-boards__cell .btn.simple_board_icon .author,
.ch-boards__cell .btn.simple_board_icon .author__label,
.ch-boards__cell .btn.simple_board_icon .board-icon__credit,
.ch-boards__cell .btn.simple_board_icon .board-icon__lang-marker {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ch-boards__cell .btn.simple_board_icon .author,
.ch-boards__cell .btn.simple_board_icon .author__label,
.ch-boards__cell .btn.simple_board_icon .board-icon__lang-marker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Board cards in Available Boards: card layout (wide, spacious), not pill */
/* ---------- 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;
  }
  /* The flex-era overrides here are GONE (2026-09-17). This card is a grid now, so
     `flex-direction: column` was inert while `align-items: center` and `text-align: center`
     actively fought it: the former centred each grid item in its row and the latter centred
     the copy, which is why a left-hand avatar sat beside centred text. Padding and radius for
     narrow screens live with the other responsive rules in the header block above, so there
     is one place that owns this card's layout rather than two that disagree. */
  .md-hero--user__avatar {
    /* Smallest step of the avatar ladder (136 -> 104 -> 88). Was 72px, which read as an
       afterthought next to a 26px name. */
    width: 88px !important;
    height: 88px !important;
    border-radius: 22px !important;
  }
  /* `__details` and `__meta` were deleted with the 2026-09-17 header rebuild, and the
     18px name override is gone with them: the name is sized by the ≤720px rule in the
     header block instead, which keeps it readable rather than shrinking it below the
     role line. */
  .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 .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 .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 {
    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 .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) ---------- */
/* 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;
  /* SIZED TO ITS CONTENT (requested 2026-10-10: "the boards div is not adjusting its height to its
     content (on modern gentle)"). This was `min-height: 400px` (362 → 450 → 425 → 415 → 400), to
     match an adjacent column when Boards sat beside Extras / My Organizations; it is a full-width
     row now, so the floor only padded a short list with empty space (measured: 400px for two
     boards at 1024 and up, in both Gentle accounts checked). */
  min-height: 0;
  /* ...AND NO TALLER THAN 400px AT 1024px AND BELOW (requested 2026-10-10: "make the max-height of
     the boards-div 400px so it can't grow beyond that"), in the media rule after this one. ABOVE
     1024px IT GROWS TO FIT (requested 2026-10-11: "when 12 boards are showing on the home page,
     expand the div inside the boards div so they all show, there should never be scrolling there"):
     up to 12 boards, four rows of three, all on screen. */
  padding-right: calc(18px + 0.25rem) !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 18px; /* same as extras card */
}

/* 901 to 1024px only: at 900px and below the card shows three boards and never scrolls
   (requested 2026-10-11), so it needs no cap there. */
@media (min-width: 901px) and (max-width: 1024px) {
  .md-card--boards {
    max-height: 400px !important;
  }
}
/* 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-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;
  /* `1fr auto auto` since 2026-10-10: View All Boards joined the header, right of Create a Board
     (requested: "move View All boards up to the right of Create a Board"). With no boards it is not
     rendered and the last track is empty. */
  grid-template-columns: 1fr auto 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-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;
  /* COMPRESSED (requested 2026-10-12): 26px tall, 10px sides, 13px text, through the shared
     option rule's variables (_board_picker.scss `.bp-segmented__option`); the board picker keeps
     its 32px / 16px / 14px. `-narrow` is the same padding at 640px and below, where the shared
     rule sets its own.
     NOT SIZED FOR AAC USERS, deliberately (Traci, 2026-10-12): this control is on the Boards
     page, a management page that most AAC users will not use, so it is not held to the larger
     targets the communication surfaces use. 26px still clears WCAG 2.2 AA's 24px minimum. */
  --bp-seg-h: 26px;
  --bp-seg-px: 10px;
  --bp-seg-px-narrow: 10px;
  --bp-seg-fs: 13px;
}

/* ==========================================================================
   Boards page — LAYOUT SELECTOR (side-by-side vs top-down)
   ==========================================================================
   DORMANT as of 2026-09-18. These rules style <BoardsLayoutToggle />, which
   templates/user/boards.hbs stopped rendering on 2026-09-14; the `boards_side_by_side_layout`
   flag that used to gate it was retired from lib/feature_flags.rb on 2026-09-18, because the
   arrangement is now decided by width (see the split rule's `@media (max-width: 900px)`).
   Nothing mounts the component, so nothing here applies. The block is kept with the rest of
   the toggle plumbing; removing it belongs with that separate, consented change.

   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. */
/* `$chevron-with-actions` puts the caret on the ACTIONS row instead of the heading row
   (requested 2026-09-22 for <=900px). A PARAMETER, like `$actions-justify` above, rather than
   an override at the call site: the two callers want different arrangements and the mixin sets
   `grid-template-areas` with `!important`, so a caller-side override would have to out-specify
   its own mixin — exactly the override-stacking this codebase forbids.
   Only the <=640px VIEWPORT caller opts in. The `@container` caller (the side-by-side folders
   column, which exists only above 1200px) keeps the caret beside the heading, because the
   request was scoped to the stacked page. */
/* ==========================================================================
   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 `min-width: 901px` so the stacked layout, which has the full page width for its
   header AND its rows, keeps them. Side-by-side only exists from 901px up (below that the
   page is stacked), so this covers 901-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 (min-width: 901px) and (max-width: 1024px) {
  #content.boards-page .ub-boards-page__folders-count,
  #content.boards-page .ub-boards-page__folder-row-count,
  .ub-boards-page--split .ub-boards-page__folders-count,
  .ub-boards-page--split .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
   LAYOUT does not change: the page is still side-by-side at this width, 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: 901px) {
  #content.boards-page .ub-boards-page__folders-header,
  #content.boards-page .ub-boards-page__boards-summary-header,
  .ub-boards-page--split .ub-boards-page__folders-header,
  .ub-boards-page--split .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. */
  #content.boards-page .ub-boards-page__folders-section,
  .ub-boards-page--split .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;
  }
  #content.boards-page,
  .ub-boards-page--split {
    /* `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. */
  }
  #content.boards-page .ub-boards-page__folders-body,
  .ub-boards-page--split .ub-boards-page__folders-body {
    align-self: stretch;
  }
  #content.boards-page,
  .ub-boards-page--split {
    /* 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. */
  }
  #content.boards-page .ub-boards-page__folder-list,
  #content.boards-page .ub-boards-page__folder-context,
  .ub-boards-page--split .ub-boards-page__folder-list,
  .ub-boards-page--split .ub-boards-page__folder-context {
    flex: 1 1 auto;
    min-height: 0;
  }
  #content.boards-page .ub-boards-page__folders-header,
  .ub-boards-page--split .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;
  }
  #content.boards-page .ub-boards-page__folders-toggle,
  .ub-boards-page--split .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;
  }
  #content.boards-page,
  .ub-boards-page--split {
    /* 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.
       THE GATE IS THE LOAD-BEARING PART, and it drifted (fixed 2026-09-22). This hide is
       correct ONLY where the layout is actually side-by-side; in a stacked page the caret is
       the only expand affordance the user has. It was gated on the ENCLOSING
       `@media (min-width: 901px)` as a proxy for that layout — and the side-by-side
       breakpoint has since moved twice (900px on 2026-09-18, 1200px on 2026-09-21; see the
       `max-width: 1200px` fallback at ~55044). The proxy was not moved with it, so between
       901px and 1200px the page was STACKED with no expand control at all: the title button
       still toggled, but nothing on screen said so.
       Re-gated on the real breakpoint with a nested query rather than by relocating the
       declaration, so the condition lives ON the rule it governs instead of being inherited
       from a block that is about something else. If the fallback moves again, this number and
       the one at ~55044 move together — they are the same boundary. */
  }
  #content.boards-page .ub-boards-page__folders-chevron-btn,
  .ub-boards-page--split .ub-boards-page__folders-chevron-btn {
    /* RESTORED with the caret (2026-09-22). The comment above records that the positioning
       declarations were deleted when this was hidden, because behind a `display: none` they
       could not take effect and would read as live layout. Re-gating the hide to >=1201px
       makes the caret a real grid item again in the 901-1200 stacked band, and without this
       it stretched the full `1fr` chevron track — measured 805px wide at 1200px, i.e. a
       click target spanning the whole row with its icon marooned in the middle.
       `end` pins it to the RIGHT edge of the `1fr` chevron track (requested 2026-09-22), so
       in the stacked band the caret sits at the far side of the row rather than trailing the
       subtitle. Not `stretch` (the default), which is what made it span the whole track and
       centre its icon — see the measurement above. The side-by-side layout never sees this:
       the caret is `display: none` there via the nested query below. */
    justify-self: end;
  }
  #content.boards-page,
  .ub-boards-page--split {
    /* THE FOLDERS ROW GETS THE SAME DIVIDER THE BODY DRAWS (2026-08-16, requested; its three
       inset shadows were removed 2026-09-30, leaving the hairline -- see the rule).
       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. */
    /* 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. */
  }
}
@media (min-width: 901px) and (min-width: 1201px) {
  #content.boards-page .ub-boards-page__folders-chevron-btn,
  .ub-boards-page--split .ub-boards-page__folders-chevron-btn {
    display: none;
  }
}
@media (min-width: 901px) {
  #content.boards-page .ub-boards-page__folders-actions--header,
  .ub-boards-page--split .ub-boards-page__folders-actions--header {
    grid-area: actions;
    border-top: 1px solid rgba(13, 36, 56, 0.12);
    /* THE THREE INSETS ARE GONE (2026-09-30, requested: "remove the inset look" on this row).
       They drew the FOLDERS row's under-shadow down across this strip, which read as a sunken
       band behind the pills. The hairline above stays as the divider. */
    /* 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. */
    background: transparent;
  }
  #content.boards-page .ub-boards-page__folders-body,
  .ub-boards-page--split .ub-boards-page__folders-body {
    grid-area: body;
    border-top: none;
    box-shadow: none;
  }
}
@media (min-width: 901px) {
  /* 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. */
  #content.boards-page .ub-boards-page__folders-toggle,
  .ub-boards-page--split .ub-boards-page__folders-toggle {
    flex: 0 1 auto;
    order: 0;
  }
  #content.boards-page .ub-boards-page__folders-chevron-btn,
  .ub-boards-page--split .ub-boards-page__folders-chevron-btn {
    order: 1;
    /* `padding-left: 0` REMOVED here (2026-09-22). Its reason — "the toggle already pads 18px
       on its right, so the caret's own 18px left pad read as detached from the heading" —
       described a caret sitting BESIDE the heading. It is right-aligned now, and the base
       rule gives it a fixed 32px square with `padding: 0`, so the declaration was both
       inapplicable and the thing making the button 32x42 rather than square. */
  }
  #content.boards-page .ub-boards-page__folders-actions--header,
  .ub-boards-page--split .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).

   SCOPED TO THE BOARDS PAGE ONLY, and it must stay that way. This hide is safe only
   where the section-header button exists to take over as the page's CTA, i.e. where
   `<BoardsBrowser>` is rendered with `@showNewBoard={{true}}` (boards-browser.hbs:16 gates
   it on that arg). The account page (templates/user/index.hbs) renders the identical
   component with `@showNewBoard={{false}}` and carries `.ub-boards-page--split` for the
   folders-beside-grid layout — so matching on that class hid the ONLY create-board entry
   point it had at >=901px, while leaving it present below 901px. Hide on the page, never
   on the layout class. */
@media (min-width: 901px) {
  #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`. */
@media (min-width: 901px) {
  #content.boards-page .ub-boards-page__boards-summary-stats,
  .ub-boards-page--split .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 {
  /* TRACKS THAT FILL, instead of fixed 280px cards centred in a wider box (requested
     2026-09-16: the Compact/Detailed control must sit flush with the right edge of the
     rightmost board). The control was never misplaced -- it is already flush with this
     container. The cards were the inset ones: `.simple_board_holder` is `flex: 0 0 280px`
     in a `justify-content: center` flex row, so the leftover width was split evenly either
     side and every card stopped short of both edges. Centring was the previous answer to
     that leftover; filling removes the leftover instead, so there is nothing left to
     centre and the right edges line up on their own.

     GRID, not flex-with-grow. `flex: 1 1 280px` would also fill a row, but a wrapped flex
     row stretches its LAST row to full width -- with 7 boards at 2-up that lone seventh
     card would have been twice the width of every other. `repeat(auto-fill, ...)` keeps the
     empty tracks, so a short last row leaves a gap where the missing card would be and
     every card stays one track wide.

     `auto-fill` rather than a fixed column count because the count here is driven by the
     space actually available: this component renders in the boards page's full width, in
     the account page's narrower side-by-side column, and on the search page, and it was
     observed going 2-up at 1440 but 1-up in the 498px account column. `minmax(280px, 1fr)`
     keeps 280px as the FLOOR it always had and lets the track grow past it to consume the
     remainder.

     `display: grid` needs `!important` only because the base rule it replaces
     (`&__board-grid`, ~72249) is itself `display: flex !important`. */
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  justify-content: stretch;
  /* The holder's fixed width is what kept a card narrower than its track. `flex-basis` is
     inert under grid, but `width` is not, so it has to be released here or the cards would
     stay 280px inside a wider track and the dead space would simply move inside the track. */
}
.ub-boards-page__board-grid.ll-boards-grid--compact.ll-boards-grid--compact.ll-boards-grid--compact .simple_board_holder {
  width: auto;
  max-width: none;
}

/* 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 (min-width: 901px) and (max-width: 1024px) {
  #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) {
  #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. */
  #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.

   DECIDED BY WIDTH, NOT BY THE USER (requested 2026-09-14). This used to be gated on
   `body[data-boards-layout='side-by-side']`, written by components/boards-layout-toggle.js
   from a stored preference — a radio pair the user picked between. That control is gone:
   the page is side-by-side wherever there is room for two columns and stacked where there
   is not, which is what the two arrangements were always for. The fallback at the foot of
   this rule is the whole of the stacked half now, so it is the one breakpoint to change.

   The toggle component, its `boards_layout` preference and the `data-boards-layout`
   attribute are NOT removed — only the render site in templates/user/boards.hbs. Nothing
   sets the attribute any more and no rule reads it; a stored preference is simply inert.
   Deleting the plumbing is a separate call, and one that touches a server-side preference
   constraint. */
#content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section),
.ub-boards-page--split .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 1201px up (below that
     the `max-width: 1200px` 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. The fallback has moved twice since -- 900px on 2026-09-18, 1200px on
     2026-09-21 -- and this sentence has been corrected with it each time; templates/
     user/boards.hbs documents the breakpoint too and is worth checking against.

     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. */
}
#content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) > *,
.ub-boards-page--split .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) > * {
  grid-column: 1/-1;
}
#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,
.ub-boards-page--split .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;
}
#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,
.ub-boards-page--split .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;
}
#content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section),
.ub-boards-page--split .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section) {
  /* AUTOMATIC FALLBACK TO STACKED, AT 1200px (requested 2026-09-21: "the boards page folders
     div needs to stack on top of the boards div", at 1200 and below, in both Gentle and
     Focused). It has moved twice: 1024 originally, then 900, now 1200.
     The reasoning for 900 was that between 901 and 1200 the folders column is ~185-220px --
     tight, but "it is what the user asked to see". That was the judgement being revisited:
     at those widths folder names truncate hard and the column reads as a different component
     than the one on a wide screen, so stacking is the better trade and this is now where it
     happens.
     THIS SUBSUMES THE ACCOUNT PAGE'S OWN 1200px RULE, which used to live right here as
     `.md-user-summary & { @media (max-width: 1200px) { display: block } }` (added 2026-09-18,
     because that page gives 208px of its width to the fixed nav panel and hit the cramped
     range sooner). Same property, same value, and its scope is now a subset of this rule's,
     so it is removed rather than left as a special case that no longer specialises anything.
     The two pages behave identically at every width again.
     The `grid-column` values above go inert under `display: block`. */
}
@media (max-width: 1200px) {
  #content.boards-page .ub-boards-page__boards-body:has(> .ub-boards-page__folders-section):has(> .ub-boards-page__boards-summary-section),
  .ub-boards-page--split .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,
.ub-boards-page--split .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 {
    margin-top: 24px !important;
  }
  .md-pillnav-dropdown {
    margin-top: 32px !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;
  /* 12px top and bottom (requested 2026-10-10, Modern home main button cards; was 20px). Focused's
     Speak hero keeps its own 20px from its higher-specificity hero rule. */
  padding: 12px 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-org) 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.
   SHOWN UNDER hero-caseload TOO SINCE 2026-10-13: a supporter's Focused lead row is
   Caseload | Speak (utils/dashboard_sections.js focusedLayout, beside=['speak']), so the
   Speak hero renders as the right-hand 120px bar, equal to the Caseload hero on its left.
   Only hero-org still excludes it (an org manager has no Speak; its area is the --speak-action
   pair instead). */
.md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
.md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused,
.md-grid.md-grid--layout-focused .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;
  /* HEIGHT AND PADDING ARE PER HERO, in the two rules after this one (2026-10-10). */
  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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%) !important;
  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;
}

/* THE FOCUSED EXTRAS CARD shares the Speak card's look above, all but the background (requested
   2026-10-12): brand slate gray, as the same kind of radial, lighter in the centre and darker at
   the edges. White text measures 4.8:1 on the slate itself (WCAG AA); the centre is lighter, the
   edges darker, so the label sits on the stronger part of that. */
.md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button {
  /* SPEAK'S RADIAL RECIPE ON SLATE (requested 2026-10-12: "make the gradient radial, like the speak
     mode button is"). Same as `$focus-hero-*` (_variables.scss): a base, a centre 16% white and an
     edge 34% black (both mixed in oklch), interpolated in OKLAB, with an sRGB fallback line first.
     The base is brand slate gray 25% darker, twice (both requested 2026-10-12), so the card keeps
     the darkness asked for while its centre glows the way Speak's does. */
  background: radial-gradient(ellipse at center, rgb(88, 91, 98) 0%, rgb(30, 32, 37) 100%) !important;
  background: radial-gradient(ellipse at center in oklab, rgb(88, 91, 98) 0%, rgb(30, 32, 37) 100%) !important;
}

/* THE SPEAK HERO IS 100px SHORTER (requested 2026-10-10: "the main let's communicate button
   height needs to be 100px shorter height (not width)"): 220 -> 120. Its content was 166px (the
   126px badge plus 20px above and below), so the floor alone could not come down: the padding
   goes to 12px and the badge to 94px (`.md-card--speak-focused__img`), 94 + 24 + the 2px border = 120, with the
   78px title block beside it. Width is untouched.
   MY CASELOAD JOINED THEM (requested 2026-10-12: "give the my caseload button the same bg and style as
   the speak mode on modern focused", for the supervisor hero and the admin's card alike). It was
   220px tall here, with a 144x148 image and a 25px title; it now takes Speak's sizes throughout. */
.md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
.md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused,
.md-grid.md-grid--layout-focused .md-card.md-card--caseload-focused {
  min-height: 120px !important;
  padding: 12px 32px !important;
}

/* Hover: a clear "press me" cue — lift 2px, deepen the drop shadow, and bloom a
   faint brand-blue glow around the whole card so it reads as interactive. */
.md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button:hover,
.md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused:hover,
.md-grid.md-grid--layout-focused .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 .md-card.md-card--extras.md-card--extras-focused.md-card--as-button:active,
.md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused:active,
.md-grid.md-grid--layout-focused .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;
}

/* ONLY A CARD THE LAYOUT DID NOT PLACE (2026-10-10). The paragraph above about Gentle is out of
   date: since bb07e4d7b, Gentle pairs Speak and Extras on ONE row (`"speak extras"`), and a lone
   one sits in half a row (`"speak ."`). Spanning them overrode that and stacked both cards in the
   same cell, Extras painted over Speak. utils/dashboard_sections.js#gridLayoutState now flags
   `md-grid--speak-placed` / `md-grid--extras-placed` from the built areas, and the span skips a
   placed card. Gentle always places both. Focused has placed Extras too since 2026-10-10 (beside or
   below the Speak hero, `md-grid--speak-beside`), so the flag skips it there as well; the span now
   applies only to a card the layout left unplaced. */
.md-grid.md-grid--dashboard:not(.md-grid--hero-org):not(.md-grid--speak-placed) > .md-card.md-card--speak-focused,
.md-grid.md-grid--dashboard:not(.md-grid--hero-org):not(.md-grid--speak-placed) > .md-card.md-card--speak,
.md-grid.md-grid--dashboard:not(.md-grid--extras-placed) > .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.
   FOCUSED NEVER SHOWS THE PLAIN AS-BUTTON CARDS (2026-10-05): where an ordinary Caseload
   or Speak card belongs, Focused shows the badge-action sibling (`--caseload-action` /
   `--speak-action`, authenticated-view.hbs) so it matches Create a Board / Edit Dashboard.
   The show conditions are the ones the as-button cards had here before. */
.md-grid.md-grid--layout-focused .md-card.md-card--speak-as-button,
.md-grid.md-grid--layout-focused .md-card.md-card--caseload-as-button {
  display: none !important;
}

/* The admin's Caseload is the Speak-style card (`--caseload-focused`) since 2026-10-12, not this one. */
.md-grid.md-grid--layout-focused.md-grid--hero-org .md-card.md-card--speak-action {
  display: flex !important;
}

/* Larger screens only (above the wrap breakpoint): nudge the centered icon+text
   group 8px to the LEFT via asymmetric padding (24/40 keeps the 64px total, so
   the justify-center group shifts left 8px). Small screens keep their centering. */
@media (min-width: 1025px) {
  .md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
  .md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused,
  .md-grid.md-grid--layout-focused .md-card.md-card--caseload-focused {
    padding-left: 24px !important;
    padding-right: 40px !important;
  }
}
.md-card--extras-focused__icon,
.md-card--speak-focused__icon,
.md-card--caseload-focused__icon {
  color: #ffffff;
  line-height: 0;
}

/* Caseload badge — 144px wide, 148px tall: the caseload-files artwork (288x294, 2x this box;
   it replaced the near-identical caseload-folders 288x296 on 2026-10-05) at its natural ratio
   to within 0.4%, so `fill` here applies no visible stretch. Enlarged 20% on 2026-10-05
   from 120x123, the size first chosen to keep the 123px height of the old art.
   HISTORY: the previous caseload-folder artwork (252x214, landscape) sat in a 132x123 box,
   a deliberate ~9.7% vertical stretch added 2026-09-18 to close dead space against the text
   beside it. The 2026-10-05 replacement is near-square and carries lettering ("CASELOAD"),
   so keeping 132px would have stretched it ~10% horizontally and visibly distorted the
   text, so the width was set to follow the art instead.
   KEPT AS `fill` WITH EXPLICIT DIMENSIONS rather than `contain`: both numbers are tied to
   the 288x294 source, NOT to a ratio the browser works out, so swapping the artwork means
   recomputing them. (The attention tile's `inset: 7.5%` in _focused-view.scss is the
   orientation-independent form and needs no such recompute -- the difference is
   deliberate: this box has to line up with text beside it.)
   The height difference against the Speak badge is not visible anywhere: the two never
   render together. `focusedHeroKey` (utils/dashboard_sections.js) returns exactly ONE key
   and stamps a single `md-grid--hero-*` on the grid, so a supporter sees the caseload hero
   and a communicator sees the Speak one. */
.md-card--caseload-focused__img {
  width: 94px;
  height: 94px;
  display: block;
  object-fit: contain;
} /* Speak's 94px since 2026-10-12 (was 144x148) */
/* Speech badge bumped ~12.5% (112→126px) so it clearly wins over the text and
   becomes the hero's unmistakable focal point. 94px since 2026-10-10, when the hero came down
   100px (see "THE SPEAK HERO IS 100px SHORTER"): 126px no longer fit inside it. */
/* 94px at full size; scaling down below 1200px and 15% smaller at 1024px and below (requested
   2026-10-12; see "SPEAK AND EXTRAS SCALE DOWN"). */
.md-card--speak-focused__img,
.md-card--extras-focused__img {
  width: 94px;
  height: 94px;
  display: block;
  object-fit: contain;
}

/* The Extras image is 5% smaller than Speak's at every width (requested 2026-10-12): 89.3px here. */
.md-card--extras-focused__img {
  width: 89.3px;
  height: 89.3px;
}

/* The board the Speak card opens, in place of the speech badge (speakBoardImage, 2026-10-13), in the
   same ROUND SILVER PICTURE FRAME as the Gentle card's (see .md-card__icon-board-img), sized for 94px:
   slate outline, lifted frame, indented picture. */
.md-card--speak-focused__img--board {
  box-sizing: border-box;
  padding: 12px;
  border: 5px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #fbfcfd 0%, #b9c0c8 22%, #eef1f4 45%, #8f97a1 68%, #dfe3e8 85%, #a9b0b9 100%) border-box;
  box-shadow: 0 0 0 0.75px rgba(107, 114, 128, 0.55), 0 8px 18px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.24), inset 0 4px 9px rgba(70, 80, 95, 0.5), inset 0 -2px 2px rgba(255, 255, 255, 0.9); /* indented */
}

/* Image on the left, title + subheader stacked + LEFT-aligned on the right. */
.md-card--extras-focused__text,
.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--extras-focused__title,
.md-card--speak-focused__title,
.md-card--caseload-focused__title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* Speak and Extras titles 4px smaller (requested 2026-10-12), scaling down below 1200px; the
   Caseload hero too, since it took Speak's style the same day. */
.md-card--extras-focused__title,
.md-card--speak-focused__title,
.md-card--caseload-focused__title {
  font-size: 21px;
}

/* (Speak and Extras titles scale with the card below 1200px: see "SPEAK AND EXTRAS SCALE DOWN" after
   the arrow rule. That replaced a fixed 2px-smaller title at 1024px from 2026-10-10.) */
/* Divider between the title and subheader: a left→right fading hairline
   (white, on the dark button). */
.md-card--extras-focused__divider,
.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--extras-focused__sub,
.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--extras-focused__arrow,
.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;
}

/* SPEAK AND EXTRAS SCALE DOWN BELOW 1200px (requested 2026-10-12: "the speak mode and extras buttons
   should start to scale down in size with their inner content at 1200px and smaller screens").
   Each size runs linearly from its full value at 1200px to about 70% at 900px and holds there:
   clamp(<value at 900px>, <straight line through both>, <value at 1200px>). Text keeps readable
   floors (title 16px, subtitle 13px; the arrow is 1.5em of the subtitle), and the card stays far
   above the 44px tap target (84px at its smallest). The Caseload hero joined on 2026-10-12.
   After the full-size rules above (same selectors, same !important), so these win below 1200px. */
@media (max-width: 1200px) {
  .md-grid.md-grid--layout-focused .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
  .md-grid.md-grid--layout-focused:not(.md-grid--hero-org) .md-card.md-card--speak-focused,
  .md-grid.md-grid--layout-focused .md-card.md-card--caseload-focused {
    min-height: clamp(84px, 12vw - 24px, 120px) !important;
    padding-top: clamp(8px, 1.3333vw - 4px, 12px) !important;
    padding-bottom: clamp(8px, 1.3333vw - 4px, 12px) !important;
    padding-left: clamp(16px, 2.6667vw - 8px, 24px) !important;
    padding-right: clamp(24px, 5.3333vw - 24px, 40px) !important;
    gap: clamp(16px, 2.6667vw - 8px, 24px) !important;
  }
  /* Images: v(w) = full * (w/1000 - 0.2), i.e. full size at 1200px and 70% at 900px. Speak's full
     is 94px; Extras' is 5% smaller, 89.3px. */
  .md-card--speak-focused__img,
  .md-card--caseload-focused__img {
    width: clamp(65.8px, 9.4vw - 18.8px, 94px);
    height: clamp(65.8px, 9.4vw - 18.8px, 94px);
  }
  .md-card--extras-focused__img {
    width: clamp(62.51px, 8.93vw - 17.86px, 89.3px);
    height: clamp(62.51px, 8.93vw - 17.86px, 89.3px);
  }
  .md-card--speak-focused__title,
  .md-card--extras-focused__title,
  .md-card--caseload-focused__title {
    font-size: clamp(16px, 1.6667vw + 1px, 21px);
  }
  .md-card--speak-focused__sub,
  .md-card--extras-focused__sub,
  .md-card--caseload-focused__sub {
    font-size: clamp(13px, 0.6667vw + 7px, 15px);
  }
}
/* 15% SMALLER IMAGES AT 1024px AND BELOW (requested 2026-10-12: "make the 15% smaller rule apply only
   on 1024px and smaller screens", Extras staying 5% smaller than that, so 20%). The same line as
   above, times 0.85 for Speak (full 79.9px) and 0.80 for Extras (75.2px); still scaling to 900px. */
@media (max-width: 1024px) {
  .md-card--speak-focused__img,
  .md-card--caseload-focused__img {
    width: clamp(55.93px, 7.99vw - 15.98px, 79.9px);
    height: clamp(55.93px, 7.99vw - 15.98px, 79.9px);
  }
  /* The board picture's silver frame shrinks with it (final review, 2026-10-13): the full-size 12px padding and
     5px ring left only ~22px of picture in the 56px slot at 900px. */
  .md-card--speak-focused__img--board {
    padding: 6px;
    border-width: 3px;
  }
  .md-card--extras-focused__img {
    width: clamp(52.64px, 7.52vw - 15.04px, 75.2px);
    height: clamp(52.64px, 7.52vw - 15.04px, 75.2px);
  }
}
/* 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 left the pill-nav entirely on 2026-09-18, and `showReportsPill` went with it.
   Nothing needs hiding here any more -- the pill is not rendered at all, on any layout.
   Communicators reach Reports from the Extras card; everyone reaches it from the account
   rail's Reports row.) */
/* 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 {
  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, rgb(89, 134, 197) 0%, rgb(72, 108, 161) 100%) !important;
  background: linear-gradient(160deg in oklab, color-mix(in oklch, #4C86D8, gray 22%) 0%, color-mix(in oklch, color-mix(in oklch, #4C86D8, gray 22%), black 14%) 100%) !important;
}

/* 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;
  /* 24px, not 16px: with the pill now the "+ Create" pill's 40px height, this lines its top up
     with that pill's (measured 451 against 443 at 16px). */
  top: 24px !important;
  right: calc(18px + 0.25rem) !important;
  margin: 0 !important;
  width: fit-content !important;
  z-index: 3 !important;
  /* THE SAME VERTICAL BOX AS THE "+ Create" PILL beside it (requested 2026-10-10): no top or
     bottom padding, 40px tall, label centred -- that pill's `height: 40px; padding: 0 …` below.
     `min-height` rather than `height` so a label that wraps on a narrow screen grows the pill
     instead of spilling out of it. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 32px tall, 14px label (requested 2026-10-13), matching the Create pill beside it. Was 40px. */
  min-height: 32px !important;
  font-size: 14px !important;
  font-weight: 400 !important; /* not bold (requested 2026-10-13); overrides the .md-btn 850 base */
  padding: 0 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;
}

/* "+" 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;
  /* Center the Create pill vertically against the View All Boards button beside it (requested
     2026-10-13): the header's grid items align to their row's centre rather than stretching/top. */
  align-items: center !important;
}

/* 500px AND BELOW: THE TWO BUTTONS SHARE A SECOND ROW (requested 2026-10-10: "on 500px and smaller,
   wrap the create and boards buttons to a new row together"). The title block takes the whole first
   row, so it no longer squeezes into a sliver beside them (measured: 39px wide at 390px), and "+
   Create" and "Boards" sit side by side under it, from its left edge (Create's 16px nudge off the
   title is not needed there). `!important` because the rules these replace carry it. */
@media (max-width: 500px) {
  .md-grid.md-grid--layout-focused .md-card--boards .md-card__head--between {
    grid-template-columns: auto auto !important;
    /* Packed to the left: `md-card__head--between` spreads its columns (space-between), which put
       Boards at the far edge, away from Create. */
    justify-content: start !important;
  }
  .md-grid.md-grid--layout-focused .md-card--boards .md-card__head--between > .md-card__left {
    grid-column: 1/-1;
  }
  .md-grid.md-grid--layout-focused .md-card--boards .md-card__head--between > .md-card--boards__add {
    margin-left: 0 !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: 6px !important; /* match the Change Home Board button's column-gap (user computed) */
  /* Nudged 16px to the right of the header title block. */
  margin-left: 16px !important;
  /* 32px tall (requested 2026-10-13): the Create and View All Boards buttons on the Modern
     communicator home are 32px tall with 14px labels. Was 40px. */
  height: 32px !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;
  /* MATCHES THE "CHANGE HOME BOARD" PILL as it RENDERS in Focused View Modern
     (button.ub-boards-page__set-home-btn), EXCEPT the height (kept 32px per the 2026-10-13 request).
     Values taken from that button's COMPUTED styles (user inspector): a light denim/slate gradient,
     a navy-tinted rim, and dark var(--md-ink) ink (#1B365D). Not the teal->blue glass nor the hero
     radial — those are other set-home-btn states that were not what renders here. */
  background: linear-gradient(135deg, rgb(220, 228, 236) 0%, rgb(196, 208, 223) 100%) !important;
  border-color: rgba(27, 54, 93, 0.18) !important; /* computed rgba(27, 54, 93, 0.18) */
  color: var(--md-ink) !important;
  /* Box-shadow copied verbatim from the Change Home Board button's computed style (user inspector). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 54, 93, 0.14) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s 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: 14px !important; /* 15 -> 14px (requested 2026-10-13) */
  font-weight: 600 !important; /* match the Change Home Board button (user computed) */
}

.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 {
  /* Hover: a touch darker denim + the pill's lift (the set-home-btn's own hover is a subtle deepen). */
  background: linear-gradient(135deg, rgb(208, 218, 230) 0%, rgb(182, 196, 214) 100%) !important;
  border-color: rgba(27, 54, 93, 0.26) !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;
  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. */
/* 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;
}

/* MODERN HOME, <=900px: NO top padding on the workspace (requested 2026-09-20).
   Below 900px `.md-acct-rail` stops being a fixed side panel and becomes an in-flow grid ABOVE
   this element (see its `position: static` block), and it already carries its own
   `margin: 22px 0 20px`. The workspace's 40px top was sized for a page that started under open
   space, so on top of the rail's own bottom margin it read as a gap rather than as breathing
   room. Zero here; the rail's 20px bottom margin is the whole separation.
   ONE RULE FOR BOTH VIEW STYLES. Focused normally takes 32px here
   (`.md-shell--layout-focused > .md-workspace`, just below) against Gentle's 40px, but zero is
   zero -- there is no difference left to preserve, so this deliberately flattens the two.
   `.md-shell.md-shell--home` is (0,3,0), which outranks that focused rule's (0,2,0) WITHOUT
   depending on source order -- both classes are genuinely on the element, so this is an honest
   selector rather than a specificity hack, and it survives the rule below being moved.
   `.md-shell--home` is the modern home tab only: `authenticated-view.hbs` stamps it on
   `activeTab === 'home'`, which is also the only tab that renders the rail. */
@media (max-width: 900px) {
  .md-shell.md-shell--home > .md-workspace {
    padding-top: 0 !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;
  --ll-content-pad-extra: 0px !important; /* see the Gentle `#content:has(.ll-appshell)` rule */
}

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

/* Not the Focused Extras card (2026-10-12): it is built like the Speak card, which has no top
   shine, and this sheen turned its radial gradient into a top-lit band. `:where()` adds no weight. */
.md-grid .md-card.md-card--as-button:where(:not(.md-card--extras-focused))::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: 100px; /* 2026-10-10, was 160px: the main button cards' floor (see the Extras rule) */
  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 {
  font-size: 24px !important;
}

/* CREATE A BOARD / EDIT DASHBOARD: 2px SMALLER than the two main cards (requested 2026-10-10:
   "more sleek, less padding than the two main buttons, and font sizes should be 2px smaller (header
   and subheader) and should scale down on smaller screens"). The steps down are in the <=900 /
   <=600 Gentle block (search "SLEEKER SECONDARY BUTTONS"). Focused sizes these at 18px in its own
   later rule, which still wins. */
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__title {
  /* 22 -> 20px: a further 2px down, asked for the same day ("make the create board and edit
     dashboard header font on modern gentle 2px smaller and scale down on smaller screens"). */
  font-size: 20px !important;
}

/* (Speak's title divider is defined with Extras' below — one divider for both since 2026-10-10.) */
/* 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);
}

/* THE HOME CARDS' TITLE DIVIDER — Speak Mode, Extras and the badge-action cards share ONE.
   Speak Mode had its own heavier hero divider (260px x 3px, full opacity, fading from 68%) until
   2026-10-10 (requested: "make the modern speak mode button divider match the extras button
   divider"); the supervisor home already gave it exactly these values, so that override went too. */
.md-grid .md-card.md-card--speak-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 {
  content: "";
  display: block;
  /* Uniform home-card accent divider — matches the My Organizations divider.
     My Caseload keeps its own heavier hero divider. */
  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;
  /* 10% DARKER (requested 2026-09-20, Create a Board + Edit Dashboard — the only two
     badge-action cards left after Account and Reports were retired from the grid).
     `color-mix(… 90%, black)` and NOT `color.scale()`: these stops are themselves CSS
     `color-mix()` values, so Sass colour functions cannot operate on them. Same constraint
     and same idiom as the focused button fills in _focused-view.scss.
     CONTRAST — AND THE PRECEDENT'S REASONING DOES NOT TRANSFER. That rule notes "the ink is
     white on a fill that is getting DARKER, so white-on-fill can only improve. No AA risk in
     this direction." Here the ink is DARK ($la-navy) on a fill getting darker, so contrast
     FALLS. Measured rather than assumed: navy on the two base stops goes 10.48:1 -> 8.38:1 and
     9.44:1 -> 7.55:1, both still far above the 4.5:1 AA floor for normal text.
     THE TOP-LEFT SHEEN IS LEFT AT 0.65 — only the three COLOUR stops are darkened, which is
     what was asked. The sheen is white, so the darkening reads weakest under it and strongest
     away from it; if the card should come down evenly, that alpha is the second lever.
     LIGHTER AGAIN (requested 2026-10-10, for every secondary action card on the Focused home:
     Create a Board, Edit Dashboard, and the Account / Reports / Caseload / Speak action cards
     other roles see, which all share this rule). The 10% black step is gone and the denim
     comes back from 23/35% to 17/27%, the values before the last "bluer" pass. Navy ink on a
     lighter fill, so contrast only rises. */
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 48%), radial-gradient(28% 40% at 100% 100%, rgb(209, 231, 227) 0%, transparent 46%), linear-gradient(140deg, rgb(224, 235, 250) 0%, rgb(206, 223, 246) 100%) !important;
  background: radial-gradient(130% 120% at 16% 6%, rgba(255, 255, 255, 0.4) 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 17%, white) 0%, color-mix(in oklch, #4C86D8 27%, 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 {
  /* SOFTER (requested 2026-10-10: "the shadow effect on hover ... needs to be less dramatic").
     The 22px/44px drop at 0.40 and the 13px inner lip at 0.40 read as the card lifting well off
     the page; each layer now sits a step above the resting shadow rather than far past it. The
     1px lift stays, so hover is still visible without the shadow carrying it. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 8px rgba(27, 54, 93, 0.14), 0 3px 6px rgba(27, 54, 93, 0.12), 0 12px 24px rgba(27, 54, 93, 0.16), 0 0 18px rgba(42, 157, 143, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Sub text. This rule used to lighten the description to #7B8798 to make it recede, and
   in doing so it OVERRODE two deliberately accessible colours: the `.md-card__sub` base
   #3A506E and the badge-action #5C6470, whose own comment above records that it was
   chosen to pass WCAG AA. Measured against the darkest stop of this card's gradient
   (#D8E4F6, the 22% dusty-denim end), #7B8798 is 2.84:1 — well under the 4.5:1 AA needs
   for body text, and this app's users are the least able to compensate.
   Now #2B3E5D. The value was first set to the #3A506E base, but the card surface was then
   made bluer (denim 13/22% -> 17/27%) and that pushed the base back under the floor.
   MEASURED FROM RENDERED PIXELS, not computed from the SCSS: the earlier SCSS-derived
   figure missed the `color-mix(... 90%, black)` step these stops also carry, so it read
   high. Decoding a screenshot of the card and scanning its background-only region gives a
   true darkest point of #9EB5D0 (the bottom-right corner, where the verdigris glow meets
   the deepest denim). Against that, #7B8798 is 2.65:1 and even #3A506E is only 3.91:1.
   The card was then taken bluer again (denim 17/27% -> 23/35%) and the text darker with
   it, so this is now #1B365D — `$la-navy`, the app's own navy rather than a one-off. Each
   step here was re-measured from rendered pixels, because darkening the surface
   invalidates the previous figure every time. It is still clearly lighter than the
   #0F2540 title, so the description recedes by SIZE and WEIGHT (14px/500 against
   18px/900) rather than by being hard to read — the right lever for this app's users. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
  color: #1B365D !important;
}

/* Status dot, matched to the text it belongs to. #64748B measured 3.70:1 on this card —
   enough for a non-text graphic but visibly weaker than the line it sits on, so the two
   read as different elements. Using the text colour makes the dot and its label one unit
   and lifts the dot to match it. Still no glow: the recession is deliberate. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__sub::before {
  background: #1B365D !important;
  box-shadow: none !important;
}

/* Title underline divider → denim→verdigris reading on the light bg, as GLASS and THINNER
   (both requested 2026-09-20), matching the glass-morphism icon tiles on these same cards.
   HEIGHT 3px → 2px → 2.5px. The 3px was Focused's bump for perceptibility; 2px is what every
   non-focused variant uses (the extras/badge-action rule and the org-management one), and the
   glass treatment below was meant to carry that legibility with a highlight rather than bulk.
   2px then read too faint once translucent, so it is nudged back to 2.5 — deliberately BETWEEN
   the two, because returning to 3 would undo the thinning asked for a step earlier. The half
   pixel antialiases on a 1x display, which on a translucent bar softens the edge rather than
   blurring a hard line.
   The fade-mask is deliberately UNCHANGED at 75%: it is what gives the bar its shape, and it
   was widened from 55% for perceptibility, which thinning does not undo.
   GLASS AT HAIRLINE SCALE. The same vocabulary as the icon tiles, adapted to 2px:
     - the brand ramp goes TRANSLUCENT ($brand-dusty-denim → $brand-verdigris as rgba, not
       replaced by new colours), so what is behind shows through. DARKENED 2026-09-20
       (requested): 0.58/0.48 → 0.80/0.70, and the sheen below trimmed 0.55 → 0.38 so it stops
       washing the bar back out. Alpha is the right lever here rather than height — the bar
       read faint because the light card showed through it, not because it was too thin, and
       two prior size changes had already been made for the same symptom. Real translucency is
       kept at both stops: at 1.0 the backdrop blur below becomes a no-op and the bar is just a
       solid line again;
     - a top-weighted white sheen as a second layer, which is what reads as the glass
       highlight at this height — an `inset` box-shadow would occupy half the bar;
     - a real backdrop blur, smaller than the tiles' 14px because a 2px strip only ever
       samples a 2px band: 6px is enough to soften it without smearing the card texture.
   `-webkit-` twin included for older iOS/iPadOS, where it degrades to the translucent
   gradient — still a visible denim→verdigris line, just without the frost. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, rgba(76, 134, 216, 0.8) 0%, rgba(42, 157, 143, 0.7) 100%) !important;
  backdrop-filter: blur(6px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.25) !important;
  height: 2.5px !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;
  /* Title -> divider 8 -> 4px (requested 2026-10-05, tighter with the condensed card); the
     sub's matching 7 -> 4px is on the Focused sub rule below. Margins, not a grid gap: the
     divider is this pseudo-element INSIDE the title, so no container gap can reach it. Same
     (0,5,1) as the base rule, which sets 8px without !important; later in source wins. */
  margin-top: 4px;
}

/* 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,
.md-grid .md-card.md-card--speak-action {
  display: none !important;
}

.md-card--speak .md-card__head {
  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__icon {
  /* NEVER COMPRESSED BELOW ITS DECLARED SQUARE (reported 2026-09-21: "make sure the icon bgs
     retain their square shape on smaller screens"). The width and height below are absolute
     and `!important`, but this tile is a FLEX ITEM, and a flex item's width is a starting
     point, not a floor -- default `flex-shrink: 1` let it be squeezed as its card narrowed.
     Measured on the Gentle dashboard's Create a Board card: 64x64 at 1280 and 1200, then
     36x64 at 1000 -- a rounded upright oval rather than the square the radius was drawn for.
     `flex-shrink: 0` makes the declared size the floor it was always written as. */
  flex-shrink: 0 !important;
  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);
}

/* The Gentle Speak card's "no home board" fallback image (speak-circle-light, 2026-10-13): it carries
   its OWN round frame, so — unlike .md-card__icon-board-img — NO added silver picture frame here. It
   fills the tile, and the tile's teal tint is dropped so only the circle badge shows. */
.md-card__icon--speak:has(> .md-card__icon-circle-img) {
  background: transparent !important;
}

.md-card__icon-circle-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The board the Speak card opens (authenticated-view.js#speakBoardImage, requested 2026-10-13), in a
   ROUND SILVER PICTURE FRAME (requested the same day): a circle on white, the ring a brushed-metal
   gradient drawn in the transparent border (border-box) behind the white fill (padding-box), with a thin
   light slate outline. The FRAME IS LIFTED off the page (drop shadows) and the PICTURE IS INDENTED into it (inset
   shadows, drawn inside the ring, over the white disc). The padding keeps the symbol off the ring. */
/* Sized inside the 46px tile (centred by its grid) so the outline and the lift shadow are not cut off. */
.md-card__icon-board-img {
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  box-sizing: border-box;
  padding: 4px;
  object-fit: contain;
  border: 3px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #fbfcfd 0%, #b9c0c8 22%, #eef1f4 45%, #8f97a1 68%, #dfe3e8 85%, #a9b0b9 100%) border-box;
  box-shadow: 0 0 0 0.75px rgba(107, 114, 128, 0.55), 0 3px 6px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 2px 4px rgba(70, 80, 95, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.9); /* indented */
}

/* 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: 22px / 64px on the base as-button icons ((0,5,0)),
   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 that shared rule with an extras-scoped selector. 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. */
.md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon.md-card__icon--extras {
  border-radius: 50% !important;
  /* 76px: THE SAME SIZE AS THE SPEAK MODE IMAGE beside it (requested 2026-10-10: "make the
     extras image grow to match the speak mode's image size"). Speak's image fits the 100px card
     floor at 76px (100 - 12px padding top and bottom), so this matches it rather than the 80px
     (64 x 1.25) it was. */
  /* 95px, matching Speak's after both went 25% larger (requested 2026-10-10). */
  width: 95px !important;
  height: 95px !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. */
  /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so each column refuses
     to go below its content's MIN-CONTENT width — and one of these cards holds a board key
     ("marcus_williams_slp/vocal-flair-84"). Since the account rail took 236px off this
     column, that floor exceeded the space available and the right-hand cards ran off the
     page. The 0 minimum lets the columns shrink to what there is. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
  /* Breathing room before the boards section below. */
  margin-bottom: 24px;
  align-items: stretch;
  /* FILLS the content column rather than shrink-wrapping and centring. `fit-content` sized
     this grid to its widest card and `margin-inline: auto` centred the result, which was
     right when the page was full width; beside the rail it is what pushed the block out of
     its column. */
  width: 100%;
  max-width: 100%;
  flex: 0 1 auto;
}

/* (The `min-width: 0` this used to add now lives on `.md-acct-card` itself, where the 360px
   floor it was fighting was declared — one place rather than two.) */
/* The board key is one long token with no spaces to break at, so it needs an explicit break
   opportunity or it sets the card's min-content width on its own. `anywhere`, not
   `break-word`: only `anywhere` actually LOWERS min-content, which is what lets the card
   shrink; `break-word` wraps the glyphs but leaves the measurement unchanged. */
.md-acct-card__sub {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 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: 14px;
  width: 100%;
  /* EQUAL HEIGHT. `height: 100%` is what actually levels the pair: the grid stretches its
     items, but a `min-height` alone still lets a card with a two-line subtitle grow past a
     one-line neighbour. Filling the row makes both cards exactly the row's height, and the
     row is the taller card. `min-height` stays as the floor for a row where BOTH are short.
     84 -> 64px, with the icon, for "more compact" (2026-09-14). */
  height: 100%;
  min-height: 64px;
  /* Right padding reserves the arrow's column so title/sub text never runs under it (the
     arrow is absolutely positioned, so it is out of the content flow). */
  padding: 8px 46px 8px 12px;
  /* NO `min-width: 360px`. That was the cut-off: two cards at 360 plus an 18px gap needs
     738px, and the account rail took 236px off this column. 0 is what lets a grid item
     shrink to its track — paired with `minmax(0, 1fr)` on the columns and `overflow-wrap`
     on the subtitle, which is what actually lowers the min-content it is measured by. */
  min-width: 0;
  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: 48px;
  height: 48px;
  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: 24px;
  height: 24px;
}

.md-acct-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.md-acct-card__title {
  margin: 0;
  font-size: 17px; /* 20 -> 17, "more compact" */
  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 {
  /* GLASS MORPHISM (requested 2026-09-20), replacing the opaque "calmer tile" this rule used
     to paint. The four properties below are the whole recipe and each one is load-bearing:
     a TRANSLUCENT fill, a BACKDROP BLUR behind it, a bright RIM, and an inner top highlight
     with a dark inner lip. Drop any one and it stops reading as glass — a translucent fill
     with no blur is just a weak colour, and a blur with an opaque fill does nothing at all.

     SAME SLATE, NOW TRANSLUCENT. The three stops are the app's dark icon-tile ramp
     (#262d3a / #333c4a / #515d70 — also on the Extras setup cards and the preferences boxes)
     expressed as rgba rather than replaced, so this is the established palette gone glassy and
     not a new colour.
     DARKENED 2026-09-20 (requested) by RAISING THE ALPHAS, 0.80/0.76/0.66 -> 0.93/0.90/0.84,
     not by darkening the stops. That is the right lever here: the tile sits on the LIGHT
     focused card surface and the blur pulls that brightness through, so what made it read pale
     was the card showing through, not the slate being too light. Deepening the colours as well
     would have drifted off the shared ramp for no gain. The sheen is trimmed
     (0.16 -> 0.12 at its peak) so it lifts the top edge without undoing the darkening.
     There is still real translucency left at every stop — push these to 1.0 and the backdrop
     blur below becomes a no-op and the tile stops being glass at all.

     blur(14px) saturate(1.3) is the repo's existing frosted value, reused verbatim from the
     focused Boards and Logs card surfaces (_focused-view.scss) rather than invented here.
     `-webkit-` twin included: without it the effect is silently dropped on older iOS/iPadOS,
     which is a very common AAC device population — and there it degrades to the plain
     translucent fill, which still reads as a dark tile.

     SCOPE COMES FROM THE SELECTOR, unchanged: `.md-grid--layout-focused` is Focused View, and
     the `md-grid--*` classes only exist on the modern dashboard (Basic renders
     Dashboard::ClassicView with `.ch-*` markup), so this is focused + modern without any extra
     gate. It reaches the SMALL 41px badge-action tiles sized by the rule further down — not
     the full-width hero showcases, which are images rather than tiles. */
  /* LIGHT GLASS (requested 2026-10-05: "more glassmorphism, less dark"). Until then this took
     the shared dark slate `$focus-icon-tile-*` recipe (_variables.scss), which the Extras
     setup-card tiles still use; only these two home buttons move off it, so the variables are
     untouched. A light white glass was tried first the same day and was too light ("they do need
     some dark bg, just not as dark"), so this is the SAME slate ramp as the variables, at
     roughly half their alpha (0.94/0.92/0.87 -> 0.58/0.52/0.44): still a dark tile, but the
     card shows through it and the 14px backdrop blur has something to frost. The white sheen
     and rim are raised (sheen 0.12 -> 0.30, rim 0.24 -> 0.45, top highlight 0.30 -> 0.55) so
     it reads as glass rather than as a faded chip.
     NO FUZZ (requested 2026-10-05, "remove the fuzzy look"): the backdrop blur, the blurred
     inner lower lip (inset 0 -2px 6px) and the 12px drop are gone. What is left is all hard-edged:
     the 1px rim, a 1px top highlight and a 1px contact shadow. */
  /* THE NEED ATTENTION CARD'S DARK TONE, FLAT (requested 2026-10-05: "the same bg color as the
     communicators need attention", then "remove the lighter part of that gradient"). That card
     is `focus-glass-slate-card($centre-shift: 55%, $edge-shift: -45%, $gloss: 0.08,
     $lighten: 32.5%, ...)` (_focused-view.scss): a light centre fading to a darker rim, under a
     white gloss. This is its RIM stop alone, computed by the mixin's own formula from the same
     arguments (#515d70, edge-shift -45%, lighten 32.5%; the base $lightness is 0), so it keeps
     the card's colour without the light centre or the gloss. If the card's arguments change,
     change these two numbers with them. The card's Compressed-View token override does not
     apply: Compressed does not show these two cards. */
  background: rgb(99.6347215026, 114.3954209845, 137.7665284974) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 1px rgba(15, 23, 42, 0.16) !important;
}

/* Glyph lift for the dark tile. Was `filter: brightness(1.25) saturate(1.05)`, which left the
   glyphs at 2.25:1 (verdigris) and 1.98:1 (dusty denim) against the slate tile. A brighter
   filter clips the channels and pushes both hues toward the same cyan, so the glyph is instead
   stroked with its own brand colour 70% of the way to white: 3.51:1 and 3.45:1, past the 3:1
   that WCAG 1.4.11 uses for graphics, and each card keeps its hue. CSS `stroke` outranks the
   svg's `stroke` presentation attribute, so the markup is untouched. Verdigris is the default
   (Create a Board, My Caseload, Speak Mode); the denim-glyph cards are listed below it.
   Checked by scripts/focused-action-glyph-contrast-qa.mjs. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
  stroke: rgb(191.1, 225.6, 221.4);
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon--edit-dashboard .md-card__icon-glyph,
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon--account .md-card__icon-glyph,
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon--reports .md-card__icon-glyph {
  stroke: rgb(201.3, 218.7, 243.3);
}

/* 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: var(--dn-grid-gap-focused, 14px) !important;
}

/* ONE EXTRAS CARD PER LAYOUT (2026-10-10). authenticated-view.hbs renders two: the illustrated card
   and, for Focused, an action card like Create a Board with a drawn icon (`md-card--extras-focused`).
   Chosen here from the grid's layout class, not in the template, because the Dashboard Design
   previews copy the markup and switch only that class. The cards' own `display` rules carry
   `!important`, so these do too. */
.md-grid.md-grid--layout-focused > .md-card.md-card--extras:not(.md-card--extras-focused),
.md-grid:not(.md-grid--layout-focused) > .md-card.md-card--extras-focused {
  display: none !important;
}

/* THE STACK BESIDE THE SPEAK HERO, ABOVE 1024px (2026-10-10, requested: "the top of the create board
   should line up with the top of the speak mode button and the bottom of the extras button should
   line up with the bottom of the speak mode button", and less space between the two).
   `md-grid--speak-beside` is set by dashboard_sections.js#gridLayoutState for exactly this layout.
   - The hero's own 6px / 10px vertical margins (its base rule) were what offset its edges from the
     stack's; they go to 0 here so both span the same rows.
   - The two stacked cards are 8px apart instead of the grid's 14px. That gap is the grid's
     row-gap, shared by every row, so Boards takes the 6px back as a top margin and keeps its 14. */
/* ABOVE 900px since 2026-10-12 (was 1025px): the side-by-side row runs down to 901px (requested:
   "above 900px"), so the Focused flex fallback below skips this layout until 900px. */
@media (min-width: 901px) {
  .md-grid.md-grid--layout-focused.md-grid--speak-beside {
    row-gap: 8px !important;
  }
  /* The `:not()`s match the hero's base rule weight, (0,6,0), which this has to clear. */
  /* The Extras card took the Speak card's margins with its look (above, (0,6,0)), so its selector
     here is heavier, (0,7,0), to clear them. */
  .md-grid.md-grid--layout-focused.md-grid--speak-beside .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
  .md-grid.md-grid--layout-focused.md-grid--speak-beside:not(.md-grid--hero-caseload):not(.md-grid--hero-org) > .md-card.md-card--speak-focused {
    /* All four sides (2026-10-12): its side margins made it 12px narrower than the card beside it,
       and the row is meant to split evenly. */
    margin: 0 !important;
  }
  /* EQUAL HEIGHTS (requested 2026-10-10: "make the extras button and create board button heights
     match each other (splitting the space in the two rows that speak mode button spans)"). Each
     card fills its row, and the hero's spare height is shared equally between the two `auto`
     rows it spans, so the pair splits it evenly. The cards are already column flex boxes that
     centre their content vertically, with the icon and text at the left and the title's arrow at
     the right edge, so nothing else is needed (a horizontal `align-items: center` here centred all
     of it, measured the same day). */
  .md-grid.md-grid--layout-focused.md-grid--speak-beside > .md-card.md-card--create-board,
  .md-grid.md-grid--layout-focused.md-grid--speak-beside > .md-card.md-card--extras {
    align-self: stretch !important;
    height: auto !important;
  }
  /* 24px between the Speak / Extras row and Boards (requested 2026-10-12: more space there): the
     row-gap's 8px plus this 16px. Was 6px (14px in all). */
  .md-grid.md-grid--layout-focused.md-grid--speak-beside > .md-card.md-card--boards {
    margin-top: 16px !important;
  }
  /* MY CASELOAD | EXTRAS (2026-10-12, requested: "modern focused show my caseload to the left of extras
     (like it does on gentle view)"), `md-grid--caseload-beside`: the two drop their hero margins so they
     split the row evenly and line up. The grid's row gap is left alone here: the panels below them
     (Attention, Rooms) keep their spacing. */
  .md-grid.md-grid--layout-focused.md-grid--caseload-beside .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
  .md-grid.md-grid--layout-focused.md-grid--caseload-beside > .md-card.md-card--speak-focused,
  .md-grid.md-grid--layout-focused.md-grid--caseload-beside > .md-card.md-card--caseload-focused {
    margin: 0 !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. Then 13/15 → 9/14
     (requested 2026-10-05, "more condensed", with the 54 → 44px icon below): the card goes
     from ~80px to ~62px tall, still well clear of the 44px AAC tap target. */
  padding: 9px 14px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__head {
  /* 11 → 14px: the tile grew 41 → 54px and the old gap left the title crowded against it.
     14 → 12px with the tile's 54 → 44px (2026-10-05), keeping the gap in proportion. */
  gap: 12px !important;
  /* Room for the title's arrow, pinned to this head's right edge below, so the title and
     the sub never run underneath it. */
  padding-right: 32px !important;
}

/* (A 20px icon gap for Create a Board and the Focused Extras card stood here for part of
   2026-10-12. It went the same day: Create a Board was retired from the home grid and the Focused
   Extras card was rebuilt like the Speak card, with no `.md-card__head`, so it matched nothing.
   The `:where(:not(.md-card--extras-focused))` exclusions in the Gentle Extras width rules below
   stay: they keep those rules off the Focused card.) */
/* TITLE ARROW RIGHT-ALIGNED AND VERTICALLY CENTRED ON THE BUTTON (requested 2026-10-05).
   The arrow is the title's bare <span> (the base "→ affordance" rule, same (0,5,1) selector,
   earlier in source). It positions against the HEAD, which is `position: relative` (the
   `.md-card--badge-action .md-card__head` rule that lifts it over the gloss) and is the
   card's only child, filling it inside even 9px top/bottom padding -- so centred on the head
   is centred on the button. Centred with top/bottom 0 + flex rather than translateY(-50%):
   the base hover rule's `transform: translateX(4px)` slide would replace a centring
   transform and drop the arrow on hover. The slide still works as before. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title > span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  margin-left: 0;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title {
  /* 16 → 17 → 20px. The 17px step was to hold the title against the icon block; 20px is
     the size the Caseload and Speak cards on this same page already use, so these action
     cards now sit in that tier instead of below it. Base weight is already 900, so size
     is the lever. Settled at 18px (requested): 20px matched Caseload/Speak exactly and
     read a touch heavy on a card half their height, 18px keeps the lift without it. */
  font-size: 18px !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;
}

/* WIDER (requested 2026-09-20): 150px -> 180px. This `width` is the bar's FULL length, and the
   75% fade-mask on the appearance rule above means roughly the first three quarters reads as
   solid and the last quarter dissolves. So the extra 30px lengthens the solid run and the fade
   in proportion rather than just adding more nothing at the end.
   The base rule's `max-width: 100%` still caps it, so a narrow card clips the bar instead of
   being pushed wider by it. */
.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__title::after {
  width: 180px !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;
  /* Divider -> sub 7 -> 4px (2026-10-05), with the title -> divider 4px above. */
  margin-top: 4px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
  /* 41 → 54px, and radius 13 → 16px to match the Caseload/Speak icon tiles on this page.
     The small dark tile was the main reason these two cards read as secondary next to
     them; the glyph grows with it below.
     54 → 44px, radius 16 → 14px (requested 2026-10-05, "more condensed"): the tile sets the
     card's height, so this is the main lever. Still larger than the original 41px. */
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !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 44px !important;
  min-width: 41px !important;
}

.md-grid--layout-focused .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
  /* 20 → 26px, keeping the glyph at roughly half the 54px tile as before.
     26 → 22px with the 44px tile (2026-10-05), the same half. */
  width: 22px !important;
  height: 22px !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:where(:not(.md-card--extras-focused)).md-card--as-button .md-card__head {
    gap: 28px !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-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.) The Need Attention card is listed so its Focused
   "View all communicators" header button matches "View all rooms" (2026-10-05). */
.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--attention .md-btn--primary,
.md-grid--dashboard .md-card--org-management .md-btn--primary {
  /* The two backgrounds read custom properties so one button can retint without an override
     rule: Focused's "View all communicators" sets them 50% lighter (_focused-view.scss). */
  background: var(--md-dash-btn-bg, 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--attention .md-btn--primary:hover,
.md-grid--dashboard .md-card--org-management .md-btn--primary:hover {
  background: var(--md-dash-btn-bg-hover, 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--attention .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--attention .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;
  /* 32px tall, matching the Gentle View All Boards button beside it (requested 2026-10-13);
     overrides the 44px .md-btn base. Focused hides this pill, so this is effectively Gentle-only. */
  min-height: 32px !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;
}

/* Center "Back to Boards" button when new board form is open */
/* Inline Create a New Board form on Boards tab (same content as modal) */
/* 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;
}

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

/* Wizard step footer (every step of the create-board wizard shares this one nav).
   `flex-end` puts the whole group hard right, so Back sits DIRECTLY beside Next
   (one `gap` apart) rather than being pushed to the opposite edge, and the primary
   action lands in the same place on every step — including step 1, where Back is
   not rendered, and the last step, where "Generate Labels with AI" takes its place. */
/* The card-level Back nav. Inherits `.nb-wizard__nav`'s flex-end alignment so it lands in
   the same right-hand corner the wizard's own footer used; this only spaces it off the
   last section above it. */
.nb-create-card-nav {
  margin-top: 16px;
}

.nb-wizard__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

/* Secondary counterpart to the Next CTA, matching the modal-footer Cancel
   button so the pair reads as one set. */
.nb-wizard__nav .nb-wizard__back {
  padding: 12px 24px;
  border-radius: 16px;
  border: 1px solid var(--md-line);
  font-weight: 750;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--md-ink);
  box-shadow: var(--md-shadow-2);
  transition: background 0.2s ease;
}

.nb-wizard__nav .nb-wizard__back:hover {
  background: rgba(255, 255, 255, 0.88);
}

/* Modern primary CTA, matching the modal-footer Create Board button and the
   sibling Generate button above. The soft actionable glow is deliberately not
   reused here: it marks the AI action specifically. */
.nb-wizard__next.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);
  transition: box-shadow 0.25s ease, background 0.2s ease;
}

.nb-wizard__next.btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(44, 183, 176, 0.4), rgba(91, 141, 239, 0.34));
  box-shadow: 0 6px 18px rgba(44, 183, 176, 0.26), 0 2px 8px rgba(13, 36, 56, 0.12);
}

/* Light gray bg + dark slate text for WCAG AA contrast, the same disabled
   treatment the footer CTA uses; an opacity wash fails contrast here. */
.nb-wizard__next.btn.btn-primary:disabled,
.nb-wizard__next.btn.btn-primary[aria-disabled=true] {
  background: #e5e7eb;
  color: #1f2937;
  border: 1px solid rgba(31, 41, 55, 0.18);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.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 input#word_suggestions[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !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. */
/* 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;
}

/* Modern stepper — single glass pill with inline +/- icon buttons.
   Replaces the Bootstrap input-group for the rows/cols inputs. */
/* 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. */
.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 */
  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 {
  text-align: left !important;
  align-self: stretch;
}

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

/* BASIC VIEW: the preview's speak bar becomes board-alt's, by taking the REAL header's
   own surface rather than inventing one. On board-alt in speak mode the bar is
   `#inner_header` inside `header.speaking`, and that header is painted
   `background: $brand-charcoal-blue` (#46505F) by
   `#within_ember.board-alt-view header.speaking:has(#speak)` (app.scss ~2504). The SAME
   TOKEN is reused here, so the preview strip cannot drift from the bar it depicts.

   Only the STRIP is added. The controls sitting on it -- the text field, the home button
   and the action buttons -- already carry `rgba(110, 122, 140, 0.32)` over a 1px white
   hairline, which is the lighter-slate-on-charcoal relationship board-alt's own controls
   have, so they need nothing but an ink correction.

   SCOPED ON `body.ll-view-basic`, not the grid's `--basic` modifier: this row is a
   SIBLING of the grid inside `.new-board-mockup-wrap`, so the grid class cannot reach it.
   That body class is stamped by `LingoLinq.set_view_scope` (app.js:524-527) from
   `effective_view_style` -- the same resolved value `preview_is_basic` reads -- so the
   strip and the tiles can never disagree about which view is active. It is deliberately
   NOT gated on the layout axis: board-alt is board-alt in Gentle and Focused alike. */
body.ll-view-basic .nb-preview-sentence-row {
  background: #46505F;
  border-radius: 12px;
  padding: 10px 12px;
}

/* THE BAR ITSELF, which is the part that actually reads as board-detail. It is painted
   by `.new-board-mockup-wrap:not(.md-board-detail--dark) .md-board-detail-sentence-bar`
   at (0,3,0) with a near-white gradient -- and because the dark-mode class sits on
   `.nb-preview-stage`, its PARENT, that `:not()` matches whatever the mode is, so the
   white always wins. Beating it needs (0,3,1), which the `body` element supplies.
   Board-alt's field is a translucent slate well on the charcoal header, not a white
   card. */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-home-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  /* NO FROSTED GLASS IN BASIC. Both of these carry
     `backdrop-filter: blur(18-20px) saturate(180%)` from the same (0,3,0) wrap rule that
     paints them white. Overriding only `background` left the blur behind, so the control
     still read as a pane of glass over the board -- board-alt's header controls are flat
     slate wells with no blur at all. Killing the filter is what actually removes the
     glassiness; the colour change alone did not. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Tighter action group in Basic. The bar defaults to `gap: 8px`; board-alt's header sets
   its controls `margin-left: 4px` (app.scss ~68223), so 4px is the spacing the real bar
   uses rather than a number picked to look right. With the mic hidden in this view the
   group is down to two buttons, and 8px between just two reads as a gap rather than a
   pair. (0,3,1) over the base (0,1,0). */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__actions {
  gap: 4px;
}

/* THE BAR'S TOOL BUTTONS GO FLAT. Backspace and Clear carry
   `inset 0 1px 0 rgba(255, 255, 255, 0.12)` plus a `0 2px 6px` drop shadow -- a lit top
   edge over a raised body, which is exactly the "glass" read, and the last of it left in
   the row once the bar and the home button were done. Board-alt's header controls are
   flat wells: no lit edge, no lift. Removing the shadow outright is what flattens them;
   recolouring alone left the highlight in place, which is the same mistake the sentence
   bar's own backdrop-filter taught. (0,3,1) over the base (0,1,0). */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-home-btn,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__btn {
  box-shadow: none;
}

/* "Tapped words will appear here" goes lighter (requested), and the way it is lightened
   matters: the base sets `opacity: 0.55` with no colour of its own, so on the charcoal
   bar it inherited white and then dimmed it. MEASURED at 3.11:1 against the bar surface
   -- under the 4.5:1 AA floor, on a page built for AAC users.
   An explicit colour at full opacity replaces that: white at 0.85 over the bar resolves
   to rgb(230, 231, 233) for 5.00:1, comfortably clear of AA and visibly lighter, which is
   what was asked for. `opacity: 1` is required, not incidental -- leaving 0.55 in place
   would re-dim the new colour and put it straight back under the floor.
   Italic stays: that is the placeholder convention, and it is doing no contrast work. */
body.ll-view-basic .new-board-mockup-wrap .nb-preview-sentence-bar__placeholder {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* BACKSPACE + CLEAR ARE THE REAL HEADER BUTTONS, ported declaration for declaration from
   `#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button` and
   `... #clear_button` (app.scss ~68156 / ~68184): borderless, 12px corners, a plain
   `0 2px 6px rgba(0,0,0,0.2)` drop shadow and white glyphs, over two DIFFERENT fills --
   blue-grey for backspace, a lightened charcoal for clear. The tokens are reused rather
   than the resolved colours copied, so these cannot drift from the header they mirror.
   THESE TWO ARE EXCLUDED FROM THE GLOSS RESET ABOVE, deliberately: board-alt gives them a
   genuine drop shadow. That is depth, not gloss -- the gloss was the LIT INSET EDGE
   (`inset 0 1px 0 rgba(255,255,255,.12)`), which this replaces outright.
   The preview keeps its own button SIZE. Board-alt's 60px squares are sized to a 90px
   header; this bar is shorter, and forcing the height would burst the row for a
   dimension the eye reads from the shape, not the pixel count.
   The `--backspace` / `--clear` modifiers are new: both buttons previously shared one
   class, so nothing in CSS could tell them apart. */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__tool-btn {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: #fff;
}

body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__tool-btn--backspace {
  background: #7693B9;
}

body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__tool-btn--clear {
  background: rgb(112, 120, 132);
  background: color-mix(in oklch, #46505F 75%, white);
}

/* The same slight glass the real board-alt controls wear, via the shared mixin so the two
   cannot drift -- which is the whole contract of this block: these buttons exist to depict
   that header. A LIGHTER ring and sheen than the header's, because this bar is shorter and
   sits on the pale create-board card rather than a dark page, so the full-strength values
   read as a hard outline here instead of an edge. The home button is included: it is the
   third simulated control, even though it is not a `__tool-btn`. */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__tool-btn,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-home-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0) 100%) !important;
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* NO MIC BUTTON IN BASIC (requested). `--btn--speak` is board-detail's in-bar speak
   control; board-alt's header has no such button -- vocalizing there is the bar itself --
   so it is a control with no counterpart in the view being depicted. Hidden rather than
   removed from the template so the Modern preview keeps it, and `display: none` takes it
   out of the accessibility tree as well as the layout. */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__btn--speak {
  display: none;
}

/* The wrap's own frosted backdrop goes with them, for the same reason, as do the word
   chips that appear in the bar once labels are tapped -- they carry their own
   `blur(12px) saturate(140%)` and would be the one glassy thing left in the row. */
body.ll-view-basic .new-board-mockup-wrap--dark,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__chip,
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-sentence-bar__prediction {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The home button's glyph is `$indigo` on the modern bar, which sat on a light-enough
   surface to work. On the charcoal strip it would be near-invisible, so it takes the
   text field's own `#fff` -- the same ink board-alt's header controls use. */
body.ll-view-basic .nb-preview-sentence-row .md-board-detail-home-btn {
  color: #fff;
}

/* NO LIGHT/DARK SELECTOR IN BASIC (requested). The sun/moon segmented switch in Edit
   Tools chooses between board-detail's two board themes; board-alt has no such pair --
   its speak bar is the charcoal header in every theme -- so the control offers a choice
   that does not exist in this view. Hidden rather than removed from the template so the
   Modern preview, which does have both themes, keeps it.
   `aria-hidden` is not needed: `display: none` takes it out of the accessibility tree
   as well as the layout. */
body.ll-view-basic .new-board-mockup-toggle {
  display: none;
}

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

/* ---- BASIC MODE: the preview wears the board-alt (classic) tile -----------------
   Applied when `preview_is_basic` is true (create-board-new.js) -- i.e. the user's
   app-wide view style is Basic, whose board is board-alt rather than board-detail.

   WHY A RESKIN AND NOT THE REAL THING: the board-alt grid is a ROUTE template driven by
   the `board.index` controller and cannot be embedded. Its `computeHeight` sizes from
   `window.innerHeight` and writes `--sidebar-width` onto the document element, and
   `editManager` / `appState.board_virtual_dom` are single-slot globals that two live
   grids would fight over. Its 99 `#within_ember.board-alt-view` selectors are also
   route-gated (`templates/application.hbs:1`) and never reach this page. So the classic
   LOOK is applied to the cards already here.
   That is also what preserves the editing interactions: click-to-edit, drag-swap, paint,
   remove and the inline input all hang off the same cell and card elements in both
   modes, so there is no second copy of the markup to drift.

   VALUES ARE PORTED FROM THE REAL BOARD-ALT TILE RULE, `#within_ember.board-alt-view
   .board .button` (app.scss ~67697), NOT from the generic `.button` base. An earlier
   version of this block read the base instead and got every number wrong -- 3px corners
   where board-alt uses 12px, a 1px grey border where it uses 2px, and a serif label,
   which board-alt never shows because the board's own font preference
   (`.board.arial .button .button-label` and friends) overrides that default. */
.md-board-detail-grid--basic .md-board-detail-symbol-card {
  /* The three that define the classic tile's shape. `var(--btn-bg)` is the cell's own
     fill, which `bg_style` already sets per cell (create-board-new.js) -- the same
     custom property board-alt's rule reads, so the border tracks the tile colour exactly
     as it does there. The darker visible edge is the outline ring the card already
     carries, coloured per cell from `bg_style`'s `outline-color`. */
  border-style: solid !important;
  /* WIDTH -- the user's Border preference, with a 2px FLOOR so Basic view ALWAYS draws one
     (requested). On a classic tile the border is the only thing separating a button from
     its neighbour: there is no ambient shadow and no gap doing that job, so a `none`
     preference fuses a colour-run of buttons into one block. The preference still drives
     every value ABOVE the floor, so the Border stepper keeps working -- this sets the
     starting assumption, it does not take the setting away. */
  border-width: max(2px, var(--bd-button-border, 3px)) !important;
  /* COLOUR -- the DARKER edge the Fitzgerald palette pairs with each fill, published as
     `--btn-border` by `bg_style` (create-board-new.js) next to `--btn-bg`. This is what
     makes a classic tile read as a bordered tile rather than a flat swatch: light green
     inside mid green, pale yellow inside gold. The earlier version of this rule bordered
     in `--btn-bg`, the FILL, so the border was there but invisible on every coloured cell
     -- which is what "the colours and borders are still board-detail" was pointing at.
     Falls back to the fill, then to linen for a cell with no POS colour yet. */
  border-color: var(--btn-border, var(--btn-bg, #EDE9E0)) !important;
  border-radius: 12px;
  padding: 4px;
  color: #1b2a4a;
  /* The MODERN card draws its ring as an inset `outline` (~line 85711) whose colour
     `bg_style` also sets inline. Leaving it on would give Basic two concentric rings, an
     inset one and the border above. The classic tile has exactly one. Width rather than
     colour, because the colour arrives inline and only width is ours to set here. */
  outline-width: 0 !important;
}

/* PRESS AND KEYBOARD FOCUS. Modern signals both by thickening its inset outline -- which
   the rule above deliberately switched off, and which would have taken the affordance with
   it. Classic signals the same thing on the BORDER instead
   (`.board .button.touched, .board .button:focus-visible { border-width: 5px }`, ~line
   8931), so that is what is ported here. Same feedback, drawn the classic way. */
.md-board-detail-grid--basic .md-board-detail-symbol-card:active,
.md-board-detail-grid--basic .md-board-detail-symbol-card:focus-visible {
  border-width: 5px !important;
}

/* Board-alt keeps a soft contact shadow rather than the modern card's ambient float.
   The two state shadows are EXCLUDED BY SELECTOR, not overridden: `--painted` and
   `--image-drop` are editing FEEDBACK (paint applied, drag-hover target) and both sit at
   (0,2) like a bare `--basic` rule would, so an unqualified shadow here would silently
   take two affordances with it. */
.md-board-detail-grid--basic .md-board-detail-grid__cell:not(.md-board-detail-grid__cell--painted):not(.md-board-detail-grid__cell--image-drop) .md-board-detail-symbol-card {
  box-shadow: 0 1px 3px rgba(27, 42, 74, 0.06) !important;
}

/* The image area follows the card's corners; the modern rule matches its own clamp()
   radius, which would leave a differently-rounded symbol box inside the tile. */
.md-board-detail-grid--basic .md-board-detail-symbol-card__image {
  border-radius: 10px;
}

/* Board-alt gives the symbol the whole band the label leaves, edge to edge
   (`.board a.button .img_holder img.symbol { width/height: 100% }`, app.scss ~67775).
   The preview's symbols carry an INLINE `max-width: 70%; max-height: 70%`, the modern
   card's proportion, and an inline style can only be beaten by `!important`.
   `object-fit: contain` stays inline, so a wide symbol letterboxes rather than
   stretching -- on an AAC board the picture carries the meaning. */
.md-board-detail-grid--basic .md-board-detail-symbol-card__image .symbol {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* EMPTY tiles. The modern card marks an empty slot with a repeating dot texture over a
   navy wash (`!important`), a board-detail affordance that -- on a board with no labels
   yet -- is the only thing on screen and so dominates the whole preview.
   Classic has no such treatment: `.button.empty` is `visibility: hidden` (app.scss
   ~9639), i.e. board-alt does not draw empty buttons AT ALL. THAT IS DELIBERATELY NOT
   COPIED: these cells are the builder's click and drop targets, so hiding them would
   make the page unusable in Basic view to win a cosmetic point. A flat, quiet tile is
   the honest compromise. */
body.ll-view-basic .new-board-mockup-wrap .md-board-detail-symbol-card--empty {
  background: rgba(27, 54, 93, 0.035) !important;
  /* A BLANK SLOT IS NOT A BUTTON YET, and the border is what says so. A real tile in this
     view carries `2px solid var(--btn-bg)` -- its own colour, filled in -- so a blank one
     takes the same WEIGHT but a broken line: the dotted-vs-solid contrast now carries the
     whole signal on its own (thickened from 1px on request -- at 1px the dashes were too
     faint to read as a deliberate placeholder on the dark stage).
     Alpha lifted to 0.38 with it: a 2px line at 0.3 looked washed rather than dotted.
     Still deliberately restrained -- every cell on a new board is blank, so a loud dotted
     grid would dominate the page and fight the tiles that do get filled in. */
  border: 2px dotted rgba(255, 255, 255, 0.38) !important;
}

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

/* 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. */
/* 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 .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__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, centred on the wizard's grid-size step.
   THIS RULE WAS `.nb-section__header-inline .nb-section__header-dimensions`, pinning
   the group to the TOP-RIGHT of the Basics header with `margin-left: auto` +
   `align-self: flex-start`, which is where it used to live. The wizard moved it out of
   that header and into step 2 — it is a child of `.nb-wizard__step--grid` now, a
   SIBLING of `.nb-section__header-inline` — so that selector stopped matching anything
   and the group fell back to the shared `.new-board-dimensions { justify-content:
   flex-start }`, hard against the left edge. Re-pointed at where the element actually
   is and centred, so it sits over the grid picker below, which centres itself.
   Its narrow-width companion rule went with it: that one existed only to centre the
   group when the header wrapped, which is now the behaviour at every width.
   SCOPED TO THE VARIANT CLASS, not the shared `.new-board-dimensions` base — that base
   is also the legacy new-board.hbs steppers row, which is not moving. */
.nb-wizard__step--grid .nb-section__header-dimensions {
  justify-content: center;
}

/* ---- Grid-size picker (components/grid-size-picker) ---------------------------
   ALWAYS ON SCREEN, as the content of the wizard's grid-size step -- it is no longer
   a popover behind a toggle, so the toggle, its chevron and the fixed-position /
   portal treatment of the panel are all gone with it (see the component). It takes a
   full row of the wrapping `.new-board-dimensions` flex container so it sits under
   the Rows/Cols steppers rather than squeezing in beside them. */
.nb-grid-picker {
  display: flex;
  justify-content: center;
  /* Own row in the wrapping flex parent, under the steppers. */
  flex: 1 0 100%;
  margin-top: 4px;
}

/* In normal flow now, so nothing needs to escape the card's `overflow: hidden` and
   there is no JS placement: a plain inline card. */
.nb-grid-picker__panel {
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(27, 54, 93, 0.1), 0 2px 6px rgba(27, 54, 93, 0.06);
}

/* Shown only above the ceiling. Amber rather than red: going over is allowed, so this is
   a caveat, not an error -- it must not read as "you cannot do that". Sits above the grid
   so it is seen before the shape it is describing. */
.nb-grid-picker__notice {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(214, 158, 46, 0.12);
  border: 1px solid rgba(214, 158, 46, 0.3);
  color: #7a5a12;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 312px;
}

.nb-grid-picker__grid {
  display: grid;
  grid-template-columns: repeat(14, 18px);
  gap: 3px;
}

/* Keeps the ARIA grid > row > gridcell structure while letting all 225 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: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  padding: 0;
  border: 1px solid rgba(27, 54, 93, 0.16);
  border-radius: 3px;
  background: rgba(27, 54, 93, 0.04);
  cursor: pointer;
  /* No transition: sweeping the pointer repaints up to 225 cells at once, and a
     per-cell fade turns that into visible lag. */
}

/* Glass: a white sheen falling off over the top half of the cell, over the verdigris
   fill, with an inset light edge above and a shadow line below so each selected cell
   reads as a rounded piece of glass rather than a flat swatch. The sheen is a
   separate gradient layer, not a lightened fill, so the verdigris underneath keeps
   its AA-checked value. */
.nb-grid-picker__cell--on {
  border-color: #1A7B7A;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 62%), linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%), #2A9D8F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(27, 54, 93, 0.22), 0 1px 2px rgba(27, 54, 93, 0.18);
}

.nb-grid-picker__cell:focus-visible {
  outline: 2px solid #1A7B7A;
  outline-offset: 1px;
}

/* Just the live readout now. Cancel / OK went with the popover -- with the panel
   always on screen there was nothing to dismiss and nothing staged to confirm. */
.nb-grid-picker__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  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;
}

/* Narrow: shrink the cells so 15 columns still fit a phone. */
@media (max-width: 640px) {
  .nb-grid-picker__grid {
    grid-template-columns: repeat(14, 14px);
    gap: 2px;
  }
  .nb-grid-picker__cell {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    max-width: 14px;
    max-height: 14px;
  }
}
.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__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__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;
}

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

/* 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-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--speak-as-button .md-card__status,
.md-grid--layout-gentle .md-card--boards .md-card__sub {
  font-size: 18px !important;
}

/* Create a Board / Edit Dashboard: 2px smaller (2026-10-10, see their title rule). */
.md-grid .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
  font-size: 16px !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;
  }
}
/* 15px — secondary metadata (WCAG 3:1 for small text OK with navy) */
/* 16px — label readability */
/* 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;
}

/* HOME-BOARD GLYPH (2026-10-09) — the green home mark that replaced the "HOME BOARD" pills.
   Two selectors, one treatment: BoardIcon draws `.board-icon__home-glyph` inside its `.name`
   (boards page + board picker), the home-page strip draws `.md-strip__home-glyph` inside its
   `.md-strip__label`. Both sit at the START of the name, so they are inline-flex with a small
   trailing gap rather than positioned chrome.
   SOLID, not an outline, and sized ABOVE the name's own type (requested 2026-10-09: filled,
   larger, more prominent). A filled shape at this size reads as a mark rather than as a tiny
   piece of line art, which is what the stroked 14px version looked like beside the title.
   $brand-verdigris-aa, not $brand-verdigris: this is a non-text indicator and so needs 3:1
   (WCAG 1.4.11), and the -aa token is the one measured at 5.05:1 on white. A solid fill is the
   favourable case for that floor — the stroked version only ever met it on its 2px strokes. It
   also keeps the mark in the same verdigris family as the home tile's existing halo.
   `vertical-align` + `flex: 0 0 auto` so a long board name that wraps or ellipsises cannot
   squeeze or drag the glyph out of line. */
.board-icon__home-glyph,
.md-strip__home-glyph {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 5px;
  vertical-align: -3px;
  color: #1A7B7A;
}

/* 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. */
/* 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-card--boards__compact-grid {
  /* NO TOP MARGIN, AND EQUAL PADDING TOP AND BOTTOM (requested 2026-10-10: "boards div md-strip,
     remove the top margin, and make the top padding match the bottom padding"), 8px each. The board
     row here was the `.md-strip` until later the same day, when it became the Boards page's compact
     cards (authenticated-view.hbs); the spacing request carried over to the new container. */
  margin-top: 0 !important;
  padding: 8px 0 !important;
  /* Takes the space left under the header. At 1024px and below the card is capped at 400px and this
     list scrolls its rows when they need more (the media rule after this one); above 1024px the card
     grows to fit and nothing scrolls. `min-height: 0` lets a flex child shrink below its content. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* 8px BETWEEN THE BOARDS; TWO COLUMNS ABOVE 900px, THREE ABOVE 1024px (requested 2026-10-10).
     The Boards page's own compact list (_board_picker.scss, `.ll-boards-grid--compact`) stays
     1-up then 2-up from 1024px; this card is wider than one of that page's columns, so it gets
     its own counts. Same specificity as that rule and emitted after it, so no `!important`.
     900px and below keep the shared single column.
     `display: grid` IS THIS RULE'S TO SET: the shared compact rule only shapes a grid, and on the
     Boards page the grid itself comes from that page's own class, which this card does not carry.
     Without it the container was a block, so neither the columns nor the gap applied (measured:
     `display: block`, rows touching). */
  display: grid;
  gap: 8px;
}

@media (min-width: 901px) and (max-width: 1024px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid {
    overflow-y: auto !important;
  }
}
@media (min-width: 901px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* FULL-SIZE CARDS: AT MOST 3 PER ROW ABOVE 1024px, NEVER WIDER THAN THE CARD (requested 2026-10-10:
   "make the amount of full size boards shown on the home page 3 boards (so they don't exceed the
   width of their div)"). The Boards page's grid is a wrapping flex row of fixed 280px cards
   (`ub-boards-page__board-grid`), which puts as many on a row as fit; here it is three columns of
   at most 280px, centred, so 4 or 5 boards make a row of 3 and a row of the rest, and on a narrower
   card the three shrink rather than overflow. `!important` on `display` and the holder width only
   because the Boards page rule sets them that way. */
/* ONE OF THE TWO LISTS BY WIDTH (requested 2026-10-10: "on 1024px and smaller, we need to keep the
   board compressed buttons in the layout they were"). With 5 or fewer boards the template renders the
   full-size cards and the compact rows (`--narrow-only`): the cards above 1024px, the rows below. */
@media (min-width: 1025px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid--narrow-only {
    display: none;
  }
}
@media (max-width: 1024px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__full-grid {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  /* As many columns as boards, up to 3, so one or two cards sit centred rather than in the
     left-hand tracks of an empty three-column row. */
  .md-grid--dashboard .md-card--boards .md-card--boards__full-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 280px);
    justify-content: center;
    /* No top/bottom padding (the compact list's 8px): a row of full-size cards is ~275px and the
       400px-capped card leaves 277px for it, so the 16px of padding made a single row scroll and
       cut off the cards' bottom edges (measured with 2 boards at 1440). */
    padding: 0 !important;
  }
  .md-grid--dashboard .md-card--boards .md-card--boards__full-grid:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 280px));
  }
  .md-grid--dashboard .md-card--boards .md-card--boards__full-grid:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 280px));
  }
  .md-grid--dashboard .md-card--boards .md-card--boards__full-grid > .simple_board_holder {
    width: auto !important;
    max-width: 100%;
  }
}
/* UP TO 6 BOARDS AT 1024px AND BELOW (requested 2026-10-10: up to 12 on full-size screens, 6 on
   smaller ones, Crisis Vocabulary counted). The list is built for 12 (utils/preview-boards.js, Crisis
   last); here the boards past the fifth are hidden and Crisis is kept, so it is 5 + Crisis = 6. When
   Crisis is the HOME board it leads the list instead, so the sixth tile is kept too (the last
   `:not()`), still 6. A list of 5 or fewer is unaffected, so the full-size cards
   (`md-card--boards__full-grid`) never lose one. */
@media (max-width: 1024px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid > .simple_board_holder:nth-child(n+6):not(.md-card--boards__item--crisis):not(.md-card--boards__item--crisis:first-child ~ :nth-child(6)) {
    display: none;
  }
}
/* THREE AT 900px AND BELOW (requested 2026-10-11: "only show 3 compact board cards on the home page
   (and don't allow scrolling in the boards div for the boards)"). Same counting as the rule above:
   Crisis is kept and counts, so it is two boards and Crisis, or the first three when Crisis is the
   home board and leads. The card has no height cap here and the list does not scroll. */
@media (max-width: 900px) {
  .md-grid--dashboard .md-card--boards .md-card--boards__compact-grid > .simple_board_holder:nth-child(n+3):not(.md-card--boards__item--crisis):not(.md-card--boards__item--crisis:first-child ~ :nth-child(3)) {
    display: none;
  }
}
.md-grid--dashboard:not(.md-grid--layout-focused) .md-card--boards .md-btn--wide {
  /* ON THE HEADER ROW, BESIDE CREATE A BOARD (2026-10-10). It used to sit centred under the board
     strip (margin-top 24px, auto side margins); it now lives in the header grid, which places it, so
     it carries no margins of its own. Requested in two steps: "move View All boards up to the right
     of Create a Board", then "same padding and height as create a board ... and vertically align it
     like the create a board button": so Create a Board's own metrics (`.md-btn--pill` padding and
     the 14px / 6px overrides in the pill carve-out below) and the header's centre alignment.
     NOT FOCUSED (`:not(.md-grid--layout-focused)`): Focused positions this button absolutely at the
     card's top-right with its own padding and font, and must keep them — measured, the 14px here
     had shrunk Focused's button from 181px to 164px wide before this was scoped. */
  width: fit-content !important;
  margin: 0 !important;
  align-self: center !important;
  padding: 6px calc(12px + 0.25rem) !important;
  font-size: 14px !important;
  min-height: 32px !important; /* 32px tall (requested 2026-10-13), matching Focused */
  /* Gentle View All stays BOLD (requested 2026-10-13, reverting the un-bold); only Focused's is 400. */
}

.md-grid--dashboard .md-card--extras,
.md-grid--dashboard .md-card--badge-action {
  /* Match the Speak Mode card's padding (12px 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;
  /* 12px top and bottom, matching Speak Mode (requested 2026-10-10; was 20px). Focused's small
     action buttons keep their own 9px from `.md-grid--layout-focused ... --badge-action`. */
  padding: 12px 32px !important;
  /* 100px (requested 2026-10-10; was 180px). A floor, not a height: a card grows past it when
     its content needs more. */
  min-height: 100px !important;
}

/* SLEEKER THAN THE TWO MAIN CARDS (requested 2026-10-10): 8px top and bottom and 24px sides,
   against Speak / Extras' 12px / 32px. Focused sets its own 9px on these at higher specificity. */
.md-grid--dashboard .md-card--badge-action {
  padding: 8px 24px !important;
}

/* HALF THE SIDE PADDING AT 1200 AND BELOW (requested 2026-09-21, Gentle): "on 1200px and
   smaller reduce the l/r padding of these cards by half" -- 32px -> 16px. The vertical padding
   is untouched; only the left/right were named, and they are what squeezes the icon and title
   together as the card narrows.
   A sibling rule rather than a change to the padding above, because that declaration is the
   value from 1201 up and both are wanted. `body:not(.ll-layout-focused)` scopes it to the view
   that asked and also supplies the specificity needed to beat the `!important` above. */
@media (max-width: 1200px) {
  body:not(.ll-layout-focused) .md-grid--dashboard .md-card--extras,
  body:not(.ll-layout-focused) .md-grid--dashboard .md-card--badge-action {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Dashboard home only: Boards card – larger previews for visual prominence */
/* 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. */
/* 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. */
/* ── 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. */
/* (The .md-thumb--a..f board-strip thumbnail tints and the orphaned strip-trimming comment blocks
   that stood here were removed 2026-10-14: the boards strip was refactored to the compact-grid +
   BoardIcon system, so nothing renders .md-thumb--* any more; its only writer, the thumbClass
   assignment in authenticated-view.js#previewBoards, is gone too.) */
/* --- 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-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-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__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__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__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);
}

/* --- 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;
  /* FADED (requested 2026-10-10: "place a higher transparency on the image that acts as its
     background (so it looks more faded)"). Decoration only — the element is aria-hidden and sits
     under the head (z-index 0) — so lowering it costs no contrast on the card's text. */
  opacity: 0.45 !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-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 ---------- */
/* 16px */
/* 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).
   MODERN ONLY since 2026-10-01: in Basic these pages carry the side rail, whose
   own 80px inset already clears the navbar at every width (_classic-home.scss),
   and this extra 26px moved the rail and the page at 1024 (requested: "content
   should not shift at 1024px and below").
   FROM 900, NOT 1024 (2026-10-01, requested: "hold the full-size spacing"): in
   Modern the workspace keeps its 40px top margin down to 901, so this clearance is
   only needed where that margin goes (it moved the Focused Boards and Reports pages
   26px at 1024). */
@media (max-width: 900px) {
  body:not(.ll-view-basic) #within_ember #content.home-page,
  body:not(.ll-view-basic) #within_ember #content.boards-page,
  body:not(.ll-view-basic) #within_ember #content.stats-page,
  body:not(.ll-view-basic) #within_ember #content.extras-page,
  body:not(.ll-view-basic) #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(195, 162, 92, 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__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.). */
/* 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 } */
/* 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;
}

/* 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__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;
  /* TWO ROWS: the period select, then the compare button beneath it (requested 2026-09-24,
     "make these show on two separate rows"). `wrap` is only half of it -- the two fit side by
     side at every width this page is used at, so wrapping alone would never trigger; the break
     is forced by the button's 100% basis further down.
     The "Report period:" label is a SIBLING of this container, not a child, so leaving the select
     on the first line keeps it reading as one phrase ("Report period: Last 2 Months") with the
     button underneath. Making this a column instead would have dropped the select below the
     label and stranded the label beside a two-line block. */
  flex-wrap: wrap;
  /* 10px all round became a 10px ROW gap the moment these stacked, which reads as a loose pair
     rather than one control group (requested: "make the gap between these smaller"). The COLUMN
     gap still separates items sharing a line and is left at 10px; only the row gap shrinks. */
  gap: 4px 10px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* THE COMPARE BUTTON SITS LEFT OF THE SELECT, ON ONE ROW (requested 2026-09-24: "move the
   Compare Periods button to the left of the period selection dropdown").
   THIS REPLACES A TWO-ROW ARRANGEMENT. The pair was briefly stacked, with a zero-height
   `::after` spacer forcing the break, because the ask then was for separate rows -- that spacer
   and the 100%-basis experiment before it are both gone. `order` is all that is left: the button
   renders AFTER the select in the DOM (components/stats/data-filter.hbs) and is painted before
   it, which keeps the markup's own reading order -- the control you are choosing a value for
   comes first in the document.
   The pair stays right-aligned as a unit; only their order within it changed. */
.md-stats-filter__period-controls > .md-stats-filter__compare {
  order: 1;
}

.md-stats-filter__period-controls > .md-stats-filter__period-wrap {
  order: 2;
  /* Still no grow: alone or paired, this keeps its content width rather than stretching. */
  flex: 0 1 auto;
}

/* THE "REPORT PERIOD:" LABEL IS HIDDEN, NOT DELETED (2026-09-24, requested: "remove the report
   period: label").
   IT CARRIES THE SELECT'S ACCESSIBLE NAME. `components/stats/period-select.hbs` sets
   `aria-labelledby={{this.labelId}}` pointing at `#report-period-filter-label`, and its
   `aria-label` fallback only applies when that id is ABSENT -- so removing the span from the
   DOM would leave `aria-labelledby` dangling and the control with no name at all, on a page
   whose users include screen-reader and switch users. Taking it off screen keeps the
   association intact and satisfies the request: nothing is visible.
   `aac-sr-only` is available here because this is app.scss, where it is defined -- the partials
   cannot see it (see the notes in _classic-home.scss / _focused-view.scss). */
.md-stats-filter__period-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* THE TWO CONTROLS SIT RIGHT (requested alongside the label removal). With the label out of
   flow the row has one in-flow child, so the alignment has to move to the row AND to the
   controls: the row places the block, `flex-end` inside places the select on the first line
   against the same edge the compare button already sits on. */
.md-stats-filter__row--period-actions {
  align-items: flex-start;
  justify-content: flex-end;
}

.md-stats-filter__period-controls {
  justify-content: flex-end;
}

/* 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.
     GROW IS 0 AS OF 2026-09-24. It was `1 1 auto`, which was right while this sat on ONE row
     beside the compare button and needed to take up the slack. The button now moves to a second
     row (see `.md-stats-filter__period-controls`), which leaves the select alone on its line --
     and a grow of 1 stretched it from a 149px pill to the container's full 436px. Edited here
     rather than overridden nearby: this is the declaration that owns the value, and the earlier
     attempt to answer it from `.md-stats-filter__period-controls >` lost on source order at
     equal specificity. Shrink stays on, so it still gives way on a narrow viewport. */
  flex: 0 1 auto;
  min-width: 92px;
}

/* SUPERSEDED IN PART 2026-09-24: the compare action now sits on its OWN row, by request. The
   label and the period select still share the first line and still read as one phrase
   ("Report period: Last 2 Months"); it is only the compare button that moved down. The shrink
   behaviour described below still governs that first line.
   Original note follows.
   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__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 .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 .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) */
/* THE COMPARE ROW'S PERIOD FIELDS SIZE TO THEIR CONTENT (2026-09-24, requested: "these fields
   are squished -> they need to stretch in size to fit their content").
   THE ROW HAD THE SPACE ALL ALONG. Measured at 1280: the row is 970px with 770px of content box,
   and its three columns came to 656px -- ~98px spare -- yet "Last 2 Months" still wrapped onto
   two lines inside a 149px trigger. The trigger is `width: 100%` of its wrap, so its max-content
   contribution comes from the TEXT; with the label free to wrap, max-content collapsed to
   roughly one word and the column had no reason to grow into the space beside it.
   `white-space: nowrap` is what makes the intrinsic width the whole label, so the wrap, the
   column and the field all stretch to fit -- no widths invented here, just the measurement the
   flexbox was already doing given an honest content size.
   SCOPED TO THE COMPARE ROW. The same trigger appears in the single-period filter bar, which is
   laid out differently (`.md-stats-filter__period-bar` sets its own 44px height and floor) and
   was not reported. */
.md-stats-compare-row--filter .md-stats-period-select__trigger,
.md-stats-compare-row--filter .md-stats-period-select__trigger * {
  white-space: nowrap;
}

.md-stats-compare-row--filter .md-stats-filter__period-wrap,
.md-stats-compare-row--filter .md-stats-period-select {
  width: auto;
}

.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;
  /* THE INSET IS THE SQUEEZE (fixed 2026-09-24). `10rem` is 100px at this app's 10px root, so
     this row hands 200px of its width to side padding. At 1280 that is fine -- it keeps the two
     period cards from sprawling across a 970px row. At 1024 the row is only 725px, the padding
     takes 200 of it and the 320px illustration takes another 320, leaving 110px and 124px for
     the two PERIOD CARDS -- which is what wrapped "Last 2 Months" onto three lines and was
     reported as the contents being squished. See the breakpoint below. */
  padding-left: 10rem;
  padding-right: 10rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

/* ...AND THE INSET COMES OFF AT 1024 AND BELOW. A `clamp()` was tried first and is the wrong
   tool here: percentage and viewport units both measure the VIEWPORT, while this row has already
   been inset by the app shell and the workspace, so at a 1024px viewport the row is 725px and
   `8vw` still spent 164px on padding. A breakpoint keyed to the same 1024 the request named is
   honest about what it does, and leaves every wider width byte-identical.
   16px matches the workspace's own narrow-width gutter. It gives the row 693px of content, which
   is enough for both period cards at their natural width plus the full 320px illustration --
   i.e. at 1024 the row now lays out exactly as it does at 1280, which is what "not squished"
   means here. */
@media (max-width: 1024px) {
  .md-stats-compare-row--filter {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 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;
}

/* THE DECORATION GIVES WAY BEFORE THE CONTROLS DO (2026-09-24, requested: "when user clicks
   compare with another period on 1024px and smaller, the period and dropdown contents are
   squished").
   IT WAS THE WRONG WAY ROUND. This column was `flex: 0 0 auto` around a 320px illustration, so
   it never shrank, while the two FILTER groups either side are `flex: 1 1 0; min-width: 0` and
   absorbed the whole squeeze. Measured at 1024: a 725px row spent 328px on the picture and left
   the Period pills and their selects 110px and 124px, which is what wrapped "Last 2 Months"
   onto three lines.
   `0 1 auto` + `min-width: 0` lets the picture shrink, and `width: 100%` on the img is what
   makes it follow the column down (with `width: auto` it kept its intrinsic size and simply
   overflowed). The 320px cap still stops it growing past its natural size on a wide row, so
   desktop is unchanged -- verified at 1280.
   The image is `alt=""` inside an `aria-hidden` wrapper (templates/user/stats.hbs), i.e.
   decorative, which is what makes it the right thing to yield. */
.md-stats-compare-filter-group__between {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 4px;
}

.md-stats-compare-filter-group__between-img {
  max-width: 320px;
  max-height: 192px;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* 30% LESS SATURATED (requested 2026-09-24). `saturate(0.7)` keeps 70% of the original
     chroma, which is what "desaturate by 30%" asks for -- not `saturate(30%)`, which would
     strip 70% of it. The artwork is decorative (alt="" inside an aria-hidden wrapper), and
     muting it lets the two period controls either side read as the page's subject. A filter
     rather than a new asset: the source PNG is shared and re-exporting it would change it
     everywhere it is used. */
  filter: saturate(0.7);
}

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

/* Boards tab: no card container (md-boards-page), content ~20% larger */
/* Boards page md-stat: same styling as home page boards card */
/* ---------- Supervisor view (Supervisors tab: only supervisors card expanded, full list) ---------- */
.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;
}

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

/* HALF THAT BREATHING ROOM AT 900 AND BELOW (2026-09-24, "move stats page content up 64px").
   The comment above is the reason this is the right box: the padding lives on the hero because
   the hero's own padding is otherwise 0 and a title margin would collapse through its top edge.
   Below 901 the rail sits in flow above this hero, so the space it opens is stacked on the
   rail's own margin rather than separating the title from the chrome. 12 of the 24 completes
   the 64 the shell's 52 starts, and the title keeps its 16px lead untouched.
   `.md-shell--stats` NARROWS THE SCOPE: `--reports-view` is also on user.hbs, user/boards.hbs
   and the dashboard's authenticated view, none of which were asked to move. (The hero class
   itself is Reports-only, so this is belt and braces -- and it is what makes the selector
   outweigh the shorthand above, which it must, being the same property.) */
@media (max-width: 900px) {
  .md-shell--reports-view.md-shell--stats .md-hero--reports-dashboard {
    padding-top: 12px !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-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__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: var(--dn-extras-grid-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: var(--dn-extras-card-pad, 18px) !important;
  border-radius: var(--md-r-lg) !important;
  /* SAME MATERIAL AS THE CASELOAD "ADDITIONAL ACTIONS" TILES (requested 2026-09-22).
     Included from the shared mixin rather than copied: `caseload-action-surface` is what
     `.md-caseload__action--tile` itself uses (_caseload.scss:46), so the two cannot drift.
     It supplies border, radius, background, shadow and the transition, which is why the
     three declarations that were here — a white->slate gradient, `var(--md-line)` border and
     a heavier glassy shadow stack — are gone rather than left to fight it.
     Reachable because app.scss already `@use`s caseload (line 9); the namespace prefix is
     required since that @use has no `as *`.
     The radius is passed through so the card keeps its own `--md-r-lg`, which is larger than
     the tiles' 12px — matching the MATERIAL was the request, not shrinking the card. */
  border: 1px solid rgba(76, 134, 216, 0.2);
  border-radius: var(--md-r-lg);
  background: radial-gradient(125% 125% at 26% 18%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(140deg, white 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;
  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;
}

/* Hover/press also come from the tile mixins, so the whole interaction reads as one
   material — the previous hover lifted 2px with a much heavier shadow than the tiles use. */
.md-extras-card:hover,
.md-extras-card:focus-visible {
  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-extras-card: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);
}

/* FOCUSED VIEW — same tile material, darkened, so the extras cards still read as the caseload
   tiles' surface rather than a different one. Through the mixin's `$darken` rather than a
   competing `background`, which is the drift that mixin exists to stop.

   20% -> 10% ON 2026-09-23 (requested: "on focused view extras -> lighten the button gradients
   on their bgs"). At 20% the ramp computed to #CCCCCC -> #B3BCCE -> #AAB6C7, which is a long way
   from the white-to-pale-slate material the tiles are built on -- the cards read as grey rather
   than as the same surface a shade deeper. Halved rather than dropped to 0: the step exists so
   Focused's cards sit a little heavier than Gentle's, and removing it would make the two
   layouts identical here, which is not what was asked. 10% computes to roughly
   #E6E6E6 -> #D4D8E1 -> #CBD0D9.
   THE NUMBER IS THE ONLY THING TO CHANGE if it wants to go lighter or darker again -- the
   gradient itself lives in the mixin, and editing a colour here would fork it.

   IN app.scss, NOT _focused-view.scss, and that is load-bearing. Putting it there meant adding
   `@use "caseload"` to that partial, and Sass emits a module where it is FIRST pulled in — which
   moved the entire caseload stylesheet from line ~5442 to ~3798 and pushed focused-view from
   ~3738 to ~7757, i.e. it silently swapped the emission order of two whole stylesheets. Any
   rule where those two tie on specificity would have flipped. app.scss already `@use`s caseload
   and is emitted last, so the include costs no reordering here.

   `.md-shell--layout-focused` is a focused-only class (see the extras workspace rule in
   _focused-view.scss), so this cannot reach Gentle. (0,3,0) against the base rule's (0,1,0),
   so it wins on weight without !important. */
.md-shell--layout-focused.md-shell--extras-view .md-extras-card {
  border: 1px solid rgba(76, 134, 216, 0.2);
  border-radius: var(--md-r-lg);
  background: radial-gradient(125% 125% at 26% 18%, rgba(229.5, 229.5, 229.5, 0.95), transparent 60%), linear-gradient(140deg, rgb(229.5, 229.5, 229.5) 0%, rgb(208.7357142857, 214.1785714286, 225.0642857143) 52%, rgb(198.0875, 205.9375, 217.7125) 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;
  /* THE ROOMS TILE'S BACKGROUND (requested 2026-09-29: "make their bg the same as the rooms button
     bgs"): the value of `body.ll-layout-focused .md-card--rooms .md-room-card` in
     _focused-view.scss, a white-to-pale-slate diagonal with a soft top-left highlight. The
     mixin above still gives the radius, border and shadow; this replaces only its ramp. */
  background: radial-gradient(120% 140% at 14% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 34%, transparent 60%), linear-gradient(155deg, #FDFDFE 0%, #D2D9E4 100%);
}

.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: var(--dn-extras-head-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: var(--dn-extras-icon, 52px) !important;
  height: var(--dn-extras-icon, 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;
}

/* TWO-TONE ICON ACCENTS — WCAG 1.4.11 NON-TEXT CONTRAST (fixed 2026-09-22).
   The extras icons are two-tone: a slate outline plus one accent stroke carrying that card's
   identity. Two of those accents are pale yellows baked into the SVG markup, and both failed
   the 3:1 minimum for meaningful graphics against the card surface — MEASURED against all
   three stops of the ramp, worst case:

       #F2B95A amber   1.08:1 (Focused)   1.41:1 (Gentle)
       #C9AD7A tan     1.05:1 (Focused)   1.72:1 (Gentle)

   Replaced with the darkest-preserving variants: same hue (38deg / 39deg) and the same
   saturation — saturation could not be raised, so lightness was the only lever — giving

       #82550A         3.14:1 (Focused)   5.15:1 (Gentle)
       #735B2F         3.13:1 (Focused)   5.13:1 (Gentle)

   NOT SCOPED TO FOCUSED VIEW, although the darkened card surface is what surfaced it: both
   colours already failed in Gentle, so scoping the fix there would have left a known failure
   standing in the other view for the same icons. The new values pass comfortably in both.

   FIXED IN CSS, NOT IN THE SVG MARKUP, matching how the slate outline is already handled
   (`[stroke="#46505F"]` -> #1F2A44 in _focused-view.scss): the attribute selector keeps the
   source SVGs untouched and keeps every colour decision for these icons in the stylesheet. */
/* SELF *AND* DESCENDANT. Several of these icons declare their accent on the <svg> ROOT rather
   than on a child path — Basic Access (offline_boards) is `<svg class="md-extras-card__svg-icon"
   stroke="#C9AD7A">` with an unstroked <path> inside. A descendant-only selector cannot reach
   the element that carries the class, so that card kept its failing pale tan while the cards
   whose accent sits on a child path were corrected. Both forms are listed for each colour. */
.md-extras-card__svg-icon[stroke="#F2B95A"],
.md-extras-card__svg-icon [stroke="#F2B95A"] {
  stroke: #82550A !important;
}

.md-extras-card__svg-icon[stroke="#C9AD7A"],
.md-extras-card__svg-icon [stroke="#C9AD7A"] {
  stroke: #735B2F !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 var(--dn-extras-title-gap, 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: var(--dn-extras-title-gap, 4px) 0 0 !important;
  font-size: 14px !important;
  color: var(--md-muted) !important;
  line-height: 1.35 !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. */
  /* (The shell's top padding moved to the <=900px block after this one, 2026-10-01; see there.) */
  /* 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 {
    /* `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 {
    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. */
}
/* THE PAGE KEEPS ITS FULL-SIZE TOP SPACING DOWN TO 901px (2026-10-01, requested: "hold the
   full-size spacing" -- in Modern the page content jumped at 1024 and again at 950: the shell's
   3rem top padding and the workspace's 40px top margin went to 0 at 1024, and the workspace's
   top padding stepped 40 -> 52 at 950, measured as 12-70px moves on the account, org, dashboard
   and Basic Access pages). These three top values were in the <=1024 and <=950 blocks; they now
   start at 900, where the page changes layout anyway (Basic's rail stacks there). Everything else
   in those blocks -- side padding, radius, sizing -- keeps its own breakpoint.
   The create-board shell keeps its 1rem from the <=1024 block. The <=820 block below still sets
   its own padding, so phones are unchanged. */
@media (max-width: 900px) {
  .md-shell:not(.md-shell--create-board-new) {
    padding-top: 0 !important;
  }
  .md-workspace {
    margin-top: 0 !important;
    padding-top: calc(32px + 2rem) !important;
  }
}
@media (max-width: 950px) {
  /* Modern dashboard: single-column layout under 945px; workspace expands to content, #content scrolls vertically */
  .md-pillnav {
    margin-top: 2rem !important;
  }
  #index_view {
    padding-bottom: 0 !important;
  }
  /* 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: 100vh !important;
    /* 100vh is a FLOOR, not a cap (2026-10-12): with flex 0 0 auto the shell still grows with tall content, and a short page's background reaches the bottom (was `auto`, which stopped it partway at 901-950px). */
    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-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-right: 16px !important;
    padding-bottom: calc(24px - 9rem) !important;
    padding-left: 16px !important;
    /* Top margin and padding: the <=900px block above (2026-10-01). */
    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;
    /* ROWS THAT WRAP, not a column (2026-10-10, requested: two buttons per row down to 769px, one
       per row at 768px and below). Full-width cards keep `width: 100%` (the `.md-grid .md-card`
       rule in this block) and take a row each; the button cards take half a row (below). `order`
       is unchanged, so the pairs are Speak + Extras and Create a Board + Edit Dashboard, as on
       desktop. */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .md-grid.md-grid--dashboard.md-grid--layout-gentle > .md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle > .md-card--as-button {
    width: calc(50% - 8px) !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--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;
  }
  /* (Its 20px top margin went on 2026-10-10: View All Boards is on the header row now, not under
     the strip; see `.md-grid--dashboard .md-card--boards .md-btn--wide`.) */
}
/* ≤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). This list used to carry three
     `.md-pillnav--user` selectors as well, to out-specify the
     account-page active-pill rule at (0,4,1); both that rule and these
     went with the account pill row on 2026-09-21.

     `: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) {
    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--reports-view .md-grid {
    grid-template-areas: "reports" !important;
    grid-template-rows: minmax(60vh, auto) !important;
  }
  .md-pillnav {
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }
}
/* 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-dropdown:not(.md-pillnav-dropdown--fit) {
    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;
  }
}
/* THE DROPDOWN'S OWN PARTS, AT EVERY WIDTH (2026-10-02). Trigger, label, chevron, list, icon and option were
   styled inside the <=550px block above, so a pill dropdown shown any wider rendered unstyled. The
   Basic org tabs' dropdown (`--fit`, templates/organization.hbs) shows whenever its tabs do not fit,
   at any width. Moved out unchanged: every other pill dropdown is still hidden above its own breakpoint,
   so nothing else looks different. The container rule above (hide, width) stays at <=550px. */
.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__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;
  }
  /* Collapsed primary-nav width, 52% (was 40%, 2026-09-02 — requested wider).
     THREE rules carry this value and they must move together, because which one wins
     depends on the user type: this one takes non-org users (it outranks the
     `--user` rule below on specificity), `--org-menu` covers org managers at <=550,
     and `--user` is what an ORG manager actually lands on at <=460 (equal specificity
     to --org-menu, later in source). Leaving any at 40% gives one user type a
     narrower pill than the others for no reason. */
  .md-pillnav-dropdown:not(.md-pillnav-dropdown--org-menu) {
    display: block !important;
    width: 52% !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;
  }
}
/* MODERN PRIMARY NAV (UserPillNav) COLLAPSES AT <=640px FOR EVERY USER (requested 2026-10-05;
   550px first, moved to 640px the same day).
   This block used to be `.md-pillnav--org-menu` / `.md-pillnav-dropdown--org-menu`, org managers
   only, and its dropdown half NEVER WON: the <=550px block above hides
   `.md-pillnav-dropdown:not(.md-pillnav-dropdown--fit)` at (0,2,0) !important, which outranks a
   one-class (0,1,0) !important show. Measured 2026-10-05 (org manager, Focused, home and
   caseload, 461-550px and 440px): pill row hidden, dropdown hidden, NO NAV AT ALL. Two-class
   selectors fix the tie on specificity and source order. The `--primary` hooks are emitted only
   by components/user-pill-nav (modern, not Classic, which has its own tab dropdown), so the
   other `md-pillnav--dashboard` navs (system settings, board picker) are untouched.
   Non-org users collapsed at 460px (the block above, still in place for the other navs) and
   their pills wrapped between 461 and 550; this brings everyone to 640.
   `position: relative` is restated because the <=550px container rule above that supplies it
   (the anchor for the absolutely positioned option list) does not reach 551-640px. */
@media (max-width: 550px) {
  /* The old org-manager hide, kept as it was and at its old width: in Classic the same nav
     renders as `.ch-tabs` and still carries `--org-menu`, and this change is not meant to alter
     Classic. */
  .md-pillnav--org-menu {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .md-pillnav.md-pillnav--primary {
    display: none !important;
  }
  .md-pillnav-dropdown.md-pillnav-dropdown--primary {
    display: block !important;
    position: relative !important;
    width: 52% !important;
    /* No top margin (requested 2026-10-05: it sat too far below the menu above it). Was
       40px, "the original 20px + 2rem" from 2026-08-16. */
    margin: 0 auto !important;
  }
  /* NO SPACE ABOVE THE DROPDOWN (requested 2026-10-05: "too far away from the other menu
     items"). Besides the 40px top margin dropped above, two gaps stacked between the stacked
     account rail's last row and this dropdown: the rail's 20px bottom margin and the navbar's
     16px top padding (the <=900px `.ll-appshell__navbar` rule), reduced below.
     THE RAIL'S HALF IS GONE (2026-10-10): the account rail is now a dropdown placed BELOW this
     nav (the <=900px `.md-acct-rail` ordering rules), so zeroing its bottom margin no longer
     closed a gap above the nav; it pulled the page content up 20px under the account dropdown
     at 640px and below (requested: "don't have it move up"). The rail keeps its 20px here, as
     it does above 640. */
  /* 12px (requested 2026-10-10: "even it out"). Was 8px (2026-10-05, when the account rail sat above
     this nav). The dropdown is 48px against the pill row's 44px and this padding 16px above 640px,
     so 12 + 48 matches 16 + 44: the bar is 66px tall on both sides of 640px and nothing below it
     jumps when the pills become the dropdown. */
  .ll-appshell__navbar:has(> .md-pillnav-dropdown--primary) {
    padding-top: 12px;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   .md-pillnav-dropdown--user — the native <details> drawer styling.
   NAMED FOR A NAV THAT NO LONGER EXISTS. These rules were written for the
   account page's own pill row (.md-pillnav--user), retired 2026-09-21 in
   favour of the account rail. They are KEPT because the class has a second,
   live emitter: components/user-pill-nav.hbs:81 takes
   `md-pillnav-dropdown--user` deliberately "purely to inherit that details
   styling", and below 460px that drawer is the ONLY nav on Home, Boards,
   Caseload and Organizations.
   Uses native <details>/<summary>, 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. 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;
}

/* Show the dropdown drawer (centered, matching the home drawer's 40%-width
   centered geometry) at ≤460px. This was a two-part swap until 2026-09-21 —
   it also hid `.md-pillnav--user`, which no longer exists. */
@media (max-width: 460px) {
  /* The `.md-pillnav--user { display: none }` half of this swap went with the account pill row
     it hid (2026-09-21). What remains is NOT dead: `md-pillnav-dropdown--user` is ALSO emitted
     by components/user-pill-nav.hbs:81, which takes the class deliberately to inherit this
     <details> styling, and below 460px that drawer is the only nav on Home, Boards, Caseload
     and Organizations. Do not delete these rules with the rest of the --user cleanup. */
  .md-pillnav-dropdown--user {
    display: block !important;
    width: 52% !important;
    margin: 20px auto 0 !important;
  }
}
/* ─── 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) {
  /* Not the Speak-beside layout (2026-10-12): that one keeps its grid down to 901px so Speak and the
     cards beside it stay side by side, and takes this flex layout at 900px and below (next block).
     Nor the Caseload | Extras row (`md-grid--caseload-beside`, the same day), for the same reason. */
  .md-grid.md-grid--dashboard.md-grid--layout-focused:where(:not(.md-grid--speak-beside):not(.md-grid--caseload-beside)) {
    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;
  }
}
/* The Speak-beside layout takes the same flex layout at 900px and below (see the rule above). */
@media (max-width: 900px) {
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--speak-beside,
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--caseload-beside {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    transition: none !important;
  }
  /* 24px above Boards here too, matching the wider layout: the 16px gap plus 8px. Speak and Extras
     drop the hero's 6px / 10px margins here (they are 0 above 900px too), which also lines both up
     with the Boards card's edges. Their selector is heavier than the hero look rule's (0,7,0) so it
     clears those margins. */
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--speak-beside > .md-card--boards {
    margin-top: 8px !important;
  }
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--speak-beside:not(.md-grid--hero-caseload):not(.md-grid--hero-org) > .md-card.md-card--speak-focused,
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--speak-beside .md-card.md-card--extras.md-card--extras-focused.md-card--as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--caseload-beside > .md-card.md-card--caseload-focused,
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--caseload-beside > .md-card.md-card--speak-focused,
  .md-grid.md-grid--dashboard.md-grid--layout-focused.md-grid--caseload-beside .md-card.md-card--extras.md-card--extras-focused.md-card--as-button {
    margin: 0 !important;
  }
}
@media (max-width: 1024px) {
  /* 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,
  .md-grid--layout-focused > .md-card--speak-action {
    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.
     Not the Caseload | Extras row (`md-grid--caseload-beside`, 2026-10-12): it stacks at 900px and
     below, as Gentle's and the Speak row do. */
  .md-grid--layout-focused.md-grid--hero-org:not(.md-grid--caseload-beside) > .md-card--caseload-as-button,
  .md-grid--layout-focused.md-grid--hero-org:not(.md-grid--caseload-beside) > .md-card--caseload,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--speak-as-button,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--speak-action {
    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;
  }
  /* Extras is one of these action cards on Focused since 2026-10-10. */
  .md-grid--layout-focused > .md-card--extras {
    order: var(--ord-extras, 10) !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,
  .md-grid--layout-focused > .md-card--extras {
    /* 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. The org dashboard's
     Caseload | Speak pair joins them (2026-10-05): it shares their badge-action layout,
     which clips at the half width the <=1024px block above gives it. The two hero-org
     selectors carry (0,3,0) to match that half-width rule and win on source order. */
  .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,
  .md-grid--layout-focused > .md-card--extras,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--caseload-action,
  .md-grid--layout-focused.md-grid--hero-org > .md-card--speak-action {
    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;
    /* 0, not `12px auto 0` (2026-10-10, requested: "the boards button should be vertically
       aligned"). The button now sits in the header row beside "+ Create" (authenticated-view.hbs),
       not on a line of its own under it, so that top margin only dropped it 6px below Create. */
    margin: 0 !important;
  } /* "Boards" with a smaller arrow in place of "View All Boards →" (requested 2026-10-10); the two
labels are in authenticated-view.hbs. */
  .md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__view-all-full {
    display: none;
  }
  .md-grid.md-grid--layout-focused .md-card--boards .md-card--boards__view-all-short {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
}
/* The short label exists only for the rule above; everywhere else the full label shows. */
.md-card--boards__view-all-short {
  display: none;
}

.md-card--boards__view-all-arrow {
  font-size: 0.75em;
  line-height: 1;
}

/* 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--extras-focused__text,
  .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 ≤900px (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.
   900, NOT 950, since 2026-10-01: the general margin now holds down to 901
   (requested: "hold the full-size spacing"), and this moved the Focused home
   page 16px at 950. */
@media (max-width: 900px) {
  .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:where(:not(.md-card--extras-focused)).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).
   NOT FOCUSED (2026-10-05): Focused's badge-action cards keep their own 12px at every width
   (the `.md-grid--layout-focused ... .md-card__head` rule). The exclusion is wrapped in
   `:where()` so it adds no specificity: at (0,6,0) this rule would outrank the <=460px 12px
   rule below, which only wins on source order at the same (0,5,0).
   Checked by scripts/focused-action-gap-qa.mjs. */
@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:where(:not(.md-card--extras-focused)).md-card--as-button .md-card__head,
  .md-grid:where(:not(.md-grid--layout-focused)) .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:where(:not(.md-card--extras-focused)).md-card--as-button .md-card__head,
  .md-grid:where(:not(.md-grid--layout-focused)) .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. */
/* ─── 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 {
  /* A CENTRED ROW, not a block (2026-09-22). `#inner_header` already centres its children
     vertically, but this was `display: block`, so its own content sat on the text baseline at
     the TOP of a 70px box -- measured 0px above the button and 31px below it. Flex centres the
     buttons on both axes; `wrap` keeps the toolbar from overflowing when it has more controls
     than fit, which a plain flex row would not. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  text-align: center !important;
  width: 100%;
}
#within_ember.board-alt-view.edit-mode-active {
  /* THE PAINT-MODE TOGGLE ("Edit") TAKES DARK INK. It is the one button here that is not
     `btn-default`: `no_paint_mode_class` (controllers/application.js:2235) gives it `btn-info`
     while paint mode is off, and the white label the rest of the toolbar uses does not hold on
     that lighter fill. Scoped to the toggle rather than to `.btn-info` generally, so no other
     info button in the app is caught by it. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn.btn-info,
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn.btn-info .wide,
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn.btn-info .skinny {
  color: #18202C !important;
}

/* EDIT-MODE TOOLBAR BUTTONS MATCH NORMAL MODE (requested 2026-09-22).
   Measured, the two were already closer than they looked: both resolve to the same fill,
   white label, 12px radius, no border and the same shadow. What differed was SIZING -- the
   normal-mode buttons pick up `height: 36px` from `header #normal_mode .btn` and then
   `padding: 8px 7px` from the per-icon rules, and the edit toolbar gets neither because it
   lives in `#nav_header` and never inside `#normal_mode`. So this sets the geometry only.
   NO `background` OR `color` HERE ON PURPOSE: they already agree, and restating them is how
   the two toolbars would drift apart the next time the shared fill is retuned. */
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  /* SLIGHT GLASSMORPHISM (requested), the same treatment the speak/nav controls wear, via
     the shared mixin so the three toolbars cannot drift. Declared INSIDE this rule rather
     than as a later sibling because both would otherwise set `box-shadow` at identical
     specificity with `!important` and the outcome would rest on source order -- the trap
     that silently dropped the ring from every `#nav_header` control the first time round.
     Nested last, the mixin's shadow simply replaces the one above it.
     `:not(.dropdown-menu *)` keeps it off the dropdown's menu items: those sit on a white
     panel, not on the dark bar, so a white ring would be invisible on them and they are not
     controls on the bar in the first place.
     Both fills were measured against the bar: the shared btn-default fill goes from 2.93:1
     -- under the 3:1 WCAG 1.4.11 minimum for a UI boundary -- to 4.72:1 with the ring, and
     the lighter `.btn-info` paint toggle from 6.44:1 to 7.84:1. No fill is altered, so the
     toggle's dark `#18202C` ink keeps its 7.83:1. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn:not(.dropdown-menu *) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0) 100%) !important;
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .btn:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view.edit-mode-active {
  /* The grid +/- controls sit inside a dropdown as small square steppers; the padding above
     would stretch them out of their row, so they keep their own compact box. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu .btn {
  height: auto !important;
  padding: 4px 8px !important;
}

/* THE EDIT-MODE "More" DROPDOWN WEARS THE BOARD MENU'S LOOK (requested 2026-09-22).
   It is a Bootstrap `.dropdown-menu` of bare links, while normal mode's More now opens
   `.la-board-mobile-menu` -- a white rounded panel of icon+label rows. The two menus hold
   DIFFERENT items (Undo, Redo, Button Stash... versus Set as Home, Share...), so this is the
   panel's appearance being matched, not its contents shared; the markup stays a <ul>/<li>/<a>
   because those items are wired to edit actions that only exist here.
   Values are taken from `.la-board-mobile-menu` / `__item` rather than re-picked, so the two
   panels read as one component. The icons themselves were added in application.hbs. */
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu {
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(27, 54, 93, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 8px !important;
  min-width: 240px !important;
  text-align: left !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  white-space: nowrap;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li > a:hover, #within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li > a:focus-visible {
  background: rgba(27, 54, 93, 0.06) !important;
  color: #374151 !important;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li > a {
  /* The glyph sits in a fixed column so the labels line up whatever each icon's
     natural width is -- the same thing the flex `gap` does for the mobile menu, which
     uses uniform 16px SVGs rather than a glyph font. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li > a > .glyphicon {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  opacity: 0.75;
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu {
  /* Disabled rows (Undo/Redo carry `undo_class`/`redo_class` when there is nothing to
     undo) keep the layout but read as inert rather than simply looking clickable. */
}
#within_ember.board-alt-view.edit-mode-active #inner_header #nav_header .dropdown-menu > li.disabled > a {
  opacity: 0.45 !important;
}

/* ─── 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 {
  /* Interior padding on the <a class="button"> link element, for anything that flows.
     It does NOT inset the img_holder or the button-label-holder: those are absolutely
     positioned, and an absolutely positioned child's containing block is this link's PADDING
     box — the padding is inside it, not outside. Measured: with the holder pinned to 0 its
     left edge lands on the border (x=2 of a 100px button), padding notwithstanding. That is
     the intent — the symbol gets the whole band — but do not read this declaration as the
     margin around the picture, because it is not one. */
}
#within_ember.board-alt-view .board a.button {
  padding: 4px !important;
}
#within_ember.board-alt-view {
  /* SYMBOL FILLS ITS BAND, CENTRED IN IT.
     These four declarations were already written as though `.img_holder` were absolutely
     positioned — the comment above says so — but nothing ever gave it `position`, so
     `top`/`left`/`right` did nothing and only `width` applied. What actually placed the
     symbol was the inline style utils/button.js#image_holder_style writes: an
     `inline-block` with a JS `margin-top` and a JS width/height, both computed at `* 0.9`
     of the available box (controllers/board/index.js#computeHeight). That is where "down
     and right of centre, not filling" came from — the margin pushed it down, the 0.9
     shrink left it short of the edges, and the inline-block sat wherever the line box put
     it rather than centred in the band.

     Now it really is absolute, so it spans the band the label leaves and centres the
     symbol inside it. `object-fit: contain` on the image means filling the band never
     distorts artwork — a wide symbol letterboxes rather than stretching, which matters on
     an AAC board where the picture carries the meaning.

     The three offsets are 0, not 4px (2026-09-15): the symbol takes the band EDGE TO EDGE.
     The `padding: 4px` on the button above is already the gap between the border and the
     picture, so a further 4px inset here just spent a second margin out of the one part of
     the button the symbol has to itself — on a ~70px tile that is over a tenth of the
     picture. Only `--ll-symbol-band` is subtracted now, and that is the label's own
     footprint.

     `--ll-symbol-band` is the space the LABEL needs, and nothing more — it is the only
     thing subtracted from the button before the symbol gets the rest. */
}
#within_ember.board-alt-view .board a.button {
  /* Reserve the label's INK, not its box (measured on
     `marcus_williams_slp/vocal-flair-84`, 1280x729, 100x83 buttons: the label's line box
     ends 25px into the button while the label BOX runs to 36px, and the band was starting
     at 37 — twelve dead pixels between the text and the top of the picture, on a button
     whose picture only had 44 to live in).
     The box is that much taller than the text because two rules pad it and neither is ink:
     `@media (max-height: 800px)` bumps the label's height to 27px for breathing room, and
     this block adds a 0.3em descender pad below it. The symbol may sit in both — they are
     empty, the label-holder paints no background, and a descender cannot reach there.
     So the reserve is derived from the label's FONT SIZE instead: 1.25em covers the inline
     box (measured 1.17em, and 1.265 when that media rule sets line-height) and 4px is the
     holder's 2px offset plus a 2px gap under the text. One formula, one number per text
     size, instead of a table of hand-tuned pixel values that has to be re-derived every
     time a label rule moves.
     `button_text` (device preference) puts the size class on `.board`
     (controllers/board/index.js#text_style -> #display_class); the classic renderer adds
     `small_text` / `really_small_text` per BUTTON when the grid gets dense
     (models/board.js#render_fast_html). */
  --ll-label-size: 18px;
  --ll-symbol-band: calc(4px + 1.25 * var(--ll-label-size));
}
#within_ember.board-alt-view .board.text_small a.button,
#within_ember.board-alt-view .board a.button.small_text {
  --ll-label-size: 14px;
}
#within_ember.board-alt-view .board.text_large a.button {
  --ll-label-size: 25px;
}
#within_ember.board-alt-view .board.text_huge a.button {
  --ll-label-size: 35px;
}
#within_ember.board-alt-view {
  /* This one label DOES paint a background — a white pill, `padding: 3px 10px` — so here the
     box is visible and the reserve has to clear the box, not the ink. */
}
#within_ember.board-alt-view .board a.button.really_small_text {
  --ll-label-size: 14px;
  --ll-symbol-band: calc(10px + 1.25 * var(--ll-label-size));
}
#within_ember.board-alt-view {
  /* No label, nothing to reserve: the symbol gets the whole button. */
}
#within_ember.board-alt-view .board.text_none a.button {
  --ll-symbol-band: 0px;
}
#within_ember.board-alt-view .board a.button .img_holder {
  position: absolute !important;
  top: 0 !important;
  bottom: var(--ll-symbol-band) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#within_ember.board-alt-view {
  /* Label on TOP — the symbol's band is the BOTTOM portion, so flip which end is reserved.
     This is the arrangement in use when the board sets `button_text_position: top`. */
}
#within_ember.board-alt-view .board a.button:has(.button-label-holder.top) .img_holder {
  top: var(--ll-symbol-band) !important;
  bottom: 0 !important;
}
#within_ember.board-alt-view .board a.button .img_holder img.symbol {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#within_ember.board-alt-view {
  /* THE LABEL IS NOT INSET BY THE BUTTON PADDING.
     It used to carry a 4px inset of its own, to match the one `.img_holder` had at the
     time, and that cost the label 8px of a button only ~70px wide: roughly an eighth of the
     line, and with `white-space: nowrap` that is a whole character or two clipped off every
     long word. The label is a single line of type against a border, and 1px is enough to
     keep it off the edge.

     `width: 100%` here resolves against the button's PADDING box, so 1px/-2px puts the
     label just inside the 2px border and lets it use the full interior, padding included. */
}
#within_ember.board-alt-view .board a.button .button-label-holder {
  left: 1px !important;
  width: calc(100% - 2px) !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 {
  /* EDIT MODE ONLY — deliberately, not by accident. This opaque band has only ever painted
     in edit mode, because that is the one mode whose markup carried `.img_holder`; the two
     fast-HTML renderers (speak mode and plain browsing) emitted an unclassed span until the
     centring fix gave them the class too. Keeping the selector unscoped would newly paint a
     mint rectangle behind every symbol and inside every empty button on the speak board, and
     would defeat the `symbol_background` preference: those rules (`.symbol_background_clear
     .button img.symbol` and its siblings, this file) style the IMAGE, so an opaque holder
     behind a transparent symbol shows mint instead of the button's own colour.
     `docs/SYMBOL_IMPORT_SKIN_TONE_FINDINGS.md` already names this band as what masks that
     colour. Scoped to `.board.edit` so rendering is unchanged in both modes. */
}
#within_ember.board-alt-view .board.edit .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: rgb(112, 120, 132) !important;
  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: rgb(139, 146, 156) !important;
  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: rgb(112, 120, 132) !important;
  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: rgb(112, 120, 132) !important;
  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 {
  /* NO RIGHT MARGIN ON THE SETTINGS GEAR (requested 2026-09-22). There is already a
     `margin-right: 0 !important` for this button, but it sits inside
     `@media (min-width: 1201px)`, so the gap came back on every narrower window -- measured
     0px at 1201px and 16px at 1200px and below. This is unconditional and board-alt only;
     every other surface keeps whatever that media query and the 1rem default give it. */
}
#within_ember.board-alt-view #inner_header .ll-header-settings-btn {
  margin-right: 0 !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.01) 100%), rgba(39.6, 46.8, 58.32, 0.86) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.22) !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: rgb(112, 120, 132) !important;
  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;
  /* Bounded so it cannot fight the hide that folds Exit Boards into the hamburger. Once
     nested, this selector resolves to the SAME specificity as that hide and sits ~65,000
     lines later, so an unbounded `display: inline-flex !important` won on source order and
     the button never disappeared. Only `display` needs the bound.

     THE BOUND IS 461px, NOT 641px (fixed 2026-09-22). It matched the old hide, which was at
     640px for both board views; board-alt's hide moved to <=460px when board-alt stopped
     collapsing early, so between 461px and 640px the button was still SHOWN but was no
     longer `inline-flex`. That silently broke its children: the icon is `height: auto` with
     `align-self: stretch`, which needs a flex parent to have any height at all, so it
     collapsed to 0 and the button rendered as text with no icon. Measured: ico height 31px
     at 900px, 0px at 640px.

     The classic board view still hides at 640px, and its own rule below is what does that,
     so widening this bound does not resurrect the button there. */
}
@media (min-width: 461px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #board_done {
    display: inline-flex !important;
  }
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done {
  /* ICON LEFT, LABEL STACKED RIGHT (requested 2026-09-22). This was a centred COLUMN --
     icon above the words -- so the two now swap axes: `row` puts the icon beside the text
     and `stretch` is what lets it run the button's full height rather than sitting on the
     text's centre line. */
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
  /* PADDING KEPT AT 16px (requested 2026-09-22): the l/r halving applied to the CONTROL
     buttons in `#normal_mode` deliberately stops short of this one. Exit Boards is the
     primary way out of a board and reads as a distinct element at the bar's left end, so
     it keeps its breathing room while the secondary cluster tightens. */
  padding: 8px 16px !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;
  /* FULL HEIGHT, and wider to match: `height: auto` + `align-self: stretch` make the mask
     box as tall as the button's content box, and `center/contain` on the mask below keeps
     the glyph's aspect ratio inside it, so it scales rather than distorting. */
  width: 30px !important;
  height: auto !important;
  align-self: stretch !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.05 !important;
  white-space: nowrap !important;
  /* The two lines. A column keeps them left-aligned against the icon rather than centred
     under each other, and `justify-content: center` holds the pair vertically centred
     beside the taller icon. */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !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;
  /* L/R PADDING HALVED (requested 2026-09-22): these are the CONTROL buttons in the
     board-alt header -- Speak Mode, Copies, Edit Board, Like, Share, More and the back
     arrow -- not the board's own buttons, which are a different tree entirely. Vertical
     padding is untouched, so the 42px control height and the header's 84px min-height
     both hold; only the horizontal inset moves, which is what buys room on the bar. */
  padding: 8px 7px !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 7px !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 7px !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .ll-like-btn svg {
  color: #4A0C1B !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode #level_dropdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 7px !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 #level_dropdown:hover {
  filter: brightness(1.1);
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode #level_dropdown .caret {
  border-top-color: #fff !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode #level_dropdown {
  /* The pale "L10" chip. Targeted through its inline style, the same hook the existing
     `header #normal_mode #level_dropdown span[...]` rule uses, because the span carries no
     class of its own in application.hbs. */
}
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode #level_dropdown span[style*="border-radius: 100px"] {
  background: #EAF5FF !important;
  border-color: #EAF5FF !important;
  color: #10243F !important;
  padding: 3px 9px !important;
  margin-left: 0 !important;
  font-weight: 700 !important;
}
@media (max-width: 950px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil) .wide,
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .ll-like-btn .wide {
    display: none !important;
  }
}
@media (max-width: 850px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share) .wide {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-chevron-down) .wide {
    font-size: 0 !important;
  }
}
@media (max-width: 768px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode .wide {
    display: none !important;
  }
}
@media (max-width: 640px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .ll-like-btn,
  #within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode > .ll-copies-slot {
    display: none !important;
  }
}
@media (max-width: 640px) {
  #within_ember.board-alt-view #inner_header:has(#nav_header) #board_done .board-done__exit-line--boards {
    display: none !important;
  }
  #within_ember.board-alt-view #inner_header:has(#nav_header) #board_done .board-done__exit-label {
    justify-content: center !important;
  }
}
#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 7px !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 7px !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 7px !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: static !important;
  align-self: flex-start !important;
  /* NO TOP MARGIN (requested 2026-09-22). The 6px added when this came back into flow is
     gone; the name sits directly under the button row. This also has to WIN, not just be
     absent: `#within_ember.board-alt-view #board_id` further up still carries
     `margin-top: 8px`, left from when this was fixed-positioned and needed nudging clear
     of the header, so declaring 0 here is what actually zeroes it. That rule is left alone
     because it still applies on board-alt surfaces this selector does not reach. */
  margin-top: 0 !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: 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: 100% !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: rgb(112, 120, 132) !important;
  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 {
  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 !important;
}
#within_ember.board-alt-view {
  /* PLACED LAST IN THIS BLOCK ON PURPOSE. Every selector here ties with the rule that
     defines the control's own `box-shadow`, and both carry `!important`, so SOURCE ORDER is
     the only tiebreak. Sitting earlier in the block -- where this was first written -- the
     speak-mode controls picked up the ring and every `#nav_header` control silently did not,
     because their rules are defined further down. Verified against the compiled CSS, not
     assumed: `#board_done` was resolving to the plain drop shadow. */
  /* SLIGHT GLASSMORPHISM ON THE CONTROLS (requested), both header states.
     Enumerated rather than applied with a blanket `.btn` selector: these are the controls
     whose fills were measured against the bar (see @mixin control-glass), and a blanket rule
     would also catch dropdown items, badges and the level chip, which are not controls
     sitting on the bar and have not been checked. Each keeps its own fill; the mixin only
     layers sheen, ring and blur over it. */
}
#within_ember.board-alt-view #inner_header:has(#speak) .speak-header__home-marker .btn,
#within_ember.board-alt-view #inner_header:has(#speak) #home_button.btn,
#within_ember.board-alt-view #inner_header:has(#speak) #back_button,
#within_ember.board-alt-view #inner_header:has(#speak) .speak-bar__button-list-wrap,
#within_ember.board-alt-view #inner_header:has(#speak) #backspace_button,
#within_ember.board-alt-view #inner_header:has(#speak) #clear_button,
#within_ember.board-alt-view #inner_header:has(#speak) #identity #identity_button.btn,
#within_ember.board-alt-view #inner_header:has(#nav_header) #board_done,
#within_ember.board-alt-view #inner_header:has(#nav_header) #speak_mode,
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode a.btn:has(.glyphicon-arrow-left),
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-home),
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-pencil),
#within_ember.board-alt-view #inner_header:has(#nav_header) #normal_mode .btn:has(.glyphicon-share),
#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 .board-view-modern-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0) 100%) !important;
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
#within_ember.board-alt-view {
  /* SUPPORT: a LIGHT, ROUND button with a DARK icon (2026-10-12, requested: "on basic view board-alt,
     make the support icon light and its bg transparent", then "actually make its bg light and its icon
     dark and make its bg round"). It was one of the glass controls listed above (a dark translucent
     square with a dark icon on the dark bar), so it left that list. 36px: the 25px icon with room around
     it, a comfortable target in the header row. */
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
  color: #1B365D !important;
}
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn .ll-bento-help-btn__icon,
#within_ember.board-alt-view #inner_header:has(#nav_header) .ll-bento-help-btn .ll-bento-help-btn__support-icon {
  color: #1B365D !important;
  width: 22px !important;
  height: 22px !important;
}

/* ── 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. */
/* THE PER-ICON ACTION HIDES. Split by view 2026-09-22: board-alt folds at 460px, the
   classic board view keeps 1500px. These rules are far more specific than the shared
   `board-bar-collapsed` mixin near the top of this file (`#within_ember.<view>
   #inner_header:has(#nav_header) #normal_mode .btn:has(...)`), so moving that mixin's
   breakpoint alone left THESE still hiding board-alt's buttons at 1500px -- the change
   would have looked like it did nothing. The two halves have to move together. */
@media (max-width: 1500px) {
  #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.
     `:not(.ll-board-more-wrap)` keeps the More WRAPPER in the DOM while hiding the button
     inside it just below. The wrapper is the shared board menu's positioning context, so
     hiding it outright would leave the hamburger -- which is the trigger at this width --
     opening a menu with nothing to anchor to. */
  #within_ember.board-view .nav-header__board-bar #normal_mode > span.dropdown:not(.ll-board-more-wrap),
  #within_ember.board-view .nav-header__board-bar #normal_mode > span:has(.btn-info),
  #within_ember.board-view .nav-header__board-bar #normal_mode .ll-board-more-btn {
    display: none !important;
  }
  #within_ember.board-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) #speak_mode {
    display: inline-flex !important;
  }
  #within_ember.board-view #inner_header #normal_mode .btn-group:has(#speak_mode) {
    display: inline-flex !important;
  }
  #within_ember.board-view #inner_header #normal_mode .btn-group:has(#speak_mode) .btn {
    display: inline-flex !important;
  }
  /* Keep visible: hamburger */
  #within_ember.board-view #inner_header .la-board-hamburger {
    display: flex !important;
  }
}
/* BOARD-ALT's half of the same set, at 460px (requested 2026-09-22). Paired with the
   `board-bar-collapsed` include at the same width near the top of this file; both are
   needed for board-alt to actually keep its buttons between 461px and 1500px. */
@media (max-width: 460px) {
  /* Exit Boards is NOT hidden here either — moved to ≤640px with the two rules in the
     earlier 1500px collapse block. This pair is much higher specificity than those two,
     so moving only them would have left this one hiding the button all the way to 1500px
     and the change would have looked like a no-op on the Classic board. The per-icon
     action hides below still collapse at 1500px. */
  #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;
  }
  /* Also hide the More dropdown and Copies/My Copy/Original buttons.
     `:not(.ll-board-more-wrap)` keeps the More WRAPPER in the DOM while hiding the button
     inside it just below. The wrapper is the shared board menu's positioning context, so
     hiding it outright would leave the hamburger -- which is the trigger at this width --
     opening a menu with nothing to anchor to. */
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode > span.dropdown:not(.ll-board-more-wrap),
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode > span:has(.btn-info),
  #within_ember.board-alt-view .nav-header__board-bar #normal_mode .ll-board-more-btn {
    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;
  }
  /* Keep visible: speak mode */
  #within_ember.board-alt-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) {
    display: inline-flex !important;
  }
  #within_ember.board-alt-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 {
    display: flex !important;
  }
}
/* Style switcher component (Try New Style dropdown) */
.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;
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  #within_ember.board-view .board .button {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--btn-bg, #EDE9E0) !important;
  }
}
#within_ember.board-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) !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 {
  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;
}

/* "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. */
/* 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. */
/* "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. */
/* 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__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);
}

/* 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 toggle" "actions chevron" !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-wrap {
    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;
}

.ub-boards-page__tabs > li {
  display: inline-flex;
}

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

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

.ub-boards-page__tabs > li.is-active > a,
.ub-boards-page__tabs > li.is-active > .dropdown-toggle {
  color: #fff;
  background: #46505F;
}

.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. */
/* ──────────────────────────────────────────────────────────────
   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).
   ────────────────────────────────────────────────────────────── */
/* Drilled-in state — replaces the accordion entirely with a
   back-to-all affordance + current-folder label. */
#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;
}

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

/* --- 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.
   THE BADGE IS GONE (replaced by a home glyph, ce40014ec) and so are the two
   `@container ll-picker-home-tile` rules that read this container, so this rule now only
   applies containment. Kept rather than deleted (2026-10-10) because removing containment
   from a tile that still renders is a layout change that was not verified on the live
   picker; delete it together with a before/after check of the compact home tile. */
.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;
}

/* 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). */
/* Halo paint moved to the INNER .btn.simple_board_icon (same
   pattern as --home above). */
/* 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. */
/* 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;
}

.ub-boards-page__board-item-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). */
.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. */
#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.
     NOTE: this selector is declared TWICE in this file (see the second
     `&__folders-section` block, "Sunken-in surface that mirrors"); same specificity, so the
     LATER one wins and editing this rule alone changes nothing on screen. */
  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` REMOVED (2026-09-22). It pushed the glyph to the right edge of what
     used to be a WIDE padded button; the button is now a fixed 32px square that centres its
     content, so the auto margin shoved the icon off-centre against the right rim.
     DECLARED TWICE in this file (the other copy is in the second folders cluster) — same
     specificity, so the later one wins and changing only one leaves the glyph off-centre.
     Both were updated together. */
  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. */
  /* THE CARET BUTTON SHARES THIS CHIP'S SHAPE AND SURFACE (requested 2026-09-22): same 32px
     rounded square, same glassy fill, same rim and lift. Added to the SELECTOR rather than
     copied into the caret's own rule so the two cannot drift — one surface, one definition.
     The caret keeps its own rule below for what is genuinely button-only: the appearance
     reset, the pointer cursor, and the hover/active/focus states a static chip has no use for.
     Focused View re-skins this chip via `.ub-boards-page__section-icon` in _focused-view.scss;
     the caret is listed there too, for the same reason. */
}
.ub-boards-page__section-icon, .ub-boards-page__folders-chevron-btn {
  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, .ub-boards-page__folders-chevron-btn > 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 — a soft outer drop, so the white pill reads as a control
     rather than sinking into the cool-blue gradient behind it. Hover
     deepens the lift for press feedback. The 1px inner top highlight
     was removed 2026-09-30 (requested: "remove the inset look"). */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 2px 8px 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__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);
  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 {
  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__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-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__action-label {
  line-height: 1.2;
  text-align: center;
}
.ub-boards-page__getting-started-wrap--hidden {
  display: none !important;
}
.ub-boards-page__getting-started {
  margin-bottom: 24px;
}
.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. Carried by the button's wrapper
     (`__set-home-wrap`) since 2026-10-11, which also anchors the set-home tooltip. */
}
.ub-boards-page__set-home-btn--in-header {
  margin-left: auto;
}
.ub-boards-page {
  /* THE SET-HOME MODE (requested 2026-10-11; available-boards-section.js): while it is on the
     button shows `--active` (the filled state above), and this tooltip hangs under it,
     right-aligned, saying to click any board, with a Cancel that ends the mode. The tiles take the
     assignment pointer through BoardIcon's @pickCursor. */
}
.ub-boards-page__set-home-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.ub-boards-page__set-home-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: min(340px, 75vw);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border-radius: 10px;
  background: #1B365D;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 6px 18px rgba(17, 26, 46, 0.22);
}
.ub-boards-page__set-home-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 22px;
  border: 6px solid transparent;
  border-bottom-color: #1B365D;
}
.ub-boards-page__set-home-tip-cancel {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.ub-boards-page__set-home-tip-cancel:hover {
  background: rgba(255, 255, 255, 0.16);
}
.ub-boards-page__set-home-tip-cancel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.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.
     THIS SELECTOR IS DECLARED TWICE in this file — there is a second, near-identical
     `&__folders-section` block above. Same specificity, so THIS one wins on source order
     and editing the other alone changes nothing on screen. */
  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 {
  /* READS AS A BUTTON (requested 2026-09-22). It was a bare transparent icon — no surface,
     no edge — so nothing said it was pressable; with the caret now right-aligned there is
     also no heading beside it to borrow affordance from.
     Deliberately the SAME family as `&__folders-action-btn` (the New folder / Tag a board
     pills in this very header) rather than a new look: white surface, the same border token,
     a layered lift that stops a control sinking into the card's cool-blue gradient. (The pills
     dropped their 1px top highlight on 2026-09-30; this button keeps the shared one.)
     FIXED 32px SQUARE with `padding: 0` instead of the old `14px 18px`: an icon-only control
     should be a defined target, not text padding around a glyph. That asymmetric padding was
     also being zeroed on one side at >=901px, which is what made it 32x42 and lopsided. */
  /* Shape, size, fill, rim and lift all come from the shared `&__section-icon` rule above —
     NOTHING here may restate them or the two surfaces drift. This rule carries only what a
     <button> needs and a <span> chip does not. The icon centres via that rule's
     inline-flex + `justify-content: center`, with `padding: 0` so the 32px box is the
     target rather than padding around a glyph. */
  appearance: none;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
  /* 641-900px: the header is a plain flex row with `align-items: stretch`, so the caret —
     which has a fixed 32px height — pinned to the TOP of a 76px row while the action pills
     sat centred below it. Measured 102-134 against the pills' 117-125. Centring it lines the
     two up without touching the header's own alignment, which the toggle also depends on.
     At <=640px the mixin's grid already centres, so this is consistent rather than a second
     behaviour. */
}
@media (max-width: 900px) {
  .ub-boards-page__folders-chevron-btn {
    align-self: center;
  }
}
.ub-boards-page__folders-chevron-btn {
  /* Breathing room from the card's right edge (requested 2026-09-22). `justify-self: end`
     put the caret 1px off it — that 1px being the card's own border, i.e. visually flush.
     18px MIRRORS THE LEFT SIDE rather than being picked by eye: the FOLDERS chip measures
     19px from the card's left edge, and 18 + the 1px border lands the caret at the same 19.
     On this rule, not the shared `&__section-icon` one above — the chip must not gain a
     right margin from it. */
  margin-right: 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ub-boards-page__folders-chevron-btn:hover {
  transform: translateY(-1px);
}
.ub-boards-page__folders-chevron-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(27, 54, 93, 0.18);
}
.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` REMOVED (2026-09-22). It pushed the glyph to the right edge of what
     used to be a WIDE padded button; the button is now a fixed 32px square that centres its
     content, so the auto margin shoved the icon off-centre against the right rim.
     DECLARED TWICE in this file (the other copy is in the second folders cluster) — same
     specificity, so the later one wins and changing only one leaves the glyph off-centre.
     Both were updated together. */
  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 — a soft outer drop, so the white pill reads as a control
     rather than sinking into the cool-blue gradient behind it. Hover
     deepens the lift for press feedback. The 1px inner top highlight
     was removed 2026-09-30 (requested: "remove the inset look"). */
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06), 0 2px 8px 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__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);
  transform: translateY(-1px);
}
.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%;
  /* TWO COLUMNS IN THE STACKED LAYOUT, 640px AND UP (requested 2026-09-22). Stacked gives
     the folders the page's full width, so a single column left long rows of whitespace to
     the right of each folder name.
     THE UPPER BOUND IS THE SIDE-BY-SIDE BREAKPOINT, not a number chosen here: above 1200px
     the page switches back to folders-beside-boards (`max-width: 1200px { display: block }`,
     ~55044) and the folders live in a ~1/3 column, where two tracks would be cramped. The
     two values are the same boundary — if that fallback moves, this moves with it.
     Nested in this rule rather than added as a later override, so the list has ONE layout
     definition. `minmax(0, 1fr)` not `1fr`: a grid track's default `auto` minimum is
     min-content, so a long folder name would otherwise widen its column and break the even
     split. The rows need no change — `&__folder-row` is `display: flex; width: 100%`, which
     is its own internal layout and works the same in a grid cell as in a flex column. */
}
@media (min-width: 640px) and (max-width: 1200px) {
  .ub-boards-page__folder-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ub-boards-page__folder-list {
  /* 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 {
  /* The chip's RESTING values, restated. This rule pins the row to its non-hover look
     during a drag; before the chip it pinned it to the old flat white shadow, which
     would now strip the gloss off every row the cursor crossed — the opposite of what
     suppressing hover is for. */
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
  transition: none;
}
.ub-boards-page__folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  /* THE SHARED BOARD-CARD CHIP (requested 2026-09-14). A folder row and a board card are
     the same kind of object on this page — a thing you click to go somewhere — so they are
     one material, from `_chips.scss`. It was flat white with a navy hairline.
     No `!important`: nothing paints this row with it, and the three state rules below beat
     it on specificity the way they always did. Layout, radius and padding are unchanged.
     `_focused-view.scss` carries no folder-row rule, so this is the only place the row's
     surface is set and Focused and Gentle cannot diverge. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* Hover KEEPS the chip's two insets and only deepens the ambient — replacing the whole
     shadow stripped the gloss off the glass, so the row flattened at the moment it lifted.
     The rim brightens rather than turning navy, so both states are the same material. */
}
.ub-boards-page__folder-row:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 8px 20px rgba(27, 54, 93, 0.22);
  border-color: rgba(255, 255, 255, 0.95);
}
.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;
  /* $brand-teal reads 2.98 against its own 0.12 tint once the row is the chip, and it was
     ALREADY under AA at 4.09 on the flat white (14px/700 is not large text — that starts
     at 18.66px bold — so it owes 4.5). $brand-verdigris-ink is the token for teal that is
     not on white: 4.82 here, and the same one the board cards' language pill uses. */
  color: #115C5B;
  background: rgba(20, 127, 130, 0.12);
}
.ub-boards-page__folder-row-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  /* 0.55 -> 0.62. Non-text UI (WCAG 1.4.11, 3:1): it measured 3.23 on the flat white and
     2.87 on the chip; 0.62 reads 3.37. */
  color: rgba(27, 54, 93, 0.62);
}
@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__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-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.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 {
  /* 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__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 {
  /* FOLLOWING A NEW HOME BOARD TO THE TOP (utils/home-move.js, 2026-10-11). After "Not now" the
     tiles glide into their re-sorted places (inline transforms) and the home tile gets a fading
     verdigris ring (`--home-moved`); a new copy that wasn't listed before also fades and grows in
     (`--home-arrived`). The ring is an ::after layer because the card's own border and shadow are
     owned by the board-card-modern mixin. Reduced motion keeps a steady ring, no growing. */
}
.ub-boards-page__board-item--home-moved, .ub-boards-page__board-item--home-arrived {
  position: relative;
  z-index: 2; /* glides over the tiles it passes, not under them */
}
.ub-boards-page__board-item--home-moved::after, .ub-boards-page__board-item--home-arrived::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 3px solid #2A9D8F;
  border-radius: 18px;
  pointer-events: none;
  animation: ub-home-ring 2.2s ease-out forwards;
}
.ub-boards-page__board-item--home-arrived {
  animation: ub-home-arrive 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ub-boards-page__board-item--home-moved::after, .ub-boards-page__board-item--home-arrived::after, .ub-boards-page__board-item--home-arrived {
    animation: none;
  }
}
.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;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #EAEFF6 0%, #D2DAE5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(27, 54, 93, 0.18) !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(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.1), 0 14px 30px rgba(27, 54, 93, 0.26), 0 4px 10px rgba(27, 54, 93, 0.14) !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.84) !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.78) !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.84) !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.8) !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.8) !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: #115C5B !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;
}

.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%;
    /* Not the top: the <=900px block after this one (2026-10-01). */
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .ub-boards-page__content {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 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` top padding: the <=900px block after this one (2026-10-01). */
  .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-shell--user > .md-workspace,
  .md-user-layout > .md-shell > .md-workspace {
    border-radius: 0 !important;
    margin-bottom: 0 !important; /* top: the <=900px block after this one (2026-10-01) */
    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;
  }
}
/* THE BOARDS PAGE KEEPS ITS TOP PADDING DOWN TO 901px (2026-10-01, requested: "hold the full-size
   spacing"). The block above zeroed `.ub-boards-page` and its content's padding at 1024, top
   included, which moved the page up 24px (Gentle) / 16px (Focused) there; the top now goes at 900
   with the rest of the page's top spacing. */
@media (max-width: 900px) {
  .ub-boards-page,
  .ub-boards-page__content {
    padding-top: 0 !important;
  }
}
/* THE ACCOUNT SECTION AND THE DASHBOARD HEROES KEEP THEIR FULL-SIZE TOP SPACING DOWN TO 901px
   (2026-10-01, requested: "hold the full-size spacing"). These two were in the <=1024 block above:
   the account section's workspace lost its 40px top margin there (its page moved up 40px at 1024),
   and the dashboard hero its top padding. They now start at 900, with the rest of the page's
   top spacing (see the matching block after the general <=1024 block). */
@media (max-width: 900px) {
  .md-shell--user > .md-workspace,
  .md-user-layout > .md-shell > .md-workspace {
    margin-top: 0 !important;
  }
  .md-hero--dashboard {
    padding-top: 0 !important;
  }
}
@media (max-width: 768px) {
  .ub-boards-page {
    padding: 0 !important;
    /* __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;
}

/* THE SHELL BACKGROUND MUST REACH THE BOTTOM OF THE VIEWPORT AT NARROW WIDTHS.
   At <=950px (and again at <=820px) the responsive guards set
   `min-height: auto !important; flex: 0 0 auto !important` on `.md-shell` so a tall board
   grid can never be cut off. The side effect is the opposite case: when the content is
   SHORT the shell collapses to it, and on create-board-new's FIRST wizard step -- two
   fields and a Next button -- that leaves the page background showing as a white band
   under the card. It only appeared on that step, which is exactly why: every later step
   is tall enough to cover the gap.

   `min-height: 100vh` is restored for this shell alone. It does NOT undo the guard:
   `flex: 0 0 auto` is deliberately left in place, so the shell still grows past the
   viewport with its content and nothing is clipped -- a min-height only sets a FLOOR. The
   two together are "at least the viewport, more if the content needs it", which is what
   the page wanted all along.

   SPECIFICITY IS THE WHOLE TRICK HERE. The guard is `#content > .md-shell` at (1,1,0)
   WITH `!important`, so matching its shape is not enough -- repeating the same selector
   with the modifier appended would tie at (1,1,0) and leave the outcome to source order.
   Each selector below therefore adds the modifier as a SECOND class on the same element:
   (0,2,0), (1,2,0) and (1,3,0) against the guard's (0,1,0), (1,1,0) and (1,2,0). All
   three forms of the guard's selector list are mirrored because which one matches depends
   on whether the route template lands under `#content > .ember-view`.
   The query is 950px, not 820px: 950 covers both bands, and the guard at <=820px repeats
   the same declarations. */
@media (max-width: 950px) {
  .md-shell.md-shell--create-board-new,
  #content > .md-shell.md-shell--create-board-new,
  #content .ember-view > .md-shell.md-shell--create-board-new {
    min-height: 100vh !important;
  }
  /* ORGANISATION PAGES, same problem and the same remedy (2026-09-23). Reported on
     `/organizations/:id/rooms`, where a supervisor sees one or two room tiles: below 950px the
     guard above collapses `.md-shell` to its content, and with a short page the gradient stops
     partway down leaving a white band beneath it.

     `min-height: 100vh` does NOT undo the guard -- `flex: 0 0 auto` is deliberately left in
     place, so the shell still grows past the viewport when a long org page needs it. A
     min-height only sets a FLOOR; the two together mean "at least the viewport, more if the
     content asks", which is what the page wanted.

     THE THREE SELECTOR FORMS ARE THE POINT, exactly as above: the guard is
     `#content > .md-shell` at (1,1,0) WITH `!important`, so a single `.md-shell--org` would
     tie or lose depending on source order. Each form appends the modifier as a SECOND class on
     the same element -- (0,2,0), (1,2,0) and (1,3,0) against the guard's (0,1,0), (1,1,0) and
     (1,2,0) -- and all three are mirrored because which one matches depends on whether the
     route template lands under `#content > .ember-view`.

     Not scoped to Basic: the guard and the collapse are view-agnostic, and Modern's org pages
     are just as short. */
  .md-shell.md-shell--org,
  #content > .md-shell.md-shell--org,
  #content .ember-view > .md-shell.md-shell--org {
    min-height: 100vh !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;
  /* 64px left/right gap so the gradient breathes around the card. Top and
     bottom gaps are both 40px: the card is short enough that anchoring it to
     the very top left a dead band under it, and matching the two gutters
     centres it in the gradient field instead.

     The TOP gap is the one exception, and it comes from `--nb-create-card-top` rather
     than a literal so the Board Labels state can change it WITHOUT a second margin
     declaration fighting this one. Once the wizard hands off, the card is full height
     (labels field + live preview + edit rail) and the 40px reads as a dead band above a
     card that already reaches the fold, so that state sets the variable to 0 and the card
     sits directly under the shell's own padding. This shorthand stays the only place
     `margin` is declared for this card; the state rule only supplies the value. */
  margin: var(--nb-create-card-top, 40px) auto 40px !important;
  max-width: calc(100% - 128px) !important;
  /* NO TOP PADDING (requested, all views). The 40px comes from the shared
     `.md-workspace { padding: 40px 40px calc(40px - 9rem) 40px !important }`, which every
     workspace page in the app uses -- so it is overridden HERE, on this card's own rule,
     rather than edited there. (0,2,0) + `!important` beats its (0,2,0)... its (0,1,0).
     The side and bottom padding are deliberately left alone: only the top is dropped, so
     the header sits flush against the card edge. */
  padding-top: 0 !important;
}

/* BOARD LABELS STATE. Set by the template once `wizard_done` flips, i.e. exactly when the
   wizard sections are gone and the page is the labels field + live preview + edit rail.
   This declares no `margin` of its own -- it only supplies the value the base rule above
   reads -- so there is no override and no specificity contest to lose. */
.md-workspace--create-board-new--labels {
  --nb-create-card-top: 0px;
}

/* 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;
    /* Was `padding: 20px`. That is (0,2,0) like the base rule above and sits LATER in the
       file, so the shorthand put the top padding straight back below 1024px -- the
       longhand there would have been silently undone at exactly the widths where the card
       is tightest. Split so the top stays 0 at every width. */
    padding: 0 20px 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)
   ──────────────────────────────────────────────────────── */
#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-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;
}

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

/* 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. */
/* Stacked nav buttons (home + back) to the left of the sentence bar */
/* Top of the left stack — "primary" weight, mirrors .md-board-detail-actions-toggle. */
/* 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. */
/* 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:not(.md-board-detail-modeling-btn--badge):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 the pair reads as one control set; height comes from the row (stretch),
   (Home is now 80px and Back 60px — the Modeling badge shares Home's column and needs
   the extra width; they are no longer the same width, deliberately),
   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 / the Modeling badge). Back keeps this size;
   Home and Modeling set their own below. */
.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;
}

/* Home reads larger than its neighbours (per request): 14px on a full-size screen, ramping
   down to a 12px floor on smaller ones. Same breakpoint and floor as the prediction panel's
   empty-state copy, and the same 1.71vw ramp, so the two step together rather than crossing
   over — 820 × 0.0171 = 14.02, which makes the ramp continuous where the clamp takes over,
   and it reaches the 12px floor at ~702px. No calc(): there is no mixed-unit ARITHMETIC
   here, each clamp argument is a single unit, and dart-sass unwraps a calc() inside clamp()
   anyway (see LEARNINGS). */
.md-board-detail-home-btn .md-board-detail-nav-btn__label {
  font-size: clamp(12px, 1.71vw, 14px);
}

/* The Modeling badge is set in small caps so it reads as a status marker rather than a
   third navigation label. `text-transform`, never a pre-uppercased string: the value is
   translated, and machine uppercasing is wrong in several locales — the same reason the
   prediction panel's spine label uses a transform. */
span.md-board-detail-modeling-btn--badge .md-board-detail-nav-btn__label {
  font-size: 12px;
  text-transform: uppercase;
  /* 0.02em, not the 0.04em caps would normally want: at 0.04em the string measures 69.0px
     against a 70px content box, and 1px of slack will not survive a different font stack. */
  letter-spacing: 0.02em;
}

/* THE TRIAL BAR (2026-10-12, components/trial-bar.js): "Trying: <board name>" with "Use this board"
   and "Exit", shown while a board from the picker is being tried, on the Modern board page (above the
   sentence row) and the Basic board page (top of the board). One look for both views. Light, with a
   verdigris edge so it reads as a temporary state rather than part of the board; both buttons are
   44px tall (touch target). $brand-verdigris-aa is the 5.05:1-on-white token, so white text on it
   passes AA. */
.ll-trial-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 8px 12px;
  padding: 8px 10px 8px 16px;
  border-radius: 14px;
  border: 1px solid rgba(42, 157, 143, 0.45);
  border-left: 5px solid #1A7B7A;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: #1B365D;
}

/* Basic: the board header draws below its own <header> box (its inner header ends at 87px from 768px up,
   84px below), while the board page's content starts at 58-64px, so a bar at the content's top sat under
   the header. 37px puts its top at 95-101px: at least 8px clear at every width measured (1440 to 390). */
.ll-trial-bar--basic {
  margin-top: 37px;
}

.ll-trial-bar__label {
  font-size: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ll-trial-bar__name {
  font-weight: 800;
}

.ll-trial-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ll-trial-bar__use,
.ll-trial-bar__exit,
.ll-trial-bar__close {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ll-trial-bar__use {
  border: none;
  background: #1A7B7A;
  color: #fff;
}

.ll-trial-bar__use:hover {
  filter: brightness(1.08);
}

.ll-trial-bar__exit,
.ll-trial-bar__close {
  border: 1.5px solid rgba(27, 54, 93, 0.35);
  background: transparent;
  color: #1B365D;
}

.ll-trial-bar__exit:hover,
.ll-trial-bar__close:hover {
  background: rgba(27, 54, 93, 0.06);
}

.ll-trial-bar__use:disabled,
.ll-trial-bar__exit:disabled,
.ll-trial-bar__close:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* 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: #115C5B;
  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;
  /* 60px -> 80px so the Modeling badge fits "MODELING" at 12px caps. Measured in the app's
     own font: that string renders 67.0px at 0.02em tracking, against a content box of
     80 - 8 (padding) - 2 (border) = 70px. The slack is only ~3px, so it is the string that
     governs this width — re-measure before reducing it or raising the badge's size/tracking,
     and note the fallback stack (Arial, generic sans) may set slightly wider than Helvetica.
     Home rides this width too (it is width:100% of the column), which is why it is no longer
     the same width as Back. */
  width: 80px;
  min-height: 0;
}

.md-board-detail-nav-stack__home-col .md-board-detail-home-btn {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* The badge fills the column too. Without this it kept the 60px from the grouped
   `.md-board-detail-nav-stack .md-board-detail-modeling-btn` rule above — (0,2,0), which
   outranks the plain `width: 100%` on `.md-board-detail-modeling-btn` — so widening the
   column moved Home to 80px and left the badge behind at 60px. Home escapes that rule
   through the sibling rule directly above; this is the badge's equivalent, and it has to
   stay AFTER it in source order, since both are (0,2,0).

   Deliberately NOT `flex: 1 1 auto` like Home: the badge is a fixed-height chip and must not
   grow to share the column's height.

   Horizontal padding drops 8px -> 4px because the label is what governs here. Measured:
   "MODELING" at 12px/0.02em is 67.0px, and at the inherited 8px padding the content box is
   80 - 16 - 2 = 62px — still an overflow even at 80px wide. At 4px it is 70px, leaving ~3px.
   Home keeps the 8px: its label is only 41.9px and has room to spare. */
.md-board-detail-nav-stack__home-col .md-board-detail-modeling-btn {
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
}

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

/* Badge state (2026-08-31): the modeling control is now a read-only <span> in BOTH states,
   not just the edit-paused one. It keeps the shared surface above so it still sits under Home
   at the same width; only the affordances that say "press me" are removed, or a status
   element invites a tap that does nothing.

   The hover backgrounds are cancelled by NARROWING the two rules that set them (:72802 and
   the shell-scoped one at :76688) with `:not(...--badge)`, rather than by an override here.
   An override was tried and abandoned: the shell rule is (0,5,0), so nothing a `span.` type
   selector can reach would have won it, and out-specifying it would have been a cascade
   fight of exactly the kind rule 7 forbids. The ink rule at :76711 is deliberately NOT
   narrowed — the badge keeps its verdigris identity. */
span.md-board-detail-modeling-btn--badge {
  cursor: default;
  /* Reads as a status chip, not a raised control: glass fill and a hairline in place
     of the glass gloss + drop shadow the nav buttons carry. The LAYOUT half of the shared
     rule at :72767 (size, flex centring) is still wanted, so only the surface is overridden
     here; the light-shell glass rule is surface-only and is narrowed to exclude the badge
     outright rather than being fought with specificity.

     Colour is set here as well as in the two ink rules because the dark-mode override
     (`.md-board-detail--dark .md-board-detail-modeling-btn`, (0,2,0)) would otherwise repaint
     the label in LIGHTENED verdigris — which is correct on a dark button and wrong on this
     light chip. (0,2,1) beats it, so the chip keeps one known ink everywhere.

     Glassy, but on a FLOOR. The rail behind this badge is dark, so the LOWEST gradient stop
     is what decides legibility, and a 10% verdigris tint tried earlier composited down to a
     dark chip that swallowed the ink entirely. The nav buttons' own glass bottoms out at
     `rgba(238,244,251,0.62)`, which measures ~3.9:1 here — that is the original defect. This
     stops at 0.86 instead: measured over the dark rail, 6.7:1 at the top stop and 5.61:1 at
     the bottom, against the 4.5:1 an 11px label needs. Do not lower the LAST stop without
     re-measuring it over a DARK backdrop; the first two stops are not the binding constraint.

     Gloss comes from the two INSET highlights only. There is deliberately no outer drop
     shadow — that is what reads as a raised, pressable control, and this is a status chip. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(240, 246, 252, 0.86) 100%);
  border: 1px solid rgba(42, 157, 143, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 6px 10px -8px rgba(255, 255, 255, 0.7);
  color: #115C5B;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

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

/* Flip Text. `display: contents` in the default state so this wrapper contributes NO box and
   the chips remain direct flex children of `__text` (`display: flex`, :73961) -- unflipped
   layout is therefore unchanged. Only when flipped does it become a real box, which it must be
   for `transform` to apply at all. Mirrors the classic bar's `#button_list.has_content.flipped`
   (_header_sizing.scss:54-58), including swapping the padding side so the rotated text keeps
   its inset. Predictions sit OUTSIDE this wrapper and stay upright on purpose. */
.md-board-detail-sentence-bar__utterance {
  display: contents;
}

.md-board-detail-sentence-bar__utterance.is-flipped {
  display: flex;
  flex: 1;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  transform: rotate(180deg);
  padding-left: 12px;
  padding-right: 0;
}

.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;
  /* Same trap as prediction labels: the chip is a fixed-height column, the
     symbol may flex-shrink, and overflow:hidden on a parent zeroes the flex
     min-size. Do not shrink: the word must stay visible next to its picture. */
  flex-shrink: 0;
}

.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-below--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-below--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));
  /* The PANEL is sidebar-width; the TILES inside stay board-button-width (see the tile rule
     below), so centre them in the track rather than stretching them. */
  justify-items: center;
  flex-shrink: 0;
  align-self: flex-start;
  /* MATCH THE INLINE SIDEBAR at every width. --bd-sidebar-w is published on the shell, not
     on the sidebar element, so the rail keeps the sidebar's width even when the sidebar is
     not rendered (collection drawer open, or the user's quick_sidebar preference off) — the
     board then sees the same gutter either way instead of reflowing. Previously the panel was
     sized to one board button, which drifted from the sidebar at most widths; the TILES still
     match a board button (see the tile rule below), the panel no longer does. */
  width: var(--bd-sidebar-w, 100px);
  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;
}

/* Empty state, structural part. The copy alone left the rest of a full-height column blank,
   which read as unfinished rather than as "nothing here yet". The glyph and ghost tiles give
   the panel a resting state that shows WHERE words will appear.
   Both are decorative and aria-hidden in the template — they add no announcement, and the
   copy still carries the whole message for a screen reader.
   BLOCK, not flex, throughout: the `__empty` rule above documents why this box must stay a
   block (as a flex container the copy becomes an anonymous flex item, which carries its own
   automatic minimum size and then refuses to wrap below the longest word). These children
   are block-level siblings in that same flow, so that constraint is preserved. */
.md-board-detail-prediction-rail__empty-glyph {
  display: block;
  margin: 2px auto 6px;
  /* Was 0.5 — dimmer than the copy below it (0.78), so the one element meant to draw the eye
     to the panel was the faintest thing in it. */
  color: rgba(255, 255, 255, 0.75);
}

/* Clip the ghost stack to the panel. Six tiles is more than a tall rail needs and fewer than
   a short one can show, so the overflow is expected; the mask fades the cut instead of
   leaving a ghost sliced off square at the panel edge. */
.md-board-detail-prediction-rail__empty {
  overflow: hidden;
}

.md-board-detail-prediction-rail__empty-ghosts {
  display: block;
  margin-top: 10px;
  /* NO FADE. A bottom mask used to soften a ghost that overran the panel, but it dimmed the
     last placeholder even when it fitted, which is the opposite of what this state is for —
     the ghosts exist to show WHERE words will appear, and the faintest one was the one
     nearest the words. Every ghost now paints at full strength.
     Overrun is prevented rather than hidden: the count is the rail's row count MINUS ONE
     (prediction_ghost_slots), the row given back to the glyph and copy that sit above these
     in the same box. `__empty` keeps `overflow: hidden` as a backstop, but nothing should
     reach it. */
}

/* Sized from the rail's OWN measured tile vars, not literals, so a ghost occupies exactly
   the box a real prediction will — same height, same gap, same corner radius as the tile
   rule below. If the board's geometry changes the ghosts track it for free. */
/* APPEARANCE is shared by both placements — one dashed ghost, two orientations. Geometry is
   split out below because the rail stacks its ghosts down the panel and the below-bar panel
   lays them along it. */
.md-board-detail-prediction-rail__empty-ghost,
.md-board-detail-prediction-below__empty-ghost {
  display: block;
  border-radius: 14px;
  /* Legibility, raised 2026-09-02: these were 1px/0.16 dashed on a 0.04 fill, which is below
     the threshold of easy perception on the dark board surface — the panel read as blank
     rather than as "words will appear here". A ghost cannot compete with a real prediction
     for attention because the two are mutually exclusive (the {{else}} arm renders only when
     the list is empty), so it can afford to be clearly visible. Still DASHED and still a
     lower fill than a real tile (0.16 -> 0.05 gradient), which is what keeps it reading as a
     placeholder rather than as a button someone can press. */
  /* 1px, not 1.5: browsers derive dash LENGTH from border-width (~3x), so 1.5px produced
     chunky ~4.5px dashes. 1px gives a finer ~3px dash that reads sleeker at this size; the
     alpha is lifted a little to hold the same visibility with less ink. */
  border: 1px dashed rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.12);
}

/* RAIL geometry: stacked, each one board-tile tall. */
.md-board-detail-prediction-rail__empty-ghost {
  height: var(--prediction-tile-h, 64px);
  margin-bottom: var(--prediction-tile-gap, 8px);
}

/* No trailing gap under the last ghost — it is pure overhang at the panel's bottom edge and
   is exactly the space that pushes an otherwise-fitting ghost into being clipped. */
.md-board-detail-prediction-rail__empty-ghost:last-child {
  margin-bottom: 0;
}

/* BELOW-BAR geometry: side by side, full panel height, sharing the leftover width equally.
   `min-width: 0` because a flex item refuses to shrink below its content by default — the
   ghosts have no content, but the rule is what keeps them honest if that ever changes. */
.md-board-detail-prediction-below__empty-ghost {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

/* Tiles fill the panel's width; HEIGHT and vertical position still come from the measured
   board card (--prediction-tile-h / --prediction-tile-inset-top below), so a tile stays in
   the same row band as the button beside it. */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction {
  /* PANEL WIDTH. The panel is sized to the inline sidebar (--bd-sidebar-w), and a tile fills
     it. Sizing the tile to the board BUTTON instead left it wider than the panel on boards
     whose buttons are wider than the sidebar, so tiles overhung the panel edge. Width parity
     with the board button is therefore deliberately given up; height and row alignment are
     not, and are what actually keep a prediction reading as part of its row. */
  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 tile tracks one board button
     (--bd-sidebar-w), which is 53-70px on narrow and many-column layouts; with the
     floor in place the tile stays wider than the board card it must match and spills past the
     panel's right edge. Letting it shrink keeps tile and card 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 PANEL (--bd-sidebar-w), so cqw here is relative to that rather than to a board
     cell. --prediction-label-font, published by _sync_prediction_tile_size from a board
     label's RENDERED size, is what keeps predicted words matching 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;
  /* Floor, not 0. The label is flex-shrink:0 so the word cannot vanish; with
     min-height:0 here a dense board (Vocal Flair 94, ~40px tiles) left the
     symbol no leftover and painted text-only tiles. 16px is a pixel floor so it
     still resolves when the tile height is indefinite (percentage min-height
     would be 0 there). flex:1 still grows the glyph on taller tiles. */
  min-height: 16px;
  flex-shrink: 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. NO WHITE PAINT OF ANY KIND belongs on this
   element -- not a background, not a halo. The board grid is the working reference and gives
   the placeholder no treatment at all: `.md-board-detail--dark
   .md-board-detail-symbol-card__image img.symbol[src$="square.svg"]` sets `filter: none`
   (app.scss:82439-82441) precisely so an empty cell gets no halo. The rail now matches it.
   Both attempts to "lift" the placeholder here produced the same white block, so neither is
   made a third time:
   - Until 2026-09-02 this rule carried `background: rgba(255,255,255,0.85)` as a frosted
     plate. That was correct while the rail image was `width:auto; max-width:80%` inside a
     dashed frame -- at `width:auto` a 1:1 asset makes the ELEMENT box equal the GLYPH box, so
     anything painted on the element was confined to the glyph. bfd0facb2 (#900) made the rail
     symbol full-bleed (`width:100%; padding:0; border:0`) to match the board button, which
     decoupled them: the element box became the whole tile and the plate became a full-tile
     white block.
   - Replacing that plate with two white `drop-shadow` halos did NOT fix it. drop-shadow
     follows the ALPHA SILHOUETTE, and square.svg's silhouette is a rounded-rect frame, so a
     white glow around it is still a white rounded square -- the same symptom by another route.
     Removed 2026-09-02.
   square.svg needs no lift to be legible: it carries a fully opaque #2A9D8F circle and a
   #3A6BC7 path at 0.82 alpha over the 0.16 wash. An earlier version of this comment called it
   translucent and "DIM", counting only the wash and the 0.65 frame stroke. */
.md-board-detail-prediction-rail .md-board-detail-sentence-bar__prediction-img[src$="square.svg"] {
  /* Through the shared alpha, not a literal: at (0,3,0) -- two classes plus an attribute,
     which shares the class column -- this rule outranks the --is-loading img dim, so a literal
     `1` meant a prediction whose symbol failed to resolve showed no loading cue at all. */
  opacity: var(--pred-img-a, 1);
  /* Inset sizing, restored for the PLACEHOLDER ONLY (2026-09-02).
     bfd0facb2 (#900) made the rail symbol full-bleed -- `width:100%; max-width:100%` -- to
     match the board button. That is right for a real symbol and stays. But it also removed an
     invariant the placeholder silently depended on: at `width:auto` a 1:1 asset makes the
     ELEMENT box equal the GLYPH box, because `object-fit: contain` only paints an
     aspect-fitted rectangle inside the element. So anything painted on the element -- the
     frosted plate that lived here until today, or the unscoped dark-mode plate -- was
     automatically confined to the glyph. At `width:100%` the element box became the whole
     tile while the glyph stayed a centred square, which is what turned a placeholder chip
     into a full-tile white block.
     Restoring `width:auto` + an 80% cap here keeps that confinement for the placeholder and
     leaves real symbols full-bleed, so #900's alignment work is untouched. */
  width: auto;
  max-width: 80%;
  align-self: center;
}

/* 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;
  flex-shrink: 0;
  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. 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.
   ALL THREE PANELS (2026-09-02). These rules were scoped to the side rail alone, so the
   below-speak-bar strip carried the text-pos class with nothing acting on it and the in-bar
   group beside the sentence did not carry the class at all — the same preference produced
   three different layouts depending on which placement the user had chosen.
   The declarations act on the TILE, whose own `flex-direction: column` is placement-agnostic,
   so one grouped selector serves a vertical rail and a horizontal strip equally. Widened here
   rather than duplicated per panel so the four states stay defined in exactly one place. */
.md-board-detail-prediction-rail.md-board-detail-grid--text-pos-top .md-board-detail-sentence-bar__prediction,
.md-board-detail-prediction-below.md-board-detail-grid--text-pos-top .md-board-detail-sentence-bar__prediction,
.md-board-detail-sentence-bar__prediction-group.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,
.md-board-detail-prediction-below.md-board-detail-grid--text-pos-bottom .md-board-detail-sentence-bar__prediction,
.md-board-detail-sentence-bar__prediction-group.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,
.md-board-detail-prediction-below.md-board-detail-grid--text-pos-none .md-board-detail-sentence-bar__prediction-label,
.md-board-detail-sentence-bar__prediction-group.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,
.md-board-detail-prediction-below.md-board-detail-grid--text-pos-text_only .md-board-detail-sentence-bar__prediction-img,
.md-board-detail-sentence-bar__prediction-group.md-board-detail-grid--text-pos-text_only .md-board-detail-sentence-bar__prediction-img {
  display: none;
}

/* ── Word-prediction panel BELOW THE SPEAK BAR ────────────────────────────────
   Same glass surface as the side rail, turned through 90 degrees: it spans the board
   BUTTONS' width (it is the first child of .md-board-detail-grid-fade, the block that holds
   the grid) and has a FIXED height, where the rail spans the board's height and takes one
   button's width.
   Fixed height is the point of this placement: the panel sits between the speak bar and the
   board, so a height that tracked its contents would push the whole grid down and up as
   predictions arrive and clear. The board must not move under a user who is reaching for it.
   `display: none` here; the placement rules below turn it on. */
.md-board-detail-prediction-below {
  display: none;
  grid-auto-flow: column;
  /* Equal shares of the panel, floored at 0 so a long word cannot widen its own column and
     push the others out — the same minmax(0,1fr) the rail uses for its rows. */
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--prediction-tile-gap, 8px);
  height: var(--prediction-below-h, 92px);
  box-sizing: border-box;
  margin-bottom: 6px;
  /* Surface copied from the rail panel so the two placements are visibly the same component.
     The hairline is an inset box-shadow rather than a border for the same reason it is there:
     a border would change the content box the tiles are measured against. */
  padding: 4px;
  border-radius: 14px;
  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%);
}

/* Tiles fill their column and the panel's height. The base tile carries a fixed
   `height: 78px` and `min-width: 44px` for the in-bar placement; both have to go here or the
   tiles would ignore the panel's fixed height and refuse to shrink on a many-column board. */
.md-board-detail-prediction-below .md-board-detail-sentence-bar__prediction {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 2px;
  /* cqw container so the label tracks the tile, matching the rail's tile rule. */
  container-type: inline-size;
}

.md-board-detail-prediction-below .md-board-detail-sentence-bar__prediction-img {
  width: 100%;
  flex: 1 1 0;
  min-height: 16px;
  flex-shrink: 0;
  height: auto;
  max-width: 100%;
  /* No dashed frame, for the same reason the rail drops it: the panel's own glass surface is
     the "these are suggestions" affordance, and the frame costs painted symbol size. */
  padding: 0;
  border: 0;
}

/* Placeholder: inset, exactly as on the rail. At `width:auto` a 1:1 asset makes the element
   box equal the glyph box, which is what keeps any treatment confined to the glyph instead of
   spreading across the tile. NO background and NO halo here either — see the rail's
   [src$="square.svg"] rule for why both were tried and removed. */
.md-board-detail-prediction-below .md-board-detail-sentence-bar__prediction-img[src$="square.svg"] {
  opacity: var(--pred-img-a, 1);
  width: auto;
  max-width: 80%;
  align-self: center;
}

.md-board-detail-prediction-below .md-board-detail-sentence-bar__prediction-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: var(--prediction-label-font, clamp(13px, 26cqw, var(--bd-button-text-size, 15px)));
}

/* EMPTY STATE — the rail's, rotated. The rail stacks glyph + copy above its ghosts; here they
   sit to the LEFT and the ghosts take the remaining width. Spans every auto column so the
   panel's grid does not try to give it a single column's share. */
.md-board-detail-prediction-below__empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.md-board-detail-prediction-below__empty-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Never grows, and never shrinks below the point where the sentence is unreadable — if the
     panel is too narrow for both, the GHOSTS give up their width first. The copy is the part
     that carries the meaning. */
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 4px;
}

.md-board-detail-prediction-below__empty-glyph {
  flex: none;
  color: rgba(255, 255, 255, 0.75);
}

.md-board-detail-prediction-below__empty-copy {
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.78);
  /* Two lines at most, then ellipsis: the panel's height is fixed, so a third line would be
     clipped mid-glyph rather than simply not shown. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Same reason the rail's copy keeps these: a broken word reads as a typo, and in an AAC
     surface a word's visual shape is itself a recognition cue. */
  overflow-wrap: normal;
  word-break: keep-all;
}

.md-board-detail-prediction-below__empty-ghosts {
  display: flex;
  align-items: stretch;
  gap: var(--prediction-tile-gap, 8px);
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

/* At <=640px the panel is too shallow to carry the ghosts AND the message legibly, so the
   ghosts go and the message centres. Keeping the copy is the opposite of the RAIL's choice at
   this width (app.scss ~87668 drops copy, glyph and ghosts for a rotated spine label) and the
   difference is geometric, not stylistic: the rail at 640px is one board button WIDE and has
   nowhere to put a sentence, while this panel still spans the whole board. The ghosts are the
   decoration here, so they are what gives way.
   640px is the codebase's existing "no room for a sentence" breakpoint — same number the rail
   uses, so the two panels change at the same point even though they change differently. */
@media (max-width: 640px) {
  .md-board-detail-prediction-below__empty {
    justify-content: center;
  }
  .md-board-detail-prediction-below__empty-lead {
    /* No left inset once centred — it would push the pair off-centre by exactly that much. */
    padding-left: 0;
  }
  .md-board-detail-prediction-below__empty-ghosts {
    display: none;
  }
}
/* Shorter on the viewports where vertical room is scarce; the board keeps the difference. */
@media (max-width: 1024px) {
  .md-board-detail-prediction-below {
    height: var(--prediction-below-h, 78px);
  }
}
@media (max-width: 768px) {
  .md-board-detail-prediction-below {
    height: var(--prediction-below-h, 68px);
  }
}
/* ── 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):not(.md-shell--wordpred-below-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 BELOW THE SPEAK BAR — a horizontal panel spanning the board buttons' width. */
.md-shell--wordpred-below-bar .md-board-detail-prediction-below {
  display: grid;
}

.md-shell--wordpred-below-bar .md-board-detail-sentence-bar__prediction-group,
.md-shell--wordpred-below-bar .md-board-detail-prediction-rail {
  display: none;
}

/* 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.
   SCOPED TO THE IN-BAR GROUP (2026-09-02). This is a plate behind a 48px thumb that sits
   inside a dashed frame — which is what the in-bar placement has. The RAIL's image is
   full-bleed (`width:100%`, `padding:0`, `border:0`, see the rail rule ~74432) since
   bfd0facb2 (#900), so a background there paints the ENTIRE tile: every rail prediction
   showed a white block, and one with no symbol showed nothing but the block. Unscoped, this
   rule also WON over the rail rule — same specificity, later in the file — which is why
   removing the separate square.svg plate did not fix it. The rail lifts its placeholder with
   a halo instead. */
.md-board-detail--dark .md-board-detail-sentence-bar__prediction-group .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. */
  /* overflow:hidden on the rail/below-bar copies zeroes the flex min-size, so a
     flex:1 symbol can shrink this to nothing. Do not shrink: the word must stay
     visible even when a symbol is present. */
  flex-shrink: 0;
  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;
}

/* Un-Flip, shown at the far left of the bar only while the message is flipped. Reuses the
   `__btn` primitive above for size, radius and tap feedback -- only the colours and the
   shrink guard are specific to it (Rule #0.6). It sits OUTSIDE
   `.md-board-detail-sentence-bar__utterance`, so it stays upright and operable while the
   message it un-flips is rotated 180deg. `flex-shrink: 0` because the rotated message is a
   flex sibling that will happily take the whole row otherwise. */
.md-board-detail-sentence-bar__btn--unflip {
  flex-shrink: 0;
  background: rgba(42, 157, 143, 0.14);
  color: #46505F;
  padding: 12px 16px;
  margin-right: 8px;
}

.md-board-detail-sentence-bar__btn--unflip:hover {
  background: rgba(42, 157, 143, 0.22);
}

.md-board-detail-sentence-bar__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);
}

/* Anchor for the quick-actions popover. Deliberately plain — no transform, no filter, no
   backdrop-filter — because the whole point of this element is to be a positioning parent
   that does NOT create a stacking context. Adding any of those here would re-trap the
   popover and silently undo the fix; see the note in board-detail.hbs. */
.md-board-detail-sentence-bar-wrap {
  position: relative;
  /* Carries the sizing the sentence bar used to do itself. The bar declares
     `flex: 1; min-width: 0` so it fills the header row — but this wrapper is now the flex
     CHILD of that row, so without these the wrapper sized to its content and the bar
     filled the wrapper: a bar that shrank to fit whatever phrase was in it instead of
     spanning the header. Introduced by the wrapper, so it is fixed on the wrapper.
     `display: flex` + `min-width: 0` so the bar inside can still shrink below its
     content's intrinsic width, which is what keeps a long sentence from pushing the
     tools off the row. */
  display: flex;
  flex: 1;
  min-width: 0;
}

.md-board-detail-sentence-bar-wrap > .md-board-detail-sentence-bar {
  flex: 1;
  min-width: 0;
}

.md-board-detail-sentence-bar__quick-actions {
  position: absolute;
  /* OPENS DOWNWARD. This was `bottom: calc(100% + 8px)` — anchored above its trigger —
     and the sentence bar lives at the TOP of board-detail, so the popover rendered off the
     top of the screen and everything in it was unreachable. Measured at 640px:
     top = -184px, i.e. the whole 210px panel sat above the viewport with nothing to scroll
     to it (scripts/speak-header-narrow-qa.mjs).

     That is the worst version of this bug rather than a cosmetic one: the popover only
     exists at ≤640px, where `immersive_tools` has already folded Backspace, Clear and
     Speak options into this one chevron — so an AAC user on a narrow screen had no way to
     backspace or clear at all. `top` is correct unconditionally here, because the trigger
     is in a bar pinned to the top of the page; there is no arrangement of this screen where
     the space above it is the roomier side. */
  top: 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;
}

/* Slides DOWN into place, matching the direction the popover now opens. It used to start
   6px BELOW its resting position and rise, which was right while the panel was anchored
   above its trigger and reads backwards now. */
@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. */
/* ── 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-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. */
/* Smaller icon emphasis for both footer badges — reinforces the fallback role. */
/* Privacy/protected indicator row — sits directly beneath the title
   row, flush left with no top spacing. */
/* 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__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-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);
}

/* 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. */
/* 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. */
/* Dark-mode contrast for the quick-actions cluster — matches the
   actions-cluster dark gradient used by Cancel/Save above. */
/* 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. */
/* Share dropdown */
.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-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

/* Vertical stack for the board icon + "EDITING" pill so the pill sits
   centered directly under the board image. */
/* "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. */
/* 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--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-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 {
  /* LEFT padding quartered, 18px -> 4.5px (2026-08-27, Traci), so chips start closer to
     the bar's edge. Right stays 18px — only the left was asked for, and the right side
     holds the tool buttons which want the breathing room.
     THIS is the rule that governs it, not the `2px 10px 2px 4px` on the base
     `.md-board-detail-sentence-bar`: this light-mode speak surface overrides the shorthand,
     and the effective value was measured at 18px in the browser before changing anything.
     Dark mode is excluded by the `:not()` above and keeps the base 4px; the new-board
     preview re-declares its own padding-left, so neither follows this number. */
  padding: 2px 18px 2px 4.5px;
  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:not(.md-board-detail-modeling-btn--badge),
.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:not(.md-board-detail-modeling-btn--badge):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: #115C5B;
}

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

/* 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__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-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__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--board-detail.md-shell--many-columns {
  --bd-sidebar-w: 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--board-detail.md-shell--many-columns {
    --bd-sidebar-w: 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--board-detail.md-shell--many-columns {
    --bd-sidebar-w: 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 {
  /* Single source of truth, published on the SHELL so the prediction rail can match it
     even when this sidebar is not rendered (see --bd-sidebar-w definitions above). */
  width: var(--bd-sidebar-w, 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);
}

/* 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. */
/* 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__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-shell--board-detail {
    --bd-sidebar-w: 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-shell--board-detail {
    --bd-sidebar-w: 80px;
  }
  /* Side padding 8px -> 4px. The panel is 80px here (60/53 on a many-column board), so 8px a
     side spent a fifth of it on gutter and squeezed the thumbnails. Top/bottom are left alone
     -- vertical room is not what is scarce at this width. The <=768px rule below takes the
     sides to 0, and the short-screen rule after it sets all four; both still win on source
     order, so this only fills the gap between 769px and 1024px. */
  .md-board-detail-inline-sidebar__scroll {
    padding-left: 4px;
    padding-right: 4px;
  }
  .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-shell--board-detail {
    --bd-sidebar-w: 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__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 */
/* Placement mode */
@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);
  }
}
/* 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__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;
}

/* Flat variant of the same item list, used where the section has no parent toggle (a
   communicator-only account's Buttons controls). Deliberately NOT a modifier on
   __submenu: the indent rail, the reduced 15px size and the 38px row all exist to signal
   nesting, and there is no nesting here. A bare container lets the items inherit the
   top-level __item sizing instead, which is the larger of the two — the right direction
   for an AAC surface. */
.md-board-detail-actions-menu__section-items {
  padding: 0;
}

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

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

/* 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. */
/* Language filter. The header is a flex COLUMN, so "top right" is align-self, not a float —
   and that makes the speak/edit mirror a single property. The speak drawer is pinned to the
   viewport's right edge so the control hugs that side; the edit drawer carries
   --collection-left and is pinned to the left, so it mirrors. One template, two panels. */
.md-board-collection__locale {
  align-self: flex-end;
  margin: 8px 2px 0;
  min-width: 0;
  max-width: 70%;
  /* COLUMN, so the single-language hint stacks ABOVE the select. It was a row, which gave the
     hint whatever width the select left over — about 60px — and wrapped it one word per line.
     Stacking gives the sentence the full control width instead. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* The edit drawer is pinned to the left, so the whole stack mirrors — both which edge it hugs
   and which way its text runs. */
.md-board-detail-actions-menu--collection-left .md-board-collection__locale {
  align-self: flex-start;
  align-items: flex-start;
}

/* Explains a control that has nothing to choose between. Deliberately quiet — it is guidance,
   not a warning — but not below the AAC legibility floor either: at 12px this is normal-size
   text, so it needs 4.5:1. 0.66 alpha measures 4.35:1 on the #fff panel and misses; 0.75
   measures 5.66:1 and keeps the quiet register. Dark mode is handled alongside the other
   .md-board-detail--dark rules for this component, below. */
.md-board-collection__locale-hint {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
  color: rgba(27, 54, 93, 0.75);
}

.md-board-detail-actions-menu--collection-left .md-board-collection__locale-hint {
  text-align: left;
}

/* The hint is a sentence, so the stack needs more of the header than the bare select did. */
.md-board-collection__locale:has(.md-board-collection__locale-hint) {
  max-width: 100%;
}

.md-board-collection__locale-select {
  align-self: stretch;
}

.md-board-detail-actions-menu--collection-left .md-board-collection__locale {
  align-self: flex-start;
}

/* Active filter gets a verdigris hairline so a narrowed list is visibly narrowed rather than
   looking like an empty collection. */
.md-board-collection__locale--active .modern-select__trigger {
  border-color: #1A7B7A;
  background: rgba(42, 157, 143, 0.06);
}

.md-board-collection__locale-select {
  width: 100%;
}

/* The drawer host (.md-board-detail-actions-menu--collection) is `position: fixed` with
   `overflow: hidden`, so the default absolutely-positioned menu is clipped at the panel edge
   — styling-recurring-problems.md #1. Flow-position it instead: the menu pushes the section
   list down while open and is fully visible, which is the documented preferred fix for a
   panel of stacked fields. Same pattern as `.md-edit-profile__form .modern-select__list`
   (:49121) and the privacy modal's bound-select. */
.md-board-collection__locale .modern-select__list {
  position: static;
  margin-top: 4px;
}

/* Language-filter empty state. Replaces the whole section stack rather than sitting under an
   empty "My Boards" header: the brand sections already self-hide when they resolve to zero,
   so the alternative was a blank panel that looks like a broken filter. */
.md-board-collection__filter-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 10px;
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed rgba(17, 26, 46, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  color: #1A7B7A;
}

.md-board-collection__filter-empty-text {
  margin: 0;
  /* 15px, not a 12-13px caption: this is the only thing in the panel at this point, and the
     AAC sizing floor applies to explanatory copy as much as to controls. */
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink);
}

.md-board-collection__filter-empty-reset {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(42, 157, 143, 0.35);
  background: rgba(42, 157, 143, 0.1);
  color: #115C5B;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-board-collection__filter-empty-reset:hover {
  background: rgba(42, 157, 143, 0.18);
  border-color: #1A7B7A;
}

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

/* The hint had NO dark rule, so it kept the light navy: 1.16:1 against the panel surface
   (#1e2530, app.scss:88763) -- indistinguishable from the background. 0.65 white matches the
   quiet-label treatment its sibling .md-board-detail-actions-menu__section-label already uses
   in this same panel, and measures 7.3:1 there. */
.md-board-detail--dark .md-board-collection__locale-hint {
  color: rgba(255, 255, 255, 0.65);
}

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

.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) */
/* Options dropdown (right of sentence bar) */
/* Word suggestions bar */
/* 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__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. */
@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;
}

/* 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);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .md-board-detail-grid--compact .md-board-detail-grid__group {
    box-shadow: 0 0 0 calc(var(--bd-ring, 6px) / 3) rgba(0, 0, 0, 0.42), 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) rgba(255, 255, 255, 0.34), 0 0 0 calc(var(--bd-ring, 6px) - 0.5px) var(--bd-group-fill, transparent), 0 0 0 var(--bd-ring, 6px) rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.28);
  }
}
.md-board-detail-grid--compact .md-board-detail-grid__group {
  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);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .md-board-detail-grid--grouped .md-board-detail-grid__group-header,
  .md-board-detail-grid--compact-scroll .md-board-detail-grid__group-header {
    border-bottom: 1px solid rgba(27, 54, 93, 0.25);
  }
}

.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);
}
@supports not (color: color-mix(in srgb, red 50%, 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%), linear-gradient(rgba(16, 24, 38, 0.74), rgba(16, 24, 38, 0.74)), var(--bd-group-fill, #ffffff);
  }
}
.md-board-detail--dark .md-board-detail-grid--grouped .md-board-detail-grid__group {
  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;
}

/* Caps lock on-state. Thicker than the resting outline so the cue is not
   color-only (WCAG 1.4.1). Color is a saturated green so it reads against
   the pale mint fill used on the default caps key. */
.button.md-board-detail-symbol-card--caps-on,
.button.md-board-detail-symbol-card--caps-on:hover,
.button.md-board-detail-symbol-card--caps-on:focus,
.button.md-board-detail-symbol-card--caps-on:focus-visible,
.button.md-board-detail-symbol-card--caps-on:active {
  --bd-button-text-transform: uppercase;
  outline-color: #15803D;
  outline-width: 5px;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 5px #15803D, 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);
}

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

/* Soft-borders replaces card box-shadow. Keep the caps-on inset ring
   after that block so the on-state is not color-only (WCAG 1.4.1). */
.md-board-detail-grid--soft-borders .button.md-board-detail-symbol-card--caps-on:not(.md-board-detail-symbol-card--empty),
.md-board-detail-grid--soft-borders .button.md-board-detail-symbol-card--caps-on:not(.md-board-detail-symbol-card--empty):hover,
.md-board-detail-grid--soft-borders .button.md-board-detail-symbol-card--caps-on:not(.md-board-detail-symbol-card--empty):focus,
.md-board-detail-grid--soft-borders .button.md-board-detail-symbol-card--caps-on:not(.md-board-detail-symbol-card--empty):focus-visible,
.md-board-detail-grid--soft-borders .button.md-board-detail-symbol-card--caps-on:not(.md-board-detail-symbol-card--empty):active {
  outline-color: #15803D;
  outline-width: 5px;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 5px #15803D, 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);
}

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

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

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

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

/* In-grid word-prediction slots (`vocalization: ':suggestion'`) must always
   show the current word, matching the rail/below-bar rule that a symbol-only
   layout must not render blank prediction tiles. hide_label and text-pos-none
   stay in force for ordinary vocabulary buttons. */
.md-board-detail-symbol-card--suggestion-slot .md-board-detail-symbol-card__label,
.md-board-detail-symbol-card--suggestion-slot .md-board-detail-symbol-card__label.hide-label {
  display: -webkit-box;
}

.md-board-detail-grid--text-pos-none .md-board-detail-symbol-card--suggestion-slot .md-board-detail-symbol-card__label,
.md-board-detail-grid--text-pos-none .md-board-detail-symbol-card--suggestion-slot .md-board-detail-symbol-card__label-input {
  display: -webkit-box !important;
}

/* 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-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) ── */
/* ── Board detail search filter (standalone, legacy) ── */
.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;
}

/* Suppress tooltip on a dropdown trigger while the dropdown is open. */
/* 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. */
/* ── 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. */
/* 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 {
  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);
}

/* 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__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. */
/* 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. */
/* 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. */
/* 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. */
/* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* Label on the left — visible, modest weight. */
  /* Control on the right — let it size naturally and push to the end. */
  /* 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. */
  /* 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. */
  /* Icon-button groups (Text Position, Shape, Hidden) — 28px so they sit in
     the 36px row with 4px clearance. */
  /* Hidden row's eye-icon toggle-btns ship at 44×44 by default. */
  /* 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. */
  /* Skin swatch dots — 22px so they fit cleanly in the 28px wrapper with
     a 3px ring for the active state. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* Skin-tones dropdown swatch already inline-flexes — just keep the
     trigger sized like the others. */
  /* Sub-options checkbox row (mix-only / mix-prefer) sits below the
     skin row — needs to take its own line, full width, no border. */
  /* 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. */
  /* ── 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. ── */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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). */
  /* Dark-mode divider tint — match the existing display-prefs dark
     divider so both halves look like one component family. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* Override the base icongroup's explicit `height: 44px` with strict 28px
     so the gray pill hugs the row tightly. */
  /* Strict 28px on the dropdown trigger (Default font, etc.). */
  /* ── 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
  /* 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. */
/* 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. */
/* 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. */
/* 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. */
/* 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). */
/* When no filter cluster is rendered (display-prefs mode), keep the actions
   cluster anchored right instead of centered. */
/* `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. */
/* Narrow viewports: let the dock wrap and center the Save / Cancel cluster
   on its own line instead of pinning to the right edge. */
/* 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__btn--palette {
  gap: 4px;
  padding: 5px 8px;
}

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

/* Color wheel dot for custom color picker */
/* Wrapper for custom paint button + popover */
/* 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-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);
}

/* Custom paint color picker popover (inside dropdown) */
@media (max-width: 820px) {
  .md-board-detail-edit-toolbar__section-label {
    display: none;
  }
}
/* ── 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-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. */
/* 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 */
/* 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 {
  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. */
/* 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) */
/* 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. */
/* Save / cancel group at far right */
/* 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);
}

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

/* 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);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .md-folder-back {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), var(--btn-bg, rgb(105, 120, 142));
  }
}
.md-folder-back {
  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);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .md-folder-tab {
    background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), var(--btn-bg, rgb(105, 120, 142));
  }
}
.md-folder-tab {
  /* 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 */
/* ── 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 ──────────────── */
/* ── 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;
  }
}
@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,
  .md-board-detail-prediction-rail__empty-glyph,
  .md-board-detail-prediction-rail__empty-ghosts {
    /* Spine mode: the panel is one board button wide on a phone. The ghosts would be a
       column of near-invisible slivers and the glyph would crowd the rotated label, so the
       spine stands alone. */
    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-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-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-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-toolbar {
    gap: 6px;
  }
  .md-board-detail-quick-toggle {
    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);
}

/* 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-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__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-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__section-label {
  color: rgba(255, 255, 255, 0.5);
}

/* 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. */
/* 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 */
/* Search container focus: rounded ring matching the 8px border-radius */
.md-board-detail--dark .md-board-detail-divider {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.md-board-detail--dark .md-board-detail-grid__empty {
  color: rgba(255, 255, 255, 0.35);
}

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

/* ── Per-modal header padding ──────────────────────────────────────────────────
   Both of these are "+8px top and bottom" on what the modal ACTUALLY renders at, and both
   had to be written `.modal .md-modal-header--<x>` to work.
   THE BASE IS NOT 32px. `.md-modal-header { padding: 32px 24px }` looks like the default, but
   the shared block near the end of this file — `.modal-content > .modal-header, .modal
   .modal-header, .modal .md-modal-header, …` — sets `padding-top/bottom: 14px` at (0,2,0) and
   beats it for every header that is inside a `.modal`, which is all of them. So 14px is the
   real baseline, and a modifier at (0,1,0) loses to that shared rule and does nothing at all.
   That is exactly what happened to `--profiles` on its first pass: it was written as 40px
   expecting a 32px base and rendered at 14px, unchanged. Adding `.modal` to the front takes
   it to (0,3,0), which clears the shared rule.
   14 + 8 = 22px for both. Sides are untouched, so these modals still line up horizontally
   with the rest. */
.modal .md-modal-header--profiles,
.modal .md-modal-header--supervision {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* The header's two-tone mark, replacing `glyphicon-lamp`. Sits on the heading's text
   baseline rather than above it, which is why it is inline-block with a small nudge. */
.md-modal-header__glyph {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
}

/* The run/repeat buttons were `style='width: 90px'` inline. The width is here instead, as a
   MINIMUM: the three states ("run", "repeat") have different label lengths and a hard 90px
   clipped the longest once the modern button's 20px side padding replaced Bootstrap's. */
.md-profiles__run-btn {
  min-width: 90px;
  justify-content: center;
}

/* The profile LIST. Everything below was inline `style=` on the markup until 2026-09-14;
   moving it here is most of what "modern modal styles" means for this modal — the rules are
   the same values, now in one place where they can be read, overridden and kept consistent
   with the rest of the modal furniture. */
.md-profiles__table {
  width: 100%;
}

.md-profiles__row {
  /* Was `1px solid #ccc`, a hard grey that pre-dates the token palette. The navy hairline is
     what every other modern list in this app separates rows with. */
  border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

.md-profiles__row:last-child {
  border-bottom: 0;
}

.md-profiles__cell-mark {
  height: 80px;
}

.md-profiles__cell-main {
  width: 100%;
  padding-right: 10px;
}

.md-profiles__cell-main--browse {
  padding-top: 25px;
  padding-bottom: 25px;
}

.md-profiles__cell-action {
  padding: 0 5px;
  white-space: nowrap;
}

.md-profiles__name {
  /* 16px held from the inline value — it is already above this app's 14px floor for body
     copy, and it is the row's primary label. */
  font-size: 16px;
  font-weight: 700;
  color: #1B365D;
}

.md-profiles__meta {
  font-style: italic;
  /* The inline version left this to inherit, which on a white modal is the Bootstrap body
     grey. An explicit navy at 0.75 reads 5.9:1 on white — the muted look without the
     contrast cost of an unspecified grey. */
  color: rgba(27, 54, 93, 0.75);
}

.md-profiles__meta--clamped {
  max-width: 275px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-profiles__meta--block {
  overflow: hidden;
  max-height: 100px;
}

.md-profiles__meta--indent {
  margin-left: 30px;
}

.md-profiles__priors {
  margin-left: 15px;
  /* #888 was 3.54:1 on white — under AA for this size. Same muted intent, 5.9:1. */
  color: rgba(27, 54, 93, 0.75);
}

.md-profiles__heading {
  margin-top: 0;
}

.md-profiles__current {
  margin: 10px 0 20px;
}

.md-profiles__note {
  margin: 20px 0;
}

.md-profiles__status {
  margin-top: -10px;
  margin-left: 20px;
  font-style: italic;
  color: rgba(27, 54, 93, 0.75);
}

.md-profiles__lookup {
  margin: 15px 0;
}

.md-profiles__lookup-field {
  padding-right: 0;
}

.md-profiles__lookup-actions {
  padding-left: 3px;
  display: flex;
  gap: 8px;
}

.md-profiles__mark--empty {
  opacity: 0.8;
}

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

/* A small progress spinner for a message that is waiting on work (first used by the Boards
   page's copy-and-set-home dialog, components/confirm-home-board-copy.hbs). Still under reduced
   motion: the message beside it carries the meaning. */
.md-modal-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 2.5px solid rgba(27, 54, 93, 0.2);
  border-top-color: #1B365D;
  border-radius: 50%;
  animation: md-modal-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .md-modal-spinner {
    animation: none;
  }
}
/* WARNING CALLOUT -- the whole message on the Save Board completeness dialogs, not a token
   inside it. This is the sentence standing between someone and an empty or half-built board,
   so it is given the weight of a warning rather than reading as ordinary body copy.

   COLOURS ARE THE EXISTING WARM-CHIP SET, not new ones: `$caseload-badge-attn-*` is the
   repo's attention chip, whose ink was measured at 6.45:1 on its own background when it was
   desaturated (see the note at _variables.scss:707). Reusing it keeps this callout from
   drifting away from the warm chips elsewhere, and its contrast is already established
   rather than re-argued here.

   THE GLOW IS STATIC. A pulse would pull at the eye and keep pulling; on an AAC surface,
   where unexpected motion is disruptive, a steady halo says "look here" once and then stops
   talking. Two layers: a tight ring that extends the border against the modal's white, and a
   wider soft bloom for the glow itself. Alphas are measured as flattened tints over #FFF --
   0.30 lands at 1.23:1 and is a halo nobody sees, so the ring runs at 0.45 (1.37:1) and the
   bloom at 0.70 (1.66:1): plainly there, without becoming a second border. A glow is not
   meant to clear a contrast threshold; the INK does that, at 6.45:1, and carries the meaning.

   `border-radius: 14px` rather than a pill's 999px, because this wraps a FULL SENTENCE that
   wraps to two or three lines at modal width -- a 999px radius on a multi-line block bows the
   short edges into lozenge ends and eats the first and last words' breathing room. */
.md-modal-message--warn {
  padding: 12px 16px;
  border: 1px solid #C4B07E;
  border-radius: 14px;
  background: #ECE1C8;
  color: #5F4B18;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(196, 176, 126, 0.45), 0 0 16px 3px rgba(196, 176, 126, 0.7);
  /* The ring and bloom are drawn OUTSIDE the border box, so without room of its own the glow
     is clipped by the modal body's padding on the sides and overlaps the hint below. The base
     `.md-modal-message` sets `margin: 0 0 8px`; this restates all four so the extra bottom
     gap cannot be read as an override of a value that is not there. */
  margin: 4px 0 18px;
}

.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);
  }
}
@keyframes ub-home-ring {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ub-home-arrive {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 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--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 ──────────── */
@media (max-width: 550px) {
  .md-edit-unit-curriculum__url {
    grid-area: url;
  }
}
/* 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;
}

/* Upward listbox. Applied by MEASUREMENT, not by a caller: a dropdown that opts in with
   `@auto_flip` measures on open and adds this class only when the panel cannot show all of
   itself below and there is more room above (see bound-select.js#_shouldFlip). Used by the
   registration month/year pickers, which sit near the BOTTOM of the date-of-birth step --
   only an error line and Continue follow them -- so a downward grid panel would run past
   the fold and force the page to be scrolled.
   Safe to overflow upward here: the wrapper is the positioning context (`.bound-select`
   is `position: relative`, :90255) and `.register-card` is explicitly `overflow: visible`
   (:43277), so nothing clips it. */
.bound-select--up .bound-select__list {
  top: auto;
  bottom: calc(100% + 6px);
}

/* 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,
.bound-select--grid .bound-select__pager {
  grid-column: 1/-1;
}

/* Opt-in pager (`@paged`), used by the registration year picker. A switch or eye-gaze
   user has no wheel and cannot drag a scrollbar, so a long list needs hit targets.

   NOT sticky, and the paged list does NOT scroll. The previous version made these sticky
   inside the scrolling listbox, which put option rows underneath them -- measured in a
   browser, 2014-2011 were unreachable on any scroll position. A sticky element always has
   content slide under it, so the controls sit in normal flow and the page renders only
   what fits. */
.bound-select--paged .bound-select__list {
  max-height: none;
  overflow-y: visible;
}

.bound-select__pager {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}

.bound-select__pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Matches the 48px grid cell below, which is the switch/eye-gaze hit target this
     control exists to provide. */
  min-height: 48px;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 8px;
  background: rgba(27, 54, 93, 0.04);
  color: #1B365D;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bound-select__pager-btn:hover:not(:disabled) {
  background: rgba(27, 54, 93, 0.09);
}

.bound-select__pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.bound-select__pager-btn:focus-visible {
  border-color: #2A9D8F;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
  outline: none;
}

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

/* The "profile is getting old" state, between --secondary and --danger. Added 2026-09-14 for
   the Communication Profiles modal, whose run/repeat button steps secondary -> warn -> danger
   as a profile passes 10 and then 12 months (controllers/modals/profiles.js).
   #A35D00 rather than a brighter amber: white on it reads 5.09:1, clear of AA for the 14px
   label, where a conventional #F0AD4E would be about 2:1 and unusable with white. It is also
   distinguishably darker than `--danger` beside it in the same list. */
.md-modal-btn--warn {
  background: #A35D00 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(163, 93, 0, 0.25);
}

.md-modal-btn--warn:hover {
  background: #8A5000 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(163, 93, 0, 0.3);
}

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

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

/* ── ORG STAT CARDS: METRICS, NOT BUTTONS (restyled 2026-09-24) ─────────────────────────
   Requested: "the thick tinted headers, large all caps labels, heavy numbers, and deep shadows
   make these feel like oversized buttons... treat these as information at a glance".
   So: one pale surface per card (the teal header band is gone), a small medium-weight label
   above the value, prominence from WEIGHT rather than bulk, a subtle border with a soft shadow,
   a smaller radius, equal heights and tighter vertical padding.
   THE TEAL SURVIVES AS A 3px INSET LEFT LINE rather than a filled band -- "keep the teal as a
   restrained accent, perhaps a small line". Carried in `box-shadow` so it costs no layout and
   cannot shift the text; the `--system` variant swaps it for slate, which is how the two
   categories stay legible now that the header that used to distinguish them is gone. */
.md-org-stat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Equal heights across the row -- the brief asks for it and grid items only stretch while
     nothing else sets a height. */
  height: 100%;
  background: #fff;
  border: 1px solid rgba(27, 54, 93, 0.1);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 rgba(44, 183, 176, 0.55), 0 1px 2px rgba(27, 54, 93, 0.06);
}

/* The header is now just the label's slot: no band, no rule, no radius of its own. */
.md-org-stat-card__head {
  padding: 12px 14px 0;
}

.md-org-stat-card__label {
  margin: 0;
  /* 14px IS A FLOOR AND IS DELIBERATELY NOT REDUCED, though the brief asks for a "small" label.
     It is the part that says what the figure means, and this product's users include people
     reading at distance and with low vision -- the same floor the room KPI labels hold. The
     "smaller" reading is met by dropping the uppercase, the letter-spacing and the weight
     instead, which is what made it read as a heading. */
  font-size: 14px;
  font-weight: 600;
  /* Sentence case as far as CSS can take it: the uppercase transform is gone. The STRINGS are
     Title Case ("Last Session") and stay that way -- rewording them is an i18n change across 13
     locales, not a style change, and is worth doing on purpose rather than as a side effect. */
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--md-muted, rgba(27, 54, 93, 0.7));
}

.md-org-stat-card__body {
  padding: 2px 14px 12px;
}

.md-org-stat-card__value {
  /* 20px -> 18px, 800 -> 700: "clear prominence through weight rather than sheer bulk". */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1B365D;
}

/* Card variant by PURPOSE: activity cards take the teal accent line, SYSTEM cards a slate one,
   so the two categories stay legible at a glance. This used to be carried by two different
   header FILLS; with the bands gone it moves to the same 3px inset line, which is the whole
   point of keeping an accent at all. */
.md-org-stat-card--system {
  box-shadow: inset 3px 0 0 rgba(27, 54, 93, 0.28), 0 1px 2px rgba(27, 54, 93, 0.06);
}

/* 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. */
/* 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. */
/* LinkTo renders <a>; make the option fill the row consistently. */
/* ── People I Supervise link card ── */
.md-org-supervisees-link {
  margin-bottom: 20px;
  text-align: center;
}

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

/* THE LETTER HEADERS of the All Organizations list (templates/organizations.hbs). The toggle had
   no rule at all, so it drew as the browser's grey default button (restyled 2026-10-02, requested:
   "restyle the letter headers with our new modern styles"): a full-width rounded row in the org
   list rows' language, the letter as a soft badge, the chevron turning when the group is open. The
   keyboard ring is the app's global one. */
.md-org-letter-group {
  margin-bottom: 8px;
}

.md-org-letter-group__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--md-ink, #111A2E);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-org-letter-group__toggle:hover {
  background: rgba(76, 134, 216, 0.06);
  border-color: rgba(76, 134, 216, 0.25);
  box-shadow: 0 2px 8px rgba(76, 134, 216, 0.08);
}

.md-org-letter-group__toggle .md-muted {
  font-size: 14px;
}

.md-org-letter-group__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  /* Darker (requested 2026-10-02): solid AA denim with a white letter; white on the AA shade
     keeps the 4.5:1 that shade is named for. */
  background: #2860C9;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.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.45;
  transition: transform 0.2s ease;
  margin-left: auto;
}

.md-org-letter-group__chevron.is-open {
  transform: rotate(180deg);
}

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

/* THE REPORT MENU OPENS IN FLOW, NOT OVER THE PAGE (2026-09-25, requested: "...and not cut off
   (on the right or the bottom)").
   THE BOTTOM CUT-OFF HAD A DIFFERENT CAUSE FROM THE RIGHT-HAND ONE, which is why this is a
   second rule. Diagnosed with the ancestor walk docs/styling-recurring-problems.md prescribes
   rather than guessed at: with the menu open at y=453 and 320px tall, `.md-workspace`
   (`overflow: hidden auto`) ends at y=567, so it cut the list off ~114px in. It is the nearest
   ancestor that clips, and no z-index can escape an `overflow` ancestor.
   `position: static` IS THE DOC'S PREFERRED FIX (#1, "flow-positioned dropdown"): the menu takes
   real layout space and pushes the divider and results down, so there is no longer anything for
   an ancestor to clip. `top/left/right` and `z-index` stop applying with it, which is fine --
   they only ever described where the floating box went.
   ANCHORED `position: fixed` (the doc's #2) IS RULED OUT HERE, and the same walk says why:
   `main.md-main--org` carries a transform, which makes it the containing block for fixed
   descendants, so fixed would not escape the clip either.
   SCOPED TO THIS STRIP. The per-page/sort/filter menus live in `.md-org-report-filters` and are
   short lists that were not reported; they keep the floating behaviour. */
.md-org-report-controls .bound-select__list {
  position: static;
}

.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;
  /* 180 -> 420 (2026-09-25, requested: "make the reports for organizations wider and not cut
     off (on the right...)"). THE RIGHT-HAND CUT-OFF WAS THIS NUMBER, not a clipping ancestor:
     `.bound-select__list` is `left: 0; right: 0` (:94407), so the menu is exactly as wide as
     this trigger, and at 180px every long report name ellipsised ("All organization co…").
     420 IS MEASURED, not chosen: the 19 option labels were rendered into an unconstrained span
     and the widest ("Button labels that don't have matching parts of speech") came back at
     388px. 420 clears that plus the list's 6px padding and the option's own inset, so no label
     truncates. Anything less truncates SOME label, and the list is the one place a user is
     reading these names to tell them apart.
     `--sm` IS UNAFFECTED: the per-page/sort/filter selects set `min-width: 0` below and come
     later in source order, so they keep the compact size they were given. */
  min-width: 420px;
}

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

/* The Modern org page's Admin tools links (templates/organization/index.hbs), a wrapping row. */
.md-org-admin-tools__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

/* ADMIN ACTIONS (templates/organization/extras.hbs, restyled 2026-10-02 onto the Settings
   primitives above). What those do not already cover: an input that shares its row with a
   button, a two-up grid for the purchase forms, and the lists (blocked emails and cells, custom
   purchases). */
.md-org-admin-actions__input {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
}

.md-org-admin-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.md-org-admin-actions__create {
  margin-top: 20px;
}

.md-org-admin-actions__check {
  margin-bottom: 14px;
}

.md-org-admin-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.md-org-admin-list__item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--md-ink, #111A2E);
  overflow-wrap: anywhere;
}

.md-org-admin-list__item + .md-org-admin-list__item {
  border-top: 1px solid rgba(27, 54, 93, 0.06);
}

.md-org-admin-list--gifts {
  max-height: 420px;
}

.md-org-admin-gift {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.md-org-admin-gift__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: #2860C9;
  padding-top: 2px;
}

.md-org-admin-gift__body a {
  font-weight: 600;
}

.md-org-admin-gift__meta {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--md-muted, #1B365D);
}

/* Billing Details' four license counts: two by two, one column on phones. */
.md-org-billing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 550px) {
  .md-org-billing-grid {
    grid-template-columns: 1fr;
  }
}
/* BILLING DETAILS' "Associated Purchases" (templates/organization/subscription.hbs, restyled
   2026-10-02): user / purchase / expires as rows in the same rounded panel as the lists above,
   with a muted header row. Stacks to one column on narrow screens. */
.md-org-billing-subs {
  border: 1px solid rgba(27, 54, 93, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.md-org-billing-subs__row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--md-ink, #111A2E);
}

.md-org-billing-subs__row + .md-org-billing-subs__row {
  border-top: 1px solid rgba(27, 54, 93, 0.06);
}

.md-org-billing-subs__row--head {
  font-weight: 700;
  color: var(--md-muted, #1B365D);
  background: rgba(27, 54, 93, 0.03);
}

.md-org-billing-subs__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.md-org-billing-subs__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

@media (max-width: 550px) {
  .md-org-billing-subs__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .md-org-billing-subs__row--head {
    display: none;
  }
}
.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);
  }
}
@media (max-width: 550px) {
  .md-org-stats__grid {
    grid-template-columns: 1fr;
  }
  .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;
  }
  /* The report picker's 420px floor is a wide-screen figure (it exists so the option labels do
     not truncate); below this breakpoint the controls are a stretched column and that floor
     would push the card wider than the viewport. Released here so it simply fills the column --
     labels wrap or ellipsise at this width either way, and a horizontal scrollbar on the page
     is the worse outcome. */
  .md-org-report-select {
    min-width: 0;
  }
  .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);
}

@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. */
/* ── Copy progress meter ──────────────────────────────────────────
   Shared by the Copying Board modal and the minimised copy drawer, so the two read as one
   thing when a copy is sent to the background mid-flight.

   TWO STATES, and the distinction is the point. A board copy runs in two phases and only the
   second reports a percentage (edit_manager#copy_board), so:
     - no modifier  -> indeterminate: a sweep, no width, no number;
     - --determinate -> the fill's width IS the measured percentage.
   The sweep animation is deliberately dropped in the determinate state; a bar that both
   sweeps and fills reads as two different progress claims at once. */
.ll-copy-meter {
  position: relative;
  width: 100%;
  height: 6px;
  margin: 14px 0 0;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  overflow: hidden;
}

.ll-copy-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2A9D8F 0%, #4C86D8 100%);
  /* Only the determinate bar animates its width. Transitioning an indeterminate bar would
     animate it back to 0 on every poll that returns no figure. */
  transition: none;
}

.ll-copy-meter--determinate .ll-copy-meter__fill {
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Indeterminate: the fill is unused (width stays 0) and a sweeping highlight carries the
   "working" signal instead -- same gesture as .ll-premium-progress__bar below, so the two
   loading languages match. */
.ll-copy-meter:not(.ll-copy-meter--determinate)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 157, 143, 0) 0%, #2A9D8F 35%, #4C86D8 65%, rgba(76, 134, 216, 0) 100%);
  transform: translateX(-100%);
  animation: ll-copy-meter-sweep 1.5s ease-in-out infinite;
}

@keyframes ll-copy-meter-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Respect reduced-motion: hold a static, clearly-visible bar rather than sweeping. An AAC
   user with vestibular sensitivity should not have to watch a looping animation to know a
   copy is running -- the label already says so. */
@media (prefers-reduced-motion: reduce) {
  .ll-copy-meter:not(.ll-copy-meter--determinate)::after {
    animation: none;
    transform: translateX(0);
    opacity: 0.55;
  }
  .ll-copy-meter--determinate .ll-copy-meter__fill {
    transition: none;
  }
}
.ll-copy-meter__value {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* stops the row twitching as digits change */
  color: #115C5B;
  text-align: center;
}

/* Drawer variant: thinner, tighter, and the percentage sits inline under the hint. */
.ll-copy-meter--drawer {
  height: 4px;
  margin-top: 10px;
}

.ll-copy-drawer__percent {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #115C5B;
}

.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. */
/* ── 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);
    }
  }
}
/* ── Tour offer (components/tour-offer) ──────────────────
   The one-time "Take a quick tour (1 min)?" after a communicator's first
   spoken message. Same card as .ll-toast; it waits for a choice. */
.ll-tour-offer {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 12px 12px 18px;
  background: #fff;
  border-radius: 14px;
  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: 15px;
  font-weight: 600;
  z-index: 10000;
}

.ll-tour-offer__text {
  margin-right: 4px;
}

.ll-tour-offer__btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.2);
  background: #fff;
  color: #1B365D;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ll-tour-offer__btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, rgb(29.5597315436, 139.8402684564, 138.7033557047), #1A7B7A);
}

.ll-tour-offer__btn:focus-visible {
  outline: 3px solid #1A7B7A;
  outline-offset: 2px;
}

/* ── 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. */
/* ── 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__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 {
  /* ===================== MERGE DIRECTIVE — READ FIRST =====================
     TOP-CENTRE WINS. This placement supersedes the earlier corner/left anchor
     (`top: 100%; left: 16px; transform: none`) and every variant of it.

     Other branches still carry the old anchor, and some carry a comment that
     says "Do NOT re-add left: 50% ... translateX(-50%)". If a merge, rebase or
     cherry-pick reintroduces EITHER the left/corner declarations OR that
     prohibition, the resolution is to KEEP THIS RULE AS WRITTEN and discard the
     incoming one — do not split the difference, and do not layer a
     higher-specificity override on top to win the cascade (that is how this
     rule accumulated its contradictory history in the first place).

     The same applies to the `@media (max-width: 720px)` override further down,
     which must stay at `top: 0`; an incoming `top: 100%` there re-seats the tab
     below the navbar on small screens only, which is the harder version of this
     bug to notice.

     The old prohibition is not wrong about its own case — it is about a
     PAGE-LEVEL `position: fixed` tab hanging down over content. It does not
     describe this rule. Reasoning is below.
     ======================================================================= */
  /* TOP-CENTRE, INSIDE the navbar (requested 2026-09-10). `absolute` + `top: 0`
     seats the tab on the navbar's own top edge; `left: 50%` + translateX centres
     it. The rounded-bottom / no-top-border shape still reads correctly there —
     it hangs from the bar's top edge rather than from the page's.

     This REVERSES the corner anchor D10 asked for, and replaces a comment that
     said "Do NOT re-add left: 50% ... translateX(-50%)". That prohibition was
     conditional and its condition is gone: the 2026-08-23 attempt failed because
     a `#within_ember...` rule was ALSO forcing `position: fixed; top: 0`, so the
     centring applied to a PAGE-LEVEL tab hanging down over content — which is
     the mis-tap target D10 actually objected to. That override has since been
     removed, and this rule stays `absolute`, so the tab cannot escape the navbar.
     Both recorded traps are about the other placement, not this one: "at top:0
     the corner is NOT free" concerns CORNER anchoring (Settings / Support /
     online-status sit there; centre does not), and "top: 100% resolves against
     the VIEWPORT" only bites under `position: fixed`. The base rule's own note
     describes top-centre as "where nothing sits".

     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` (~3468).
     `.app-navbar__inner { overflow: visible !important }` above is load-bearing
     while this is `absolute`: any ancestor `overflow` in this chain would clip
     the tab. Centring is measured against that inner wrapper, so the tab centres
     on the navbar's content box rather than the viewport — which is what "centre
     of the navbar" means when the bar is inset.

     NOT changed here: which pages show the tab at all. That is
     `showBetaFeedbackDrawerTab` (components/app-navbar.js:46), which suppresses
     it on board-detail and on a rendered board in speak/edit mode, where
     application.hbs renders the bottom-centre --speak tab instead. */
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* 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).

   ITS ORIGINAL REASON NO LONGER APPLIES, and the sizing is kept on purpose.
   The rationale was geometric: with the tab seated BELOW the navbar, the 28px
   gap between the navbar (bottom 70) and the home page's secondary nav row
   (top 97) could not fit a 36px tab, so narrowing it (141px vs 172px) bought
   horizontal clearance. As of 2026-09-10 the tab sits top-centre INSIDE the
   navbar, so it no longer occupies that gap and cannot clip that row at any
   width — the collision this block existed to mitigate is gone.

   What it now does is keep the tab from crowding the navbar's own controls at
   narrow widths, where the bar's centre and its left/right clusters converge.
   That is a real constraint but a DIFFERENT one, and the thresholds below were
   never measured against it. Treat 721/820 as inherited, not derived: if the
   tab is seen touching navbar controls, re-measure rather than assuming these
   numbers were chosen for the current placement.

   The previous anchored-right and anchored-left measurements were deleted with
   this rewrite: both described a tab hanging beneath the navbar and neither can
   be re-derived for a centred tab inside it. CLAIM-CHECK-BACKLOG.md A1 tracked
   a residual ~700-740 clip under the old placement and is moot for the same
   reason. */
@media (min-width: 721px) and (max-width: 820px) {
  .beta-feedback-drawer-tab--navbar {
    font-size: 0.95rem;
    min-height: 34px;
  }
}
/* CLASSIC view (2026-09-02, requested): the tab sits at the TOP of the navbar
   rather than hanging below it. The base rule puts it at `top:
   var(--topbar-height)`, i.e. just under the bar — which on a tall header reads as
   floating in the middle of the page rather than belonging to the navbar. Pinning
   to `top: 0` seats it against the very top edge, still centred horizontally by the
   base rule's `left: 50%` + `translateX(-50%)`.
   Card View is unaffected: it keeps the `--navbar` corner anchor (D10). */
.beta-feedback-drawer-tab--classic-top {
  top: 0;
}

.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 has no override here. It uses the
   `.beta-feedback-drawer-tab--navbar` rule's own `position: absolute; top: 0`,
   which seats it top-centre INSIDE the navbar (position: relative, height 70).
   Do not reintroduce `position: fixed` for the tab: that variant's placement is
   measured against `.app-navbar__inner`, and under `fixed` it would resolve
   against the viewport instead — the failure mode that previously dropped the
   tab off-screen. The drawer PANEL still pins to top: 0 independently. */
/* 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 .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-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;
  }
  /* Matches the base variant's `top: 0` (top-centre INSIDE the navbar). This
     block previously re-seated the tab BELOW the navbar at narrow widths; with
     the tab now inside the bar there is nothing to clear, and leaving it at
     100% would have put small screens somewhere the tab no longer belongs. */
  .beta-feedback-drawer-tab--navbar {
    top: 0;
  }
  /* 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;
  }
  /* Classic keeps its top-edge anchor at narrow widths, for the same reason the two
     variants above re-assert theirs. The generic `.beta-feedback-drawer-tab` rule at
     the top of this block sets `top: var(--topbar-height, 70px)` at the SAME
     specificity (0,1,0) and later in source than the unscoped `--classic-top` rule,
     and a media query adds no specificity of its own — so without this line Classic
     silently reverted to hanging below the navbar on every viewport <=720px while
     working correctly on desktop. */
  .beta-feedback-drawer-tab--classic-top {
    top: 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);
}

/* 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. */
/* 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-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. */
@media (max-width: 600px) {
  .beta-feedback-modal-wrap > .la-modal-header {
    padding: 20px 20px 16px;
  }
}
.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 14px header/footer vertical
   padding (reduced from 28px on 2026-09-03 to buy back vertical space in
   every modal) 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 {
  /* 14 -> 22px (requested 2026-09-14: "any modal header that is 14px needs 8px added each
     way"). THIS BLOCK IS THE ONE THAT REACHES ALMOST EVERY MODAL: it is (0,2,0) and sits
     late in the file, so it beats both the `.md-modal-header` base (0,1,0) and the dozen-odd
     per-wrap rules that declare 18px or 20px at the same (0,2,0) earlier on. Those values are
     dead; changing them would have moved nothing. The handful of headers that DO win against
     this — repairs, languages, phrases, share-text, gif, inbox and `--tight`, all at (0,3,0)
     or later — were each at 14px too and are raised alongside it, so the set stays uniform. */
  padding-top: 22px;
  padding-bottom: 22px;
  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-languages-modal-footer,
.modal .la-modify-core-modal-footer,
.modal .la-new-board-modal-footer,
.modal .la-phrases-modal-footer,
.modal .la-sync-details-modal-footer,
.modal .la-valet-modal-footer {
  padding-top: 14px;
  padding-bottom: 14px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(76, 134, 216, 0.08), rgba(123, 107, 173, 0.05)), #F8F9FA;
}

/* OPT-IN MODAL DENSITY VARIANTS.
   Placed HERE, immediately after the `.modal .md-modal-*` cluster above, and scoped
   with `.modal` — both are required, and neither alone is enough.

   These started life ~9,500 lines earlier as bare `.md-modal-header--tight` etc.
   That is specificity (0,1,0), while the cluster above matches the same elements at
   (0,2,0) via `.modal .md-modal-header` / `.modal .md-modal-footer`. Specificity is
   decided before source order, so the variants lost outright and the Switch
   Communicators modal kept the full 28px/28px padding — the tightening never applied
   at all. Matching the (0,2,0) scope makes them competitive; sitting after the
   cluster makes them win the tie.

   Still opt-in: ~100 modal templates share the base classes, and only a template that
   asks for these modifiers gets them. Currently components/switch-communicators.hbs.

   Note the base padding inside a modal is 14px (the cluster above), not the 32px on
   the unscoped `.md-modal-header` rule — the earlier comments here cited the wrong
   baseline because they were written against the unscoped rule.

   The header variant now matches the 14px base exactly (2026-09-03): it was 16px,
   which after the base dropped from 28px to 14px was LOOSER than the baseline it was
   written to tighten. It is kept rather than deleted so the three modifiers stay a set
   and a template asking for `--tight` keeps working. The footer variant (4px) is still
   genuinely tighter than the base. */
.modal .md-modal-header--tight {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* The body variant needs no `.modal` scope to win (there is no `.modal .md-modal-body`
   rule), but is kept with its siblings so the three are read and changed together.
   24px top and bottom (2026-09-03). `padding-bottom` is set explicitly because the base
   `.md-modal-body` is the shorthand `padding: 8px 24px 28px` (app.scss:87153) — without
   it the body kept a 28px floor under a 24px ceiling. Side padding still comes from that
   shorthand and is deliberately untouched. */
.modal .md-modal-body--balanced {
  padding-top: 24px;
  padding-bottom: 24px;
}

.modal .md-modal-footer--tight {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 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 header — 26px top / 30px bottom (requested 2026-09-14), sides left at
   the shared 24px. Arrived at by steps: 64 (a doubling of the shared 32), then 38, then 34
   top, then 8px off each.
   THE 4px GAP BETWEEN TOP AND BOTTOM IS DELIBERATE, not a typo: the <h3> carries a 60px badge
   avatar pulled out of flow by `margin: -15px 10px -25px -5px` (badge-awarded.hbs:8), which
   hangs 10px further below the text box than above it, so equal padding does not read as
   equal. The pair has kept that 4px offset through every revision — preserve it if these
   move again.
   Scoped via `:has(.md-badge-awarded)` like the button rule below, so only this modal
   changes and every other modal keeps `.md-modal-header`'s 32px (app.scss:89338).
   This header is the one that needs it: its <h3> carries a 60px badge avatar pulled out of
   flow with `margin: -15px 10px -25px -5px` (badge-awarded.hbs:8), so the image overhangs
   the header box top and bottom and crowds the shared padding in a way no other modal does.
   Longhands, not the `padding` shorthand, so the shared 24px sides keep coming from the
   base rule rather than being restated here and left to drift.
   Unscoped by scheme on purpose — this applies in Gentle and Focused, classic and modern. */
.modal-content:has(.md-badge-awarded) .md-modal-header {
  padding-top: 26px;
  padding-bottom: 30px;
}

/* Badge-Awarded modal progress bar — the modern bar treatment (requested 2026-09-14).
   This was raw Bootstrap: a 4px-radius #f5f5f5 trough with an inset shadow and a #337ab7
   fill. The values below are the same ones the caseload badge bar uses
   (_caseload.scss:4024-4040) — 999px track, navy-at-0.10 fill with a 0.14 rim, and the
   verdigris ramp — so the two bars in the app read as one component.
   HEIGHT IS THE ONE DEPARTURE: the caseload bar is 10px because it sits in a dense list
   row; this one is the focal element of a modal at 200px wide, where 10px reads as a
   hairline, so it takes 14px.
   `box-shadow: none` on both is load-bearing — Bootstrap puts an inset shadow on each, and
   they read as grime under a flat modern fill.
   Scoped like the button rule below, so no other modal's progress bar moves. Unscoped by
   scheme on purpose: this applies in Gentle and Focused, classic and modern. */
.modal-content:has(.md-badge-awarded) .progress {
  height: 14px;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  border: 1px solid rgba(27, 54, 93, 0.14);
  overflow: hidden;
  box-shadow: none;
}

.modal-content:has(.md-badge-awarded) .progress .progress-bar {
  height: 100%;
  border-radius: 999px;
  /* THE ACTIVE-TAB RAMP (requested 2026-09-14) — the same two stops as
     `.ch-tab.is-active` in `_focused-view.scss`, so the badge bars and the classic home
     page's selected tab are one gradient.
     90deg, not the tab's 135deg: the stops are the request, the angle is a function of the
     shape. A diagonal across a 14px-tall bar puts the whole transition in a short corner
     sweep; horizontal runs it along the axis the value is actually read on.
     It also measures BETTER than the verdigris ramp it replaces. Against the modal's
     #E8EBEF track the old fill's light stop was 2.78:1 — under the 3:1 WCAG 1.4.11 asks of
     a non-text UI element — and both of these stops clear it, at 3.92 and 4.13. */
  background: linear-gradient(90deg, #367D8E 0%, #536FAE 100%);
  box-shadow: none;
}

/* 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. */
/* THE GENTLE-ONLY SOFTENED FILL IS GONE (2026-09-14). It overrode both bars with
   `#68B5A9 -> #1F7A72` purely to soften the verdigris ramp, and carried a long note
   documenting that it took the fill from 2.62:1 to 1.89:1 against the track — an explicit
   trade, below the 3:1 WCAG 1.4.11 asks of a non-text UI element.
   Both halves of that are obsolete: the ramp it softened has been replaced, and keeping the
   override would have meant Gentle never showed the new gradient at all. The trade goes with
   it — the fill now measures 3.90-4.32 on the card and 3.92-4.13 in the modal, so the bar is
   above the guideline in both schemes for the first time. */
/* BadgeProgress, `@modern` variant — classic-view's communicator cards only.
   The bar is the SAME treatment as the Badge In Progress modal (999px track, navy-at-0.10
   fill with a 0.14 rim, verdigris ramp), so the card and the modal it opens are one
   component rather than two lookalikes. The legacy inline styling it replaces was a 30px-tall
   Bootstrap bar with a 2px near-black border and a mustard `progress-bar-warning` fill.
   FLEX, replacing the float. The image used to `float: left` with negative margins to sit
   beside the bar; that only worked while the bar was 30px tall, and at 14px it would have
   left the bar pinned to the top of the 40px image. A flex row with `align-items: center`
   centres them against each other at any height.
   `.progress-bar` is reached through two ancestors so it outranks Bootstrap's
   `.progress-bar-warning` background-color (0,1,0) without !important. `box-shadow: none` on
   both kills Bootstrap's inset shadows, which read as grime under a flat fill.
   No scheme scoping — this applies in Gentle and Focused alike. */
.badge-progress--modern > a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.badge-progress--modern img {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center;
}

.badge-progress--modern .progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  /* A LIGHT TRACK ON THE CARD, where the modal keeps its navy-at-0.10 one. The two sit on
     very different grounds: the modal's bar is on white, so a faint navy track reads as the
     empty half; this bar is on a communicator card, which is a tinted chip in Gentle and a
     mid-tone panel in Focused. Against those, a 0.10 navy track is nearly the card's own
     luminance, and the new fill — which is darker than the old verdigris — measured 2.82:1
     on the Gentle chip and 1.30:1 on the Focused panel, both under the 3:1 WCAG 1.4.11 asks
     of a non-text UI element.
     A translucent WHITE track inverts that: the empty half reads as light on both cards and
     the dark fill separates from it at 4.32 and 3.66. The 1px rim below is what keeps the
     track itself perceivable against the card. */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 54, 93, 0.14);
  overflow: hidden;
  box-shadow: none;
}

.badge-progress--modern .progress .progress-bar {
  height: 100%;
  border-radius: 999px;
  /* Same ramp as the modal above — the card and the modal it opens stay one component. */
  background: linear-gradient(90deg, #367D8E 0%, #536FAE 100%);
  box-shadow: none;
}

/* The badge artwork block on the in-progress branch — wrapper AND image both 175px tall
   (requested 2026-09-14), down from the 200px the image used to carry inline.
   175 on BOTH, so the wrapper is exactly the image and contributes no dead space of its own.
   That replaces the earlier `margin-bottom: -16px`, which was a way to trim the block before
   an exact height was specified; keeping both would have stacked a negative margin on top of
   a fixed height and taken the block to 159.
   `height` + `width: auto`, never a fixed width: the placeholder SVG is square, but a real
   badge's artwork is any aspect at all, and pinning both axes would squash it. `object-fit`
   is belt-and-braces for the same reason.
   `display: block` also removes the inline-baseline descender gap — an <img> is inline by
   default, so its line box reserves room for descenders a replaced element never draws,
   which is why this block always measured a few px taller than the image. `margin: 0 auto`
   re-centres it, since the parent's `text-align: center` only reaches inline content.
   The inline `width: 200px` had to come OFF both images in this branch: an inline style
   outranks this rule, and 200 wide against 175 tall would have distorted the square SVG.
   Scoped to this class — the EARNED branch keeps its 200px and its medal/ribbon layout. */
.md-badge-awarded__art {
  height: 175px;
}

.md-badge-awarded__art img {
  display: block;
  margin: 0 auto;
  height: 175px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* "To earn this badge, <user> needs to: ..." — the criteria block under the progress bar.
   75% OF THE MODAL (requested 2026-09-14), replacing an inline `max-width: 300px` that held
   it to a 300px column with ~125px of dead space either side however wide the modal grew.
   `width`, not `max-width`: this has to FILL 75%, and a max- only caps it.
   The percentage resolves against the centred wrapper this sits in, which is a full-width
   child of `.md-modal-body` — so 75% here is 75% of the modal's content box.
   Needs no `:has(.md-badge-awarded)` scoping: the class is already component-specific.
   All views, all modes — no scheme scoping, same as the rest of this block. */
.md-badge-awarded__explain {
  width: 75%;
  margin: 10px auto;
  font-size: 14px;
}

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

.modal-content .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 {
  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 {
  /* 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 {
  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 {
  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;
}

/* NOTE ON ORDER: this block MUST come after the `.modal-content .user_select.btn`
   card rules above. Both selectors are specificity (0,3,0) and both mark
   padding/border-radius `!important`, so source order decides — and while this
   sat BEFORE them, every compact row inside a modal silently took the CARD's
   18px/16px padding and radius instead of the list's 8px/12px. The rows were
   laid out as a list (flex-direction carries !important and won) but sized as
   cards, which is why "compact" did not look compact. Moved rather than given a
   higher-specificity duplicate, per CLAUDE.md rule 7. */
/* Compact variant (`<UserSelect @compact={{true}} />`, currently the
   switch-communicators modal) — the SAME markup laid out as compact WRAPPING rows:
   each entry is avatar-left/name-right on one line, and several fit per row rather
   than one card per column or one row per line.
   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 {
  /* GRID, not wrapping flex. Flex `flex: 1 1 200px` let the last row's items grow
     to absorb the leftover space, so a trailing row of 1-2 entries rendered wider
     than the full rows above it — unequal and unaligned. A grid track definition
     gives every entry the same width and puts them in real columns.
     auto-FILL (not auto-fit): auto-fit collapses the empty tracks and the survivors
     stretch, which reintroduces exactly the unequal last row. auto-fill keeps the
     empty tracks, so column widths are identical on every row.
     `align-items: stretch` (grid default, stated for intent) keeps every entry in a
     row the same height. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: stretch;
  gap: 8px;
  /* The container also carries Bootstrap's `.row`, whose -15px side margins pull it
     wider than its parent and shift the whole block left. Zero them so the tracks
     start at the modal's content edge. */
  margin-left: 0;
  margin-right: 0;
  /* Bootstrap's clearfix. `.row:after, .row:before { display: table; content: " " }`
     ships in vendor.css, and in a GRID container a generated pseudo-element is a
     grid ITEM — so ::before silently claimed the first cell and pushed the first
     user into column 2, leaving a hole at the top-left (and ::after consumed a cell
     at the end). The clearfix exists to contain floats, which a grid has none of. */
}
.user-select-grid--compact::before, .user-select-grid--compact::after {
  display: none;
}
.user-select-grid--compact {
  /* Neutralise the Bootstrap column entirely. `col-md-3 col-sm-4 col-xs-6` brings a
     FLOAT and a percentage width; a float on a grid item is ignored, but any of
     these surviving (an unbuilt stylesheet, a future BS upgrade, a cached asset)
     reintroduces exactly the staggered rows this replaced — each line laying out
     against its own float context rather than a shared column. Explicitly clearing
     float/width/padding makes the alignment hold either way. */
}
.user-select-grid--compact > [class*=col-] {
  float: none;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.user-select-grid--compact {
  /* Every entry fills its track, so the cards line up on both edges. */
}
.user-select-grid--compact > [class*=col-] > .user_select,
.user-select-grid--compact > [class*=col-] > .btn-group {
  width: 100%;
  height: 100%;
}
.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: 10px;
  padding: 7px 12px !important;
  border-radius: 11px !important;
  min-height: 0 !important;
  font-size: 14px;
  font-weight: 600;
  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: 28px !important;
  width: 28px !important;
  max-width: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  /* Slight silver ring, same $brand-cool-steel family the classic rail uses on
     its avatar and row edges. Most of these avatars are pale line-art on a near
     white field, so without an edge they bleed into the row's own surface.
     `box-sizing` is set explicitly because a border on a fixed !important width
     would otherwise push the rendered circle to 30px and misalign the rows. */
  box-sizing: border-box;
  /* Matches the classic rail's icon chips exactly (.ch-row__icon,
     _classic-home.scss) — same $brand-cool-steel at the same 0.28 — so the two
     surfaces read as one system. */
  border: 1px solid rgba(156, 163, 175, 0.28);
}
.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: 14px;
  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;
}

/* 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). */
/* 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. */
/* 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__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. */
/* (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 ──────────────────── */
/* 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). */
/* Back-link icon: less transparent than the row icons since this is
   the primary action and benefits from stronger emphasis. */
/* 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. */
/* ── 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--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--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.

   All three now carry the SAME elevated surface: more opaque fill, a tinted rather than
   neutral border, 600 weight, and a real drop shadow.

   BOARD ACTIONS JOINS THEM AS OF 2026-09-15 (requested). It previously sat one step
   below on the flatter `__filter-toggle` surface — a deliberate weight difference, on
   the reasoning that geometry should stay shared and hierarchy should live in weight.
   That step is now gone by request: beside Categorize the lighter fill and neutral
   border read as inactive rather than as secondary, which is the wrong signal for a
   control that opens the panel's main action list.

   Added to THIS selector list rather than given an override block of its own, so the
   family keeps one definition. `.md-board-edit-panel__filter--actions
   .md-board-edit-panel__filter-toggle` is (0,2,0), which outranks the flatter
   `.md-board-edit-panel__filter-toggle` base (0,1,0) further down the file on its own,
   without needing `!important` or a source-order bet.

   Board Collections still 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 — so that distinction survives flattening the other two apart. */
.md-board-edit-panel__row--collection,
.md-board-edit-panel__row--categorize,
.md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle {
  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,
.md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle:hover,
.md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle: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,
.md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle:hover,
.md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle: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__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__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__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__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 {
    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.

   FILTER BY CATEGORY ONLY. The 16px is about pairing with the search magnifier directly
   beside it, which Board Actions does not sit next to — and holding the gear at 16px
   while Categorize's icon renders at the panel's default 1.5em left the two visibly
   mismatched once they were given the same surface. Board Actions is excluded so it
   takes the default and the pair reads as one family, icon included. */
.md-board-edit-panel__filter:not(.md-board-edit-panel__filter--actions) .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,
.md-board-detail--dark .md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle {
  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,
.md-board-detail--dark .md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle:hover,
.md-board-detail--dark .md-board-edit-panel__filter--actions .md-board-edit-panel__filter-toggle: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-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;
}

/* REMOVED (2026-09-15): an `@media (max-width: 1023px)` block that stripped BOTH panel
   filter toggles — it hid `__filter-text` and `__filter-chevron`, hid
   `__filter-list`, and centred the toggle's icon with `justify-content: center`.

   It was a width test standing in for "the panel is a rail", and those are not the same
   thing. Rail state is `.md-board-edit-panel--collapsed`, driven by
   `left_panel_collapsed`; the resize handler that sets it at <=1200px explicitly does not
   fight a manual re-expand ("manually expanding while already narrow isn't fought",
   controllers/user/board-detail.js). An EXPANDED panel at <=1023px is therefore a normal,
   reachable state, and in it both toggles have a full-width surface with room for their
   labels — but were being drawn as ~200px pills containing one centred icon. Board
   Actions additionally lost its accessible name entirely that way, since the button's
   name comes only from its inner label span.

   Nothing is lost by deleting it rather than rescoping it: the genuine rail case is
   already handled, unscoped by width, by the `.md-board-edit-panel--collapsed` rules
   further up — they hide `__filter-list` and `__filter-chevron` and restyle the toggle to
   the icon-over-caption rail item, while deliberately KEEPING `__filter-text` visible so
   the icon can carry its caption. `toggle_panel_filter` and `toggle_board_actions` both
   expand the panel first when collapsed, for exactly that reason, so the rail path stays
   correct with no width rule at all. */
/* ── 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. */
/* 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 {
  /* Separator rule above the Board Display toggle. It was described as separating this
     from "the View Style block above"; that block moved out to the Board Actions modal,
     and the View Style shortcut that returned in its place sits BELOW `__bottom`, not
     above. The rule earns its place either way — it divides Display from the rows above
     it — so it stays, but not for the reason previously written here. */
  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. */
/* 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. */
/* Dark mode: brighter thumb, lighter text. */
/* 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;
}

/* "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-label {
  font-size: 1em;
  font-weight: 700;
  color: rgba(27, 54, 93, 0.62);
  white-space: nowrap;
}

.md-board-detail--dark .md-board-edit-view-style__current-label {
  color: rgba(255, 255, 255, 0.62);
}

.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) */
/* Pill button row (Paint, Hidden Tool) */
.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 */
/* Icon group + button mock (Text Position, Speak Bar) */
/* 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 {
  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__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__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 {
  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 {
  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). */
/* 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. */
/* 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. */
/* =========================================================================
   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);
}

/* "Review your board" (communicator board-detail tour, comm_board_tour_board) sits 100px lower
   (requested 2026-10-13): it spotlights the board top and rode high over the header. Scoped to the
   top-placed case, like the rule above, so a flipped (bottom) placement is not shoved wrong. */
.shepherd-element.md-tour__step--comm-board[data-popper-placement^=top] {
  margin-top: 100px;
}

.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: rgb(38, 55, 132);
  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);
}

/* THE COMMUNICATOR WELCOME (2026-10-12, utils/tours/home.js#communicatorWelcomeStep): a primary "Start
   talking now" with the Vocal Flair 60 picture and its note, a secondary "Choose a different board", and a
   small "Take a quick tour (1 min)" link. Used by both skins (Modern and Basic tours). The primary is a
   solid verdigris ($brand-verdigris-aa: white text passes AA) so it reads as THE choice. */
.shepherd-element .md-tour__body-btn--starter {
  justify-content: space-between;
  padding: 12px 18px 12px 12px;
}

.shepherd-element .md-tour__body-btn--starter .md-tour__body-btn-content {
  align-items: flex-start;
  text-align: left;
}

.shepherd-element .md-tour__body-btn--starter .md-tour__body-btn-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
}

.shepherd-element .md-tour__starter-img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  box-sizing: border-box;
}

.shepherd-element .md-tour__body-btn--starter .md-tour__body-btn-note {
  margin-left: 78px;
}

.shepherd-element .md-tour__body-btn--primary,
.shepherd-element .md-tour__body-btn--primary:not(:disabled):hover {
  color: #fff;
  border-color: transparent;
  /* Match the Modern Focused Speak hero bg (requested 2026-10-13): the same oklab navy radial as
     .md-card--speak-focused / .md-card--caseload-focused, via the shared mixin so it cannot drift.
     White ink measures 6.95:1 at the lit centre. */
  background: radial-gradient(ellipse at center, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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%);
}

.shepherd-element .md-tour__body-btn--primary .md-tour__body-btn-note {
  color: #fff;
  opacity: 0.92;
}

.shepherd-element .md-tour__body-btn--primary .md-tour__body-btn-arrow,
.shepherd-element .md-tour__body-btn--primary:not(:disabled):hover .md-tour__body-btn-arrow {
  color: #fff;
}

.shepherd-element .md-tour__quick-tour {
  margin-top: 6px;
  text-align: center;
  width: 100%;
  /* Two links now (speak-page + home-page tour, 2026-10-14): stack them centered. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shepherd-element .md-tour__quick-tour-link {
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  background: none;
  color: #4C86D8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.shepherd-element .md-tour__quick-tour-link:hover {
  color: #1B365D;
}

/* The home-page tour link is teal to tell it apart from the speak-page link above it (2026-10-14).
   $brand-teal (#147F82) measures 4.79:1 on the white card, clearing WCAG AA (4.5:1). */
.shepherd-element .md-tour__quick-tour-link--home {
  color: #147F82;
}

.shepherd-element .md-tour__quick-tour-link--home:hover {
  color: #316F70;
}

/* ── 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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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 (it was sized for the tour-map image beside the body; the map is in the header since
   2026-10-11, and the height is kept). Make the content a column so the extra height flows into
   the body 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 replaces the top-right corner accent on the welcome page, so suppress the
   base intro ::after graphic (speech bubbles + orb-glow shading) there in BOTH views; the map sits
   in the HEADER, top left (see the .shepherd-header::before rules below). */
.shepherd-element.md-tour__step--welcome::after {
  display: none;
}

/* The welcome body: its choices stack in a column, vertically centred and left-aligned (overriding
   the intro's centered, narrow body); flex:1 lets the body absorb the extra modal height. The
   tour-map image is no longer beside it (requested 2026-10-11: "move the image from the main
   content into the header on the top left"), so the copy uses the full width with 24px insets. */
.shepherd-element.md-tour__step--focused.md-tour__step--welcome .shepherd-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 24px;
  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;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
  max-width: none;
  margin: 0;
}

/* THE TOUR-MAP IMAGE, IN THE HEADER, TOP LEFT (requested 2026-10-11, all guided tours: every
   Modern tour's welcome step carries `md-tour__step--welcome`). It was a 120px image beside the
   body copy. The header is a flex row, so its ::before is the first item, before the eyebrow and
   heading; `align-self: flex-start` holds it at the top. (The header's ::after is its hairline.)
   Gentle: the light map on a circular teal→blue disc, as one element (the map layer is drawn
   over the gradient, and `border-radius` clips both). Focused: the dark map artwork. */
.shepherd-element.md-tour__step--welcome .shepherd-header::before {
  content: "";
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-right: 16px;
  align-self: flex-start;
  border-radius: 50%;
  background: url(/../images/tour-map-light.png) no-repeat center/56px 56px, linear-gradient(135deg, rgba(42, 157, 143, 0.26), rgba(58, 107, 199, 0.26));
}

.shepherd-element.md-tour__step--focused.md-tour__step--welcome .shepherd-header::before {
  background: url(/../images/tour-map-dark.png) no-repeat center/56px 56px;
}

/* 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 {
  /* 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. */
  /* ON THE NAVBAR, UNDER THE BETA FEEDBACK TAB (moved 2026-09-24, requested). It used to sit at
     `top: 44px; left: 16px` measured from `#content`'s content box, which put it over the
     ACCOUNT RAIL on every app-shell page -- measured at x=16 y=102, straddling the 208px panel
     rather than sitting with the page.
     FIXED, NOT ABSOLUTE, and that is the point of the move: the pill now belongs to the app
     chrome rather than to the page, so it should stay put while the page scrolls. The old
     comment below about measuring from the anchor no longer applies; the anchor stays only
     because it is a harmless zero-height element the component renders.
     40px clears the beta feedback tab, which hangs from the very top (measured y -1 to 35), and
     the centring matches that tab's own -- the two read as one stack in the navbar's empty
     middle, between the View control on the left and Upgrade on the right. */
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  /* ABOVE THE HEADER (raised 2026-09-24 with the move onto the navbar). 900 was right while the
     pill lived over the PAGE: the header is `position: fixed; z-index: 1000` across y 0-70, so
     at 900 the pill rendered at the correct place and was painted over by the navbar --
     `elementFromPoint` at its centre returned `div.app-navbar__inner`, which is how this was
     confirmed rather than guessed.
     1005 clears the header and stays UNDER the beta feedback tab (1078), which is the element it
     is meant to sit beneath, and under the modal layer above that. The pill is
     `pointer-events: none`, so sitting above the header costs the navbar's own controls
     nothing. */
  z-index: 1005;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  /* 7px -> 5px top and bottom (requested 2026-09-24, "reduced by 2px each"). The sides are
     untouched: 16/12 is what keeps the status dot off the left edge and the text off the right
     curve, and a shorthand rewrite would have quietly reset both. */
  padding: 5px 16px 5px 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);
}

/* BOTH PER-PAGE `top` OVERRIDES ARE GONE (2026-09-24), and they had to go with the move above.
   Each was arithmetic against the OLD anchor -- the pill was absolutely positioned inside
   `#content`, so its offset had to track that page's own chrome:
     - wide screens got `top: 76px` to drop it level with the pill row below the header;
     - the board picker got `top: 60px` to share a vertical centre with its step control
       (118 + 32 + 24 + 21 - 17, coupled to two values on that page).
   The pill is now `position: fixed` to the navbar, under the beta feedback tab, so it is in the
   same place on every page at every width and neither sum means anything -- leaving them would
   have pushed it 36px and 20px below the tab for no reason. The 76px was in fact still winning
   and putting the pill at y=76, which is how this was caught. */
/* 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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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, rgb(67, 86, 152) 0%, rgb(17, 27, 73) 100%);
  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;
}

/* ── CATEGORIZE: COMING SOON (2026-09-28) ─────────────────────────────────────────────
   components/board-categorize-coming-soon.hbs, shown inside `.md-board-category-order` while
   `board_category_grouping` is off for everyone. It fills the same dark takeover the controls
   use, so it takes the panel's remaining height as its one flex child and scrolls itself.
   Sizes follow the app's AAC scale (~30% over web defaults): 17px floor for body copy.
   The accent colours are the Fitzgerald custom properties (_variables.scss:246+), the same
   ones the grouped board paints its panels with, so the pitch previews the real palette. */
.md-categorize-soon {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 48px 24px 56px;
  color: #fff;
  background: radial-gradient(60% 45% at 18% 0%, rgba(54, 125, 142, 0.35), rgba(0, 0, 0, 0) 70%), radial-gradient(55% 40% at 85% 10%, rgba(83, 111, 174, 0.3), rgba(0, 0, 0, 0) 70%);
}

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

.md-categorize-soon__hero {
  text-align: center;
}

.md-categorize-soon__badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #367D8E 0%, #536FAE 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 24px rgba(83, 111, 174, 0.55);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.md-categorize-soon__title {
  margin: 20px 0 14px;
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}

.md-categorize-soon__lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}

.md-categorize-soon__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.md-categorize-soon__chip {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  background: var(--soon-fill);
  color: var(--soon-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* One accent per category, shared by the chips and the feature cards' top edge. */
.md-categorize-soon__chip--people, .md-categorize-soon__feature--people {
  --soon-fill: var(--fitzgerald-pronoun-yellow);
  --soon-text: var(--fitzgerald-pronoun-yellow-text);
}

.md-categorize-soon__chip--actions, .md-categorize-soon__feature--actions {
  --soon-fill: var(--fitzgerald-verb-green);
  --soon-text: var(--fitzgerald-verb-green-text);
}

.md-categorize-soon__chip--describe, .md-categorize-soon__feature--describe {
  --soon-fill: var(--fitzgerald-adjective-blue);
  --soon-text: var(--fitzgerald-adjective-blue-text);
}

.md-categorize-soon__chip--places {
  --soon-fill: var(--fitzgerald-preposition-pink);
  --soon-text: var(--fitzgerald-preposition-pink-text);
}

.md-categorize-soon__chip--questions, .md-categorize-soon__feature--questions {
  --soon-fill: var(--fitzgerald-question-purple);
  --soon-text: var(--fitzgerald-question-purple-text);
}

.md-categorize-soon__chip--social, .md-categorize-soon__feature--social {
  --soon-fill: var(--fitzgerald-social-pink);
  --soon-text: var(--fitzgerald-social-pink-text);
}

.md-categorize-soon__chip--things, .md-categorize-soon__feature--things {
  --soon-fill: var(--fitzgerald-noun-orange);
  --soon-text: var(--fitzgerald-noun-orange-text);
}

.md-categorize-soon__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.md-categorize-soon__feature {
  padding: 22px 24px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 4px solid var(--soon-fill);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.md-categorize-soon__feature-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.25;
  color: #fff;
}

.md-categorize-soon__feature-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.md-categorize-soon__footer {
  margin-top: 44px;
  text-align: center;
}

.md-categorize-soon__outro {
  max-width: 680px;
  margin: 0 auto 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .md-categorize-soon {
    padding: 32px 16px 40px;
  }
}
/* 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;
}

/* =========================================================================
   Shared message page (templates/utterance.hbs)
   Reached from the Share Text modal's "Link" action. Three audiences share
   it -- a recipient, the communicator, and a stranger following a public
   link -- so the content is grouped into discrete cards with one hero
   (the message) rather than a single running column.
   Type runs larger than web default throughout: this is an AAC surface and
   the page is routinely read aloud with someone.
   ========================================================================= */
/* The wash goes on the SCROLL CONTAINER, not only on the page div. `.la-utterance-page`
   has no definite-height parent, so its `min-height: 100%` resolved to its content
   height: on a short message the page ended above the fold and #content's own white
   background showed through as a band across the bottom. Painting #content removes the
   dependency on height entirely. The page keeps the same background as a fallback for
   browsers without `:has()` (107 other rules in this file already rely on it). */
/* #within_ember is the element that is actually white (`background: #fff`, ~510) and
   it is `position: fixed` filling the viewport, so it is the only ancestor guaranteed
   to cover the full height. #content is a flex item with `min-height: 0` (~903-908):
   on a short message it does not stretch, and #within_ember's white showed as a band
   across the bottom. Painting BOTH means the wash is continuous whether or not
   #content happens to fill. */
#within_ember:has(.la-utterance-page),
#content:has(.la-utterance-page) {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), var(--md-bg, #eef1f6);
}

.la-utterance-page {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), var(--md-bg, #eef1f6);
  min-height: 100%;
  padding: 48px 16px 96px;
}

.la-utterance-page__inner {
  /* Matches the home page's main content width: `.md-main` is
     `max-width: 1120px !important` (app.scss ~46527), sitting inside
     `.md-workspace` at `min(1200px, calc(100% - 24px))` (~45667). 1120 is the
     content measure; 1200 is the frame around it, so 1120 is the right number
     to mirror here. The horizontal gutter comes from `.la-utterance-page`'s own
     padding rather than a calc(), so it does not double up. */
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- the card primitive: one surface, one elevation ------------------- */
.la-utterance-card {
  background: var(--md-surface-2, rgba(255, 255, 255, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  padding: 14px 18px;
  /* Three layers, as on the share tiles: a tight contact shadow, a soft
     ambient drop, and a lit top edge. The inset is what stops the card
     reading as a flat rectangle on the wash. */
  box-shadow: 0 1px 2px rgba(17, 26, 46, 0.06), 0 10px 28px rgba(17, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* The message is the hero: more padding, a warmer ground, a deeper lift. */
.la-utterance-card--message {
  padding: 16px 20px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86)), rgba(42, 157, 143, 0.1);
  box-shadow: 0 2px 4px rgba(17, 26, 46, 0.07), 0 18px 44px rgba(17, 26, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.la-utterance-card--notice {
  text-align: center;
}

.la-utterance-card__eyebrow {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-muted);
  letter-spacing: 0.01em;
}

.la-utterance-card__author {
  color: #2A9D8F;
  font-weight: 700;
}

.la-utterance-card__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--md-ink);
}

.la-utterance-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--md-muted);
}

/* --- the quote ------------------------------------------------------- */
.la-utterance-quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.la-utterance-quote__mark {
  font-size: 30px;
  line-height: 0.9;
  font-weight: 800;
  color: rgba(42, 157, 143, 0.65);
  flex-shrink: 0;
}

.la-utterance-quote__text {
  flex: 1 1 auto;
  align-self: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--md-ink);
  word-break: break-word;
}

/* --- quoted prior message -------------------------------------------- */
.la-utterance-card--quoted {
  padding: 12px 16px;
}

.la-utterance-prior {
  border-left: 4px solid rgba(42, 157, 143, 0.45);
  padding: 4px 0 4px 14px;
  white-space: pre-line;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md-muted);
}

/* --- reply ------------------------------------------------------------ */
.la-utterance-vocab {
  margin: 0 0 9px;
  font-size: 15px;
  color: var(--md-muted);
  line-height: 1.5;
}

.la-utterance-vocab__count {
  font-weight: 600;
}

.la-utterance-vocab__words {
  color: var(--md-ink);
}

.la-utterance-vocab__more {
  margin-left: 6px;
  font-weight: 600;
}

.la-utterance-vocab__used {
  margin-top: 4px;
}

.la-utterance-reply__input {
  width: 100%;
  min-height: 92px;
  font-size: 18px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17, 26, 46, 0.16);
  background: #F8F9FA;
  resize: vertical;
}

.la-utterance-reply__input:focus {
  outline: none;
  border-color: rgba(42, 157, 143, 0.75);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2);
}

.la-utterance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.la-utterance-actions__primary,
.la-utterance-actions__secondary {
  border-radius: 12px;
  font-weight: 700;
}

.la-utterance-status {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.la-utterance-status--ok {
  color: #1F6B42;
}

/* --- private/public link note ---------------------------------------- */
.la-utterance-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(17, 26, 46, 0.035);
  border: 1px dashed rgba(17, 26, 46, 0.18);
}

.la-utterance-note__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-muted);
}

.la-utterance-note__action {
  border-radius: 12px;
  font-weight: 700;
}

/* --- public: speak + share ------------------------------------------- */
.la-utterance-card--share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.la-utterance-speak {
  border-radius: 14px;
  font-size: 19px;
  font-weight: 700;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(42, 157, 143, 0.28);
}

.la-utterance-sharebar {
  flex: 1 1 auto;
  min-width: 0;
}

/* share-bar.hbs floats its row and clears after itself; inside this flex card
   the float is inert, so the clear div collapses and the row centres. */
.la-utterance-sharebar #share_links {
  float: none !important;
}

/* --- explainer: one line, for someone who has never seen AAC ---------- */
.la-utterance-explainer {
  margin: 0;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(76, 134, 216, 0.08);
  border-left: 4px solid rgba(76, 134, 216, 0.5);
  font-size: 16px;
  line-height: 1.55;
  color: var(--md-muted);
}

.la-utterance-explainer__link {
  font-weight: 700;
  white-space: nowrap;
}

/* --- owner settings --------------------------------------------------- */
.la-utterance-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  font-weight: 500;
  cursor: pointer;
}

.la-utterance-check__box {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}

.la-utterance-check__label {
  font-size: 17px;
  color: var(--md-ink);
}

/* Settings card only: its single Save button right-aligns to the card edge, the
   conventional resting place for a form's commit action. The reply card reuses
   `.la-utterance-actions` for a Send + Clear pair and stays left-aligned, so this
   is scoped rather than changed on the shared rule. */
.la-utterance-card--settings .la-utterance-actions {
  justify-content: flex-end;
}

.la-utterance-preview__help {
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-muted);
}

.la-utterance-preview__picker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.la-utterance-preview__nav {
  border-radius: 10px;
  flex-shrink: 0;
}

.la-utterance-preview__frame {
  flex: 1 1 auto;
  min-width: 0;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #F8F9FA;
  border: 1px solid rgba(17, 26, 46, 0.1);
}

.la-utterance-preview__img {
  max-height: 120px;
  max-width: 100%;
}

/* --- attributions ----------------------------------------------------- */
.la-utterance-attrib__toggle {
  margin: 0;
  font-size: 15px;
}

.la-utterance-attrib__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.la-utterance-attrib__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(17, 26, 46, 0.08);
  font-size: 15px;
}

.la-utterance-attrib__item:last-child {
  border-bottom: 0;
}

.la-utterance-attrib__item--sound {
  flex-wrap: wrap;
}

.la-utterance-attrib__thumb {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.la-utterance-attrib__sound-label {
  flex: 1 1 100%;
  font-size: 16px;
  color: var(--md-ink);
}

.la-utterance-attrib__audio {
  flex: 1 1 260px;
  min-width: 0;
}

/* --- page paging controls (eye-gaze / switch) -------------------------
   Fixed bottom-right, stacked, and ALWAYS present. Sized for gaze dwell rather
   than a mouse: 84x68 is well past the 44px touch guidance and the 24px of
   WCAG 2.5.8, because a dwell target must absorb tracker jitter. The page
   reserves 96px of bottom padding so the last card cannot sit under them. Out
   of the reading column on wide screens (content caps at 1120px and centres);
   at narrow widths they overlay the gutter rather than the text. */
.la-utterance-pager {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.la-utterance-pager__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 84px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.88)), #2A9D8F;
  color: #111A2E;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(17, 26, 46, 0.1), 0 12px 28px rgba(17, 26, 46, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.la-utterance-pager__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(17, 26, 46, 0.12), 0 16px 34px rgba(17, 26, 46, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.la-utterance-pager__btn:active {
  transform: translateY(1px);
}

.la-utterance-pager__btn:focus-visible {
  outline: 3px solid #2A9D8F;
  outline-offset: 2px;
}

.la-utterance-pager__icon {
  color: #2A9D8F;
}

.la-utterance-pager__label {
  line-height: 1;
}

@media (max-width: 640px) {
  .la-utterance-page {
    padding: 32px 12px 92px;
  }
  .la-utterance-pager__btn {
    width: 72px;
    height: 60px;
    font-size: 14px;
  }
  .la-utterance-card {
    padding: 18px 16px;
  }
  .la-utterance-card--message {
    padding: 20px 18px 18px;
  }
  .la-utterance-quote__text {
    font-size: 24px;
  }
  .la-utterance-quote__mark {
    font-size: 30px;
  }
  .la-utterance-card__title {
    font-size: 21px;
  }
  .la-utterance-actions__primary,
  .la-utterance-actions__secondary {
    flex: 1 1 100%;
  }
}
/* =========================================================================
   GIF Search modal (components/gif.hbs)
   Modernised to the same shell as the Share Text modal: glass wrap, header
   tile + label + close, scrollable body, discrete footer.
   ========================================================================= */
/* The `.modal` qualifier is load-bearing, same as the share modal's header at
   ~:39570: the universal end-of-file rule `.modal .la-modal-header` (0,2,0)
   forces 28px top/bottom on every modal and beats an unqualified
   `.la-gif-modal-wrap .la-modal-header` on source order. (0,3,0) here makes this
   the authoritative rule. 14px IS the halved value -- 28 -> 14 -- matching the
   share modal rather than inventing a second number. */
.modal .la-gif-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.modal .la-gif-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;
  /* The title carries the search term, which can be a whole sentence from the
     speak bar -- clamp rather than let it push the close button off. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal .la-gif-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;
}

.modal .la-gif-modal-wrap .la-modal-close:hover {
  color: var(--md-ink);
}

/* Dual-colour tile: charcoal frame, verdigris content -- the same two-tone
   treatment the share modal's icon uses. */
.la-modal-header-icon--gif {
  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-gif-modal-wrap {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8px);
}

.la-gif-modal-body {
  /* `min-height: 0` so this becomes the scroller rather than refusing to shrink
     below its content (a flex item's default is min-height: auto). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 24px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), #F8F9FA;
}

.la-gif-modal__status {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(17, 26, 46, 0.03);
  border: 1px dashed rgba(17, 26, 46, 0.18);
  color: var(--md-muted);
  font-size: 15px;
  font-style: italic;
}

.la-gif-modal__status--err {
  color: #46505F;
  font-style: normal;
}

.la-gif-modal__stage--flipped {
  transform: rotate(180deg);
}

.la-gif-modal__selected {
  width: 100%;
  height: calc(100vh - 220px);
}

.la-gif-modal__grid {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.la-gif-modal__col {
  width: calc(33% - 5px);
  float: left;
  margin-right: 5px;
}

.la-gif-modal__thumb {
  width: 100%;
  margin-bottom: 5px;
  border-radius: 8px;
}

.la-gif-modal__pick:focus-visible .la-gif-modal__thumb {
  outline: 3px solid #2A9D8F;
  outline-offset: 2px;
}

/* Footer: the halved counterpart to the header (28 -> 14), and the modal's foot.
   modal-dialog.hbs yields straight into .modal-content, so this element IS the
   footer rather than a Bootstrap .modal-footer. */
.la-gif-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

/* Same glass-tile primitive as .la-big-button__action (~:40216) and the share
   modal's tiles -- a white gradient over a tint, backdrop blur, and a three-layer
   shadow with a lit top edge. Reused rather than re-specified so hover, focus and
   depth stay identical across modals. `.la-gif-modal-wrap .btn` (0,2,0) beats the
   Bootstrap `.btn` defaults these buttons still carry. */
.la-gif-modal-wrap .btn.la-gif-modal__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  /* Brighter than the 0.75 the other tiles carry: these sit on the footer's
     translucent white band rather than on the body wash, so a faint edge
     disappeared into it. */
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  --tile-tint: #E8ECF1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #46505F;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  /* Four layers: a hairline outline ring for definition against the light band,
     a tight contact shadow, a deeper ambient drop than the body tiles use, and
     the lit top edge. The ring is a spread-only shadow rather than a second
     border so it does not change the box size or fight the border-radius. */
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.07), 0 2px 4px rgba(17, 26, 46, 0.1), 0 12px 30px rgba(17, 26, 46, 0.18), inset 0 1px 0 rgb(255, 255, 255);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.la-gif-modal-wrap .btn.la-gif-modal__action:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgb(255, 255, 255);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.1), 0 3px 6px rgba(17, 26, 46, 0.12), 0 18px 40px rgba(17, 26, 46, 0.22), inset 0 1px 0 rgb(255, 255, 255);
}

.la-gif-modal-wrap .btn.la-gif-modal__action:active {
  transform: translateY(1px);
}

.la-gif-modal-wrap .btn.la-gif-modal__action:focus-visible {
  outline: 3px solid #2A9D8F;
  outline-offset: 2px;
}

/* `width: auto` is NOT set here on purpose: the gif footer used to carry the legacy
   `repair_buttons` class, whose `.btn { width: 100px }` (app.scss:19049-19051) clipped these
   tiles so the 22px icon + 8px gap + nowrap label spilled out of the box. That class was
   removed from the footer in components/gif.hbs instead, so nothing constrains the width and
   no override is needed. The pager above it still uses `repair_buttons` and still wants that
   fixed width -- do not remove it there. */
.la-gif-modal__action-icon {
  flex-shrink: 0;
}

.la-gif-modal__action-label {
  line-height: 1;
}

/* =========================================================================
   Messages & Alerts modal (components/inbox.hbs)
   Modernised to the same shell as the GIF Search and Share Text modals:
   glass wrap, header tile + label + close, scrollable body, discrete footer.

   No `.modal` qualifier on these selectors, unlike the gif block at ~:106538.
   The universal `.modal .la-modal-header` at :98594 is (0,2,0) and forces 28px
   top/bottom on every modal; `.la-inbox-modal-wrap .la-modal-header` is ALSO
   (0,2,0) but sits after it at end-of-file, so it wins on source order alone.
   The gif block's comment calls its own `.modal` prefix "load-bearing" -- that
   was copied from the SHARE modal (:39566), which genuinely needs it because it
   sits BEFORE :98594. Verified for this block's position rather than inherited.
   ========================================================================= */
.la-inbox-modal-wrap {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8px);
}

/* Re-supplied because this modal no longer uses `.md-modal-header`, which was
   what `.modal-dialog:has(.md-modal-header)` (:88991) keyed on for the reduced
   top margin. Without this the dialog reverts to Bootstrap's 30px. */
.modal-dialog:has(.la-inbox-modal-wrap) {
  margin-top: 15px;
}

.la-inbox-modal-wrap .la-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
}

.la-inbox-modal-wrap .la-modal-header-label {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  /* $aac-font-size-lg (22px), not the base `.la-modal-header-label` size: this is
     an AAC surface and the shared token `$aac-font-size-base` is 15px, SMALLER
     than the web default. Also larger than the gif modal's 20px title. */
  font-size: 22px;
  letter-spacing: -0.2px;
  color: var(--md-ink);
  /* Resets `text-transform: uppercase` from the shared `.la-modal-header-label`
     (:37983). This title is translated into 13 locales and CSS-uppercasing is
     lossy in several of them; "MESSAGES AND ALERTS" also reads as shouting on a
     surface whose whole job is delivering someone's message. */
  text-transform: none;
}

/* The base `.la-modal-close` (:37995) is DARK-header chrome -- white-on-indigo,
   written for `.la-modal-header`'s `background: $indigo`. This modal's header is
   the light gradient, so without this reset the close control renders as a
   near-white stroke on a pale ground. It is also the one control the scanner can
   always reach (utils/modal.js:277 matches it unscoped), so it must stay legible. */
.la-inbox-modal-wrap .la-modal-close {
  position: static;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--md-line);
  background: rgba(17, 26, 46, 0.04);
  color: #46505F;
  transition: background 0.15s ease, color 0.15s ease;
}

.la-inbox-modal-wrap .la-modal-close:hover {
  background: rgba(17, 26, 46, 0.08);
  color: var(--md-ink);
}

/* 14th copy of this 8-declaration shape (siblings at :38416, :38500, :38710,
   :38909, :39010, :39234, :39508, :39601, :40100, :40475, :40646, :41974,
   :106575). Deliberately NOT extracted to a shared base: the sizes and tints
   genuinely differ between modals (--big-button is 36px/11px, --devices 52px/16px,
   --app uses a different tint), so a blanket extraction would regress several. */
.la-modal-header-icon--inbox {
  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-inbox-modal-body {
  /* `min-height: 0` so this becomes the scroller rather than refusing to shrink
     below its content (a flex item's default is min-height: auto). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 28px;
  /* Re-supplied from `.md-modal-body` (:89101), which this no longer uses. 16px
     is the value that rule carried -- keep it; dropping to the inherited 14px
     would shrink message text on an AAC surface. */
  font-size: 16px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.07), rgba(76, 134, 216, 0.07) 45%, rgba(123, 107, 173, 0.05)), #F8F9FA;
}

/* `.md-modal-body` also carried `text-align: center`, which is what centred the
   three status strings. Applied to the strings themselves instead of the whole
   body, so message content and rows stay left-aligned without needing to undo it. */
.la-inbox__status {
  margin: 0;
  padding: 28px 0;
  text-align: center;
  color: var(--md-muted);
  font-size: 18px;
}

.la-inbox__status--err {
  color: #46505F;
}

/* Pair / follow request */
.la-inbox__request {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0 4px;
  text-align: left;
}

.la-inbox__request-avatar {
  width: 75px;
  height: 75px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: cover;
}

.la-inbox__request-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

/* Message detail */
.la-inbox__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
  text-align: left;
}

.la-inbox__meta-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  flex-shrink: 0;
  object-fit: cover;
}

.la-inbox__meta-text {
  min-width: 0;
}

.la-inbox__symbols {
  white-space: normal;
  text-align: left;
}

.la-inbox__symbol {
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
}

.la-inbox__symbol-tile {
  display: block;
  border: 1px solid var(--md-line);
  border-radius: 10px;
  padding: 5px;
  min-width: 100px;
  background: rgba(255, 255, 255, 0.55);
}

.la-inbox__symbol-img {
  height: 40px;
  display: block;
  width: 100%;
  min-width: 40px;
}

.la-inbox__symbol-spacer {
  height: 40px;
  display: block;
  width: 100%;
}

.la-inbox__symbol-label {
  white-space: pre;
}

.la-inbox__prior {
  white-space: normal;
  margin-top: 30px;
  text-align: left;
}

.la-inbox__prior-label {
  margin-bottom: 4px;
}

.la-inbox__prior-quote {
  border-left: 2px solid var(--md-line);
  padding: 5px 0 5px 20px;
  white-space: pre-line;
  font-style: italic;
}

/* Alert rows. `.alerts .btn.msg` / `.btn.unread` at :11581 still supply the
   ellipsis and bold-unread treatment -- these only lay the row out. */
.la-inbox__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.la-inbox__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.la-inbox__msg {
  /* `min-width: 0` lets the 100% width from `.alerts .btn.msg` shrink inside the
     flex row instead of pushing the clear control off the edge. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  font-size: 18px;
}

.la-inbox__msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  order: 2;
  margin-left: auto;
  object-fit: cover;
}

.la-inbox__msg-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.la-inbox__row-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.la-inbox-modal-footer {
  /* Re-supplied from `.md-modal-footer` (:89779), which this no longer uses --
     that rule was the only thing laying the footer out. */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.la-inbox__working {
  flex: 1 1 100%;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--md-muted);
  font-size: 18px;
  text-align: left;
}

/* Same glass-tile primitive as `.la-gif-modal__action` (:106638) and the share
   modal's tiles, so hover, focus and depth stay identical across modals. Two
   deliberate departures, both AAC-driven:
     - 18px ($aac-font-size-md) rather than the 15px those modals use. Their size
       comes from `$aac-font-size-base`, which is 15px and therefore SMALLER than
       the web default -- fine for a GIF picker, wrong for the surface carrying
       "Pair With ... & Allow Followers".
     - `white-space: normal` rather than `nowrap`. That label is the longest string
       in the modal, is interpolated with a user name, and expands further in
       German and Spanish; nowrap would push it out of the dialog. */
.la-inbox-modal-wrap .btn.la-inbox__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  --tile-tint: #E8ECF1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.72) 100%), var(--tile-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #46505F;
  font-size: 18px;
  font-weight: 700;
  white-space: normal;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.07), 0 2px 4px rgba(17, 26, 46, 0.1), 0 12px 30px rgba(17, 26, 46, 0.18), inset 0 1px 0 rgb(255, 255, 255);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.la-inbox-modal-wrap .btn.la-inbox__action:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.6) 100%), var(--tile-tint);
  border-color: rgb(255, 255, 255);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(17, 26, 46, 0.1), 0 3px 6px rgba(17, 26, 46, 0.12), 0 18px 40px rgba(17, 26, 46, 0.22), inset 0 1px 0 rgb(255, 255, 255);
}

.la-inbox-modal-wrap .btn.la-inbox__action:active {
  transform: translateY(1px);
}

.la-inbox-modal-wrap .btn.la-inbox__action:focus-visible {
  outline: 3px solid #2A9D8F;
  outline-offset: 2px;
}

/* The affirmative action in each footer pair -- tinted so Accept is not visually
   identical to Reject on a consent decision. */
.la-inbox-modal-wrap .btn.la-inbox__action--primary {
  --tile-tint: rgba(42, 157, 143, 0.18);
}

.la-inbox__action-icon {
  flex-shrink: 0;
}

.la-inbox__action-label {
  line-height: 1.25;
}

/* ── PERSISTENT APP SHELL (2026-09-21) ──────────────────────────────────────────────
   The wrapper that `templates/application.hbs` puts around the account rail, the primary
   pill nav and the outlet, now that all three are mounted ONCE above the routes instead
   of inside each page.

   THE RAIL POSITIONS ITSELF. `.md-acct-rail` has been `position: fixed; left: 0; bottom: 0`
   with a 208px width since 2026-09-18, so nothing here places it — this only has to keep
   the main column clear of it and stop the nav scrolling away.

   `.ll-appshell__navbar` is `sticky`, not `fixed`, and that is deliberate: `#content` is
   the app's scroll container (it is `position: fixed; overflow` on the page-footer
   layout), so a `fixed` nav would be positioned against the VIEWPORT and would not move
   with the shell's own left offset, while `sticky` resolves against the scroller it
   lives in. It needs an opaque background or the content scrolls visibly underneath it. */
.ll-appshell__main {
  margin-left: var(--ll-rail-width);
  min-width: 0; /* a flex/grid child with long content would otherwise force the page wider */
}

.ll-appshell__main {
  /* NO top padding. It used to hold a 20px gap above the nav, but the nav is now pulled
     out of flow (below) so the PAGE starts at the very top of this column -- see the note
     on `.md-shell` further down for why. */
  padding-top: 0;
}

.ll-appshell__navbar {
  /* BELOW 901px THIS STAYS IN FLOW. At 900px and under the rail stops being a fixed panel and
     becomes an in-flow band above the page, and the pill row gives way to its collapsed
     <details> drawer -- a nav floating over that band, or a drawer expanding out of flow,
     would each be worse than the variance being fixed above. The desktop anchoring is in the
     `min-width: 901px` block further down; everything in THIS rule is the behaviour that
     shipped earlier on 2026-09-21, unchanged. */
  position: sticky;
  /* NOT `top: 0`. Sticky resolves against `#content`, whose padding box starts at y=0
     BEHIND the fixed 70px app navbar, so `0` pinned the pills underneath it. This is the
     same `max(var(--topbar-height, 70px), 70px)` the rail uses to sit below that bar, and
     for the same reason its comment gives: on an authenticated page `--topbar-height` is
     16px (it describes #content's padding, not the bar), and the fallback inside the
     var() matters because an unset variable would otherwise invalidate the whole max(). */
  /* FLUSH WITH THE NAVBAR (requested 2026-10-10: "the top blur line should be flush with the
     bottom of the navbar"). Chrome measures this offset from INSIDE `#content`'s top padding,
     not from its top edge (measured: padding 26px + 70 = the bar drawn at 96 under a header that
     ends at 70; 16px pages drew it at 86). That padding is `--topbar-height` plus a per-page
     extra (0 or 1rem), so both are taken off and the bar meets the header on every page. The
     extra comes from `--ll-content-pad-extra`, set beside the padding in each rule that wins it;
     a page that sets neither keeps its extra as a gap rather than sliding under the header.
     Named so the in-flow ordering at 900px and below can give the bar the same margin. */
  --ll-navbar-sticky-top: calc(max(var(--topbar-height, 70px), 70px) - var(--topbar-height, 0px) - var(--ll-content-pad-extra, 0px));
  top: var(--ll-navbar-sticky-top);
  /* Above page content, below the app navbar and any modal. */
  z-index: 60;
  /* Opaque-ish, or the content scrolls visibly through the pills. */
  background: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-bottom: 6px;
  /* OUT OF FLOW, by exactly its own height. Without this the nav occupied a 48px band
     ABOVE the page, and `.md-shell` -- which paints the app's page wash -- began below it,
     leaving an unpainted strip between the app navbar and the content (reported as "the bg
     from the page is not extending all the way up"). Pulling the nav out lets the shell
     start at the top of the column so its wash covers the full height, with the nav
     floating over it. The clearance the nav needs is given back as shell padding below. */
  margin-bottom: -48px;
}

/* The page then has to start BELOW the floating nav. Base `.md-shell` is `padding-top: 3rem`,
   which is 30px, NOT the 48px this comment claimed until 2026-09-21: `html` is `font-size:
   10px` in this app (measured in the browser), so every rem here is 10px. That was enough when
   the nav sat above the page and is not now: the nav is sticky at
   70px and 48px tall, so its underside is 118 while the shell begins at 16. 112px puts the
   first content at 128 -- clear of the nav with a 10px gap -- and every destination in the
   shell roots on `.md-shell` (home, caseload, organizations, boards, extras, updates), so
   none is missed. `!important` only because the base declaration carries one.

   IT IS NOT WINNING A SPECIFICITY FIGHT. The base rule is `#content .ember-view > .md-shell,
   #content > .md-shell` (~46345) and neither selector can MATCH inside the shell: the chain is
   `#content > .ll-appshell > .ll-appshell__main > .ll-appshell__content > .md-user-layout >
   .md-shell`, with no `.ember-view` parent and no direct-child relationship. So this rule has
   no competitor here, and would lose to that ID selector if anyone ever made it match again.

   THE CLEARANCE IS THE NAV'S, so it goes when the nav does (2026-09-21): the nav renders only
   on the Home section's pages now, and on an account page this 112px was 82px of space held
   for something that is not there. A CUSTOM PROPERTY rather than a second padding rule, so there
   is still exactly ONE declaration of this padding to find and change.
   `.ll-appshell.ll-appshell--no-nav` deliberately carries both classes: that beats the base
   `.ll-appshell` on specificity, so the two values do not depend on which is written first. */
.ll-appshell {
  --ll-nav-clearance: var(--dn-nav-clearance, 112px);
  /* THE RAIL'S WIDTH, stated once (2026-09-28). Read by `.md-acct-rail` (its width),
     `.ll-appshell__main` (margin-left) and the fixed `.ll-appshell__navbar` (left), which were
     three separate 208px literals until the rail became collapsible and had to be able to
     change all three at once. The collapsed value is set in THE COLLAPSED RAIL block. */
  --ll-rail-width: var(--dn-rail-width, 208px);
}

.ll-appshell.ll-appshell--no-nav {
  /* The value the base `.md-shell` rule gives a shell with no nav floating over it -- 3rem,
     i.e. 30px at this app's 10px root -- which is the geometry these pages had before the
     chrome was hoisted above them. Measured before and after on the account pages
     (scripts/home-section-nav-qa.mjs): the shell's first content moved from y=198 to y=116. */
  --ll-nav-clearance: 3rem;
}

.ll-appshell .md-shell {
  padding-top: var(--ll-nav-clearance) !important;
}

/* CASELOAD TAKES NO NAV CLEARANCE (requested 2026-09-21, for Gentle: "on gentle view, the
   caseload page, this top padding needs to be removed" -- the inspector showed
   `.md-shell--caseload` at `112px 0 0`).
   FOCUSED ALREADY DID THIS, at _focused-view.scss:1072, which is why the two views disagreed:
   that page's own top spacing comes from `.md-shell--caseload > .md-workspace`, so the
   shell's clearance was a second helping on top of it. Written here, unscoped, both views now
   agree and the focused rule becomes a no-op rather than the only thing holding the layout.
   THREE CLASSES on purpose: the rule it answers is `.ll-appshell .md-shell` (0,2,0) and
   carries `!important`, so `.md-shell--caseload` alone (0,1,0) could not reach it. */
.ll-appshell .md-shell.md-shell--caseload {
  padding-top: 0 !important;
}

/* ── GENTLE: EVERY HOME-SECTION PAGE STARTS WHERE CASELOAD DOES (2026-09-21) ────────────
   Requested: "on gentle view modern view the dashboard, boards, extras, and updates content
   all needs to begin in the same place it does on the caseload page: make it consistent".
   Measured at 1280 before this, as the y of the first thing actually visible inside the
   workspace: caseload 106, dashboard / boards / extras 218, updates 238. Two separate causes,
   so it takes two rules:
     - the shell's 112px nav clearance, which caseload alone does not take (above); and
     - `#content`'s own top padding, which is `calc(--topbar-height + 1rem)` = 26px on the
       pages that carry a page class and the bare `+ 3rem` = 46px default on Updates, which
       has none. That 20px is the whole of Updates' extra offset.

   `:has(.ll-appshell)` IS THE SCOPE AS OF 2026-09-23 -- it was `:has(.ll-appshell__navbar)`,
   which reached only the pages that render the pill nav. Requested: "make all of the page
   content for account, goals, logs, profile, recordings, reports, settings, subscriptions, and
   supervision move up on the page to the same place it begins on the home page", plus Rooms.
   That is every page in the app shell, so the scope is now the shell itself rather than the nav
   inside it -- one rule for "a page in this shell starts here" instead of two sets that have to
   be kept level with each other.

   MEASURED, at 1280, with scripts/account-pages-top-alignment-qa.mjs. The account pages sat at
   y=156 and Reports at y=136 against the home section's y=106, and the whole of both gaps was
   these two declarations: `#content` at the bare `calc(--topbar-height + 3rem)` = 46px because
   those routes carry no page class (controllers/application.js `content_class` labels only
   stats/home/boards/extras/caseload), and the shell's `--ll-nav-clearance`, which is 3rem =
   30px on `.ll-appshell--no-nav`. 46+30+40+40 = 156, 26+30+40+40 = 136, 26+0+40+40 = 106 --
   the chain reproduces all three, so setting the pair lands every one of them on 106.
   (Reports already had 26px via `#content.stats-page`; only its 30px of clearance moves.)

   GENTLE ONLY, as asked. Focused sets these per page in _focused-view.scss and is untouched. */
body:not(.ll-layout-focused) #within_ember #content:has(.ll-appshell) {
  padding-top: calc(var(--topbar-height) + 1rem) !important;
  /* What this padding adds beyond `--topbar-height`, for the pill bar's sticky offset at 900px and
     below (see `--ll-navbar-sticky-top` on `.ll-appshell__navbar`). `!important` like the padding,
     so whichever rule wins the padding also wins this. */
  --ll-content-pad-extra: 1rem !important;
}

/* Not the Updates arrival (2026-10-10): it takes Focused's positioning in both layouts — the
   shell keeps its nav clearance (`.ll-appshell .md-shell`); see `md-main--updates-arrival` in
   _focused-view.scss. */
body:not(.ll-layout-focused) #content:has(.ll-appshell):not(:has(.md-main--updates-arrival)) .ll-appshell .md-shell {
  padding-top: 0 !important;
}

/* ...AND 52px OF IT BACK AT 1024 AND BELOW (requested 2026-09-21: "the main page content
   needs to be pushed down 52px on each of the pages (dashboard, caseload, boards, extras, and
   updates)"). A RELATIVE push, as asked, not a target: the five pages already agree at these
   widths (all five measured at y=66 at 1024, where the workspace's own 40px padding drops to
   0), so adding the same 52px to the shell keeps them agreeing and moves them together.
   On the same `:has(.ll-appshell)` scope as the rule above (widened 2026-09-23), so the account
   pages take the same push and the whole shell stays level at these widths too -- leaving them
   on the old 30px clearance here would have aligned the pages at 1280 and split them again at
   1024, which is the failure this block exists to prevent. */
@media (max-width: 1024px) {
  /* (The 52px moved to the <=900px block at the end of this one, 2026-10-01; see there.) */
  /* NO SIDE GUTTER ON THE WORKSPACE AT THESE WIDTHS (requested 2026-09-21: "the md-workspace
     l/r padding needs to be 0"). It was not one value to halve or zero -- measured at 1024 the
     five pages ran 40px (caseload, dashboard, extras), 14px (boards) and 16px (updates), and
     the steps below diverged further, with extras still at 40px at 820 while everything else
     had stepped down twice. One declaration replaces all of it, so the pages agree.
     `!important` because the base `.md-workspace` padding carries one, and the id in the scope
     supplies the weight to reach past it.
     DELIBERATELY STILL `:has(.ll-appshell__navbar)` after the 2026-09-23 widening around it:
     this is the only HORIZONTAL rule in the block, and the request that widened the others was
     about where content BEGINS down the page. The account pages keep the side padding they have
     always had here. */
  body:not(.ll-layout-focused) #content:has(.ll-appshell__navbar) .md-workspace {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* BOARDS SITS 24px LOWER THAN THE REST (requested 2026-09-21: "boards content needs to move
     down by 24px"). 52px + 24px, written as the sum's result on the same property the rule
     above sets, so there is one padding value per page rather than a base and a nudge.
     `#content.boards-page` matches the general scope's specificity exactly -- both are
     (1,2,1) once `body:not(...)` is counted -- so this has to come AFTER it to win, which is
     why it is here rather than beside the other boards rules. */
}
/* ...AND BOTH PUSHES START AT 900, NOT 1024 (2026-10-01, requested: "hold the full-size spacing").
   They made up for the workspace's 40px top margin, which used to go at 1024; that margin now holds
   down to 901 (the <=900 block after the general <=1024 block), so above 900 these would push the
   page 12px (36px on Boards) below where it sits at full size. Below 900 nothing changes. */
@media (max-width: 900px) {
  body:not(.ll-layout-focused) #content:has(.ll-appshell):not(:has(.md-main--updates-arrival)) .ll-appshell .md-shell {
    padding-top: 52px !important;
  }
  body:not(.ll-layout-focused) #content.boards-page .ll-appshell .md-shell {
    padding-top: 76px !important;
  }
  /* THE HOME PAGE HAS NONE (requested 2026-10-10: "on 900px and lower, modern view, the top
     padding of the md-shell on the home page needs to be removed"). This clearance kept content
     out from under a pill bar that floated over the shell; at these widths the bar and the
     account-rail dropdown now sit above the shell in the flow, so on the dashboard it was only a
     gap. Same two selectors as the Focused dashboard rule below (the dashboard answers to
     `home-page` and to `index`, and Extras also carries `index`). `:has(.ll-appshell)` matches the
     general rule's weight, (1,5,1): without it this lost to that rule, as the Boards line above
     still does (Boards measures 52px, not 76). */
  body:not(.ll-layout-focused) #content.home-page:has(.ll-appshell) .ll-appshell .md-shell,
  body:not(.ll-layout-focused) #content.index:not(.extras-page):has(.ll-appshell) .ll-appshell .md-shell {
    padding-top: 0 !important;
  }
}
/* NO TOP PADDING OR MARGIN ON THE WORKSPACE BELOW 901px (requested 2026-09-21, Gentle:
   "remove the top padding and top margins from md-workspace (on all pages, dashboard,
   caseload, organizations, boards, extras, and updates"). Like the side gutter above, this
   was never one value: measured across those six pages the top padding ran 0 to 52px and the
   margin 0 to 32px, each page carrying its own history. Both go to 0 so they agree.
   The shell's own top padding (52px, 76px on boards) is untouched -- that is what still holds
   the content clear of the chrome; this only removes the SECOND gap stacked inside it.
   Widened to `:has(.ll-appshell)` on 2026-09-23 with the rest of this block, so the account
   pages lose the same second gap rather than keeping one the six named pages do not. */
@media (max-width: 900px) {
  body:not(.ll-layout-focused) #content:has(.ll-appshell) .md-workspace {
    padding-top: 0 !important;
    margin-top: 0 !important;
    /* AND NONE ON `.md-main` INSIDE IT (requested 2026-10-10: "modern gentle view on 900px and
       smaller, remove the top padding from md-main"). Its base rule reads this variable (18px by
       default; Compressed View sets 36px on the home shell), so it is set here, on the workspace
       that holds `.md-main`, which is closer than the shell and so wins in both densities. */
    --dn-main-pad-top: 0px;
  }
}
/* ── THE ORGANIZATIONS DIRECTORY CLEARS THE NAV, IN BOTH LAYOUTS (2026-09-24) ───────────
   Requested as two moves in opposite directions: "gentle organizations - move the content down
   on the page" and "focused organizations - move the content up on the page (significantly)".
   They meet in the middle, and the measurement says why.

   MEASURED AT 1280, Modern `/organizations`, as the y of the page hero:
     gentle  #content 26 + shell   0 + workspace 20/40 -> hero at  86
     focused #content 46 + shell 112 + workspace 20/40 -> hero at 218
   The floating pill nav occupies 70-146. So in Gentle the hero was UNDER the nav -- this page's
   first element is its title, with none of the leading whitespace the dashboard's cards have, so
   it was the one page where the shell's deliberate nav overlap actually collided with content.
   In Focused the full 112px clearance plus this page's own insets pushed it 72px past where it
   needed to be.

   ONE TARGET FOR BOTH: 156, which is 10px under the nav's underside. That is why the two
   requests resolve to one rule with two values rather than to two independent nudges -- the
   page wants to sit just below the nav, and each layout was missing it from a different side.
   The values are the arithmetic, not a taste: gentle needs 156 - 86 = 70, focused needs
   156 - 106 = 50 (focused's `#content` already carries 20px more than gentle's).

   ON THE SHELL, not the workspace: the workspace's 20/40 is this page's own inner rhythm and is
   shared with the org DETAIL pages, which were not asked about and do not have this problem.
   `!important` matched, not added -- the rules being overridden
   (`.ll-appshell .md-shell`, and the gentle `:has(.ll-appshell)` block above) both carry one. */
body:not(.ll-layout-focused) #content .ll-appshell .md-shell.md-shell--org-directory {
  padding-top: 70px !important;
}

body.ll-layout-focused #content .ll-appshell .md-shell.md-shell--org-directory {
  padding-top: 50px !important;
}

/* FOCUSED DASHBOARD: 32px OFF THE TOP BELOW 901px (requested 2026-09-21: "reduce the top
   padding on the dashboard content by 32px"). 112px -> 80px.
   THE SHELL'S CLEARANCE IS THE ONLY TOP PADDING LEFT AT THESE WIDTHS, which is why it is the
   one reduced: measured on the focused dashboard at 900 and 820, `.md-workspace` is already
   `padding-top: 0; margin-top: 0` and `.md-main` is 0, so the 112px nav clearance is the whole
   gap. Taking the 32px off anything else would have had no effect.
   TWO SELECTORS, because the dashboard answers to two routes and `content_class`
   (controllers/application.js) labels them differently: `user.home` gets `home-page`, while
   the top-level `index` route gets `index`. The `:not(.extras-page)` is load-bearing -- the
   extras page ALSO carries `index` (its live class list is "index modern-dashboard
   extras-page"), so a bare `#content.index` would have moved Extras too. */
/* THEN TO 0 (requested 2026-10-10: "the top padding of the md-shell on the home page needs to be
   removed"). The pill bar and the account-rail dropdown now sit above the shell in the flow at
   these widths, so there is nothing left for this clearance to clear. Gentle's home is set to
   match beside its 52px general rule. */
@media (max-width: 900px) {
  body.ll-layout-focused #content.home-page .ll-appshell .md-shell,
  body.ll-layout-focused #content.index:not(.extras-page) .ll-appshell .md-shell {
    padding-top: 0 !important;
  }
}
/* BOARDS, EXTRAS AND UPDATES START WHERE THE DASHBOARD DOES, BELOW 901px (requested
   2026-09-21, Focused: "the boards, extras, and updates content all need to move up to the
   same level as the dashboard content").
   THREE INDEPENDENT OFFSETS STACK HERE, which is why one declaration could not do it.
   Measured at 900, the content y was dashboard 361, extras 425, updates 443, boards 473, and
   the gap is made of three different things:
     - `#content`'s own top padding: 16px on the dashboard and extras, 46px on updates, 52px
       on boards -- which moves the whole appshell, rail band included;
     - the shell's nav clearance: 80px on the dashboard (reduced earlier today), 112px on the
       other three;
     - `.md-workspace`'s top padding: 0 on the dashboard, 20px updates, 32px extras, 44px
       boards.
   All three are set to the dashboard's values, so the four pages compute the same sum rather
   than being nudged to look equal at one width: 16 + rail + nav + 80 + 0.

   CASELOAD IS DELIBERATELY NOT INCLUDED. It was not named, and it sits 16px ABOVE the
   dashboard (345 at 900), so folding it in would have MOVED it to satisfy a request about
   three other pages.
   UPDATES HAS NO PAGE CLASS to select, unlike boards and extras, so it is identified by what
   is true of it alone: it is the only `.md-shell--user` page that renders the pill nav -- the
   account pages share the shell class but have no nav.
   `#within_ember` for the two-id weight: the `#content` padding these override is itself set
   by `#within_ember #content...` rules at (2,1,0), which a one-id selector cannot reach. */
@media (max-width: 900px) {
  body.ll-layout-focused #within_ember #content.boards-page,
  body.ll-layout-focused #within_ember #content.extras-page,
  body.ll-view-modern #within_ember #content:has(.ll-appshell__navbar):has(.md-shell--user) {
    padding-top: var(--topbar-height) !important;
    --ll-content-pad-extra: 0px !important; /* see the Gentle `#content:has(.ll-appshell)` rule */
  }
  body.ll-layout-focused #within_ember #content.boards-page .ll-appshell .md-shell,
  body.ll-layout-focused #within_ember #content.extras-page .ll-appshell .md-shell,
  body.ll-view-modern #within_ember #content:has(.ll-appshell__navbar):has(.md-shell--user) .ll-appshell .md-shell {
    padding-top: 80px !important;
  }
  body.ll-layout-focused #within_ember #content.boards-page .md-workspace,
  body.ll-layout-focused #within_ember #content.extras-page .md-workspace,
  body.ll-view-modern #within_ember #content:has(.ll-appshell__navbar):has(.md-shell--user) .md-workspace {
    padding-top: 0 !important;
  }
}
/* THE NAV FITS ITS CONTENT. `.md-pillnav` is a block-level flex container with no width of
   its own, so it stretched to the shell's full 1232px (capped by its own 1120px max-width)
   once mounted here instead of inside each page's narrower column. `fit-content` restores
   the pill-bar look; the base rule's `margin: 42px auto 0` then centres it, and that 42px
   top is zeroed because this wrapper owns the vertical spacing now. */
.ll-appshell__navbar .md-pillnav {
  width: fit-content !important;
  margin-top: 0 !important;
}

/* The legacy Bootstrap `.row` wrapper inside the dashboard carries `margin: 0 -20px -10px`,
   the classic negative gutter meant to cancel a parent's 20px padding. Inside the app shell
   there is no such padding to cancel, so it simply made the page 40px wider than its column
   and pushed its left edge 15px UNDER the fixed rail -- which read as the rail's background
   not reaching the panel's full width. Neutralised here rather than at the source: that
   negative margin is still doing its original job everywhere else the row is used. */
.ll-appshell__content > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* The matching 5px side padding goes with them. It is the other half of the same
     Bootstrap gutter convention (negative margin on the row, padding back on the row/col),
     so leaving it behind just inset the page by 5px against nothing. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* At 900px and below the rail stops being a fixed panel and becomes an in-flow block above
   the page (see the rail's own breakpoint rules), so the offset that clears it has to go or
   the content is pushed off-screen on a tablet held in portrait. */
@media (max-width: 900px) {
  .ll-appshell__main {
    margin-left: 0;
  }
  /* THE PILLS SIT 16px LOWER BELOW 900 (requested 2026-09-21, both Gentle and Focused:
     "the pillnav needs to be pushed down 16px (while keeping the bottom content bg above
     it)"). PADDING, not `margin-top` or `top`: padding is inside the element's background
     box, so the frosted band grows upward by the same 16px and covers the space the pills
     vacated -- which is the parenthesis in the request. A margin would have moved the band
     with the pills and left a bare strip above it.
     This width is below the `min-width: 901px` block that anchors the nav to the app frame,
     so here it is still the in-flow sticky element and this simply adds to its box. */
  .ll-appshell__navbar {
    padding-top: 16px;
  }
}
/* ── THE NAV SITS IN ONE PLACE ON EVERY PAGE (2026-09-21) ───────────────────────────────
   Reported: "all pillnav menus need to show in the same place on the page ... they are
   varying all over the place on modern focused view". Measured on Modern + Focused at
   1280x900, the nav's top was 86 on Dashboard, Caseload and Extras, 96 on Boards, and 116 on
   Organizations and Updates -- a 30px spread on a nav that is mounted ONCE precisely so it
   does not move between pages.

   THE CAUSE, traced rather than guessed: `position: sticky` offsets from the SCROLL
   CONTAINER's padding box, and that container is `#content`, whose `padding-top` is set
   per-page -- `calc(var(--topbar-height) + 3rem)` = 46px by default, `+ 1rem` = 26px for
   `.boards-page` / `.modern-dashboard` / `.stats-page`, and `var(--topbar-height)` = 16px for
   the focused index. At rest the nav sits AT that padding edge, so its screen position was
   the page's own top padding + 70. Each measurement above is exactly that sum.

   THE FIX IS THE RAIL'S. `.md-acct-rail` (~49712) has been `position: fixed; top:
   max(var(--topbar-height, 70px), 70px); left: 0` since 2026-09-18, which is why the rail
   held still on all six pages while the nav wandered. Anchoring the nav to the same app frame
   makes the two halves of the chrome one thing. See that rule for why the offset is a `max()`
   with the fallback INSIDE the `var()`.

   NOTHING ELSE MOVES. In flow the nav occupied a 48px band and cancelled it with
   `margin-bottom: -48px`, a net contribution of 0; fixed, it contributes 0 as well. The
   `+ 16px` is the gap the Dashboard already had (86 = 70 + 16), and `left: 208px; right: 0`
   is the same band `.ll-appshell__main` gives it, so `width: fit-content` centres the pills
   exactly where they were. Verified: left 390/392 and width 704/707 before and after.

   ABOVE 900px ONLY, matching the rail's own breakpoint: below it the rail is in flow and the
   pill row has given way to its collapsed drawer, so the nav belongs in the document there. */
@media (min-width: 901px) {
  .ll-appshell__navbar {
    position: fixed;
    /* THE FROSTED BAND REACHES THE APP NAVBAR (requested 2026-09-21: "the frosted band from
       this div needs to extend all the way up and 12px down from where it is"). It used to
       start 16px below the navbar, leaving a strip of page content showing unfrosted between
       the two. The 16px did not disappear -- it moved from `top` into `padding-top`, so the
       BAND now starts at the navbar's underside while the pills inside it stay exactly where
       they were at y=86. Changing `top` alone would have moved the pills with it. */
    top: max(var(--topbar-height, 70px), 70px);
    padding-top: var(--dn-nav-pad-top, 16px);
    /* 0: THE BAND ENDS AT THE BOTTOM OF THE PILLS (requested 2026-10-10: "the blur underneath the
       main pill-nav menu stretches too far downward -> make it only stretch to the bottom of the
       pill-nav menu"). It was 18px (6px base + 12px asked for on 2026-09-21), which carried the
       blur 18px past the pills and over the top of the page content. Only the band's bottom edge
       moves: the pills are placed by `top` + `padding-top` above, so they stay at y=86. */
    padding-bottom: var(--dn-nav-pad-bottom, 0);
    left: var(--ll-rail-width);
    right: 0;
    /* The in-flow band it cancelled no longer exists. */
    margin-bottom: 0;
  }
}
/* ── BOOTSTRAP 3'S TOUCH-ONLY DROPDOWN BACKDROP IS DISABLED (2026-09-24) ─────────────────
   REPORTED as "when you are on the account page and click the extras dropdown, it disables
   scrolling", then narrowed by the reporter to "only when i'm in devtools". It is NOT a DevTools
   bug, and that distinction is the point: DevTools' device toolbar makes Chrome advertise touch
   support, and Bootstrap 3 inserts `.dropdown-backdrop` ONLY when `'ontouchstart' in
   document.documentElement`. The device toolbar does not cause the fault -- it reproduces on a
   desktop what every REAL touch device already has, which for this product means the iPads and
   touchscreen Chromebooks a large share of users run.

   WHAT IT DOES. The backdrop is a `position: fixed` overlay across the whole viewport at
   z-index 990. Measured with touch emulation on: `elementFromPoint` at the centre of the page
   returns `div.dropdown-backdrop`, and a wheel gesture leaves `#content.scrollTop` exactly where
   it was (277 -> 277). With it gone the same gesture scrolls normally (277 -> 677).

   WHY IT IS SAFE TO DROP. It is a workaround for iOS 5/6 Safari, where a `click` on a
   non-interactive element did not bubble to `document`, so Bootstrap could not see the tap
   outside that should close an open menu. Bootstrap's own `clearMenus` handler on `document`
   does that job in every browser this app supports. Verified, not assumed, with touch emulation
   and the backdrop suppressed: an outside mouse click closes the menu, and so does a real
   touchscreen tap.

   `display: none` rather than `pointer-events: none`: the element would still be in the way of
   anything that hit-tests by walking the tree, and a backdrop that cannot be clicked is not a
   backdrop.

   AT THE END OF THE FILE ON PURPOSE. This overrides a rule in Bootstrap's own vendor.css, which
   the app loads BEFORE frontend.css, so equal specificity here is decided by sheet order and
   this wins without `!important`. It is last in this file so nothing later can tie it.
   (A first attempt put it beside the other dropdown rules and landed INSIDE the selector on the
   line above, silently breaking `header #normal_mode #level_dropdown ~ .dropdown-menu` -- which
   is why this one is appended rather than threaded into the middle of a 120k-line stylesheet.) */
.dropdown-backdrop {
  display: none;
}

/* ── FOCUSED: "COMPARE REPORT PERIODS" IN DARK BLUE, NOT TEAL (2026-09-24) ───────────────
   Requested: "on focused view, give the COMPARE REPORT PERIODS a dark blue hue instead of teal".
   The badge's gentle styling is a teal wash with `#0d5c5f` ink and a teal glow; every teal-bearing
   property is restated here in navy/denim so nothing is left half-converted -- the fill, the ink,
   and the shadow that was tinting the area around it.
   GENTLE IS UNTOUCHED: the base rule keeps its teal, which is the palette the rest of that view
   uses. */
body.ll-layout-focused .md-stats-compare-filter-group__badge {
  color: #1B365D;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(76, 134, 216, 0.1) 35%, rgba(76, 134, 216, 0.22) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(27, 54, 93, 0.15);
}

/* ── COMMUNICATOR PICKER: SEARCH FILTER (2026-09-24) ─────────────────────────────────────
   The box only renders where a call site asks for it (`@filterable`), which today is the
   Select User for Reports modal -- see components/user-select.hbs.
   THE LABEL IS VISIBLE, not a placeholder: placeholder text vanishes the moment someone starts
   typing, which is when a switch or screen-magnifier user most needs to still see what the
   field is for. It is small and quiet rather than hidden.
   14px on the input is the floor this product holds text to, and it also stops iOS Safari
   zooming the viewport when the field takes focus -- anything under 16px normally would, but
   the modal is not a form people live in and the zoom is the lesser problem than a label
   nobody can read. */
.user-select-filter {
  margin: 0 0 12px;
}

.user-select-filter__label {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(27, 54, 93, 0.72);
}

.user-select-filter__input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid rgba(27, 54, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(27, 54, 93, 0.05);
}

.user-select-filter__input:focus {
  outline: 2px solid rgba(76, 134, 216, 0.55);
  outline-offset: 1px;
  border-color: rgba(76, 134, 216, 0.5);
}

/* Spans the grid so the message sits under the search box rather than in the first card slot. */
.user-select-filter__empty {
  padding: 8px 0 16px;
  text-align: center;
}

/* ── GENTLE ACCOUNT SECTION: THE CONTENT STARTS WITH THE RAIL (2026-09-24) ───────────────
   Requested: "modern gentle My Account page, move the page content up considerably".
   MEASURED at 1280 before this, as the chain down to the first thing on the page:
     #content 26 + shell 0 + workspace 40 margin + 40 padding = main at 106
     + main's own 35 padding = hero at 141, + the hero's 28 = the title near 169.
   Meanwhile the ACCOUNT RAIL beside it starts at y=70, so the page read as though its content
   had been pushed a third of the way down the panel next to it.
   THE WORKSPACE'S 80px IS WHAT GOES -- its 40px margin and 40px padding are the two largest
   terms and the only ones that are pure gap. `.md-main--user`'s 35px and the hero's 28px are the
   CARD's own inset and the header's own rhythm; cutting those would have tightened the content
   against its container rather than moving the block up.
   16px of padding is kept so the card does not start flush against the shell's edge. Result:
   main at 42, hero at 77 -- level with the rail's 70, which is the alignment the page was
   missing.
   GENTLE ONLY, as asked; Focused sets these per page in _focused-view.scss and is untouched.
   BOUNDED AT 901 for the same reason the 1024 step below it is (read that note): under 901 the
   rail drops in flow above the content and the shell-wide `@media (max-width: 900px)` rule at
   the foot of the gentle block takes this box to 0. Leaving the 16px unbounded outweighed that
   rule and held 16px of the 64 this section was asked to give up at those widths. */
@media (min-width: 901px) {
  body:not(.ll-layout-focused) #content:has(.md-hero--dashboard-user) .ll-appshell .md-shell--user > .md-workspace {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }
}
/* ...AND 64px FURTHER UP AT 1024 AND BELOW (requested 2026-09-24: "move it up another 64px" /
   "on 1024px and smaller").
   THE 64 IS NOT ONE NUMBER, it is two, and measuring is what showed that. At 1280 the account
   page's title sits at y=105; at 1024 it sits at 149 -- 44px lower for the same page, because
   the gentle alignment block above gives `.ll-appshell .md-shell` 52px of top padding at this
   breakpoint that desktop does not have. So the move is that 52px, plus 12 of the workspace's
   own 16px inset:
     shell    52 -> 0   (the breakpoint's clearance, which this section does not need: it has no
                         floating pill nav to clear -- that is what the 52px was reserving)
     workspace 16 -> 20
   THEN 16px BACK DOWN, asked for straight after seeing it (net 48 up from 149, title at 101).
   The two steps are folded into the single workspace value rather than left as a 4px rule plus a
   16px correction -- one declaration per box, so the next person reads a position rather than an
   argument. The shell's 52 -> 0 is untouched by that second step.
   The title clears the fixed header either way; its bottom edge is y=70. */
@media (max-width: 1024px) {
  body:not(.ll-layout-focused) #content:not(:has(.md-main--updates-arrival)) .ll-appshell .md-shell.md-shell--user {
    padding-top: 0 !important;
  }
}
/* THE WORKSPACE'S 20px STOPS AT 901. Below that the rail is no longer a side column: it drops
   in flow as a full-width grid ABOVE the content, and the shell-wide rule at the foot of the
   gentle block (`@media (max-width: 900px) ... .md-workspace { padding-top: 0; margin-top: 0 }`)
   already says every page in this shell starts flush there. This rule outweighs it (0,4,1 against
   0,3,1) and was quietly reinstating a gap those six pages had been told to drop, so it is bounded
   rather than repeated -- one statement per range instead of one rule undoing another.
   The shell's `padding-top: 0` above is NOT bounded: it stays 0 all the way down, or the narrow
   widths would take back the 52px push the account section is exempt from. */
@media (min-width: 901px) and (max-width: 1024px) {
  body:not(.ll-layout-focused) #content:has(.md-hero--dashboard-user) .ll-appshell .md-shell--user > .md-workspace {
    padding-top: 20px !important;
  }
}
/* ── 64px UP AT 900 AND BELOW, ACCOUNT SECTION AND REPORTS (2026-09-24) ─────────────────
   Requested as two lines: "modern gentle on 900px and smaller: move account page content up
   64px / move stats page content up 64px".

   WHY THIS IS A SEPARATE BREAKPOINT FROM THE 1024 WORK ABOVE. At 901 and up the account rail is
   a fixed side column and the content begins at the top of the page. Below 901 the rail is in
   flow: a full-width grid of nine links, 202px tall at 900, sitting ABOVE the content. So what
   the eye reads as "the page content" starts under the rail, and the gap complained of is the
   band between the rail's bottom edge and the page title -- measured 95px on the account page
   and 112px on Reports.

   NOTHING IN THAT BAND PAINTS. Checked before cutting, on both pages at 900:
   `.ll-appshell__main`, `.md-shell`, `.md-workspace`, `.md-main--user` and `.md-hero` all report
   a transparent background, no border and no shadow. The band is empty space in four or five
   stacked boxes, so removing it moves the content up without tightening it against any edge --
   the reason the cuts below are safe and the rail's own 20px margin-bottom is left alone.
   THE RAIL IS DELIBERATELY UNTOUCHED, and not only for that: it renders on BOTH pages, so any
   cut to it would count toward both budgets at once and the two moves could not be sized
   independently. Each page's 64 comes out of boxes only that page has.
     account (95 available): workspace 20 -> 0, `.md-main--user` 35 -> 0, title lead 20 -> 11
     Reports (112 available): shell 52 -> 0, hero 24 -> 12
   Each cut lives at the rule that owns the box (see `.md-shell--user > .md-workspace >
   .md-main--user`, `.md-hero.md-hero--dashboard .md-hero__title`, and
   `.md-shell--reports-view .md-hero--reports-dashboard`); only Reports' shell exception is here,
   beside the account one it copies.

   REPORTS' 52px IS THE SAME EXEMPTION THE ACCOUNT PAGES ALREADY HAVE. The gentle block's 1024
   rule pushes every shell page down 52px; the account section was exempted from it above. Reports
   is one of the nine pages of that section (it is the rail's "Reports" row), so zeroing it here
   brings Reports back in line with its own section rather than making it an exception. */
@media (max-width: 900px) {
  body:not(.ll-layout-focused) #content .ll-appshell .md-shell.md-shell--stats {
    padding-top: 0 !important;
  }
}
/* ── ABOVE 900: THE SEVEN INNER SECTION PAGES SIT WHERE FOCUSED PUTS THEM (2026-09-25) ──
   Requested: "modern view gentle: on >900px width move the Goals, Logs, Profile, Recordings,
   Preferences, Subscription, & Supervision page contents down ... position them down the same
   level they are on focused view".

   WHICH PAGES, AND HOW THEY ARE TOLD APART. All nine account-section pages share
   `.md-shell--user`, so the class alone cannot separate them. The account page is the one that
   renders `.md-hero--dashboard-user` (templates/user/index.hbs), so `:has()` on it names the
   account page and `:not(:has())` names the other seven. Reports is not in either set: it is a
   bare route with its own `.md-shell--stats` (see the block below).
   The account page keeps the position it was given on 2026-09-24 ("move the page content up
   considerably", then another 64px), which is why the two rules that do that now carry the same
   `:has(.md-hero--dashboard-user)` scope. They were written when the section moved as one; it
   does not any more, and scoping them is the honest way to say so.

   MEASURED IN THE BROWSER, Modern, `/goals` as the representative (all seven agree to the
   pixel), as the y of the page title:
                gentle before   focused   delta
     1280            77           171      +94
     1024            81           131      +50
      950            81           131      +50
   Focused reaches 171/131 as #content 46 + shell 30 + workspace 40/0 margin + 20 padding +
   `.md-main--user` 35. Three of those four are simply the values these pages have when the
   gentle alignment block leaves them alone, so this block restores them rather than inventing
   numbers: #content to the bare `+ 3rem` those routes get without a page class, and the shell
   to its own `--ll-nav-clearance`. THE WORKSPACE MARGIN IS DELIBERATELY NOT DECLARED -- the base
   is already 40 at 1280 and 0 at 1024 and below, which is exactly what Focused has at each
   width, and writing it out would freeze one width's value across both.
   Only the padding needs stating, and 20px is the number Focused itself uses.

   GENTLE ONLY and >900 ONLY, as asked. The 900-and-below work of 2026-09-24 (the section moving
   up 64px when the rail drops in flow) is a different range and is untouched. */
@media (min-width: 901px) {
  /* Not Basic (2026-10-01): its rail pages take the home page's `#content` padding so the rail
     starts at one height on every page (_classic-home.scss, "ONE MENU HEIGHT"). */
  /* THE UPDATES ARRIVAL IS EXCLUDED FROM THE SHELL AND WORKSPACE RULES BELOW (2026-10-10). The
     logs page opened from the home pill-nav's Updates (`md-main--updates-arrival`,
     templates/user.hbs) shares `.md-shell--user` with the account pages but, unlike them, HAS the
     floating pill-nav. Cutting the shell's nav clearance lifted its title into the nav's blur band
     (measured 131 against the band's 146 at 1280). It takes Focused's positioning instead (shell
     clearance kept; workspace and main zeroed by the arrival rules in _focused-view.scss). The
     `#content` rule just below is NOT excluded: its 46px is exactly Focused's value. */
  body:not(.ll-layout-focused):not(.ll-view-basic) #within_ember #content:has(.md-shell--user):not(:has(.md-hero--dashboard-user)) {
    padding-top: calc(var(--topbar-height) + 3rem) !important;
  }
  body:not(.ll-layout-focused) #content:has(.md-shell--user):not(:has(.md-hero--dashboard-user)):not(:has(.md-main--updates-arrival)) .ll-appshell .md-shell {
    padding-top: 3rem !important;
  }
  body:not(.ll-layout-focused) #content:has(.md-shell--user):not(:has(.md-hero--dashboard-user)):not(:has(.md-main--updates-arrival)) .ll-appshell .md-shell--user > .md-workspace {
    padding-top: 20px !important;
  }
}
/* ── ABOVE 900: REPORTS COMES UP TO THE SECTION'S LANDING LINE (2026-09-25) ─────────────
   Requested: "modern view gentle: On >900px width move the stats page content up on the page".

   IT WAS THE LOWEST PAGE IN THE SECTION, measured as the y of "Activity for <user>": 146 at
   1280, 158 at 1024, 170 at 950, against the account page's 105/101/101. Two boxes held it
   there and both are doubled-up gaps rather than anything of the page's own:
     shell     52 -> 0   the 1024-step push, which the rest of this section is already exempt
                         from; Reports is in the section and was not
     workspace 40 margin -> 0, and its padding pinned at 40 rather than the base's 40/40/52
   That leaves the workspace's own 40px inset, the hero's 24 and the title's 16, and lands the
   title on y=106 at every width above 900 -- the line the gentle alignment block names as this
   section's landing line, and within a pixel of the account page's 105.

   SCOPED TO `.md-shell--stats`, not `--reports-view`: the latter is also on user.hbs,
   user/boards.hbs and the dashboard's authenticated view, none of which were asked to move.
   >900 ONLY: below 901 Reports has its own 2026-09-24 rules (52 -> 0 and the hero's 24 -> 12),
   which this must not reach past. */
@media (min-width: 901px) {
  body:not(.ll-layout-focused) #content .ll-appshell .md-shell.md-shell--stats {
    padding-top: 0 !important;
  }
  body:not(.ll-layout-focused) #content .ll-appshell .md-shell--stats > .md-workspace {
    margin-top: 0 !important;
    padding-top: 40px !important;
  }
}
/* ── GENTLE HOME BUTTONS ON SMALLER SCREENS (2026-10-10) ──────────────────────────────────────
   Requested: "on 900px and smaller -> make the home page main buttons more compact -> a bit smaller
   font, and it should show two each row until 768px and lower", and for Create a Board / Edit
   Dashboard, fonts that "scale down on smaller screens" (SLEEKER SECONDARY BUTTONS).
   Gentle only: Focused lays these cards out with its own rules. At the end of the file so these
   sit after the base sizes they step down from. */
/* SPEAK AND EXTRAS SCALE DOWN FROM 1024px (requested 2026-10-10: "on 1024px and smaller, the speak
   and extras button content should scale smaller (including their images) so no content is cut
   off"). Measured before: in the half-width cards (333-380px) the text block started ~156px in
   (32px padding + 95px image + 30px gap) and was a fixed 208px wide (its divider), so it ran past
   the card's edge at 1024, 980, 951, 950, 820 and 769. Everything that takes width steps down
   together; the fonts are the <=900 step's, moved up to here. Full-width again at <=768.
   FROM 1100px SINCE THE SAME DAY (requested: "starting at 1100px, the modern view gentle view speak
   and extras cards need to start scaling down"): between 1025 and 1100 the cards were 327-364px
   wide at full size (24px titles, 95px images). */
@media (max-width: 1100px) {
  .md-grid.md-grid--layout-gentle .md-card.md-card--speak.md-card--speak-as-button .md-card__icon,
  .md-grid .md-card.md-card--extras.md-card--as-button .md-card__icon.md-card__icon--extras {
    width: 72px !important;
    height: 72px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__head,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__head {
    gap: 16px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--speak-as-button,
  .md-grid.md-grid--layout-gentle.md-grid--dashboard .md-card.md-card--extras {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__title::after,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__title::after {
    width: min(150px, 100%) !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__title,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__title {
    font-size: 20px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__status,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__sub {
    font-size: 16px !important;
  }
}
/* CREATE A BOARD / EDIT DASHBOARD SCALE DOWN WITH THE SCREEN (requested 2026-10-10: "the create board
   and edit dashboard buttons on modern gentle are not scaling down on smaller screens (font size,
   padding, icon size, etc)"). Measured before: 20/16px text to 901px, and a 64px icon, 34px glyph,
   30px icon gap and 16px sides at every width. Now everything steps together, three times:
              title  sub   icon  glyph  gap   padding
     >1100     20    16    64    34     30    8px 16-24px (unchanged)
     <=1100    16    14    48    26     16    6px 14px
     <=900     15    14    42    22     12    6px 12px
     <=600     14    14    38    20     10    4px 10px
   Each step was taken one notch further the same day ("make them scale down further"); the first
   pass ran 18/56/20 at 1100, 16/48/16 at 900 and 14/44/12 at 600.
   14px is the AAC text floor (see the <=600 step). The selectors add `md-grid--layout-gentle` to
   the shared as-button icon/head rules' own, so they win at equal `!important`. */
@media (max-width: 1100px) {
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__title {
    font-size: 16px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
    font-size: 14px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
    width: 48px !important;
    height: 48px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
    width: 26px;
    height: 26px;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__head {
    gap: 16px !important;
  }
  .md-grid.md-grid--layout-gentle.md-grid--dashboard .md-card.md-card--badge-action {
    padding: 6px 14px !important;
  }
}
@media (max-width: 900px) {
  /* SLEEKER SECONDARY BUTTONS, step 1 (title 20 -> 18px with the second 2px cut); 15px now that the
     1100px step above takes 16 (see the table). */
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__title {
    font-size: 15px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
    font-size: 14px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
    width: 42px !important;
    height: 42px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
    width: 22px;
    height: 22px;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__head {
    gap: 12px !important;
  }
  .md-grid.md-grid--layout-gentle.md-grid--dashboard .md-card.md-card--badge-action {
    padding: 6px 12px !important;
  }
}
/* One per row at 768 and below. */
@media (max-width: 768px) {
  .md-grid.md-grid--dashboard.md-grid--layout-gentle > .md-card--speak-as-button,
  .md-grid.md-grid--dashboard.md-grid--layout-gentle > .md-card--as-button {
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  /* The two main cards step down again here, so the <=900 sizes above never ENLARGE a phone's
     (Speak's title was already 18px at 390 before 2026-10-10, from an older small-screen rule). */
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__title,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__title {
    font-size: 18px !important;
  }
  .md-grid--layout-gentle .md-card.md-card--speak-as-button .md-card__status,
  .md-grid--layout-gentle .md-card.md-card--extras.md-card--as-button .md-card__sub {
    font-size: 14px !important;
  }
  /* SLEEKER SECONDARY BUTTONS, step 2: still 2px under the main cards' title. The subtitle stays at
     14px with theirs: that is this app's AAC text floor. */
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__title {
    font-size: 14px !important; /* 16 -> 14px with the second 2px cut; 14px is the AAC floor */
  }
  .md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__sub {
    font-size: 14px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon {
    width: 38px !important;
    height: 38px !important;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__icon-glyph {
    width: 20px;
    height: 20px;
  }
  .md-grid.md-grid--layout-gentle .md-card.md-card--badge-action.md-card--as-button .md-card__head {
    gap: 10px !important;
  }
  .md-grid.md-grid--layout-gentle.md-grid--dashboard .md-card.md-card--badge-action {
    padding: 4px 10px !important;
  }
}
/* "Predict" Y|N toggle in the speak-mode sidebars (2026-10-13 request): turns word prediction in
   Speak Mode on/off. Shared across the classic sidebar (.sidebar__predict-*) and the Modern
   board-detail inline sidebar (.md-board-detail-inline-sidebar__predict-*).
   LEFT-ALIGNED, with a small "Predict" label over a SLIM Y|N pill (single-letter options so it fits
   the very narrow sidebars: classic #sidebar is ~100px and the inline sidebar is var(--bd-sidebar-w)
   down to 53px). Full "Yes"/"No" live on each option's aria-label.
   The classic sidebar is light (#fff) by default but SLATE in board-alt speak mode
   (#within_ember.board-alt-view #sidebar), and the inline sidebar has a .md-board-detail--dark
   variant, so dark-context overrides below keep the label and control readable there.
   On board-detail it sits above the Edit row; the margin below is the requested spacing. */
.sidebar__predict-row,
.md-board-detail-inline-sidebar__predict-row {
  display: flex;
  flex-direction: column;
  align-items: center; /* centered in the sidebar div (requested 2026-10-13) */
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0;
  padding: 10px 4px 0;
  border-top: 1px solid rgba(27, 54, 93, 0.12);
}

.sidebar__predict-label,
.md-board-detail-inline-sidebar__predict-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: #1B365D;
}

/* On the very narrow inline sidebar (var(--bd-sidebar-w) down to 53px at <=768px), shrink the
   label so "Predict" still fits without clipping; wider screens keep the 14px above. */
@media (max-width: 768px) {
  .md-board-detail-inline-sidebar__predict-label {
    font-size: 11px;
  }
}
/* Slim Y|N pill — compact (not full width), centered, short. */
.sidebar__predict-seg,
.md-board-detail-inline-sidebar__predict-seg {
  display: inline-flex;
  align-self: center;
  border: 1px solid rgba(27, 54, 93, 0.3);
  border-radius: 999px;
  overflow: hidden;
}

.sidebar__predict-opt,
.md-board-detail-inline-sidebar__predict-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(27, 54, 93, 0.8);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-width: 22px;
  padding: 4px 8px;
  min-height: 22px;
  text-align: center;
  cursor: pointer;
}

.sidebar__predict-opt + .sidebar__predict-opt,
.md-board-detail-inline-sidebar__predict-opt + .md-board-detail-inline-sidebar__predict-opt {
  border-left: 1px solid rgba(27, 54, 93, 0.22);
}

.sidebar__predict-opt--on,
.md-board-detail-inline-sidebar__predict-opt--on {
  background: #4C86D8;
  color: #fff;
}

/* The classic sidebar is SLATE in board-alt speak mode — light text + borders there. */
#within_ember.board-alt-view #sidebar .sidebar__predict-label {
  color: rgba(255, 255, 255, 0.92);
}

#within_ember.board-alt-view #sidebar .sidebar__predict-row {
  border-top-color: rgba(255, 255, 255, 0.18);
}

#within_ember.board-alt-view #sidebar .sidebar__predict-seg {
  border-color: rgba(255, 255, 255, 0.34);
}

#within_ember.board-alt-view #sidebar .sidebar__predict-opt {
  color: rgba(255, 255, 255, 0.85);
}

#within_ember.board-alt-view #sidebar .sidebar__predict-opt + .sidebar__predict-opt {
  border-left-color: rgba(255, 255, 255, 0.24);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__predict-label {
  color: rgba(255, 255, 255, 0.92);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__predict-row {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__predict-opt {
  color: rgba(255, 255, 255, 0.82);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__predict-seg {
  border-color: rgba(255, 255, 255, 0.3);
}

.md-board-detail--dark .md-board-detail-inline-sidebar__predict-opt + .md-board-detail-inline-sidebar__predict-opt {
  border-left-color: rgba(255, 255, 255, 0.22);
}