/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/assets/fontawesome-webfont-G5YE5S7X.eot?v=4.7.0');
  src: url('/assets/fontawesome-webfont-G5YE5S7X.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fontawesome-webfont-B-jkhYfk.woff2?v=4.7.0') format('woff2'), url('/assets/fontawesome-webfont-CDK5bt4p.woff?v=4.7.0') format('woff'), url('/assets/fontawesome-webfont-CQDK8MU3.ttf?v=4.7.0') format('truetype'), url('/assets/fontawesome-webfont-D13rzr4g.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}
.fa-pull-left {
  float: left;
}
.fa-pull-right {
  float: right;
}
.fa.fa-pull-left {
  margin-right: .3em;
}
.fa.fa-pull-right {
  margin-left: .3em;
}
/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper-pp:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-vine:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
.fa-buysellads:before {
  content: "\f20d";
}
.fa-connectdevelop:before {
  content: "\f20e";
}
.fa-dashcube:before {
  content: "\f210";
}
.fa-forumbee:before {
  content: "\f211";
}
.fa-leanpub:before {
  content: "\f212";
}
.fa-sellsy:before {
  content: "\f213";
}
.fa-shirtsinbulk:before {
  content: "\f214";
}
.fa-simplybuilt:before {
  content: "\f215";
}
.fa-skyatlas:before {
  content: "\f216";
}
.fa-cart-plus:before {
  content: "\f217";
}
.fa-cart-arrow-down:before {
  content: "\f218";
}
.fa-diamond:before {
  content: "\f219";
}
.fa-ship:before {
  content: "\f21a";
}
.fa-user-secret:before {
  content: "\f21b";
}
.fa-motorcycle:before {
  content: "\f21c";
}
.fa-street-view:before {
  content: "\f21d";
}
.fa-heartbeat:before {
  content: "\f21e";
}
.fa-venus:before {
  content: "\f221";
}
.fa-mars:before {
  content: "\f222";
}
.fa-mercury:before {
  content: "\f223";
}
.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}
.fa-transgender-alt:before {
  content: "\f225";
}
.fa-venus-double:before {
  content: "\f226";
}
.fa-mars-double:before {
  content: "\f227";
}
.fa-venus-mars:before {
  content: "\f228";
}
.fa-mars-stroke:before {
  content: "\f229";
}
.fa-mars-stroke-v:before {
  content: "\f22a";
}
.fa-mars-stroke-h:before {
  content: "\f22b";
}
.fa-neuter:before {
  content: "\f22c";
}
.fa-genderless:before {
  content: "\f22d";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-pinterest-p:before {
  content: "\f231";
}
.fa-whatsapp:before {
  content: "\f232";
}
.fa-server:before {
  content: "\f233";
}
.fa-user-plus:before {
  content: "\f234";
}
.fa-user-times:before {
  content: "\f235";
}
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}
.fa-viacoin:before {
  content: "\f237";
}
.fa-train:before {
  content: "\f238";
}
.fa-subway:before {
  content: "\f239";
}
.fa-medium:before {
  content: "\f23a";
}
.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}
.fa-optin-monster:before {
  content: "\f23c";
}
.fa-opencart:before {
  content: "\f23d";
}
.fa-expeditedssl:before {
  content: "\f23e";
}
.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}
.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}
.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}
.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}
.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}
.fa-mouse-pointer:before {
  content: "\f245";
}
.fa-i-cursor:before {
  content: "\f246";
}
.fa-object-group:before {
  content: "\f247";
}
.fa-object-ungroup:before {
  content: "\f248";
}
.fa-sticky-note:before {
  content: "\f249";
}
.fa-sticky-note-o:before {
  content: "\f24a";
}
.fa-cc-jcb:before {
  content: "\f24b";
}
.fa-cc-diners-club:before {
  content: "\f24c";
}
.fa-clone:before {
  content: "\f24d";
}
.fa-balance-scale:before {
  content: "\f24e";
}
.fa-hourglass-o:before {
  content: "\f250";
}
.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}
.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}
.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}
.fa-hourglass:before {
  content: "\f254";
}
.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}
.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}
.fa-hand-scissors-o:before {
  content: "\f257";
}
.fa-hand-lizard-o:before {
  content: "\f258";
}
.fa-hand-spock-o:before {
  content: "\f259";
}
.fa-hand-pointer-o:before {
  content: "\f25a";
}
.fa-hand-peace-o:before {
  content: "\f25b";
}
.fa-trademark:before {
  content: "\f25c";
}
.fa-registered:before {
  content: "\f25d";
}
.fa-creative-commons:before {
  content: "\f25e";
}
.fa-gg:before {
  content: "\f260";
}
.fa-gg-circle:before {
  content: "\f261";
}
.fa-tripadvisor:before {
  content: "\f262";
}
.fa-odnoklassniki:before {
  content: "\f263";
}
.fa-odnoklassniki-square:before {
  content: "\f264";
}
.fa-get-pocket:before {
  content: "\f265";
}
.fa-wikipedia-w:before {
  content: "\f266";
}
.fa-safari:before {
  content: "\f267";
}
.fa-chrome:before {
  content: "\f268";
}
.fa-firefox:before {
  content: "\f269";
}
.fa-opera:before {
  content: "\f26a";
}
.fa-internet-explorer:before {
  content: "\f26b";
}
.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}
.fa-contao:before {
  content: "\f26d";
}
.fa-500px:before {
  content: "\f26e";
}
.fa-amazon:before {
  content: "\f270";
}
.fa-calendar-plus-o:before {
  content: "\f271";
}
.fa-calendar-minus-o:before {
  content: "\f272";
}
.fa-calendar-times-o:before {
  content: "\f273";
}
.fa-calendar-check-o:before {
  content: "\f274";
}
.fa-industry:before {
  content: "\f275";
}
.fa-map-pin:before {
  content: "\f276";
}
.fa-map-signs:before {
  content: "\f277";
}
.fa-map-o:before {
  content: "\f278";
}
.fa-map:before {
  content: "\f279";
}
.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-houzz:before {
  content: "\f27c";
}
.fa-vimeo:before {
  content: "\f27d";
}
.fa-black-tie:before {
  content: "\f27e";
}
.fa-fonticons:before {
  content: "\f280";
}
.fa-reddit-alien:before {
  content: "\f281";
}
.fa-edge:before {
  content: "\f282";
}
.fa-credit-card-alt:before {
  content: "\f283";
}
.fa-codiepie:before {
  content: "\f284";
}
.fa-modx:before {
  content: "\f285";
}
.fa-fort-awesome:before {
  content: "\f286";
}
.fa-usb:before {
  content: "\f287";
}
.fa-product-hunt:before {
  content: "\f288";
}
.fa-mixcloud:before {
  content: "\f289";
}
.fa-scribd:before {
  content: "\f28a";
}
.fa-pause-circle:before {
  content: "\f28b";
}
.fa-pause-circle-o:before {
  content: "\f28c";
}
.fa-stop-circle:before {
  content: "\f28d";
}
.fa-stop-circle-o:before {
  content: "\f28e";
}
.fa-shopping-bag:before {
  content: "\f290";
}
.fa-shopping-basket:before {
  content: "\f291";
}
.fa-hashtag:before {
  content: "\f292";
}
.fa-bluetooth:before {
  content: "\f293";
}
.fa-bluetooth-b:before {
  content: "\f294";
}
.fa-percent:before {
  content: "\f295";
}
.fa-gitlab:before {
  content: "\f296";
}
.fa-wpbeginner:before {
  content: "\f297";
}
.fa-wpforms:before {
  content: "\f298";
}
.fa-envira:before {
  content: "\f299";
}
.fa-universal-access:before {
  content: "\f29a";
}
.fa-wheelchair-alt:before {
  content: "\f29b";
}
.fa-question-circle-o:before {
  content: "\f29c";
}
.fa-blind:before {
  content: "\f29d";
}
.fa-audio-description:before {
  content: "\f29e";
}
.fa-volume-control-phone:before {
  content: "\f2a0";
}
.fa-braille:before {
  content: "\f2a1";
}
.fa-assistive-listening-systems:before {
  content: "\f2a2";
}
.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}
.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}
.fa-glide:before {
  content: "\f2a5";
}
.fa-glide-g:before {
  content: "\f2a6";
}
.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}
.fa-low-vision:before {
  content: "\f2a8";
}
.fa-viadeo:before {
  content: "\f2a9";
}
.fa-viadeo-square:before {
  content: "\f2aa";
}
.fa-snapchat:before {
  content: "\f2ab";
}
.fa-snapchat-ghost:before {
  content: "\f2ac";
}
.fa-snapchat-square:before {
  content: "\f2ad";
}
.fa-pied-piper:before {
  content: "\f2ae";
}
.fa-first-order:before {
  content: "\f2b0";
}
.fa-yoast:before {
  content: "\f2b1";
}
.fa-themeisle:before {
  content: "\f2b2";
}
.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}
.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}
.fa-handshake-o:before {
  content: "\f2b5";
}
.fa-envelope-open:before {
  content: "\f2b6";
}
.fa-envelope-open-o:before {
  content: "\f2b7";
}
.fa-linode:before {
  content: "\f2b8";
}
.fa-address-book:before {
  content: "\f2b9";
}
.fa-address-book-o:before {
  content: "\f2ba";
}
.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}
.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}
.fa-user-circle:before {
  content: "\f2bd";
}
.fa-user-circle-o:before {
  content: "\f2be";
}
.fa-user-o:before {
  content: "\f2c0";
}
.fa-id-badge:before {
  content: "\f2c1";
}
.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}
.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}
.fa-quora:before {
  content: "\f2c4";
}
.fa-free-code-camp:before {
  content: "\f2c5";
}
.fa-telegram:before {
  content: "\f2c6";
}
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}
.fa-shower:before {
  content: "\f2cc";
}
.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}
.fa-podcast:before {
  content: "\f2ce";
}
.fa-window-maximize:before {
  content: "\f2d0";
}
.fa-window-minimize:before {
  content: "\f2d1";
}
.fa-window-restore:before {
  content: "\f2d2";
}
.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}
.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}
.fa-bandcamp:before {
  content: "\f2d5";
}
.fa-grav:before {
  content: "\f2d6";
}
.fa-etsy:before {
  content: "\f2d7";
}
.fa-imdb:before {
  content: "\f2d8";
}
.fa-ravelry:before {
  content: "\f2d9";
}
.fa-eercast:before {
  content: "\f2da";
}
.fa-microchip:before {
  content: "\f2db";
}
.fa-snowflake-o:before {
  content: "\f2dc";
}
.fa-superpowers:before {
  content: "\f2dd";
}
.fa-wpexplorer:before {
  content: "\f2de";
}
.fa-meetup:before {
  content: "\f2e0";
}
.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;
}
/* New-app-only additions on top of the vendored legacy stylesheet.
   Keep minimal — everything visual should come from the legacy CSS. */

@keyframes fs-skeleton {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.fs-skeleton {
  animation: fs-skeleton 1.4s ease-in-out infinite;
  background-color: var(--color-surface-muted);
}

/* "N new transfers" pill (no legacy equivalent — new realtime UX) */
.transfers-new-pill-container {
  position: sticky;
  top: 8px;
  z-index: 10;
  display: flex;
  justify-content: center;
  height: 0;
}

.transfers-new-pill {
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: 0.75rem;
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.transfers-filter-container {
  position: relative;
}

/* Keep-alive shell: the header used to sit inside the scrolling .content and
   inherited `.content .container-fluid { padding: 0 2rem }` (styles.scss).
   It now lives beside the panes — keep its container padding identical. */

/* HARD 320px minimum (round 17): below a 320px viewport the page stops
   reflowing — the browser scrolls an intact 320 layout. Nothing ever
   renders narrower than 320. */
body {
  min-width: 320px;
}

/* Filter-bar controls: clean markup, PRODUCTION styling. Every value below
   is EXTRACTED from the live production DOM via getComputedStyle
   (parity/controls/prod-computed-styles.json + controls-reference.md) —
   do not restyle from memory. */
:is(.fs-filterbar, .fs-scope) .fs-control {
  display: inline-block;
  /* KIT variant: the production 34px bar line, restored (verdict);
     horizontal inset = THE token */
  height: var(--fs-bar-control-height);
  padding: var(--fs-bar-control-pad-top) var(--fs-control-inset) 0;
  /* bar controls keep PRODUCTION's 14 (extraction 2026-07-27) — own
     token so the 16px input bump can't drag the bar along */
  font-size: var(--fs-select-font-size);
  font-weight: var(--fs-control-font-weight);
  line-height: 17.5px;
  color: var(--color-text);
  background-color: var(--color-surface-muted);
  border: none;
  border-radius: 0;
  vertical-align: middle;
  outline: none;
}
:is(.fs-filterbar, .fs-scope) .fs-select {
  appearance: none;
  padding: var(--fs-bar-control-pad-top) var(--fs-bar-select-clearance) 0 var(--fs-control-inset);
  /* production chevron: bootstrap4 double-triangle SVG, 8x10px */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - var(--fs-bar-arrow-offset)) 50%;
  background-size: 8px 10px;
}
/* production widths (legacy Site.scss); inline bar from the master
   768 breakpoint up (round 18 re-homing: the stacked bar exists ONLY
   below 768, together with burger + mobile margin) */
@media (min-width: 927px) {
  .fs-filterbar-form .fs-combobox .fs-combobox-value {
    max-width: calc(100vw - 79px);
  }

  /* the Distributor pulldown is INTRINSIC by design (control-kit
     contract, reviewer verdict 2026-07-26) — the former 176px
     stability-doctrine width (D-009/round 3) is deleted. */
  .fs-filterbar .fs-select.transfers-filter-type,
  .fs-filterbar .fs-select.transfers-filter-date {
    width: 120px;
  }
  /* wide enough for the full "All Statuses" (120px truncated it) */
  .fs-filterbar .fs-select.transfers-filter-status {
    width: 128px;
  }
}
/* checkbox: 34px #F5F5F5 box + FontAwesome check — BLUE when checked,
   ghost var(--color-line-strong) when unchecked (production always renders the glyph) */
:is(.fs-filterbar, .fs-scope) .fs-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  user-select: none;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input {
  appearance: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0.4rem 0.7rem;
  background-color: var(--color-surface-soft);
  cursor: pointer;
  position: relative;
  display: inline-block;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input::after {
  /* the exact FA 4.7 fa-check outline (see faGlyphs.ts) — the old
     content:'\f00c' rendered tofu after the legacy font purge */
  content: '';
  position: absolute;
  inset: 0;
  background: center / 16px 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='%231183CF' d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E");
  opacity: 0;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input:checked::after {
  opacity: 1;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle span:not(.mk):not(.mk-paint) {
  /* on the uniform 34px line (round 4; production padded to 37.5px).
     MarkIcon rollout 1: the box now rides inside .mk/.mk-paint spans —
     this rule is the LABEL-text seat only, so those are excluded (the
     bare `span` also padded .mk-paint and shoved the input 16px right). */
  padding: 0 0 0 16px;
  line-height: 34px;
}
/* typeahead (production select2 impression) */
.fs-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* the growth cap lives HERE: 100% of the BAR (the value box's own
     max-width would be circular against this shrink-to-fit wrapper) */
  max-width: 100%;
}
/* Multi-select box: fixed 160px wide (the bar's one-line budget), grows
   in HEIGHT when chips wrap. Chips vertically centered with even gaps —
   Tom's spec; production select2 used margin-top 4 in a 34px box and
   grew horizontally (select2-ref.json). */
.fs-combobox .fs-control {
  /* DESIGN PASS (unsealed): width first, wrap only at full width —
     production select2 grows horizontally with its chips up to 100%
     of the bar (pushing neighbors per normal bar wrap); chips wrap to
     a second line INSIDE the field only once it spans the full row.
     The old 420px cap wrapped chips while the field was narrow. */
  width: auto;
  min-width: 160px;
  max-width: 100%;
  height: 34px;
}
/* Production growth (round 5, supersedes the fixed 34px): the box is as
   long as its content and wraps chips into further lines when needed.
   User-provoked growth — the stability doctrine targets unprovoked
   shifts. */
.fs-combobox .fs-combobox-value {
  display: flex;
  flex-wrap: wrap;
  /* explicit max-content: the field is exactly its one-line chip row,
     capped at the bar width — auto left the flex base under-resolved
     and chips wrapped while the field was still narrow. The cap must
     be VIEWPORT-derived (100vw - 64 margins - 15 scrollbar): every
     ancestor up to the bar is shrink-to-fit, so percentage max-widths
     are circular and drop to none. Stacked view forces width:100%
     and needs no cap. */
  width: max-content;
  align-items: center;
  gap: 4px 5px;
  height: auto;
  /* KIT variant: the 34px bar line restored (verdict); horizontal
     inset = THE token */
  min-height: var(--fs-bar-control-height);
  padding: var(--fs-chipbox-pad-y) var(--fs-control-inset);
  cursor: text;
}
.fs-combobox .fs-combobox-value.has-chips {
  padding-right: 24px;
}
.fs-combobox-input {
  flex: 1 1 24px;
  min-width: 24px;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text);
  padding: 0 0 0 8px;
}
.fs-combobox-value.has-chips .fs-combobox-input {
  padding-left: 0;
}
/* chip: production select2 choice (extracted) — grey box, white 14/300
   text, 4px radius, 3px self-colored border, bold ×. NEVER wraps
   (round 3): long titles ellipsize; the title attr shows the full name.
   Only the dropdown panel entries wrap. */
.fs-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* full-length like production (401px chips measured); only a chip
     longer than the box maximum ellipsizes */
  max-width: 100%;
  background-color: var(--color-text);
  border: 3px solid var(--color-text);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--color-surface);
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  white-space: nowrap;
}
.fs-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-chip-x {
  border: none;
  background: none;
  padding: 0;
  /* production select2: 2px between the x and the label */
  margin-right: 2px;
  color: var(--color-surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  cursor: pointer;
}
.fs-combobox-clear {
  /* production clear-all (extracted): FontAwesome fa-times, 16px/400,
     accent var(--color-accent), at the field's right edge — not a text glyph */
  position: absolute;
  top: 9px;
  right: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.fs-combobox-clear:hover {
  color: #0d65a0;
}
/* Panel: taller and wider than the trigger so long titles read — Tom's
   spec (production keeps the panel at trigger width and wraps,
   max-height 300px). Entries wrap like production. */
.fs-combobox-dropdown {
  z-index: 1100;
  width: max-content;
  min-width: 160px;
  max-width: 420px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-dropdown);
}
.fs-combobox-option {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 7px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
  cursor: pointer;
}
.fs-combobox-option.is-selected {
  background: var(--color-surface-soft);
  font-weight: 500;
}
.fs-combobox-option:hover,
.fs-combobox-option.is-active {
  color: var(--color-surface);
  background: var(--color-accent);
}
.fs-combobox-empty {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--color-text);
}
:is(.fs-filterbar, .fs-scope) .fs-group {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  vertical-align: middle;
}
/* Single line in its resting state; chip growth may wrap it —
   user-provoked, like production select2 (round 5). Controls stay
   top-aligned against a grown box. */
.fs-filterbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* wrapped bar lines breathe like production (extracted 17px between
     legacyref's wrapped rows) — no effect while single-line */
  row-gap: 17px;
}
/* films/screeners bars wrap with the same production row gap */
.fs-filterbar .fs-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 17px;
}
/* ONE gap token between every bar element (round 5) — matches the
   16px between groups, asserted by the sweep's equal-gap check */
:is(.fs-filterbar, .fs-scope) .fs-group > * + * {
  margin-left: 16px;
}
/* the trailing group margin would push the line 0.1px past the form edge */
.fs-filterbar-form .fs-group:last-child {
  margin-right: 0;
}
/* EVERY pane reserves its scrollbar gutter permanently (stability
   doctrine): a scrollbar (dis)appearing must never reflow content, and
   all panes must share the same content width so switching tabs moves
   nothing. */
.app-pane {
  scrollbar-gutter: stable;
}
/* Reset = production's OWN bar reset (round 23, D-028 — supersedes the
   nav-tab derivation): legacyref a.btn.btn-primary in the filter bar
   computes 11.5px/500 uppercase, line-height 14.375, WHITE text,
   0-width solid border tracking the background, hover #0d65a0
   (border #0c5f96), box 71x34.375. NOTE: production's standard
   .btn-primary elsewhere (login, profile save) stays 14px — the bar
   reset is production's one SMALL primary, so this rule is scoped,
   not global; .fs-btn--primary is untouched. The 34.375 height is
   production's own 0.375 offset above the bar's 34px control line. */
:is(.fs-filterbar, .fs-scope) .fs-reset {
  border: 0 solid var(--color-accent);
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 14.375px;
  height: 34.375px;
  padding: 10px 16px;
  cursor: pointer;
  text-transform: uppercase;
}
:is(.fs-filterbar, .fs-scope) .fs-reset:hover {
  background: #0d65a0;
  border-color: #0c5f96;
}

/* production custom-checkbox-compact/-light: 29px white box */
:is(.fs-filterbar, .fs-scope) .fs-toggle--compact input {
  width: 29px;
  height: 29px;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle--compact input::after {
  line-height: 29px;
  font-size: 15px;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle--light input {
  background-color: var(--color-surface);
}

/* Mobile burger dropdown (D-005: production's open menu overlays content
   SEMI-transparently — a glitch; ours is opaque). */

/* production gap between the Trailer/Features toggles is 16px
   (legacy .custom-control+.custom-control margin-left 1rem) */
:is(.fs-filterbar, .fs-scope) .fs-group--toggles > * + * {
  margin-left: 16px;
}
/* films Sort by: plain inline label, select flush after it (production:
   label [869..928], select at 928 — no padded chip, no extra gap) */
.films-sort-label {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 300;
  margin-right: 8px;
}
/* the Sort-by pair: the label's own 8px right margin governs inline —
   no group rhythm between label and select */
.fs-filterbar .fs-group--sort > * + * {
  margin-left: 0;
}
/* round 22 (D-027): in the INLINE bar the Sort-by pair rides the bar's
   RIGHT edge like production (legacyref 1600: select right = 1568 =
   viewport - 32 margin; label on the text baseline, 8px text->select
   gap — ours via the label's margin-right, production's via label
   padding; visually identical). Stacked view keeps label-above. */
@media (min-width: 927px) {
  .fs-filterbar-form .fs-group--sort {
    display: flex;
    align-items: baseline;
  }
}
/* Sort-by right-aligns ONLY while it shares the row (round-22 rule,
   scoped in D-032): the films bar fits one row from 1161 up —
   controls 220 (intrinsic Distributor, D-038) + 218 toggles + 176 +
   159 combobox + 245 sort = 1018, + 4x16 gaps + 64 margins + 15
   scrollbar = 1161 (derived per bar: only Films HAS a sort group;
   D-038 re-based the derivation from the old 176px distributor =
   1117). Below 1161 the group wraps and sits flush at the shared
   LEFT edge like a stacked control. */
@media (min-width: 1161px) {
  .fs-filterbar-form .fs-group--sort {
    margin-left: auto;
  }
}

/* production: EVERY profile-page panel is the muted var(--color-text) (film/user
   admin forms keep the darker --color-text-strong) — color audit R3-3g */
form.profile .fs-panel {
  color: var(--color-text);
}


/* Bar items never SHRINK — they WRAP (design pass 2): a growing chip
   field pushes Site/Reset to the next row via normal flex wrap; every
   item's base is capped at the row width, so nothing can overflow.
   Without this, flex-shrink crushed Site to a sliver beside a wide
   Film field instead of wrapping it. */
.fs-filterbar-form > * {
  flex-shrink: 0;
}

/* STACKED transfers bar below the master 768 breakpoint (round 18):
   every control shares ONE full width like production's mobile stack
   (extracted: all controls 350px at 380, incl. the select2s) with
   production's 18px control-to-control gap. Placed after the legacy
   543px mobile-bar media so its margins (16px) are neutralized for
   the transfers bar; the Trailer/Features pair keeps its line. */
@media (max-width: 926px) {
  .fs-filterbar-form {
    row-gap: 18px;
  }
  .fs-filterbar-form .fs-group {
    display: flex;
    flex-wrap: wrap;
    row-gap: 18px;
    width: 100%;
    margin: 0;
  }
  /* Trailer/Features SIDE BY SIDE in every view (round 18 reversal of
     the round-16 own-row rule — production's mobile behavior is now
     the spec; the pair fits the 320 floor) */
  .fs-filterbar-form .fs-group--toggles {
    width: auto;
  }
  .fs-filterbar-form select.fs-control,
  .fs-filterbar-form .fs-combobox,
  .fs-filterbar-form .fs-combobox .fs-control {
    width: 100%;
    max-width: none;
  }
  .fs-filterbar-form .fs-combobox {
    display: block;
    margin: 0;
  }
  /* Sort by: label on its own line above its select, 6px apart
     (extracted from production's stacked films bar) */
  .fs-filterbar-form .fs-group--sort {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .fs-filterbar-form .fs-group--sort .films-sort-label {
    width: 100%;
    margin-right: 0;
  }
}

/* legacy App.jsx floating scroll-to-top (all pages, all viewports):
   48px var(--color-surface-muted) square fixed bottom-right, shown by ScrollToTop.tsx once
   the active pane scrolls past 100px (reference computed 2026-07-16) */
.scrollToTop {
  display: none;
  position: fixed;
  z-index: 10;
  right: 16px;
  bottom: 13.44px;
  padding: 12.8px 16px;
  text-align: center;
  background: rgb(242, 242, 242);
  color: rgb(77, 77, 77);
  transition: 0.3s;
}
.scrollToTop:hover {
  background: rgb(217, 217, 217);
  color: rgb(77, 77, 77);
}

/* deliver CPL select: the reference's custom-select filterbar-select-light
   (the 34px filterbar select on a WHITE surface) */
:is(.fs-filterbar, .fs-scope) .fs-select.fs-select--white {
  background-color: var(--color-surface);
}

/* FORM (panel) chip fields (design pass): production's select2 renders
   the chips INSIDE a white input box spanning the field width, like
   every neighboring input. Bar fields are untouched — this is the
   block variant only (the bar's shrink-to-fit growth + viewport cap
   stay scoped to .fs-filterbar-form). */
.fs-combobox--block {
  display: block;
  width: 100%;
  max-width: none;
}
.fs-combobox--block .fs-combobox-value {
  width: 100%;
  max-width: none;
  background-color: var(--color-surface);
}
/* App-owned structural kit — the replacement for the vendored legacy CSS.
   Every value here was extracted from the deployed pre-migration build
   (parity/foundation-styles.json.txt) which is itself the extracted
   production impression (parity/design-tokens.md, controls-reference.md).
   Shared patterns live here; one-off styling belongs in components as
   Tailwind token utilities. */

/* --- brand font (files in public/static/fonts, weights 300/400/500/700) */
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* --- document base (ex bootstrap reboot subset we actually rely on) */
html,
body,
#app {
  height: 100%;
}
#app {
  /* the app covers the full document: min-width matches the hard 320
     floor; 100vh includes the strip a horizontal scrollbar occupies —
     without it the dark body canvas showed as a band below the page
     (round 18) */
  min-width: 320px;
  min-height: 100vh;
}
body {
  margin: 0;
  background-color: var(--color-ink);
  /* the exact production stack (per-element audit compares the string) */
  font-family: Gotham, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}
/* form controls inherit the document font like the legacy reboot did —
   without this they fall back to Arial/monospace (audit finding 2026-07-13) */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
b,
strong {
  /* production computes 500, not the browser's bolder→700 */
  font-weight: 500;
}
small {
  font-size: 80%;
  font-weight: 400;
}
* ,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: var(--color-accent);
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
h1, h2, h3, h4, h5, p, ul, figure {
  margin: 0 0 8px;
}
/* weight only on headings — on ul it broke the inherited 500 of the
   mobile value-box cells (reference bolds those values). line-height 1.1
   is the bootstrap-reboot heading value the reference computes. */
h1, h2, h3, h4, h5 {
  font-weight: 300;
  line-height: 1.1;
}
h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
button {
  font-family: inherit;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
table {
  border-collapse: collapse;
}
label {
  margin-bottom: 8px;
  display: inline-block;
}

/* --- centered container (production bootstrap-alpha ladder) */
.fs-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--fs-page-inset-mobile);
  padding-left: var(--fs-page-inset-mobile);
}
/* round 20: the ladder rides the unified breakpoint — mobile keeps
   production's 576 cap, the desktop tiers (940/1140) start at X1;
   the old 720 tier sat between the retired 768 and 992 steps and is
   unreachable under the unified model */
@media (min-width: 544px) { .fs-container { max-width: 576px; } }
@media (min-width: 927px) { .fs-container { max-width: 940px; } }
@media (min-width: 1200px) { .fs-container { max-width: 1140px; } }
/* full-width variant with the page gutter (ex container-fluid).
   ROUND 16 (supersedes round 15's single edge), re-homed to the
   unified X1 in rounds 19/20: above it the desktop 32px edge, below
   it the legacyref-extracted 15px mobile edge; no further margin
   steps at any width on either side. */
.fs-container-fluid {
  width: 100%;
  padding-right: 32px;
  padding-left: 32px;
}
@media (max-width: 926px) {
  .fs-container-fluid {
    padding-right: var(--fs-page-inset-mobile);
    padding-left: var(--fs-page-inset-mobile);
  }
}

/* --- the scrolling pane (ex .content): keep-alive scroller under the
       fixed header; the transparent variant lets the dark body back the
       film-detail hero AND macOS elastic overscroll */
.app-pane {
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 136px 0 0;
  margin-bottom: -24px;
  background-color: var(--color-surface);
}
.app-pane--transparent {
  background: none;
}

/* --- buttons (production .btn: 10px 16px, uppercase, w500, radius 0) */
.fs-btn {
  display: inline-block;
  padding: 10px 16px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  /* legacy .btn carried an 8px bottom margin everywhere */
  margin-bottom: 8px;
}
.fs-btn--primary {
  background-color: var(--color-accent);
  color: var(--color-surface);
}
.fs-btn--primary:hover {
  background-color: #0e6cab;
  color: var(--color-surface);
}
.fs-btn--success {
  background-color: var(--color-action-success);
  color: var(--color-surface);
}
.fs-btn--success:hover {
  background-color: #4cae4c;
  color: var(--color-surface);
}
.fs-btn--danger {
  background-color: var(--color-danger);
  color: var(--color-surface);
}
.fs-btn--danger:hover {
  background-color: #b00217;
  color: var(--color-surface);
}
.fs-btn--sm {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 15px;
}
.fs-btn--link {
  /* legacy .btn-link keeps the .btn 14/500/uppercase; only surface and
     paddings reset (reference: deliver BACK / SHOW ITEMS, 17.5px tall) */
  background: transparent;
  color: var(--color-accent);
  padding: 0;
  margin-bottom: 0;
}
.fs-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --- data table (production .table impression: uppercase bold headers,
       14px/300 cells, hairline row separators drawn by row borders) */
.fs-table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  /* production: the table inherits the 16px document font; only th/td set
     14px — content outside cells (group headings) renders at 16px */
  font-size: 16px;
  line-height: 24px;
}
.fs-table th {
  padding: 12px 8px;
  /* font-size lives once in kit-tables.css (.fs-table th = 0.875rem =
     14px); the redundant 14px copy here was deleted 2026-07-27 (D-041). */
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--color-text);
}
.fs-table td {
  /* bootstrap base 0.75rem narrowed by the stack rule; the transfers
     table overrides to 0.35rem 0.5rem in kit-tables */
  padding: 12px 8px;
  vertical-align: top;
  /* font-size: single source in kit-tables.css (.fs-table td = 0.875rem
     = 14px); redundant 14px copy deleted 2026-07-27 (D-041). */
  line-height: 21px;
  font-weight: 300;
}

/* --- panel: ONE definition lives in kit-forms.css (the form/system
   surface — forms own it). This kit.css copy was deleted 2026-07-27
   (D-041): it duplicated .fs-panel background-color across files, the
   silent cross-file override pattern. */

/* --- text input (production .form-control impression on white) */
.fs-input {
  display: block;
  width: 100%;
  /* KIT variant: pre-consolidation geometry restored (verdict);
     horizontal inset = THE token */
  padding: var(--fs-input-pad-y) var(--fs-control-inset);
  font-size: var(--fs-input-font-size);
  font-weight: var(--fs-control-font-weight);
  line-height: 20px;
  color: var(--color-text-strong);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0;
  outline: none;
}
/* dark variant (header search: gray field, light text) */
/* KIT variant: production nav geometry restored (verdict). */
.fs-input--dark {
  min-height: var(--fs-search-height);
  padding: var(--fs-search-pad-y) var(--fs-control-inset);
  border: none;
  background-color: var(--color-text);
  color: var(--color-surface-muted);
  font-weight: 400;
  line-height: 16px;
}
/* bootstrap-alpha's .form-control::placeholder — the reference computes
   the input's own color at 0.54 (modern Chrome's UA default is opaque
   #757575, so this must be explicit) */
.fs-input--dark::placeholder {
  color: inherit;
  opacity: 0.54;
}

/* --- icon metrics: all icons are exact FA 4.7 outlines (faGlyphs.ts);
   fs-icon--fa is the operative sizing (height-true 1em like the font
   glyph, baseline at -0.143em = the font's 256/1792 descent) --- */
.fs-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.245em;
  flex-shrink: 0;
}
/* exact-FA-outline icons (faGlyphs.ts): height-true to 1em like the font
   glyph they replicate; the font's descent puts the baseline at -0.143em */
.fs-icon--fa {
  width: 1em;
  height: 1em;
  vertical-align: -0.143em;
}
.fs-icon--fw {
  width: 1.28em;
}
.fs-icon--lg {
  /* legacy body .icon-lg: font-size 20px in a 25px line (rows sized to
     36.19px in the admin tables) */
  width: 20px;
  height: 20px;
  vertical-align: -0.25em;
  margin-top: -2px;
  margin-bottom: -2px;
}

/* --- app header (extracted: two dark bars, fixed, z 20) --- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* fixed positioning tracks the VIEWPORT, so body's min-width cannot
     hold it — the round-17 gap (round 18): clamp the header itself */
  min-width: 320px;
}
/* ROUND 14 (Tom's spec, replaces production-matching for the header):
   ONE header styling at every width — same type, same icons, same
   paddings, one meta height and one nav height, no breakpoint jumps.
   The only responsive rule the header owns is the email cutoff. */
.app-navbar-meta {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 57.5px;
  padding: 0 32px;
  background-color: var(--color-ink);
}
.app-navbar-main {
  /* no right padding: the search field runs flush to the window edge */
  padding-left: 32px;
  padding-right: 0;
}

.app-navbar-main {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 48px;
  background-color: rgba(77, 77, 77, 0.9);
}
.app-customer {
  display: inline-block;
  flex-shrink: 0;
  padding: 20px 16px 20px 0;
  color: var(--color-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 17.5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* the divider next to the customer name: production puts a subtle
     1px #4d4d4d border-right here (audit 2026-07-13), not a var(--color-text)
     border-left on the brand */
  border-right: 1px solid rgb(77, 77, 77);
}
.app-brand {
  display: inline-block;
  /* round 16: renders whole or not at all (the runtime collapse hides
     it) — round 12's ellipsizing removed */
  white-space: nowrap;
  flex-shrink: 0;
  padding: 20px 16px;
  color: var(--color-surface-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  text-transform: uppercase;
}
.app-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 16px;
  color: var(--color-surface-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}
.app-nav-link:hover {
  /* production: the blue lands already on hover (extracted: bg
     rgb(17,131,207), text stays var(--color-surface-muted), no transition) — round 11 */
  background-color: var(--color-accent);
  color: var(--color-surface-muted);
}
.app-nav-link--active {
  background-color: var(--color-accent);
  color: var(--color-surface-muted);
}
.app-toggler {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* flush at the shared 32px edge (round 15) — the nav bar's own
     padding provides the offset; the box is 52.6px wide */
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-surface);
  cursor: pointer;
}
.app-toggler-box {
  display: inline-flex;
  align-items: center;
  padding: 16px;
}
.app-toggler--open .app-toggler-box {
  background-color: var(--color-accent);
}
/* mobile burger dropdown (opaque per D-005) */
.app-nav {
  display: flex;
  flex: 1;
  align-items: stretch;
}
/* Mobile burger STRUCTURE only (justified survivor: which nav variant
   renders — tabs vs burger — is structure, not styling; closed heights
   are identical). Open-menu structure extracted from production at a
   burger width: solid opaque OVERLAY (content does not move), items
   48px tall with ZERO gaps and equal widths (the active highlight
   spans exactly the item width), first item 16px below the bar. The
   burger-view search constant lives here too (round 15: the search
   width may change only at this breakpoint). */
@media (max-width: 926px) {
  /* the master breakpoint switches margins with the layout (round 16) */
  .app-navbar-meta {
    padding: 0 var(--fs-page-inset-mobile);
  }
  .app-navbar-main {
    position: relative;
    height: 48px;
    padding-left: var(--fs-page-inset-mobile);
  }
  .app-toggler { order: 1; }
  .app-navbar-main .app-search { order: 2; flex: 0 0 252px; }
  .app-nav { display: none; }
  .app-nav--open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: rgb(77, 77, 77);
    padding: 16px var(--fs-page-inset-mobile);
  }
  .app-nav--open .app-nav-link {
    width: 100%;
    height: 48px;
    padding: 16px;
  }
}

/* --- header dropdown menus (extracted .dropdown-menu impression) --- */
.app-menu-toggle {
  display: inline-flex;
  align-items: center;
  /* height comes from padding + line-height like production (57.5px
     desktop, 55px mobile via the smaller type) — a fixed 57.5px here
     was the round-13 overflow cause at the mobile bar */
  padding: 20px 16px;
  border: none;
  background-color: transparent;
  color: rgb(245, 245, 245);
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  cursor: pointer;
}
/* :last-of-type doubles beat the ported global
   `.fs-icon:last-of-type { margin-right: 0 }` (kit-film.css). Production's
   fa-fw box (18px incl. its 8px padding) already contains the gap — no
   extra margin, or the toggles run 8px wider than production. */
.app-menu-toggle .fs-icon,
.app-menu-toggle .fs-icon:last-of-type {
  margin-right: 0;
}
/* bootstrap-style solid dropdown caret (production: ~4.2px triangle, not a
   14px chevron glyph) */
.app-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.3em;
  vertical-align: middle;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}
.app-menu-toggle[aria-expanded='true'] {
  background-color: rgb(77, 77, 77);
}
/* Dropdown anchor (round 19, seam fix): the wrapper stretches to the
   FULL meta-bar height (the toggle stays centered inside), so the
   panel's top: 100% is exactly the bar's bottom edge. Anchoring the
   panel to the toggle's own box let the nav bar bleed through in a
   1.8px strip whenever the collapsed (icon-only) toggle was shorter
   than the bar and got flex-centered. */
.app-menu-wrap {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.app-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 2000;
  min-width: 160px;
  padding: 5px 0;
  background-color: rgb(77, 77, 77);
  text-align: left;
}
.app-menu-item {
  display: block;
  width: 100%;
  padding: 8px 32px 8px 16px;
  color: var(--color-surface-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}
.app-menu-item:hover {
  color: var(--color-surface);
  background-color: var(--color-ink);
}
/* Stacked icon-column label lead (SHARED — user menu, /contact card):
   every label starts at ONE x = the column edge (MarkIcon axis) +
   GAP_ICON. GAP_ICON arrives as --mk-gap (fed from the registry on the
   column container) — the SAME "following element carries the gap" token
   the deliver-tree name cell and the film-detail column use; no
   page-local value, no per-item gap. */
.mk-col-label {
  padding-left: var(--mk-gap);
}
.app-menu-divider {
  height: 1px;
  margin: 8px 0;
  background-color: rgb(229, 229, 229);
  opacity: 0.25;
}

/* --- header search (dark field + magnifier addon + results) --- */
.app-search {
  position: relative;
  display: flex;
  /* TWO constants, never fluid (rounds 15/16): 479px in the desktop
     layout; 252px in the mobile layout (fits the 320px floor:
     320 - 15 mobile edge - 52.6 toggler — see D-020). The width
     changes ONLY at the master breakpoint. */
  flex: 0 0 479px;
  margin-left: auto;
}
.app-search-addon {
  display: flex;
  align-items: center;
  /* production input-group-addon: 16px left, 8px right (42px with the
     18px fa-fw glyph box); z-index lifts it above the results backdrop —
     without it the dim overlay darkened just the addon cell */
  padding: 0 8px 0 16px;
  position: relative;
  z-index: 10;
  background-color: var(--color-text);
  color: var(--color-surface-muted);
  font-size: 14px;
}
.app-search-addon .fs-icon,
.app-search-addon .fs-icon:last-of-type {
  margin-right: 0;
}
/* production ul.typeahead__list: var(--color-surface-muted), 1px #ccc border, 5px vertical
   padding, 2px below the bar, NO shadow; rows 16px on a normal line
   (31px rows), hover var(--color-line-strong) */
.app-search-results {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 5px 0;
  background: rgb(242, 242, 242);
  border: 1px solid rgb(204, 204, 204);
}
.app-search-result {
  display: block;
  padding: 6px 12px;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}
.app-search-result:hover,
.app-search-result--active {
  background-color: rgb(217, 217, 217);
  color: rgb(60, 60, 60);
}
.app-search-result-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgb(128, 128, 128);
}

/* --- film grid (ex .movielist-*, ported from _movielist.scss) --- */
.film-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px;
  margin: 0 -15px;
  /* content-visibility on tiles + containment: memory/resize (PART C) */
  contain: layout style;
}
/* round 22 (D-027): the films content sits the SAME extracted 51.5px
   off the bar as the transfers table. The full 51.5 is set here: it
   COLLAPSES with the grid's own 18px internal margin (max wins). */
#content-films .fs-filterbar-section + .fs-container-fluid {
  margin-top: 51.5px;
}
.film-grid-title {
  flex: 0 0 100%;
  margin: 24px 0 16px;
}
.film-grid-title-heading {
  font-size: 20px;
  padding: 16px 0 8px;
  border-top: 2px solid var(--color-line-strong);
  margin: 0;
}
.film-tile {
  width: 50%;
  padding: 0 8px;
  content-visibility: auto;
  contain-intrinsic-height: auto 420px;
}
@media (min-width: 600px) { .film-tile { width: 33.3333%; } }
@media (min-width: 800px) { .film-tile { width: 25%; } }
@media (min-width: 960px) { .film-tile { width: 20%; } }
@media (min-width: 1200px) { .film-tile { width: 16.6667%; } }
@media (min-width: 1500px) { .film-tile { width: 14.2857%; } }
@media (min-width: 1900px) { .film-tile { width: 12.5%; } }
@media (min-width: 2200px) { .film-tile { width: 11.1111%; } }
@media (min-width: 2500px) { .film-tile { width: 10%; } }
@media (min-width: 2800px) { .film-tile { width: 9.0909%; } }
@media (min-width: 3100px) { .film-tile { width: 8.3333%; } }
.film-card {
  position: relative;
  display: block;
  margin-bottom: 16px;
}
.film-card-poster {
  position: relative;
  background-color: var(--color-text);
  border: 2px solid var(--color-surface);
}
.film-card-poster img {
  width: 100%;
  border: 2px solid var(--color-line-strong);
}
.film-card:hover .film-card-poster,
.film-card:hover .film-card-poster img {
  border-color: var(--color-accent);
}
.film-card-poster .film-card-image {
  position: absolute;
  top: 0;
  left: 0;
}
.film-card-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}
.film-card-overlay-title {
  position: absolute;
  width: 100%;
  padding: 32px 8px;
  color: var(--color-surface);
}
.film-card-overlay-logo {
  position: absolute;
  left: 20%;
  bottom: 32px;
  width: 60%;
  max-height: 64px;
  margin: 0 auto;
  opacity: 0.8;
}
.film-card-overlay-logo img {
  max-height: 64px;
  border: none;
  width: auto;
  max-width: 100%;
}
/* two-column text row under the poster (title left, count right) */
.film-card-text {
  float: left;
  margin-top: 8px;
  width: calc(100% - 30px);
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.film-card-text--wide-count {
  width: calc(100% - 60px);
}
.film-card-count {
  float: left;
  width: 30px;
  margin-top: 8px;
  text-align: right;
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
}
.film-card-count--wide {
  width: 60px;
}
.film-card-updated {
  float: left;
  width: 100%;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

/* bootstrap-style row/column shims for the ported page grids */
.fs-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.fs-col {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.fs-btn--light {
  background-color: var(--color-surface-muted);
  color: var(--color-text-heading);
}
.fs-btn--light:hover {
  background-color: #e5e5e5;
}
/* bare button (legacy <a class="btn btn-light"> resolved to the base .btn:
   transparent, link-blue text — the film-row PLAY/SCREENER look) */
.fs-btn--bare {
  background-color: transparent;
  color: var(--color-accent);
}
.fs-btn--bare:hover {
  color: #0e6cab;
}

/* type helpers used on dark surfaces (ex display-5 / lead) */
.fs-display {
  font-size: 40px;
  font-weight: 300;
  line-height: 44px;
}
.fs-lead {
  font-size: 20px;
  font-weight: 300;
}
.fs-table thead {
  border-bottom: 4px solid var(--color-surface-muted);
}
.fs-table th {
  font-size: 0.875rem;
  text-transform: uppercase;
}
.fs-table td {
  font-size: 0.875rem;
}
.fs-table td .fs-icon {
  margin-right: 0.5rem;
}
.fs-table td .fs-icon:last-child {
  margin-right: 0;
}

.fs-table .fs-table {
  margin-bottom: 0;
}
.fs-table .ft-cell--collapse {
  width: 2.5rem;
  min-width: 2.5rem;
  /* production computes 0 0 1.4px 12px on this cell */
  padding-left: 0.75rem;
  padding-bottom: 1.4px;
}
.fs-table .ft-cell--icon {
  /* reference: 40px icon column, glyph flush left (computed text-align
     left, zero padding — the legacy text-align:right loses in the
     reference cascade) */
  width: 2.5rem;
  min-width: 2.5rem;
  padding-left: 0;
  padding-right: 0;
}
.fs-table .ft-cell--icon-column {
  padding-left: 0;
}
/* beats `.fs-table td .fs-icon`'s margin-right by specificity —
   no !important needed (hygiene cleanup 2026-07-26) */
.fs-table td.ft-cell--icon-column .fs-icon {
  margin: 0;
}
.fs-table .ft-cell--actions {
  text-align: right;
  padding-top: 0.3rem;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--collapse {
    width: 2rem;
    min-width: 2rem;
  }
}

.ft-stack {
  width: 100%;
}
/* over-p95 CPLs (round 24, D-029): when the CPL column pushes the
   table past the container, the STACK scrolls horizontally — shared
   columns keep their positions, CPL renders in full. Desktop only:
   below X1 the cells are blocks. */
@media (min-width: 927px) {
  #content-transfers .ft-stack {
    overflow-x: auto;
  }
}
/* set-off between the filter bar and the content (round 22, D-027):
   ONE extracted constant on Films AND Transfers — legacyref shows
   51.5 on films (bar bottom -> first cover) and 42.4 on transfers
   (their export row -> table); per Tom the LARGER value applies to
   both. The margins differ per view because the internal lead-ins
   differ (inline 8px, stacked 16px) — the 51.5 VISUAL gap is what the
   sweep asserts. Supersedes round 5's 41px transfers extraction. */
#content-transfers .ft-stack {
  margin-top: 43.5px;
}
@media (max-width: 926px) {
  #content-transfers .ft-stack {
    margin-top: 35.5px;
  }
}
.fs-table .ft-body--asset-details td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* recipient rows: icon + date + name in one cell (see RecipientsTbody).
   The cell starts at the icon gutter (205, padding 0); the date sits a
   fixed 12px off the icon ink — D-007's approved tighter run. */
.fs-table .ft-body--asset-details .ft-cell--asset-detail {
  padding-left: 0;
}
.ft-detail-icon {
  /* the delivery DATE stays flush with the flags line above: this box
     mirrors the icon COLUMN below (horizontal-unification round
     2026-07-26, supersedes the D-034 24px/8px pair): width = the
     column's widest mark, then THE tree icon->text token. Vars come
     from the registry via the fd-assets section. */
  display: inline-block;
  width: var(--mk-colw);
  margin-right: var(--mk-gap);
}
/* the version block's icon column = the tree's column arithmetic:
   cell width = widest mark (marks center on the axis, so the widest
   mark's edges ARE the column edges), and the FOLLOWING cell carries
   GAP_ICON as its padding — one gap definition, shared with the
   deliver tree (horizontal-unification round; supersedes D-034's
   24px column + 8px lead). Scoped by the film page's .fd-assets
   wrapper: the column contains icon cells WITHOUT the transfer-icon
   class too, and any of them at 2.5rem would pin the auto-layout
   column back at 40. */
.fd-assets .fs-table .ft-cell--icon {
  width: var(--mk-colw);
  min-width: var(--mk-colw);
}
.fd-assets .fs-table td.ft-cell--icon + td {
  padding-left: var(--mk-gap);
}
/* group headings: the heading ink starts flush with the icon column's
   mark-left edge (= the heading cell's own left edge — both sit at
   the collapse column's right edge). Layout-level flush, no indent. */
.fd-assets .ft-body--asset-heading td[colspan] {
  padding-left: 0;
}
.fd-assets .ft-heading {
  padding-left: 0;
}
.fs-table .ft-row--asset-title td {
  word-break: break-all;
}
/* production row rhythm on the film-detail asset table (per-element audit
   2026-07-14): version rows close with 1.4px; the filename row hugs the
   version row (1.6px top) and carries the 8px gap to the next entry */
.fs-table .ft-row--asset td {
  padding-bottom: 1.4px;
}
.fs-table .ft-row--asset-title td {
  padding-top: 1.6px;
  padding-bottom: 8px;
}
@media (max-width: 991px) {
  .fs-table .ft-row--asset-title td {
    font-size: 0.8rem;
  }
}
.fs-table .ft-cell--asset-info {
  padding-bottom: 0;
  padding-right: 0;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--asset-info {
    display: none;
  }
}
.fs-table .ft-cell--asset-info--xs {
  display: none;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--asset-info--xs {
    display: table-cell;
    font-weight: 500;
    padding-bottom: 0;
  }
}
.fs-table .ft-body--asset-details {
  display: table-row-group !important;
}
.fs-table .ft-body--asset-details .ft-row--asset-detail:last-child td {
  padding-bottom: 0.75rem;
}
.fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
  display: inline-block;
  width: 8rem;
  border-right: 1px solid var(--color-line-strong);
  padding-right: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
    border-right: 0;
  }
}
.fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
  display: inline;
  width: auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media (max-width: 991px) {
  .fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
  }
}

td.ft-cell--actions {
  padding-bottom: 0;
}
td.ft-cell--actions .fs-btn {
  margin-bottom: 0;
}
td.ft-cell--actions .fs-btn:last-child {
  margin-bottom: 0;
}
@media (max-width: 543px) {
  td.ft-cell--actions .fs-icon {
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 543px) {
  td.ft-cell--actions span {
    display: none;
  }
}

/* chevron rotation lives in the ONE .mk-chevron definition
   (kit-forms.css) — the local .ft-cell--collapse rules this replaced
   were the extraction source (all 0.5s). */

.ft-body--assetgroup {
  background-color: var(--color-surface-muted);
}
.ft-body--assetgroup .ft-row--asset-title:not(:last-child) td {
  padding-bottom: 0;
}
.ft-body--assetgroup + .ft-body--asset.ft-body--assetgroup {
  border-top: 4px solid var(--color-surface);
}

.ft-body--asset-heading td {
  border-bottom: 4px solid var(--color-surface-muted);
  /* 1.4px bottom = production's asset-row rhythm on the heading row
     too (collapsed group pitch 64, extracted film 2660) */
  padding: 2rem 0 1.4px 0;
}
.ft-body--asset-heading td:last-child {
  padding-right: 0.5rem;
}
.ft-body--asset-heading:first-child td {
  padding-top: 0;
}

.fs-table--transfer td {
  /* round 6: PRODUCTION GENEROSITY — the reference's extracted 5.6px on
     all sides (round 5's 2px bottom is rolled back; cramped reads
     petty, production reads calm) */
  padding: 0.35rem 0.5rem;
  /* reference: all cells top-aligned */
  vertical-align: top;
  /* HARD RULE (round 9): no cell ever wraps — a second text line inside
     any cell is impossible by construction, in every layout. Overlong
     content ellipsizes (per-cell overflow rules). */
  white-space: nowrap;
}
/* reference rows are 36.2px tall (extracted; 5.6 + 25px icon line box
   + 5.6). Our icon line collapsed shorter, so the status cell pins the
   row's minimum height directly (round 6, production generosity). */
.ft-cell--transfer-status {
  height: 36.2px;
}
/* Layout stabilization: fixed table layout with explicit column widths on
   the header cells, so no data change (progress ticking, live prepends,
   cursor pages) can move a column edge. Desktop only — below 768px the
   cells switch to display:block (see kit-port.css) and fixed layout would
   fight that. Content-measured widths (parity/elements/transfers-*.json):
   Round 2 (Tom): Progress reserves exactly "100% 226 Mbit/s" = 118px,
   dates exactly "23.12.2026 14:34" = 119px, User/Site their real data
   maxima (widest email 270px, widest site 244px over the full clone
   dataset), all + 16px cell padding; a live value beyond the reserve
   ellipsizes rather than moving the column. */
@media (min-width: 927px) {
  .fs-table--transfer {
    /* round 25 FLUID model (D-030, REVERSES D-029's no-spread — that
       spec originated in review, not from the user): the table ALWAYS
       spans 100% of the content width, columns compressed to their
       content minima under pressure, surplus distributed natively by
       the fixed-layout algorithm (proportional to the specified
       minima — production's auto-layout character, kept on FIXED
       layout so virtualized rows can't move edges and the User/Site
       ellipsis reservations hold). Shared minima sum = 874. */
    table-layout: fixed;
    width: 100%;
  }
  /* DESIGN PASS 2 (unsealed): FIXED experience-based minima from the
     user — 58/120/4x80/200/150 (+CPL 620), sum 848; switches static:
     table->stacked 927 (848+79), CPL column 1547 (848+620+79).
     Surplus becomes an EQUAL EXTRA GAP between all columns: each
     column except the last carries + (100vw - switch)/gaps on its
     trailing edge (contents stay at minima, left-aligned), so the
     page relaxes uniformly; the sum stays exactly 100%. */
  /* DESIGN PASS 3 (unsealed): WEIGHTED surplus — status 0 (never
     grows, nor its trailing gap), progress/dates 1 each ("nur ein
     bisschen luftiger"), user/site 5 each, cpl 6. Tail total /15,
     CPL layout /21. Exact fractions inside calc keep the sum at
     100%. */
  .ft-heading--transfer-status {
    width: 58px;
  }
  .ft-heading--transfer-progress {
    /* round 19: 4px lead-in + the widest possible "NNN% NNN Mbit/s"
       shape ("100% 800 Mbit/s" = 117px, brute-forced over all 3-digit
       speeds at the cell font) + 2px right (round 25 near-zero gap);
       rare wider mid-tick values ellipsize (stability rule intact). */
    width: calc(120px + (100vw - 927px) * 1 / 15);
  }
  .ft-heading--transfer-progress--compact {
    width: 6rem;
  }
  .ft-heading--transfer-date {
    /* round 18 squeeze: the requested "12.12. 12:23" measures 69px,
       but real same-shaped values reach 84px ("20.10. 20:00", on
       screen in the December fixtures — zeros render wide); shipping
       81px would wrap/clip them, so the honest minimum is 84 + 2x6px
       gaps = 96; round 25 shrinks the sides to 2px ("NULL Abstand"
       target; 4px keeps adjacent dates legible): 88. */
    width: calc(80px + (100vw - 927px) * 1 / 15);
  }
  .ft-heading--transfer-user {
    width: calc(200px + (100vw - 927px) * 5 / 15);
  }
  /* round 24 (D-029): Site is FIXED like every other column — the
     table hugs its content (width = column sum, NOT 100%), so free
     space stays on the right and nothing spreads at any width. */
  .ft-heading--transfer-site {
    width: calc(150px + (100vw - 927px) * 5 / 15);
  }
}
/* CPL column <-> tail row is RUNTIME-MEASURED (round 25, D-030 —
   supersedes the static 1646 constant): TransfersPage compares the
   available content width against 874 + widest LOADED CPL + 4 (D-020
   header-collapse pattern) and sets .ft-stack--cpl-column. The CPL
   minimum is the widest actually-loaded CPL (NOT p95); --cpl-col
   carries it as the column's specified width, so the fluid table
   compresses to it and distributes any surplus natively. CPL never
   truncates: below the fit the tail row takes over. */
@media (min-width: 927px) and (max-width: 1546px) {
  .ft-heading--transfer-cpl--lg,
  .ft-cell--transfer-cpl--lg {
    display: none;
  }
  /* .fs-table--transfer prefix: must beat the LATER base
     .ft-row--transfer--sm { display: none } at any rule order */
  .fs-table--transfer .ft-row--transfer--sm {
    display: table-row;
  }
  .ft-cell--transfer-cpl--sm {
    display: table-cell !important;
    padding-top: 0 !important;
  }
}
@media (min-width: 1547px) {
  /* weighted /21 once CPL is a column (0,1,1,1,1,1,5,5,6) */
  .ft-heading--transfer-status { width: 58px; }
  .ft-heading--transfer-progress { width: calc(120px + (100vw - 1547px) * 1 / 21); }
  .ft-heading--transfer-date { width: calc(80px + (100vw - 1547px) * 1 / 21); }
  .ft-heading--transfer-user { width: calc(200px + (100vw - 1547px) * 5 / 21); }
  .ft-heading--transfer-site { width: calc(150px + (100vw - 1547px) * 5 / 21); }
  .ft-heading--transfer-cpl--lg { width: calc(620px + (100vw - 1547px) * 6 / 21); }
  .fs-table--transfer .ft-row--transfer--sm { display: none; }
}

/* round 25 (D-030): NEAR-ZERO separation — 2px sides = 4px between
   adjacent contents at full compression ("NULL Abstand"; literal 0
   merges adjacent dates, 4px ~ one space glyph keeps them distinct).
   Surplus width flows back into the columns via the fluid table. */
.fs-table--transfer td.ft-cell--transfer-ordered,
.fs-table--transfer td.ft-cell--transfer-started,
.fs-table--transfer td.ft-cell--transfer-completion,
.fs-table--transfer td.ft-cell--transfer-duedate,
.fs-table--transfer th.ft-heading--transfer-date {
  padding-left: 2px;
  padding-right: 2px;
}
/* the new 6px sides are TABLE-layout only — the stacked view keeps its
   flush left edge (round 12) */
@media (min-width: 927px) {
  .fs-table--transfer td.ft-cell--transfer-user,
  .fs-table--transfer td.ft-cell--transfer-user-info,
  .fs-table--transfer td.ft-cell--transfer-cpl,
  .fs-table--transfer th {
    padding-left: 2px;
    padding-right: 2px;
  }
}
/* in the column layout the CPL never wraps mid-column */
.ft-cell--transfer-cpl--lg {
  /* DESIGN PASS 2: CPLs wider than the current column keep the
     horizontal-scroll escape — the text overflows the last column and
     the stack scrolls; no truncation. */
  white-space: nowrap;
  overflow: visible;
}
.ft-cell--transfer-cpl--lg a {
  white-space: nowrap;
}
/* Reference status-cell anatomy: both icon anchors are fa-fw slots
   (1.28571em at 20px = 25.71px), glyphs centered — that spacing is the
   visual gap between the status and type icons. */
.ft-cell--transfer-status .transfer-icon,
.ft-cell--transfer-status .transfer-type-icon {
  display: inline-block;
  width: 25.71px;
  text-align: center;
}
.ft-cell--transfer-status .transfer-icon .fs-icon,
.ft-cell--transfer-status .transfer-type-icon .fs-icon {
  margin-right: 0;
}
.ft-row--transfer {
  border-top: 2px solid var(--color-surface-muted);
}
.ft-row--transfer:first-child {
  border-top: none;
}
.ft-row--transfer--sm {
  border-top: none;
  /* hidden as a ROW by default: its empty first td used to render a
     phantom ~8px strip between the data row and the divider whenever
     the stacked layout was off — the actual source of the too-large
     CPL bottom gap (round 5). The stacked-layout media queries below
     and in kit-port.css re-enable it. */
  display: none;
}
.ft-row--transfer + .ft-row--transfer-group {
  border-top: none;
}
.ft-row--transfer-group + .ft-row--transfer-group {
  border-top: 4px solid var(--color-surface) !important;
}
.ft-row--transfer-group + .ft-row--transfer-group.ft-row--transfer--sm {
  border-top: none !important;
}
.ft-row--transfer-group td {
  background-color: var(--color-surface-muted);
}
.ft-cell--transfer-status {
  /* round 15: the column gives back the old 8px left pad (68 -> 60) so
     the icons->percentage gap keeps its round-2 12.6px */
  width: 60px;
  max-width: 60px;
  white-space: nowrap;
}
/* the list's leftmost content sits ON the shared 32px edge (round 15);
   the base td padding rule would win at equal class specificity */
.fs-table--transfer td.ft-cell--transfer-status {
  padding-left: 0;
}
/* progress cell width comes from .ft-heading--transfer-progress* (fixed
   table layout sizes columns at the header) */
.ft-cell--transfer-progress span {
  white-space: nowrap;
}
/* a live value wider than the reserved column must not move it */
.ft-cell--transfer-progress {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
}
/* 4px lead-in instead of the 8px rhythm: % text 12.6px off the icon
   ink (reference: 28.6) — round-2 "tighter still" */
.fs-table--transfer td.ft-cell--transfer-progress {
  padding-left: 4px;
}

.ft-cell--transfer-ordered {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-started {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-duedate {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-completion {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* round 9: the site cell no longer wraps (hard rule) — ellipsizes */
.ft-cell--transfer-user-info {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-cell--transfer-cpl {
  word-wrap: break-word;
  word-break: break-all;
}
.ft-cell--transfer-cpl--sm {
  display: none;
}
@media (max-width: 926px) {
  .ft-cell--transfer-cpl--sm {
    display: none !important;
  }
}

/* MOBILE stacked view for the TRANSFERS table: below the 1219px
   mid-breakpoint (round 11, D-016) — the intermediate table layout
   truncated Site; the table renders only where every column fits
   (round 20, D-025: minimum columns 934px + 79px chrome = 927 —
   the SAME width switches the page chrome; the unified lower
   breakpoint X1). */
@media (max-width: 926px) {
  .ft-row--transfer {
    border-top: 4px solid var(--color-surface-muted);
  }
  .ft-row--transfer.ft-row--head {
    display: none;
  }
  [class*=ft-cell--transfer] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--transfer]:last-child {
    padding-bottom: 0.75rem !important;
  }
  /* Round 12 (gutter REVERSED, production ground truth): the icons sit
     on their own line at the SAME left edge as every other line —
     percentage, dates, email, CPL all stack at one x. */
  .fs-table--transfer td.ft-cell--transfer-status {
    height: auto;
  }
  /* every mobile line sits ON the shared 32px edge (round 15) */
  .fs-table--transfer td,
  .fs-table--transfer td.ft-cell--transfer-progress,
  .fs-table--transfer td.ft-cell--transfer-ordered,
  .fs-table--transfer td.ft-cell--transfer-started,
  .fs-table--transfer td.ft-cell--transfer-completion,
  .fs-table--transfer td.ft-cell--transfer-duedate {
    padding-left: 0;
  }
  /* Missing data reserves its line (Tom; legacyref collapses empties to
     5.6px — recorded deviation): every field renders at the normal
     26.6px line (5.6 padding + 21 line-height), so entries keep a
     constant structure and nothing jumps when data streams in. */
  .fs-table--transfer td {
    min-height: 26.6px;
  }
  /* MOBILE EXCEPTION to the no-wrap doctrine (D-016): the CPL renders
     fully and wraps when needed — including its LINK, which carries
     nowrap in the table layouts. */
  .fs-table--transfer td.ft-cell--transfer-cpl,
  .fs-table--transfer td.ft-cell--transfer-cpl a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 926px) {
  .ft-row--users {
    border-top: 4px solid var(--color-surface-muted);
  }
  .ft-row--users.ft-row--head {
    display: none;
  }
  [class*=ft-cell--users] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--users]:last-child {
    padding-bottom: 0.75rem !important;
  }
  [class*=ft-cell--organization] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--organization]:last-child {
    padding-bottom: 0.75rem !important;
  }
  [class*=ft-cell--search] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--search]:last-child {
    padding-bottom: 0.75rem !important;
  }
}

.ft-row--users {
  border-top: 2px solid var(--color-surface-muted);
}
.ft-row--users:first-child {
  border-top: none;
}
.ft-cell--search-date {
  width: 10rem;
  min-width: 10rem;
}
.ft-cell--search-name {
  width: 12rem;
  min-width: 12rem;
}
.ft-cell--search-ip {
  width: 8rem;
  min-width: 8rem;
}
.ft-cell--users-role {
  width: 10rem;
  min-width: 10rem;
}
.ft-cell--users-region {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--users-active {
  width: 2rem;
  min-width: 2rem;
}
.ft-cell--users-transfers {
  width: 5rem;
  max-width: 5rem;
}
.ft-cell--organization-logo {
  width: 8rem;
  min-width: 8rem;
}
.ft-cell--organization-logo .logo {
  background-color: var(--color-line-strong);
  padding: 1rem;
  text-align: center;
  height: 8rem;
  width: 8rem;
  max-height: none;
  max-width: none;
  margin-right: 0;
}
.ft-cell--organization-logo .logo img {
  max-height: 6rem;
  max-width: 6rem;
}
.ft-cell--organization-screen {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--organization-transfers {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--organization-actions {
  width: 10rem;
  max-width: 10rem;
}

.value-box {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}
.vb-item {
  width: 50%;
}
@media (min-width: 927px) {
  .vb-item {
    width: 25%;
  }
}
.value-box-item--language {
  order: 1;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--language {
    width: 20%;
  }
}
.value-box-item--subtitles {
  order: 1;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--subtitles {
    width: 20%;
  }
}
.value-box-item--time {
  display: none;
  order: 3;
}
@media (min-width: 927px) {
  .value-box-item--time {
    display: block;
    width: 30%;
  }
}
.value-box-item--date {
  order: 3;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--date {
    width: 30%;
  }
}
.value-box-item--resolution {
  display: none;
  order: 1;
}
@media (min-width: 927px) {
  .value-box-item--resolution {
    display: block;
    width: 15%;
  }
}
.value-box-item--format {
  order: 1;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--format {
    display: block;
    width: 15%;
  }
}
.value-box-item--frames {
  display: none;
  order: 3;
}
@media (min-width: 927px) {
  .value-box-item--frames {
    display: block;
    width: 20%;
  }
}
.value-box-item--audio {
  order: 2;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--audio {
    order: 2;
    width: 20%;
  }
}
.value-box-item--aspect {
  order: 1;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--aspect {
    width: 30%;
  }
}

/* action buttons sit side by side at the row end (legacy column sizing) */
.ft-cell--actions {
  white-space: nowrap;
}
/* Film-detail page system (hero, quickinfo, facts, tabs, excerpt, player
   box, status/type icons): mechanically extracted from the flattened
   legacy cascade, colors -> tokens, classes renamed (see git history for
   the map). Values are the production impression. */
.fs-feedback {
  margin-top: 0.25rem;
}
.fs-has-danger .fs-feedback,
.fs-has-danger .checkbox,
.fs-has-danger.checkbox label {
  color: var(--color-danger);
}
.fs-has-danger .fs-field {
  border-color: var(--color-danger);
}
.fs-has-danger .fs-feedback {
  color: var(--color-danger);
}
.fd-tabpanes > .fd-tabpane {
  display: none;
}
.fd-tabpanes > .active {
  display: block;
}
.fd-facts {
  padding-left: 0;
  margin-bottom: 0;
}
.fd-fact {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0px;
  background-color: var(--color-surface);
  border: 0px solid #ddd;
}
.fd-fact:last-child {
  margin-bottom: 0;
}
.fd-fact.disabled, .fd-fact.disabled:focus, .fd-fact.disabled:hover {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fd-fact.disabled .fd-fact-heading, .fd-fact.disabled:focus .fd-fact-heading, .fd-fact.disabled:hover .fd-fact-heading {
  color: inherit;
}
.fd-fact.disabled .fd-fact-text, .fd-fact.disabled:focus .fd-fact-text, .fd-fact.disabled:hover .fd-fact-text {
  color: var(--color-text);
}
.fd-fact.active, .fd-fact.active:focus, .fd-fact.active:hover {
  z-index: 2;
  color: var(--color-surface);
  text-decoration: none;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.fd-fact.active .fd-fact-heading,
.fd-fact.active .fd-fact-heading > small,
.fd-fact.active:focus .fd-fact-heading,
.fd-fact.active:focus .fd-fact-heading > small,
.fd-fact.active:hover .fd-fact-heading,
.fd-fact.active:hover .fd-fact-heading > small {
  color: inherit;
}
.fd-fact.active .fd-fact-text, .fd-fact.active:focus .fd-fact-text, .fd-fact.active:hover .fd-fact-text {
  color: rgb(179.2232142857, 220.9553571429, 248.7767857143);
}
.fd-fact-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.fd-fact-text {
  margin-bottom: 0;
  line-height: 1.3;
}
/* reference .readmore: a block-level link on the body 16px/1.5 line */
.fd-more,
.fd-less {
  display: block;
  line-height: 1.5;
}
.table td .fs-icon {
  margin-right: 0.5rem;
}
.table td .fs-icon:last-child {
  margin-right: 0;
}
@media (min-width: 1600px) {
  .fs-container--wide {
    max-width: 1540px;
  }
}
.fs-icon {
  margin-right: 0.5rem;
}
.fs-icon--lg {
  font-size: 1.25rem;
}
.fs-icon:last-of-type {
  margin-right: 0;
}
.fs-btn .fs-icon {
  /* legacy set padding-right: .5rem for the <i> glyph gap; on an SVG that
     padding EATS the drawing area (border-box) and shrank button icons to
     ~6px (per-element audit). The centered svg drawing carries the gap. */
  padding-right: 0;
}
.fd-facts {
  text-align: right;
}
.fd-fact {
  background: none;
  padding: 0 0 2rem 0;
}
.fd-fact-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}
.fd {
  margin-top: -6.5rem;
  width: 100%;
}
.fd-container {
  position: relative;
  z-index: 9;
  background-color: var(--color-surface);
  padding-bottom: 1rem;
}
.fd-tabs {
  margin-bottom: 2.5rem;
  /* reference: the tab row is a full-width var(--color-surface-muted) band behind the tabs */
  background-color: var(--color-surface-muted);
}
.fd-header {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.fd-title {
  position: relative;
  padding: 7rem 0;
  z-index: 2;
  min-height: 30rem;
}
@media (min-width: 927px) {
  .fd-title {
    min-height: 21rem;
  }
}
.fd-title .logo {
  max-width: 100%;
}
@media (max-width: 926px) {
  .fd-title .logo {
    max-width: 10rem;
  }
}
.fd-title .logo img {
  max-width: 100%;
}
@media (max-width: 926px) {
  .fd-title .logo img {
    max-width: 10rem;
  }
}
.fd-content {
  width: 100%;
  z-index: 2;
  color: var(--color-surface-soft);
}
.fd-heading {
  font-weight: 300;
  /* production assets-heading: 16px on a 17.6px (1.1) line */
  line-height: 1.1;
}
.fd-description {
  position: relative;
  z-index: 2;
  padding: 1.5rem 0;
  color: var(--color-surface-soft);
  background-color: rgba(51, 51, 51, 0.5);
  min-height: 22rem;
}
.fd-description .fd-desc-col {
  margin-bottom: 1.5rem;
}
.fd-description .fd-desc-col a {
  font-weight: bolder;
  color: var(--color-surface);
}
.fd-description .fd-desc-col a:hover {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: bolder;
}
.fd-poster {
  margin-top: -4.5rem;
}
@media (max-width: 926px) {
  .fd-poster {
    margin-bottom: 2rem;
  }
}
.fd-poster--empty {
  width: 100%;
  background-color: var(--color-text);
}
@media (max-width: 926px) {
  .fd-poster--empty {
    display: none;
  }
}
.fd-assets {
  margin-bottom: 2.5rem;
}
@media (max-width: 926px) {
  .fd-info-col .fd-facts {
    text-align: left;
  }
}
.fd-info-col a {
  font-weight: bolder;
  color: var(--color-surface);
}
.fd-edit {
  font-size: 1.25rem;
  color: var(--color-surface);
}
@media (max-width: 926px) {
  .fd-quickinfo {
    margin-bottom: 1rem;
  }
}
@media (max-width: 926px) {
  .fd-quickinfo-item {
    margin-top: 1rem;
  }
}
.fd-subheading {
  /* reference .section-moviedetail-subheading: 16px below the subtitle */
  margin-bottom: 1rem;
}
.ft-arrow.empty,
.ft-arrow-targets.empty {
  /* reference .transfers-arrow.empty: non-expandable rows show a passive
     light-gray chevron */
  cursor: default;
  color: #dcdcdc;
}
.fd-quickinfo {
  /* extracted (design pass, films 2660+4850): production's fact row
     starts EXACTLY at the title block's bottom (gap-above 0) — the
     title's own margin is the entire spacing; our extra 8px sat the
     GENRE/COUNTRY/YEAR row visibly lower than production */
  margin-top: 0;
}
/* extracted (design pass): production sets the version table off 59px
   below the Trailer/Features row (tableTop 951 - checkboxes 892); ours
   had only the 8px utility margin */
.fd-versions-filter {
  margin-bottom: 59px;
}
.logo-md {
  max-width: 15rem;
  max-height: 7rem;
}
@media (max-width: 926px) {
  .logo-md {
    max-width: 10rem;
    max-height: 4rem;
  }
}
.logo-md img {
  max-width: 15rem;
  max-height: 7rem;
}
@media (max-width: 926px) {
  .logo-md img {
    max-width: 10rem;
    max-height: 4rem;
  }
}
.fd-hero {
  min-height: 400px;
  background: transparent;
}
.fd-excerpt {
  width: 100%;
  display: block;
  /* reference: the More/Less link sits flush under the clamped text */
  margin-bottom: 0;
}
.fd-excerpt p {
  margin-bottom: 1.5rem;
}
.film-updated {
  float: right;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
}
/* (FA's default-white icon base dropped: token utilities color the svgs) */
.transfer-icon svg.grey {
  color: #b2b3b9;
}
.transfer-icon svg.red {
  color: #e00054;
}
.transfer-icon svg.green-i {
  color: #76c100;
}
a.grey {
  color: var(--color-text);
}
a.soft-gray {
  color: #dcdcdc;
}
.player-box {
  background: black none repeat scroll 0 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.fd-hero:after {
  position: absolute;
  content: "";
  background-color: rgba(51, 51, 51, 0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.fd-header {
  background: linear-gradient(to bottom, #aaa 0%, var(--color-ink) 100%);
}
.content--transparent .fd-header {
  background: transparent;
}
.fd-description {
  min-height: 400px;
}
.loading .fd-desc-col {
  max-height: 280px;
  overflow: hidden;
}
body .fs-icon--lg {
  font-size: 20px;
}
.fd-excerpt {
  max-height: 260px;
  overflow: hidden;
}
a:not([href]):not([tabindex]).soft-gray {
  color: #dcdcdc;
}
.fd-excerpt p {
  margin-bottom: 1rem;
}
a.transfer-type-icon {
  color: inherit;
}
.film-spoken-language {
  width: 48px;
}
.film-subtitle-languages {
  width: 96px;
}
.film-dimension {
  width: 48px;
}
.film-resolution {
  width: 48px;
}
.film-aspect-ratio {
  width: 48px;
}
.film-audio-type {
  width: 48px;
}
.film-fps {
  width: 48px;
}
.film-duration {
  width: 128px;
}
.film-end-credit {
  width: 128px;
}
.film-distributor-logo {
  float: right;
}
.vb-item {
  min-width: 16px;
}
@media (min-width: 927px) {
  .film-info {
    min-height: 108px;
  }
  .logo-md {
    height: 4rem;
  }
}
.film-playlist-transfer-icon {
  width: 40px;
}
.fs-feedback {
  white-space: pre-wrap;
}
.fs-error-fatal {
  margin-bottom: 16px;
}
.film-info {
  min-height: 38px;
}
/* light tab bar under the hero (THEATRICAL/FOYER/HOMEVIDEO — the header
   nav-link look on a light surface) */
.fd-tabrow {
  display: flex;
  min-height: 48px;
}
.fd-tab {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 16px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}
.fd-tab--active {
  background-color: var(--color-accent);
  color: var(--color-surface-muted);
}

/* reference: a non-public theatrical ORDER button renders struck through */
.playlist-order-button-not-public,
.playlist-order-button-not-public:hover {
  text-decoration: line-through;
}

/* webfoyer value-box arrangement (legacy .value-box--foyer, Old.scss) */
.value-box--foyer .value-box-item--language,
.value-box--foyer .value-box-item--subtitles {
  width: 50%;
}
.value-box--foyer .value-box-item--aspect {
  width: 50%;
  order: 3;
}
.value-box--foyer .value-box-item--audio {
  width: 50%;
  order: 4;
}
.value-box--foyer .value-box-item--date {
  width: 100%;
  order: 5;
}
@media (min-width: 927px) {
  .value-box--foyer .value-box-item--language,
  .value-box--foyer .value-box-item--subtitles,
  .value-box--foyer .value-box-item--audio,
  .value-box--foyer .value-box-item--frames {
    width: 20%;
  }
  .value-box--foyer .value-box-item--aspect {
    width: 60%;
    order: 1;
  }
  .value-box--foyer .value-box-item--audio {
    order: 2;
  }
  .value-box--foyer .value-box-item--date {
    width: 60%;
    order: 2;
  }
}

/* HOMEVIDEO conversion checklist (design pass, extracted legacyref film
   4910): 40px rows, production 29px checkbox (fs-toggle--compact via
   the fd-assets fs-scope), 300 14px/21px var(--color-text) names on the version
   block's shared left edge (collapse 40 + icon 24 + 8 = 72 — the D-034
   tightened column); existing conversions inline (Video link + date). */
.fd-conversion-row td {
  height: 40px;
  vertical-align: middle;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fd-conversion-check {
  display: inline-flex;
  align-items: center;
  width: 72px;
  vertical-align: middle;
}
.fd-conversion-name {
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
  vertical-align: middle;
}
.fd-conversion-existing {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text);
}
/* buttons at the tab bottom: left-aligned under the table, 16px pair
   gap (production register) */
.fd-convert-actions {
  /* production renders the buttons in the table's last row: left edge
     = version-block edge + that cell's 8px padding (extracted 53 vs
     block 45 on legacyref) */
  margin: 16px 0 32px 8px;
  display: flex;
  gap: 16px;
}
.fd-convert-actions .fs-btn {
  margin-bottom: 0;
}
/* Forms system (ex bootstrap forms + legacy custom controls), extracted
   from the flattened legacy cascade; fs-field/fs-check/fs-panel naming,
   colors -> tokens. Shared by every admin form via components/forms. */
.fs-field {
  display: block;
  width: 100%;
  /* production box (2026-07-27): 8x12 + the 4px border = visual 16 */
  padding: var(--fs-field-pad-y) var(--fs-field-pad-x);
  font-size: var(--fs-field-font-size);
  line-height: 1.25;
  color: #474747;
  background-color: var(--color-surface);
  background-image: none;
  background-clip: padding-box;
  border: 0px solid rgba(0, 0, 0, 0.15);
}
.fs-field::-ms-expand {
  background-color: transparent;
  border: 0;
}
.fs-field::placeholder {
  color: #999;
  opacity: 1;
}
.fs-field:disabled, .fs-field[readonly] {
  background-color: var(--color-line-strong);
  opacity: 1;
}
.fs-field:disabled {
  cursor: not-allowed;
}
select.fs-field:not([size]):not([multiple]) {
  height: 2.5rem;
}
.fs-field--static {
  min-height: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.fs-form-group {
  margin-bottom: 1rem;
}
.fs-feedback {
  margin-top: 0.25rem;
}
.fs-field--danger {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: center right 0.625rem;
  background-size: 1.25rem 1.25rem;
}
.fs-has-danger .fs-feedback,
.fs-has-danger .fs-field-label,
.fs-has-danger .checkbox,
.fs-has-danger.checkbox label,
.fs-has-danger .fs-check {
  color: var(--color-danger);
}
.fs-has-danger .fs-field {
  border-color: var(--color-danger);
}
.fs-has-danger .fs-feedback {
  color: var(--color-danger);
}
.fs-has-danger .fs-field--danger {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9274f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9274f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
}
@media (min-width: 544px) {
  .fs-form-inline .fs-form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .fs-form-inline .fs-field {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .fs-form-inline .fs-field--static {
    display: inline-block;
  }
  .fs-form-inline .fs-input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .fs-form-inline .fs-input-group .fs-input-group-btn,
  .fs-form-inline .fs-input-group .fs-field {
    width: auto;
  }
  .fs-form-inline .fs-input-group > .fs-field {
    width: 100%;
  }
  .fs-form-inline .fs-field-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
}
.fs-input-group {
  position: relative;
  width: 100%;
  display: flex;
}
.fs-input-group .fs-field {
  position: relative;
  z-index: 2;
}
.fs-input-group .fs-field:focus, .fs-input-group .fs-field:active, .fs-input-group .fs-field:hover {
  z-index: 3;
}
.fs-input-group .fs-field {
  flex: 1;
  margin-bottom: 0;
}
.fs-input-group-btn {
  white-space: nowrap;
  vertical-align: middle;
}
.fs-input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.fs-input-group-btn > .fs-btn {
  position: relative;
}
.fs-input-group-btn > .fs-btn + .fs-btn {
  margin-left: 0px;
}
.fs-input-group-btn > .fs-btn:focus, .fs-input-group-btn > .fs-btn:active, .fs-input-group-btn > .fs-btn:hover {
  z-index: 3;
}
.fs-input-group-btn:not(:last-child) > .fs-btn {
  margin-right: 0px;
}
.fs-input-group-btn:not(:first-child) > .fs-btn {
  z-index: 2;
  margin-left: 0px;
}
.fs-input-group-btn:not(:first-child) > .fs-btn:focus, .fs-input-group-btn:not(:first-child) > .fs-btn:active, .fs-input-group-btn:not(:first-child) > .fs-btn:hover {
  z-index: 3;
}
.fs-check {
  position: relative;
  display: inline;
  padding-left: 1.5rem;
  cursor: pointer;
}
.fs-check + .fs-check {
  margin-left: 1rem;
}
.fs-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.fs-check-input:checked ~ .fs-check-box {
  color: var(--color-surface);
  background-color: #0074d9;
}
.fs-check-input:focus ~ .fs-check-box {
  box-shadow: 0 0 0 0.075rem var(--color-surface), 0 0 0 0.2rem #0074d9;
}
.fs-check-input:active ~ .fs-check-box {
  color: var(--color-surface);
  background-color: #84c6ff;
}
.fs-check-input:disabled ~ .fs-check-box {
  cursor: not-allowed;
  background-color: #eee;
}
.fs-check-input:disabled ~ .fs-check-label {
  color: #767676;
  cursor: not-allowed;
}
.fs-check-box {
  position: absolute;
  top: 0.0625rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  user-select: none;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box {
  background-image: none;
}
.fs-check--checkbox .fs-check-input:indeterminate ~ .fs-check-box {
  background-color: var(--color-surface-soft);
  background-image: none;
}
/* .fs-panel base moved to the single CARD-style block below (the one
   .fs-panel definition, D-041). The old base here + its @media 4rem
   companion were BOTH already overridden by the later .fs-panel rule
   (padding 2rem 2rem, bg surface-muted), so the @media was dead and the
   line-strong background never survived — deleted, 0-diff. */
/* (the verbatim duplicate of the .fs-check* block above — .fs-check /
   .fs-check-input / .fs-check-box and the checked/indeterminate rules —
   was deleted 2026-07-27 during the inner-check unification; block 1
   above is the single source.) */
.fs-check--checkbox {
  font-size: 0.875rem;
}
.fs-check--checkbox {
  margin: 0;
  padding-left: 0;
  display: inline-block;
}
.fs-check--checkbox .fs-check-box {
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  background-color: var(--color-surface-soft);
  padding: 0.4rem 0.7rem;
  color: var(--color-line-strong);
  font-size: 1rem;
  float: left;
}
.fs-check--compact {
  margin-bottom: 0;
  margin-top: -0.5rem;
}
.fs-check--compact .fs-check-box {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.5rem;
  padding: 0.2rem 0.3rem;
  margin-top: 0.2rem;
}
.fs-check--light .fs-check-box {
  background-color: var(--color-surface) !important;
}
.fs-check--light .fs-check-input:disabled ~ .fs-check-box {
  background-color: var(--color-surface-soft) !important;
}
.fs-check--checkbox .fs-check-label {
  float: left;
  padding: 0.625rem 0 0.625rem 1rem;
  line-height: 1.25;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box {
  background-color: var(--color-surface-soft);
  color: var(--color-accent);
}
.fs-section-title {
  margin-bottom: 2.5rem;
}
.fs-panel--page {
  margin-top: -5.5rem;
  color: var(--color-text-strong);
}
.fs-panel--page hr {
  border-top: 4px solid var(--color-line-strong);
}
.fs-field {
  border: var(--fs-field-border);
}
.fs-field--light {
  border: none;
  /* borderless variant: no 4px frame, so the FULL visual inset (16)
     is padding — the doctrine is one visual inset, not one padding */
  padding-left: var(--fs-control-inset);
  padding-right: var(--fs-control-inset);
}
.fs-field--text {
  background: transparent;
  padding-left: 0;
  margin-bottom: 0;
}
/* deliver form rows: variants on the SHARED FormRow primitive.
   --center: label mid == control mid (the proven one-line rule beside
   44px picker fields), label-top pt neutralized. --deliver: exactly
   the deliver page's approved geometry (12rem label + 16px gap — the
   old grid-cols-[12rem_1fr] gap-4 math, so the approved selects keep
   their pixels); stacks below the 927 breakpoint. */
.fs-row--center {
  align-items: center;
}
.fs-row--center .fs-label-mini {
  padding-top: 0;
  /* the reboot's label margin-bottom skews the centering */
  margin-bottom: 0;
}
.fs-row--deliver {
  /* neutralize the bootstrap-shim gutters — the deliver geometry is
     label 12rem + 16px, flush at the panel edge */
  margin-left: 0;
  margin-right: 0;
}
.fs-row--deliver > .fs-col {
  padding-left: 0;
  padding-right: 0;
}
.fs-row--deliver > label.fs-field-label {
  flex: 0 0 12rem;
  width: auto;
  margin-right: 16px;
  /* the deliver page's approved label ink (text-strong, iter2) */
  color: var(--color-text-strong);
}
/* LABEL BASELINE MODEL (v6): the label's baseline sits ON the field's
   first text line. Centered rows get it from the centering; textarea
   rows get it explicitly — label offset = the textarea's top inset
   (the control token) with the same 14px/21px line metrics on both
   sides, in the shared row model (no per-field nudges). */
.fs-row--deliver:not(.fs-row--center) > label.fs-field-label {
  /* the field's first text line starts below border + pad-y (the
     production 44px box, 2026-07-27) — the label offset follows so
     the baselines stay paired */
  padding-top: calc(var(--fs-field-pad-y) + var(--fs-field-border-width));
  margin-bottom: 0;
  line-height: 21px;
}
/* SELECT ALIGNMENT in the deliver row model (reviewer crop
   2026-07-27): the bordered fields' VISIBLE white box starts at the
   border's inner edge (the 4px muted border vanishes on the grey
   panel). Borderless selects sit on that same inner edge — and keep
   their text on the shared x by giving back the border width from
   their inset. One x for every control's visible left edge AND for
   every first character. */
.fs-row--deliver select.fs-select--light {
  margin-left: var(--fs-field-border-width);
  padding-left: calc(var(--fs-control-inset) - var(--fs-field-border-width));
}
/* the deliver textareas: THE shared multiline control — all insets =
   the control token */
.fs-textarea {
  display: block;
  width: 100%;
  /* production box (2026-07-27): 8x12 + the 4px border = visual 16 */
  padding: var(--fs-field-pad-y) var(--fs-field-pad-x);
  border: var(--fs-field-border);
  background: var(--color-surface);
  font-size: var(--fs-control-font-size);
  font-weight: var(--fs-control-font-weight);
  line-height: var(--fs-field-line-height);
  color: var(--color-text);
  outline: none;
}
.fs-row--deliver > .fs-col:last-child {
  flex: 1;
  width: auto;
}
@media (max-width: 926px) {
  .fs-row--deliver {
    flex-direction: column;
    align-items: stretch;
  }
  .fs-row--deliver > label.fs-field-label {
    flex: none;
    margin: 0 0 4px;
    padding-top: 0;
  }
}
.fs-label-mini {
  padding-top: 0.6rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
}
/* ============ PANEL — ONE DEFINITION (D-041) ============
   The single home for .fs-panel (the gray form/system surface). Carries
   the computed values that previously survived the kit.css + kit-forms
   cascade: bg surface-muted, padding 2rem 2rem, margin-bottom 2rem
   (=32px), color text-strong. No cross-file duplicate, no dead @media. */
.fs-panel {
  background-color: var(--color-surface-muted);
  padding: 2rem 2rem;
  margin-bottom: 2rem;
  color: var(--color-text-strong);
}
.fs-check--checkbox .fs-check-box .fs-icon {
  opacity: 0;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box .fs-icon {
  opacity: 1;
}
.fs-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.fs-check--compact {
  margin-top: -8px;
  margin-bottom: 0px;
}
.fs-has-danger .fs-field--danger {
  border-color: var(--color-danger);
  border-style: solid;
}
.fs-check + .fs-check {
  margin-left: 1rem;
}
.fs-feedback {
  white-space: pre-wrap;
}
.fs-checkboxes {
  max-height: 256px;
  overflow: auto;
}
.fs-checkboxes-label {
  display: block;
  margin: 0;
  line-height: 1.25em;
}
.fs-error-fatal {
  margin-bottom: 16px;
}
.storage-table__cpl--group .fs-check-box {
  background-color: white !important;
}
/* admin-form select (production `custom-select filterbar-select-light`):
   white, borderless, 14px/300, bootstrap double-triangle chevron. The
   filterbar `.fs-select` rules are scoped to .fs-filterbar/.fs-scope and
   never reached the admin forms — their selects rendered browser-default
   (all-pages inventory, 2026-07-13). */
/* form-geometry tokens live in styles/control-kit.css (THE contract:
   pages consume, never define) */
select.fs-select--light {
  display: inline-block;
  max-width: 100%;
  appearance: none;
  /* selects keep their SEALED 37.5 line (production form selects too,
     measured 2026-07-27) — decoupled from the 44px field box */
  height: var(--fs-select-height);
  padding: 0 calc(2 * var(--fs-control-inset) + 8px) 0 var(--fs-control-inset);
  /* selects keep PRODUCTION's own 14 (--fs-select-font-size), not the
     16px input font — extraction 2026-07-27 */
  font-size: var(--fs-select-font-size);
  font-weight: var(--fs-control-font-weight);
  line-height: 17.5px;
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  background: var(--color-surface)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
    no-repeat calc(100% - var(--fs-control-inset)) 50% / 8px 10px;
}

/* dropdown panel (legacy .dropdown-menu; used by the playlist-form DCP
   search results) */
.fs-menu {
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  background-color: var(--color-surface);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* --- DateTimePicker (design pass, fresh design-system component) ---
   Field: production's deliver input register — 4px border var(--color-surface-muted),
   8px 12px padding; the focused/open frame is the EXTRACTED legacy
   focus state: 4px solid #66afe9. Text only, no glyph. Radius 0, no
   shadows, fs tokens throughout. */
.fs-dtp {
  position: relative;
  display: inline-block;
}
.fs-dtp-field {
  /* DATE_FIELD_W: hand-set 140px (v5). Left inset = THE control
     token (v6 collapsed it to 12px, so the v5 per-field deviation is
     gone); right padding 0 — the right air is the natural leftover:
     widest verdict date "30.12.2026 20:00" (120px) paints fully in
     the 128px content box. FLAGGED residual (standing): the
     pathological zero-heavy "20.02.2030 00:00" (129px) would scroll
     ~1px. Height = the shared field height; vertical air is the
     RESULT (inputs center their text). */
  width: var(--fs-date-field-width);
  height: var(--fs-field-height);
  /* production box (2026-07-27): 8x12 both sides — 175 total leaves a
     143px content box, widest date 130px + air */
  padding: var(--fs-field-pad-y) var(--fs-field-pad-x);
  border: var(--fs-field-border);
  border-radius: 0;
  background: var(--color-surface);
  font-size: var(--fs-control-font-size);
  font-weight: var(--fs-control-font-weight);
  line-height: var(--fs-field-line-height);
  color: var(--color-text);
  outline: none;
  text-align: left;
}
/* MOBILE DATE FIELD (our-format round 2026-07-26): the field box is
   .fs-dtp-field (above); this wrapper holds OUR formatted value and,
   on top of it, the real datetime-local input at opacity 0 covering
   the whole box, so a single tap opens the iOS picker. The input is
   position:absolute -> adds no metrics; the box keeps FIELD_HEIGHT +
   inset 16. No !important, no per-page variant. */
.fs-dtp-native {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fs-dtp-native-value {
  white-space: nowrap;
  overflow: hidden;
}
.fs-dtp-native-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.fs-dtp-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  padding: 12px;
  gap: 16px;
}
.fs-dtp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fs-dtp-month {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-strong);
}
.fs-dtp-nav {
  border: none;
  background: none;
  padding: 0 8px;
  font-size: 18px;
  color: var(--color-accent);
  cursor: pointer;
}
.fs-dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, 34px);
}
.fs-dtp-weekday {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  padding: 4px 0;
}
.fs-dtp-day {
  border: none;
  background: none;
  border-radius: 0;
  height: 32px;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-strong);
  cursor: pointer;
}
.fs-dtp-day:hover {
  background: var(--color-surface-muted);
}
/* Grey means EXACTLY "not selectable" — nothing else (reviewer rule,
   idiot-proof round 2026-07-27). Off-month days are SELECTABLE (clicking
   navigates there), so they render BLACK like in-month days — no --off
   greying. Below-min days are grey and NOT struck through (the
   strikethrough is removed). */
.fs-dtp-day--disabled {
  color: var(--color-line-strong);
  cursor: default;
}
.fs-dtp-day--disabled:hover {
  background: none;
}
.fs-dtp-day--selected,
.fs-dtp-day--selected:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
.fs-dtp-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}
.fs-dtp-time-input {
  width: 40px;
  padding: 4px 0;
  text-align: center;
  border: 1px solid var(--color-surface-muted);
  border-radius: 0;
  /* input surface -> THE control font (16, round 2026-07-27); the
     1px panel-internal border stays its own (not a form-field edge) */
  font-size: var(--fs-control-font-size);
  font-weight: var(--fs-control-font-weight);
  color: var(--color-text-strong);
  outline: none;
}
.fs-dtp-time-sep {
  color: var(--color-text);
}
/* Schnellwahl column: durations relative to VALID FROM */

/* --- deliver tree: MARK-BOX ALIGNMENT MODEL (pilot) ---
   All icon layout comes from treeIconRegistry.ts mark boxes via the
   MarkIcon primitive (MarkIcon.tsx); NO per-icon, per-state, per-pair
   or per-page compensation may exist here or anywhere else outside
   the registry. Columns: width = --dt-gap + mark width (set inline
   from the registry), so a cell's right edge IS its mark's right edge
   and the next cell's padding-left carries the ONE token. The chevron
   column right-aligns its mark (both chevron states share it).
   Vertical: cells share the row baseline; the TEXT sits naturally on
   it (no paint shift anywhere), and each .mk wrapper seats its mark
   center MARK_LINE_RISE_EM above that baseline via vertical-align
   (set inline by MarkIcon from the registry — the one relation).
   Lock column leaves the template entirely without a DKDM. */
.deliver-tree td,
.deliver-tree th {
  vertical-align: baseline;
}
/* ROW MODEL (iteration 2): one constant row height for every level =
   tallest control (34px box) + 4px breathing above and below = 42px.
   The strut in the chevron cell carries the 34px mark-aligned extent
   in EVERY row, so height never depends on level, name class or which
   icons a row happens to have — and no row's paint can bleed into a
   neighbor (the box sits 4px inside its own row). */
.deliver-tree tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
}
.dt-strut {
  display: inline-block;
  width: 0;
  height: 34px;
  /* the strut IS a 34px mark standing on the line (17 = 34/2): it
     places the row's baseline via ordinary layout so the text lands
     on the iteration-3 optical line WITHOUT any text paint shift —
     same 42px row, same absolute text position as the sealed build.
     --mk-rise comes from the registry via the table's inline vars. */
  vertical-align: calc(var(--mk-rise) - 17px);
}
.deliver-tree td.dt-chevron {
  text-align: right;
  /* strut + button must share one line — wrapping dropped expanded
     chevrons to a second line and grew those rows to 63px */
  white-space: nowrap;
}
/* the UA stylesheet gives td padding: 1px; the icon columns need
   content-right = cell-right (a cell's right edge IS its mark's right
   edge), so kill the stray right padding there. Dates/emails keep
   their inherited spec untouched. */
.deliver-tree td.dt-chevron,
.deliver-tree td.dt-box,
.deliver-tree td.dt-check,
.deliver-tree td.dt-lock {
  padding-right: 0;
}
/* two gap tokens (iteration 3): chevron->box rides the tight token,
   everything after the checkbox rides the wide one. Values come from
   the registry via inline vars on the table. */
.deliver-tree td.dt-box {
  padding-left: var(--dt-gap-chevron);
}
.deliver-tree td.dt-check,
.deliver-tree td.dt-name {
  padding-left: var(--dt-gap-icon);
}
/* ONE-GAP round 2026-07-26: adjacent marks sit GAP_ICON apart —
   the lock rides the SAME token as every icon neighbor (supersedes
   iteration-4's tight-token arithmetic that read 3.81). */
.deliver-tree td.dt-lock {
  padding-left: var(--dt-gap-icon);
}
.deliver-tree td.dt-check,
.deliver-tree td.dt-lock {
  white-space: nowrap;
}
/* the reboot's label margin-bottom biased names inside the row line */
.deliver-tree td.dt-name label {
  margin-bottom: 0;
}
/* the mark-box primitive: layout box = mark box; paint is absolutely
   positioned by the registry offsets and overshoots freely */
.mk {
  display: inline-block;
  position: relative;
  /* vertical-align is set inline by MarkIcon: mark center at
     MARK_LINE_RISE_EM above the line's baseline — THE relation. */
}
/* THE expand chevron (film-detail standard, 2026-07-26): ONE
   definition for every expand/collapse chevron. Closed points right;
   open rotates 90° with the production transition (all 0.5s ease —
   extracted from the ported legacy playlist-toggle rule that fd used;
   the tree's Tailwind transition-transform 150ms read as "instant"
   and is gone). Indent is the axis rule: 12px column lead + marks
   centered on the 13px chevron axis (registry chevron-open width),
   passed as MarkIcon's axis by every site. Sites put mk-chevron
   (+ --closed) on the toggle anchor; NO local animation or indent
   values may exist at any chevron site. */
.mk-chevron svg {
  transform: rotate(90deg);
  transition: all 0.5s;
}
.mk-chevron--closed svg {
  transform: rotate(0deg);
}
.mk-paint {
  position: absolute;
  line-height: 0;
  white-space: nowrap;
}
.mk-paint svg,
.mk-paint .fs-icon {
  display: block;
  margin: 0;
}
/* contact sheet (dev flag 'fs-contact-sheet') */
.cs {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  padding: 12px 24px;
  font-size: 14px;
}
.cs-row {
  position: relative;
  padding: 12px 0;
  white-space: nowrap;
}
.cs-line {
  display: inline-block;
  width: 100%;
  margin-right: -100%;
  height: 1px;
  background: rgba(255, 0, 0, 0.55);
  /* the reference line sits where mark centers sit: MARK_LINE_RISE_EM
     above the baseline (1px line -> minus half its height). */
  vertical-align: calc(var(--mk-rise) - 0.5px);
}
.cs-text {
  padding-left: 12px;
  /* text sits naturally on its baseline — the sheet shows the real
     relation with no mirroring needed. */
}
.cs-tag {
  color: #999;
  font-size: 11px;
  padding-left: 16px;
}
.deliver-tree td.dt-date,
.deliver-tree td.dt-email,
.deliver-tree th.dt-h-date {
  padding-left: 2px;
}
/* email tail row (tablet-only, TABLET round 2026-07-26): hidden at
   every width EXCEPT 927<=w<1547. Two-class selector so it beats the
   mobile `.deliver-tree tr { display: flex }` (0,1,1) — otherwise the
   tail would flex-show on phones and duplicate the stacked email. */
.deliver-tree tr.dt-email-tail {
  display: none;
}
/* legend icon -> label gap = GAP_ICON (fed as --mk-gap from the
   registry on the legend section); the MarkIcon seats the icon via
   the line rule, this carries the horizontal token — no legend-local
   value. The label follows the mark with no text-node space. */
.dt-legend-item .mk {
  margin-right: var(--mk-gap);
}
/* TABLET (927 <= w < 1547): recipients/email leaves its column and
   becomes a tail row flush under the NAME column — the Transfers
   tail-row pattern (D-031), same 1547 switch. */
@media (min-width: 927px) and (max-width: 1546px) {
  .deliver-tree td.dt-email--lg,
  .deliver-tree th.dt-h-email {
    display: none;
  }
  .deliver-tree tr.dt-email-tail {
    display: table-row;
  }
  .deliver-tree td.dt-email-tail-cell {
    /* flush under the name text: the leading empty cells put this cell
       at the name column edge, then the name's own GAP_ICON inset. */
    padding-left: var(--dt-gap-icon);
    /* hand-set tail rhythm — its OWN row height, derived from the
       email line (21px = the tree's 14px/1.5 text line) + 6px bottom
       breathing. NOT the 42px data-row constant: the tail is a
       separate row that grows one 21px step per wrapped line. */
    padding-top: 0;
    padding-bottom: 6px;
    line-height: 21px;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--color-text);
  }
}
/* the tree's page section: desktop keeps the 32px page edge the
   deliver page uses everywhere (ex mx-8); below the master 927
   breakpoint it sits on THE shared mobile inset. */
.dt-section {
  margin-left: 2rem;
  margin-right: 2rem;
}
/* padding variant (the breadcrumb strip uses padding as its edge) */
.dt-section-p {
  padding-left: 2rem;
  padding-right: 2rem;
}
/* MOBILE TREE (deliver-mobile round 2026-07-26, reviewer verdict;
   production reference adopted for ONE pattern: status icons
   right-aligned). Below the master 927 breakpoint the rows become
   baseline-aligned flex lines — baseline, not center, so every cell
   keeps the desktop table's shared-baseline construction and the
   sealed line rule seats the marks. Flush columns via the SAME
   registry constants (TREE_COLS, fed as --dt-col-* by the table):
     [chevron 25][box 38][name flex] ............ [check 24.94][lock 20.63]
   dates/emails wrap to full-width lines under the name, on the name's
   own lead (chevron + box + GAP_ICON — flush-column arithmetic from
   existing tokens only). All levels share every column — the old
   per-level checkbox drift is structurally impossible. */
@media (max-width: 926px) {
  .dt-section {
    margin-left: var(--fs-page-inset-mobile);
    margin-right: var(--fs-page-inset-mobile);
  }
  .dt-section-p {
    padding-left: var(--fs-page-inset-mobile);
    padding-right: var(--fs-page-inset-mobile);
  }
  /* CPL grouping (the two kit constants): when the name wraps under
     its pair it stays TIGHT (--dt-cpl-gap-in); groups separate with
     --dt-cpl-gap-between (margin shorthand also neutralizes the
     desktop mt-2 on the "Also book for" list so every entry rides
     the same rhythm). Desktop (>=927) keeps the utility values. */
  .dt-section .dt-cpl-entry {
    /* two-class specificity: the Tailwind gap/margin utilities sit
       later in the bundle, one class deep — this must win. */
    row-gap: var(--dt-cpl-gap-in);
    margin: 0 0 var(--dt-cpl-gap-between) 0;
  }
  .deliver-tree thead {
    display: none;
  }
  .deliver-tree,
  .deliver-tree tbody {
    display: block;
  }
  .deliver-tree tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 2px 0;
  }
  .deliver-tree td {
    display: block;
  }
  /* chevron MARK ink flush at the inset: the desktop column's 12px
     tree indent (pl-3) is a desktop-only lead — on mobile the column
     is exactly the chevron axis (registry chevron-open width, fed as
     --dt-chevron-axis), so the mark's left ink edge sits at 15. */
  /* STANDARD anchoring (reviewer revision of the left-flush
     experiment: the state jump was the defect). The chevron column
     starts at the inset and is exactly the chevron axis; marks
     axis-center via the sealed rule, so BOTH states share one axis
     and the state toggle moves nothing horizontally. The visible gap
     is whatever the standard yields — no special mobile value. */
  .deliver-tree td.dt-chevron {
    flex: 0 0 var(--dt-chevron-axis);
    padding-left: 0;
    order: 1;
  }
  .deliver-tree td.dt-box {
    flex: 0 0 var(--dt-col-box);
    order: 2;
  }
  .deliver-tree td.dt-name {
    flex: 1 1 0;
    min-width: 0;
    order: 3;
  }
  .deliver-tree td[colspan] {
    flex: 1 1 0;
    min-width: 0;
    order: 3;
  }
  .deliver-tree td.dt-check {
    flex: 0 0 var(--dt-col-check);
    order: 4;
  }
  .deliver-tree td.dt-lock {
    flex: 0 0 var(--dt-col-lock);
    order: 5;
  }
  .deliver-tree td.dt-date,
  .deliver-tree td.dt-email {
    order: 6;
    flex-basis: 100%;
    padding-left: calc(var(--dt-chevron-axis) + var(--dt-col-box) + var(--dt-gap-icon));
    padding-top: 0;
    padding-bottom: 0;
  }
  .deliver-tree td.dt-email {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .deliver-tree td.dt-date:empty,
  .deliver-tree td.dt-email:empty {
    display: none;
  }
}
/* Sign-in pages: full port of new_design/_login.scss (mask over the photo
   slider, black logo plate, partner-logo flickity strip), colors -> tokens. */
.app-pane--login {
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.login {
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.login-slider {
  background: rgba(51, 51, 51, 0.5);
  padding: 4rem 0;
  width: 100%;
  overflow-x: hidden;
}
.login-slider .fs-container-fluid {
  padding: 0 !important;
}
.login-logo {
  color: var(--color-surface);
  padding: 1rem;
  background: black;
  margin: 4rem 0;
  display: inline-block;
}
.login-logo .fs-lead {
  margin: 0;
}
@media (max-width: 991px) {
  .login-logo .fs-display {
    font-size: 2rem;
  }
  .login-logo .fs-lead {
    font-size: 1rem;
  }
}
.login-form {
  padding: 4rem;
  background: rgba(51, 51, 51, 0.8);
}
.login-form .fs-label-mini {
  color: var(--color-surface);
}
.login-form .fs-check-label {
  color: var(--color-surface);
}
@media (max-width: 991px) {
  .login-form {
    padding: 2rem;
  }
}
@media (max-width: 926px) {
  .login-form {
    padding: 1rem;
  }
}
.login-info {
  background: rgba(51, 51, 51, 0.8);
  padding: 2rem 0;
  color: var(--color-surface);
}
.login-infobox {
  padding: 1rem;
  width: 100%;
}
.login-infobox a {
  color: var(--color-surface);
  text-decoration: underline;
}
.login-infobox a:hover {
  text-decoration: none;
}
.login .fs-form-text a {
  color: var(--color-surface);
}

.carousel-cell {
  width: 50%;
  height: 5rem;
  padding: 0 2rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-cell img {
  max-width: 100%;
  max-height: 5rem;
  margin: 0 auto;
}
@media (min-width: 544px) {
  .carousel-cell {
    width: 33.3333333333%;
  }
}
@media (min-width: 927px) {
  .carousel-cell {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .carousel-cell {
    width: 16.6666666667%;
  }
}
@media (min-width: 1200px) {
  .carousel-cell {
    width: 12.5%;
  }
}
.carousel-cell {
  width: 10%;
}

/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
/* Misc shared sections/controls extracted from the legacy cascade
   (page sections, modal close button, filter-bar strips, contact cards). */
/* ============ CARD — ONE DEFINITION ============
   Single home for the .fs-card system: the surface/ink backgrounds and
   the text colour that travels with them, every variant ordered so the
   modifier (.fs-card--inverse) wins by SOURCE ORDER — no !important
   (beyond the pre-existing link-colour reset carried verbatim), no
   specificity escalation. Consolidated 2026-07-27: kit-port.css — a
   production-EXTRACTION file — had re-declared .fs-card / .fs-card--
   inverse at equal specificity, and the later file silently won (the
   white-on-white /contact bug, then "fixed" with a third even-later
   override). The KIT files own the system; the PORT files only record
   extractions — so the card lives HERE and kit-port carries none. */
.fs-card {
  position: relative;
  display: block;
  margin-bottom: 2.5rem;
  background-color: var(--color-surface);
  border: 0px solid rgba(0, 0, 0, 0.125);
}
.fs-card--inverse {
  padding: 2rem;
  color: var(--color-surface);
  background-color: var(--color-ink);
}
.fs-card-block {
  padding: 0 2px;
}
.fs-card-block::after {
  content: "";
  display: table;
  clear: both;
}
.fs-card-title {
  margin-bottom: 2.5rem;
}
.fs-card--inverse .fs-card-title {
  color: var(--color-surface);
}
.fs-card a {
  color: var(--color-surface) !important;
}
.fs-card ul {
  margin-bottom: 0;
}
.fs-alert--dismissible .fs-close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.fs-close {
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 var(--color-surface);
  opacity: 0.2;
}
.fs-close:focus, .fs-close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
}
button.fs-close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.fs-filterbar {
  margin-bottom: 1rem;
}
@media (min-width: 544px) {
  .fs-filterbar {
    margin-bottom: 0.5rem;
  }
}
.fs-filterbar .fs-form-inline {
  margin-bottom: 1rem;
}
@media (min-width: 544px) {
  .fs-filterbar .fs-form-inline {
    float: left;
  }
  .fs-filterbar .fs-form-inline:first-child {
    margin-right: 1rem;
  }
}
@media (max-width: 926px) {
  .fs-filterbar .fs-form-inline:first-child {
    margin-top: 0;
  }
}
.fs-filterbar .fs-form-group {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  height: 2.25rem;
}
.fs-filterbar .fs-form-group:last-child {
  margin-right: 0;
}
/* (card rules consolidated into the single CARD block at the top of
   this file, 2026-07-27 — this second scattered copy is deleted.) */
.fs-section-title {
  margin-bottom: 2.5rem;
}
.fs-section-subtitle {
  margin-bottom: 1rem;
}
.fs-filterbar-section {
  overflow: auto;
}
.fs-filterbar .fs-form-group {
  display: inline-block;
  height: 2.25rem;
}
.fs-attach-file {
  margin: 6px;
  margin-left: 0px;
}
/* organizations map (ex maps.scss): the canvas fills the pane below the
   header; keep Google's controls clear of the right edge */
#map {
  width: 100%;
  position: absolute !important;
  left: 0;
  bottom: 0;
  top: 110px;
}


/* Cleanup round 2026-07-26: consolidation classes replacing repeated
   inline px styles (one definition each). */
.fs-overlay-dim {
  background-color: rgba(0, 0, 0, 0.75);
}
.fs-rowact {
  margin-left: 0.3rem;
}
.fs-check-gap {
  margin-right: 30px;
}
.fs-head-gap {
  margin-bottom: 36px;
}
.fs-modal-gap {
  margin-bottom: 12px;
}
.fs-modal-gap--both {
  margin: 12px 0;
}
/* Feature-page rules ported from the legacy cascade (users/organizations/
   storage/suisa/targets/profile/transfers/screeners hooks, film info
   badges, contact cards, alerts, legacy selects) — BEM __ normalized to
   single-dash, colors -> tokens. */
.fs-fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.fs-fade.in {
  opacity: 1;
}
.fs-dropdown {
  position: relative;
}
.fs-select-native {
  display: inline-block;
  max-width: 100%;
  /* KIT variant: pre-consolidation geometry restored (verdict);
     left inset = THE token */
  padding: var(--fs-native-pad-y) var(--fs-native-clearance) var(--fs-native-pad-y) var(--fs-control-inset);
  color: #474747;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-image: none \9 ;
  background-size: 8px 10px;
  border: 0px solid rgba(0, 0, 0, 0.15);
  -moz-appearance: none;
  -webkit-appearance: none;
}
.fs-select-native:disabled {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fs-select-native::-ms-expand {
  opacity: 0;
}
/* (all .fs-card rules consolidated into kit-misc.css — the kit owns the
   card system; this extraction file carries none. 2026-07-27) */
.fs-alert {
  padding: 15px;
  margin-bottom: 1rem;
  border: 0px solid transparent;
}
.fs-alert--success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.fs-alert--danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.fs-alert--warning {
  background-color: #fcf8e3;
  border-color: rgb(249.5322580645, 242.2419354839, 203.9677419355);
  color: #8a6d3b;
}
.fs-alert--warning hr {
  border-top-color: rgb(247.064516129, 236.4838709677, 180.935483871);
}
.fs-select-native {
  display: inline-block;
  max-width: 100%;
  /* KIT variant: pre-consolidation geometry restored (verdict);
     left inset = THE token */
  padding: var(--fs-native-pad-y) var(--fs-native-clearance) var(--fs-native-pad-y) var(--fs-control-inset);
  color: #474747;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-image: none \9 ;
  background-size: 8px 10px;
  border: 0px solid rgba(0, 0, 0, 0.15);
  -moz-appearance: none;
  -webkit-appearance: none;
}
.fs-select-native:disabled {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fs-select-native::-ms-expand {
  opacity: 0;
}
.fs-select-classic {
  display: inline-block;
  /* KIT variant: pre-consolidation geometry restored (verdict) */
  padding: var(--fs-classic-pad-y) var(--fs-classic-clearance) var(--fs-classic-pad-y) var(--fs-control-inset);
  line-height: 1.25;
  border: none;
  border-radius: 0;
  background-color: var(--color-surface-muted);
  font-size: 0.875rem;
  color: var(--color-text);
}
/* KIT variant: the small select, restored (verdict) */
.fs-select--sm {
  padding-top: var(--fs-select-sm-pad-y);
  padding-bottom: var(--fs-select-sm-pad-y);
  font-size: 75%;
}
@media (max-width: 543px) {
  .fs-select-classic {
    width: 100%;
  }
}
.fs-select-classic.fs-select--light {
  background-color: var(--color-surface);
}
.app-pane--login {
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.login-info {
  background: rgba(51, 51, 51, 0.8);
  padding: 2rem 0;
  color: var(--color-surface);
}
/* ONE cell-width definition (--cell-w): consumed by the cell width
   AND by the carousel's JS-free calc() positioning (LoginFooter). */
.flickity-enabled {
  --cell-w: 50%;
}
@media (min-width: 544px) {
  .flickity-enabled { --cell-w: 33.3333333333%; }
}
@media (min-width: 927px) {
  .flickity-enabled { --cell-w: 25%; }
}
@media (min-width: 992px) {
  .flickity-enabled { --cell-w: 16.6666666667%; }
}
@media (min-width: 1200px) {
  .flickity-enabled { --cell-w: 12.5%; }
}
@media (min-width: 1600px) {
  .flickity-enabled { --cell-w: 10%; }
}
.carousel-cell {
  width: var(--cell-w);
  height: 5rem;
  padding: 0 2rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-cell img {
  max-width: 100%;
  max-height: 5rem;
  margin: 0 auto;
}
/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.table .ft-body--asset-details td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.table .ft-body--asset-details {
  display: table-row-group !important;
}
.table .ft-body--asset-details.in {
  display: table-row-group !important;
}
.table .ft-body--asset-details .ft-row--asset-detail:last-child td {
  padding-bottom: 0.75rem;
}
.table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
  display: inline-block;
  width: 8rem;
  border-right: 1px solid var(--color-line-strong);
  padding-right: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
    border-right: 0;
  }
}
.table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
  display: inline;
  width: auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
  }
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
.app-pane--full {
  padding: 0;
}
.ft-heading {
  margin: 0 0 0.5rem 0;
  display: inline-block;
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text);
  min-width: 6rem;
}
.ft-status-item {
  display: inline-block;
  width: 40%;
  font-size: 1rem;
}
/* (dead legacy rotation rules removed — chevron rotation is the ONE
   .mk-chevron definition in kit-forms.css; ft-status-item today hosts
   only the PlaylistForm status dot, no chevron) */
.film-edit .playlist a {
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.screener-recipients {
  position: relative;
  /* chipfield = THE field box height (44, production; 2026-07-27) */
  height: var(--fs-field-height);
}
.screener-recipients-control {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* TWO REGISTERS, ONE FIELD (reviewer 2026-07-27): TEXT gets the
     standard field text inset (12 pad -> visual 16 with the border,
     like the textarea below); CHIPS get the 4.5 centering gap. The
     state is pure CSS (:has), both insets derive from the existing
     kit constants — no third value, no JS layout. Vertical stays the
     4.5 gap in both states, so the 44 height and the placeholder
     baseline never jump. */
  gap: var(--fs-chipfield-gap);
  min-height: var(--fs-field-height);
  padding: var(--fs-chipfield-gap) calc(var(--fs-control-inset) - var(--fs-field-border-width));
  background: var(--color-surface);
  border: var(--fs-field-border);
  cursor: text;
}
.screener-recipients-control:has(.fs-chip) {
  /* chips present -> the chip register, exactly as shipped */
  padding-left: var(--fs-chipfield-gap);
  padding-right: var(--fs-chipfield-gap);
}
/* (local chip rules deleted — recipient chips are the sealed D-033
   .fs-chip family, app.css, one definition) */
.screener-recipients-search {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  /* 1.5px: the input is the flex-line driver (24px caret line) — at
     27px outer it matches the chip exactly, so the UNIFORM 4.5 gap
     holds and the box stays at THE field height (8 border + 2x4.5 gap
     + 27 line = 44). */
  padding: 1.5px 0;
  background: transparent;
  font-size: inherit;
  line-height: 1.5;
}
.screener-recipients-search::placeholder {
  color: var(--color-text);
  opacity: 1;
}
.screener-recipients-dropdown {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 100%;
  background: var(--color-surface-muted);
  border: var(--fs-field-border);
  border-top: none;
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
}
.screener-recipients-option {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-ink);
  cursor: pointer;
}
.screener-recipients-option:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
.app-pane--login small a:not(.fs-btn) {
  text-decoration: none;
}
.app-pane--login small a:not(.fs-btn):hover {
  text-decoration: underline;
}
body.light.body--login, .content.app-pane--login {
  background: black;
  overflow: auto;
}
/* (round 9) the completion cell obeys the global no-wrap hard rule */
@media (max-width: 926px) {
  .ft-cell--transfer {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
}
/* reference cell bottom padding is the plain 5.6px — the ported legacy
   0.75rem override left too much air under the CPL text (round 2) */
.table .ft-body--asset-details.in.hidden {
  display: none !important;
}
.ft-cell--transfer-cpl--sm {
  /* flush left edge with the progress percentage above (round 7,
     legacyref: both at one x) — same 4px lead-in as the progress cell */
  padding-left: 4px !important;
}
.ft-cell--transfer-playlists {
  /* the reference's exact paint (round 6 rollback of rounds 2-5): text
     pulled up toward the main row, box kept — tail row 27.6px, text-to-
     divider 17.6px, both extracted from legacyref */
  position: relative;
  top: -8px;
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
@media (max-width: 926px) {
  .transfers--admin--list .ft-cell--transfer-cpl--sm {
    display: none !important;
  }
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
@media (max-width: 926px) {
  .transfers--admin--list .ft-row--transfer--sm {
    display: none;
  }
}
@media (max-width: 926px) {
  .transfers--admin--list [class^=table-cell--transfer] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  .transfers--admin--list [class^=table-cell--transfer]:last-child {
    padding-bottom: 0.75rem !important;
  }
}
.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}
.fs-select-classic.fs-select--light:disabled {
  background: #ddd;
}
a.fs-link-muted {
  color: inherit;
}
.transfers-search-form {
  padding-top: 4px;
}
.films-search {
  padding-top: 4px !important;
  margin-bottom: 18px;
}
.table .ft-body--asset-details .ft-cell--asset-detail {
  padding-top: 4px !important;
}
.screeners-filter {
  /* aligns the screeners bar's controls with /films and /transfers
     (their wrappers contribute 4px this bar's plain form lacks) —
     asserted by the sweep's three-page parity gate. Padding, not
     margin: the section box must start at the same y as the others. */
  padding-top: 4px;
}
.film-spoken-language {
  width: 48px;
}
.film-subtitle-languages {
  width: 96px;
}
.film-dimension {
  width: 48px;
}
.film-resolution {
  width: 48px;
}
.film-aspect-ratio {
  width: 48px;
}
.film-audio-type {
  width: 48px;
}
.film-fps {
  width: 48px;
}
.film-duration {
  width: 128px;
}
.film-end-credit {
  width: 128px;
}
@media (min-width: 543px) {
  .films-distributors, .transfers-distributors {
    width: 220px;
  }
}
.film-distributor-logo {
  float: right;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 8px;
  }
}
.films-search {
  overflow: hidden;
}
@media (min-width: 543px) {
  .transfers-filter-status,
  .transfers-filter-type,
  .transfers-filter-date {
    width: 120px;
  }
}
@media (min-width: 927px) {
  .film-info {
    min-height: 108px;
  }
}
@media (max-width: 926px) {
  .transfers--admin--list .ft-cell--transfer-cpl {
    display: block;
  }
}
.transfers-search-form {
  overflow: hidden;
}
@media (min-width: 927px) {
  .ft-cell--asset-detail {
    white-space: nowrap;
  }
}
.ft-heading {
  padding-left: 4px;
}
.film-playlist-transfer-icon {
  width: 40px;
}
.films-image {
  position: absolute;
  top: 0px;
}
.fs-select-native {
  max-width: 100%;
}
.form-file-container {
  padding: 0;
  margin: 0;
}
.storage-table-cpls {
  white-space: nowrap;
}
.storage-table-cpls p {
  height: 23px;
}
.storage-modal-footer {
  height: 45px;
}
.storage-modal-btn:disabled {
  opacity: 0.5;
}
.organizations-item {
  border-top: 4px solid var(--color-surface-muted);
}
.organizations-logo-container {
  background-color: var(--color-line-strong);
  padding: 1rem;
  text-align: center;
  height: 8rem;
  width: 8rem;
  max-height: none;
  max-width: none;
  margin-right: 0;
}
.organizations-logo-image {
  max-height: 6rem;
  max-width: 6rem;
}
.films-ingest-dcps {
  width: 927px;
}
.table .ft-body--asset-details .ft-cell--asset-detail {
  padding: 0px;
  padding-top: 8px;
}
.film-info {
  min-height: 38px;
}
/* film-edit version grid — production parity (design pass, extracted
   legacyref /films/4910/edit @1600): full content width, fs-table
   header register (700 14px uppercase var(--color-text)), production column
   widths (preload 126, DE/FR/IT 71, Hide 78, public 104, invoice 120;
   title takes the rest), 12px cell padding with the 29px production
   checkbox (row pitch 56.5), light row separators. NOTE: D-031's
   fixed-minima+weighted-surplus doctrine is Transfers-specific — this
   grid simply matches production. */
table.film-edit {
  width: 100%;
}
.film-edit th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 12px;
  text-align: left;
}
.film-edit td {
  padding: 12px;
  vertical-align: top;
  /* production row typography: 300 14px/21px (ours inherited the 16px
     document font — the round-23 property diff) */
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
}
.film-edit tbody tr + tr td,
.film-edit tbody + tbody tr:first-child td {
  /* production separator: var(--color-line-strong) hairline (its computed border reads
     0px yet the row pitch carries 0.5px — a subpixel border) */
  border-top: 0.5px solid var(--color-line-strong);
}
/* production's checkbox control box is 29x32 — the 32 drives the
   56.5px row pitch (12 + 32 + 12 + hairline) */
.film-edit .fs-check {
  min-height: 32px;
  align-items: center;
  display: inline-flex;
  margin: 0;
}
.film-edit th.fe-col--preload { width: 126px; }
.film-edit th.fe-col--lang { width: 71px; }
.film-edit th.fe-col--hide { width: 78px; }
.film-edit th.fe-col--public { width: 104px; }
.film-edit th.fe-col--invoice { width: 120px; }
.film-edit .fs-check-box {
  width: 29px;
  height: 29px;
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --spacing: .25rem;
    --breakpoint-md: 927px;
    --breakpoint-lg: 1586px;
    --container-3xl: 48rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --color-text: #737373;
    --color-text-strong: #4d4d4d;
    --color-text-heading: #4a4a4a;
    --color-ink: #333;
    --color-surface: #fff;
    --color-surface-muted: #f2f2f2;
    --color-surface-soft: #f5f5f5;
    --color-line: #f2f2f2;
    --color-line-strong: #d9d9d9;
    --color-accent: #1183cf;
    --color-success: #7ed321;
    --color-danger: #d0021b;
    --color-action-success: #5cb85c;
    --color-kdm-valid: #76c100;
    --color-kdm-future: #f7cb00;
    --color-kdm-expired: #e00054;
    --color-status-muted: #b2b3b9;
    --color-status-waiting: #d9d9d9;
    --font-sans: Gotham, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    --text-sm: 14px;
    --text-sm--line-height: 21px;
    --text-base: 16px;
    --text-base--line-height: 24px;
    --text-display: 40px;
    --text-display--line-height: 44px;
    --spacing-control: 34px;
    --shadow-dropdown: 0 2px 8px #0003;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.collapse {
  visibility: collapse;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.inset-0 {
  inset: 0;
}

.top-0 {
  top: 0;
}

.top-2026 {
  top: calc(var(--spacing) * 2026);
}

.-left-0\.5 {
  left: calc(var(--spacing) * -.5);
}

.left-0 {
  left: 0;
}

.isolate {
  isolation: isolate;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.container {
  width: 100%;
}

@media (min-width: 927px) {
  .container {
    max-width: 927px;
  }
}

@media (min-width: 1586px) {
  .container {
    max-width: 1586px;
  }
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.m-0 {
  margin: 0;
}

.mx-8 {
  margin-inline: calc(var(--spacing) * 8);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mb-10 {
  margin-bottom: calc(var(--spacing) * 10);
}

.mb-11 {
  margin-bottom: calc(var(--spacing) * 11);
}

.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}

.ml-auto {
  margin-left: auto;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.list-item {
  display: list-item;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.h-\[37px\] {
  height: 37px;
}

.h-control {
  height: var(--spacing-control);
}

.w-1\/2 {
  width: 50%;
}

.w-60 {
  width: calc(var(--spacing) * 60);
}

.w-\[673px\] {
  width: 673px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: var(--container-3xl);
}

.max-w-full {
  max-width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.flex-1 {
  flex: 1;
}

.flex-shrink, .shrink {
  flex-shrink: 1;
}

.flex-grow, .grow {
  flex-grow: 1;
}

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

.border-collapse {
  border-collapse: collapse;
}

.rotate-90 {
  rotate: 90deg;
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

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

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

.justify-center {
  justify-content: center;
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

:where(.space-y-1 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-none {
  --tw-border-style: none;
  border-style: none;
}

.border-line {
  border-color: var(--color-line);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-ink {
  background-color: var(--color-ink);
}

.bg-surface-muted {
  background-color: var(--color-surface-muted);
}

.bg-transparent {
  background-color: #0000;
}

.mask-repeat {
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

.p-0 {
  padding: 0;
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-8 {
  padding-inline: calc(var(--spacing) * 8);
}

.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.py-16 {
  padding-block: calc(var(--spacing) * 16);
}

.pt-1 {
  padding-top: var(--spacing);
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}

.pl-3 {
  padding-left: calc(var(--spacing) * 3);
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

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

.text-right {
  text-align: right;
}

.font-sans {
  font-family: var(--font-sans);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--tw-leading, var(--text-display--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}

.text-accent {
  color: var(--color-accent);
}

.text-danger {
  color: var(--color-danger);
}

.text-kdm-expired {
  color: var(--color-kdm-expired);
}

.text-kdm-future {
  color: var(--color-kdm-future);
}

.text-kdm-valid {
  color: var(--color-kdm-valid);
}

.text-line {
  color: var(--color-line);
}

.text-line-strong {
  color: var(--color-line-strong);
}

.text-status-muted {
  color: var(--color-status-muted);
}

.text-status-waiting {
  color: var(--color-status-waiting);
}

.text-success {
  color: var(--color-success);
}

.text-surface {
  color: var(--color-surface);
}

.text-surface-muted {
  color: var(--color-surface-muted);
}

.text-text {
  color: var(--color-text);
}

.text-text-heading {
  color: var(--color-text-heading);
}

.text-transparent {
  color: #0000;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.opacity-40 {
  opacity: .4;
}

.opacity-60 {
  opacity: .6;
}

.opacity-65 {
  opacity: .65;
}

.shadow-dropdown {
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0003);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}

.select-all {
  -webkit-user-select: all;
  user-select: all;
}

.after\:clear-both:after {
  content: var(--tw-content);
  clear: both;
}

.after\:block:after {
  content: var(--tw-content);
  display: block;
}

.after\:content-\[\'\'\]:after {
  --tw-content: "";
  content: var(--tw-content);
}

@media (hover: hover) {
  .hover\:bg-\[\#0e6cab\]:hover {
    background-color: #0e6cab;
  }
}

@media (min-width: 927px) {
  .md\:hidden {
    display: none;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.3333%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-1\/6 {
    width: 16.6667%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-7\/12 {
    width: 58.3333%;
  }

  .md\:w-full {
    width: 100%;
  }
}

@media (min-width: 1586px) {
  .lg\:w-1\/4 {
    width: 25%;
  }
}

@media (min-width: 40rem) {
  .sm\:ml-\[33\.3333\%\] {
    margin-left: 33.3333%;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.3333%;
  }

  .sm\:w-2\/3 {
    width: 66.6667%;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
/* ==================== THE CONTROL KIT ====================
   Design-system contract (consolidation + reviewer verdict
   2026-07-26): every form-control property is defined ONCE — here as
   tokens/component variants; icon/tree geometry in
   src/features/deliver/treeIconRegistry.ts (sealed D-037). PAGES
   CONSUME, NEVER DEFINE: no padding/height/focus literal on a form
   control outside this contract.
   Verdict state: the kit ARCHITECTURE stands, the consolidation's
   visual deltas are reverted to the pre-consolidation look via the
   named component variants below — with ONE exception: the control
   inset is 16 globally. Out of scope: buttons' inner padding, the
   34px toggle controls. */
:root {
  /* THE inset: inner text inset of every field (reviewer: 16
     everywhere — supersedes the 12px token and the date-field 12) */
  --fs-control-inset: 16px;
  /* THE mobile page edge (promoted, deliver-mobile round 2026-07-26):
     the legacyref-extracted 15px side margin every page uses below
     the 927 master breakpoint. Consumers: .fs-container,
     .fs-container-fluid@mobile, .app-navbar-meta/-main@mobile,
     .app-nav--open, .dt-section@mobile. */
  --fs-page-inset-mobile: 15px;
  /* deliver CPL grouping (mobile round 2026-07-26): tight INSIDE a
     group (checkbox pair <-> its own CPL name when the name wraps),
     clearly larger BETWEEN groups — proximity carries the grouping. */
  --dt-cpl-gap-in: 4px;
  --dt-cpl-gap-between: 16px;
  /* THE field box = production's (reviewer verdict 2026-07-27 with
     DevTools measurements, supersedes the v6/D-038 37.5): outer 44,
     padding 8x12 — with the 4px border the VISUAL text inset stays 16
     (4 border + 12 pad). Selects keep their own sealed 37.5 line
     (--fs-select-height below). */
  --fs-field-height: 44px;
  --fs-field-pad-x: 12px;
  --fs-select-height: 37.5px;
  /* the deliver date fields: 162 (the reviewer's FINAL call
     2026-07-27; supersedes 160/175/148). Content box = 162 − 8 border
     − 24 padding = 130px — the pathological zero-heavy "30.12.2026
     20:00" (130px @16/300) fits exactly, the realistic widest
     "28.12.2026 23:59" (125px) with 5px air. */
  --fs-date-field-width: 162px;
  /* INPUT-FIELD text (reviewer round 2026-07-27, supersedes the D-038
     14: production renders form inputs/textareas/date fields at
     16px/300/20px in BOTH contexts — screener form on white AND the
     deliver grey panel; extracted element-level 2026-07-27). */
  --fs-control-font-size: 16px;
  --fs-control-font-weight: 300;
  --fs-field-line-height: 20px;
  /* SELECTS + BAR CONTROLS stay at production's own values (extracted
     2026-07-27: select 14px/300/17.5, 34px line — production keeps
     selects smaller than inputs; NOT superseded). Own token so the
     16px input bump can never drag them along silently. */
  --fs-select-font-size: 14px;
  /* THE field edge (production, both contexts): the field owns its
     border as part of its ONE definition — reads as a box on white
     (screener) and matches production on the grey panel (deliver).
     The width is its own token: label offsets, the chipfield inset
     math and the deliver select alignment all derive from it. */
  --fs-field-border-width: 4px;
  --fs-field-border: var(--fs-field-border-width) solid var(--color-surface-muted);
  /* THE focus frame (date fields only — see below) */
  --fs-focus-color: rgb(102, 175, 233);
  --fs-focus-width: 4px;

  /* ---- component variants (pre-consolidation look, restored) ---- */
  /* filter-bar controls: production 34px line (round 4) */
  --fs-bar-control-height: 34px;
  --fs-bar-control-pad-top: 2px;
  --fs-bar-select-clearance: 30px; /* text-to-arrow zone */
  --fs-bar-arrow-offset: 12px;     /* arrow inset from the right */
  /* header search (production nav geometry, D-020 context) */
  --fs-search-height: 48px;
  --fs-search-pad-y: 14px;
  /* generic white input (production .form-control impression) */
  --fs-input-pad-y: 8px;
  --fs-input-font-size: 16px;
  /* admin fs-field family (production register) */
  --fs-field-pad-y: 0.5rem;
  --fs-field-font-size: 1rem;
  /* ported native selects */
  --fs-native-pad-y: 0.375rem;
  --fs-native-clearance: 1.75rem;
  --fs-classic-pad-y: 0.625rem;
  --fs-classic-clearance: 2rem;
  --fs-select-sm-pad-y: 0.375rem;
  /* The DISTRIBUTOR filter pulldown carries NO width definition —
     intrinsic native-select width, sized by its widest option
     ("wichtiges Feld und darf etwas Platz haben", reviewer verdict
     2026-07-26). Deliberate: intrinsic by design, no constant. The
     other bar selects keep their fixed widths. */
  /* bar chip box (combobox) vertical pad; screener chip field */
  --fs-chipbox-pad-y: 3px;
  /* chipfield height = THE field height (44) since 2026-07-27.
     THE uniform chip gap (reviewer crop 2026-07-27): one value all
     around the chip block — left inset before the first chip, the
     top/bottom air and the inter-chip gap. 4.5 = (44 field − 8 border
     − 27 chip) / 2, i.e. exactly the centering air of the sealed
     D-033 chip in THE field box; the caret follows the same inset. */
  --fs-chipfield-gap: 4.5px;
}

/* ---- FOCUS (the one scoped definition — no per-page rules) ----
   The blue INSET frame applies EXCLUSIVELY to the date fields: the
   picker opens there, and the frame marks the active popup surface
   (reviewer verdict). Everything else keeps its pre-consolidation
   behavior, restored below. */
.fs-dtp-field:focus,
.fs-dtp-field:focus-visible,
.fs-dtp-field--open {
  outline: none;
  /* the field now owns a real 4px border (2026-07-27) — the frame is
     that border turning blue (production's focus mechanism), not a
     shadow stacked inside the grey border. Same law, same visual:
     a 4px blue frame at the box edge, on date fields ONLY. */
  border-color: var(--fs-focus-color);
}
/* native selects: menu shows focus; UA ring suppressed */
select:focus,
select:focus-visible {
  outline: none;
  box-shadow: none;
}
/* icon-anchor family (collapse chevrons, transfer status/type links):
   the UA :focus-visible ring drew a blue rounded frame around the
   version collapse chevron (reviewer defect, Icons_falsch.png rollout
   2) — focus frames exist ONLY on the date fields. */
.ft-toggle:focus,
.ft-toggle:focus-visible,
.ft-arrow:focus,
.ft-arrow:focus-visible,
.ft-arrow-targets:focus,
.ft-arrow-targets:focus-visible,
.transfer-icon:focus,
.transfer-icon:focus-visible,
.transfer-type-icon:focus,
.transfer-type-icon:focus-visible {
  outline: none;
}
/* restored pre-consolidation focus styling (border-color impressions;
   on borderless variants they are inert by design, as before) */
.fs-field:focus {
  color: #474747;
  background-color: #fff;
  border-color: #66afe9;
  outline: none;
}
.fs-input:focus {
  border-color: rgb(102, 175, 233);
}
.fs-dtp-time-input:focus {
  border-color: rgb(102, 175, 233);
}
.fs-select-native:focus {
  border-color: #51a7e8;
  outline: none;
}
/* ============ THE INNER-CHECK POSITION — ONE DEFINITION ============
   Reviewer verdict 2026-07-27: the /deliver (fs-toggle) check position
   is the reference. Every checkbox centres its check glyph in the box.
   The sealed .fs-toggle paints a centered 16px background (app.css,
   pixel-parity 0-diff — left untouched, it already sits at this same
   centred position). The .fs-check-box family (film-edit, admin/login
   forms, CheckboxRow) centres the SAME 16px <Icon name="check"> HERE,
   so its ink-vs-box centre matches deliver instead of riding ~1px high
   on the inline line-box. ONE place, no per-page nudge, no second
   position value. These boxes are the "control anatomy" census
   exclusion (kept OUT of MarkIcon) — that exclusion does NOT exempt
   them from this no-duplication rule. Loaded last, so this centring
   wins over the block-flow default without touching the variant rules. */
.fs-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
}