/* September 11 Flohe controls, tokenized without changing their design.
   The application and design gallery both load this canonical stylesheet. */


@font-face {
  font-family: Inter;
  src: url('../brand/assets/fonts/Inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--flohe-bg);
  color: var(--flohe-text);
  font-family: var(--flohe-font);
  line-height: 1.6
}

button,input,select {
  font: inherit
}

a {
  color: inherit;
  text-underline-offset: var(--flohe-space-1)
}

button,a,input,select {
  touch-action: manipulation
}

:focus-visible {
  outline: var(--flohe-focus-width) solid var(--flohe-focus);
  outline-offset: var(--flohe-space-1)
}

.fl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--flohe-space-control);
  padding: var(--flohe-space-button) var(--flohe-check-size);
  min-height: var(--flohe-control-height);
  border-radius: var(--flohe-radius-sm);
  background: var(--flohe-primary);
  color: var(--flohe-on-primary);
  border: var(--flohe-line) solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--flohe-transition-duration),transform var(--flohe-transition-duration)
}

.fl-button:hover {
  background: var(--flohe-primary-hover)
}

.fl-button:active {
  transform: translateY(var(--flohe-line))
}

.fl-button.secondary {
  background: var(--flohe-raised);
  border-color: var(--flohe-border);
  color: var(--flohe-text)
}

.fl-button.secondary:hover {
  border-color: var(--flohe-muted)
}

.fl-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none
}

.fl-card {
  background: var(--flohe-surface);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-radius);
  padding: var(--flohe-radius-lg)
}

.fl-input {
  width: 100%;
  padding: var(--flohe-space-3) var(--flohe-radius);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-radius-sm);
  background: var(--flohe-bg);
  color: var(--flohe-text)
}

.fl-input[aria-invalid=true] {
  border-color: var(--flohe-error)
}

.fl-label {
  display: block;
  font-size: var(--flohe-radius);
  font-weight: 600;
  margin-bottom: var(--flohe-radius-sm)
}

.fl-hint {
  color: var(--flohe-muted);
  font-size: var(--flohe-text-small);
  margin: var(--flohe-space-caption) 0
}

.fl-badge {
  display: inline-flex;
  padding: var(--flohe-space-1) var(--flohe-space-control);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-radius-pill);
  font-size: var(--flohe-space-3);
  font-weight: 600;
  color: var(--flohe-success)
}

.fl-error {
  color: var(--flohe-error)
}

.fl-progress {
  height: var(--flohe-space-half);
  overflow: hidden;
  border-radius: var(--flohe-radius-pill);
  background: var(--flohe-border)
}

.fl-progress span {
  display: block;
  height: 100%;
  background: var(--flohe-gradient)
}

@media(prefers-reduced-motion:reduce) {

*,*::before,*::after {
  scroll-behavior: auto!important;
  transition: none!important
}
}

/* Flohe controls v1.1 — native HTML first; behaviour in flohe.js. */

.fl-toast-region {
  max-height: calc(100dvh - var(--flohe-space-10));
  overflow-y: auto
}

.fl-toast.fl-alert {
  align-items: flex-start;
  border-left-width: var(--flohe-focus-width);
  background: var(--flohe-surface)
}

.fl-toast .fl-grow {
  overflow-wrap: anywhere
}

.fl-toast strong {
  font-size: var(--flohe-text-small)
}

.fl-toast .fl-button {
  flex: none
}

.fl-breadcrumb a {
  display: inline-flex!important
}

.fl-table input[type=checkbox] {
  width: var(--flohe-icon-size);
  height: var(--flohe-icon-size);
  accent-color: var(--flohe-primary)
}

.fl-tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--flohe-space-control)
}

[hidden] {
  display: none!important
}

.fl-stack {
  display: grid;
  gap: var(--flohe-space-4)
}

.fl-row {
  display: flex;
  align-items: center;
  gap: var(--flohe-space-3);
  flex-wrap: wrap
}

.fl-grow {
  flex: 1;
  min-width: 0
}

.fl-muted {
  color: var(--flohe-muted)
}

.fl-sr-only {
  position: absolute;
  width: var(--flohe-line);
  height: var(--flohe-line);
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}

.fl-icon {
  width: var(--flohe-icon-size);
  height: var(--flohe-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

textarea {
  font: inherit
}

.fl-input {
  min-height: var(--flohe-control-height);
  border-color: var(--flohe-control-border)
}

.fl-input::placeholder {
  color: var(--flohe-muted);
  opacity: 1
}

.fl-input:hover:not(:disabled):not(:read-only):not([aria-invalid=true]) {
  border-color: var(--flohe-text)
}

.fl-input:disabled {
  opacity: .55;
  cursor: not-allowed
}

.fl-input[readonly] {
  background: var(--flohe-raised)
}

textarea.fl-input {
  resize: vertical;
  min-height: var(--flohe-textarea-min)
}

select.fl-input {
  padding-right: var(--flohe-radius-lg)
}

.fl-field {
  min-width: 0
}

.fl-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0
}

.fl-fieldset legend {
  font-size: var(--flohe-radius);
  font-weight: 600;
  margin-bottom: var(--flohe-space-3)
}

.fl-input-group {
  display: flex;
  align-items: center;
  gap: var(--flohe-space-control);
  position: relative
}

.fl-input-group>.fl-icon {
  position: absolute;
  left: var(--flohe-radius);
  pointer-events: none;
  color: var(--flohe-muted)
}

.fl-input-group>.fl-icon+.fl-input {
  padding-left: var(--flohe-input-icon-inset)
}

.fl-input-group>.fl-button {
  flex: none
}

.fl-button.sm {
  min-height: var(--flohe-control-compact);
  padding: var(--flohe-space-half) var(--flohe-space-3);
  font-size: var(--flohe-text-small)
}

.fl-button.lg {
  min-height: var(--flohe-control-large);
  padding: var(--flohe-radius) var(--flohe-radius-lg)
}

.fl-button.ghost {
  background: transparent;
  color: var(--flohe-text)
}

.fl-button.ghost:hover {
  background: var(--flohe-raised)
}

.fl-button.danger {
  background: var(--flohe-danger-bg);
  color: var(--flohe-on-primary)
}

.fl-button.danger:hover {
  background: var(--flohe-danger-hover)
}

.fl-button.icon-only {
  padding: var(--flohe-space-button);
  width: var(--flohe-control-height);
  flex: none
}

.fl-button[aria-busy=true] {
  cursor: wait
}

.fl-button:disabled:hover {
  background: var(--flohe-primary)
}

.fl-button.secondary:disabled:hover {
  background: var(--flohe-raised)
}

.fl-button.ghost:disabled:hover {
  background: transparent
}

.fl-button.danger:disabled:hover {
  background: var(--flohe-danger-bg)
}

.fl-choice {
  display: flex;
  align-items: center;
  gap: var(--flohe-space-control);
  min-height: var(--flohe-choice-height);
  font-size: var(--flohe-radius);
  cursor: pointer
}

.fl-choice input[type=checkbox],.fl-choice input[type=radio] {
  width: var(--flohe-check-size);
  height: var(--flohe-check-size);
  accent-color: var(--flohe-primary);
  flex: none;
  cursor: pointer
}

.fl-choice:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed
}

.fl-switch input {
  appearance: none!important;
  width: var(--flohe-switch-width)!important;
  height: var(--flohe-radius-lg)!important;
  margin: 0;
  background: var(--flohe-control-border);
  border: var(--flohe-line) solid var(--flohe-control-border);
  border-radius: var(--flohe-radius-pill);
  position: relative;
  transition: background var(--flohe-duration)
}

.fl-switch input:before {
  content: '';
  position: absolute;
  left: var(--flohe-focus-width);
  top: var(--flohe-focus-width);
  width: var(--flohe-space-4);
  height: var(--flohe-space-4);
  border-radius: 50%;
  background: var(--flohe-on-primary);
  transition: transform var(--flohe-duration)
}

.fl-switch input:checked {
  background: var(--flohe-primary);
  border-color: var(--flohe-primary)
}

.fl-switch input:checked:before {
  transform: translateX(var(--flohe-icon-small))
}

.fl-range {
  width: 100%;
  min-height: var(--flohe-space-8);
  accent-color: var(--flohe-primary)
}

.fl-segmented {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  padding: var(--flohe-space-1);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-space-control);
  background: var(--flohe-bg);
  gap: var(--flohe-focus-width)
}

.fl-segmented label {
  position: relative;
  cursor: pointer
}

.fl-segmented input {
  position: absolute;
  opacity: 0;
  width: var(--flohe-line);
  height: var(--flohe-line)
}

.fl-segmented span {
  display: block;
  padding: var(--flohe-radius-sm) var(--flohe-radius);
  border-radius: var(--flohe-space-half);
  font-size: var(--flohe-text-small)
}

.fl-segmented input:checked+span {
  background: var(--flohe-raised);
  box-shadow: 0 var(--flohe-line) var(--flohe-focus-width) var(--flohe-shadow-soft)
}

.fl-segmented input:focus-visible+span {
  outline: var(--flohe-focus-width) solid var(--flohe-focus);
  outline-offset: var(--flohe-line-strong)
}

.fl-upload {
  padding: var(--flohe-icon-size);
  border: var(--flohe-line) dashed var(--flohe-control-border);
  border-radius: var(--flohe-space-3);
  background: var(--flohe-bg)
}

.fl-upload input {
  max-width: 100%;
  font-size: var(--flohe-space-3)
}

.fl-upload input::file-selector-button {
  border: var(--flohe-line) solid var(--flohe-control-border);
  padding: var(--flohe-space-label) var(--flohe-space-3);
  border-radius: var(--flohe-space-half);
  background: var(--flohe-raised);
  color: var(--flohe-text);
  font: inherit;
  cursor: pointer;
  margin-right: var(--flohe-space-control)
}

.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--flohe-space-caption);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-radius-sm);
  padding: var(--flohe-focus-width) var(--flohe-space-half) var(--flohe-focus-width) var(--flohe-space-control);
  background: var(--flohe-raised);
  font-size: var(--flohe-space-3)
}

.fl-chip button {
  display: grid;
  place-items: center;
  background: none;
  color: inherit;
  border: 0;
  border-radius: var(--flohe-space-1);
  width: var(--flohe-chip-control);
  height: var(--flohe-chip-control);
  cursor: pointer
}

.fl-chip button:hover {
  background: var(--flohe-bg)
}

.fl-badge.neutral {
  color: var(--flohe-muted)
}

.fl-badge.info {
  color: var(--flohe-info)
}

.fl-badge.warning {
  color: var(--flohe-warning)
}

.fl-badge.danger {
  color: var(--flohe-error)
}

.fl-alert {
  display: flex;
  gap: var(--flohe-space-3);
  padding: var(--flohe-space-4);
  border: var(--flohe-line) solid var(--flohe-border);
  border-left: var(--flohe-focus-width) solid var(--flohe-info);
  border-radius: var(--flohe-space-control);
  background: var(--flohe-bg);
  font-size: var(--flohe-text-small)
}

.fl-alert strong {
  display: block;
  color: var(--flohe-info);
  margin-bottom: var(--flohe-space-1)
}

.fl-alert.success {
  border-left-color: var(--flohe-success)
}

.fl-alert.success strong {
  color: var(--flohe-success)
}

.fl-alert.warning {
  border-left-color: var(--flohe-warning)
}

.fl-alert.warning strong {
  color: var(--flohe-warning)
}

.fl-alert.danger {
  border-left-color: var(--flohe-error)
}

.fl-alert.danger strong {
  color: var(--flohe-error)
}

/* The same strip as a list of links, for tabs that are separate pages: a project's settings. Links, not
   role=tab, because each one navigates rather than switching a panel in place. */
.fl-tabs [role=tablist],
.fl-tabs > ul {
  display: flex;
  border-bottom: var(--flohe-line) solid var(--flohe-border);
  gap: var(--flohe-radius-sm);
  overflow: auto;
  padding: var(--flohe-space-1) var(--flohe-space-1) 0
}

.fl-tabs > ul {
  list-style: none;
  margin: 0
}

.fl-tabs [role=tab],
.fl-tabs > ul a {
  display: inline-block;
  border: 0;
  border-bottom: var(--flohe-line-strong) solid transparent;
  background: none;
  color: var(--flohe-muted);
  padding: var(--flohe-space-3) var(--flohe-space-4);
  font: inherit;
  font-size: var(--flohe-radius);
  cursor: pointer;
  white-space: nowrap
}

.fl-tabs > ul a:hover {
  color: var(--flohe-text);
  text-decoration: none
}

.fl-tabs [role=tab][aria-selected=true],
.fl-tabs > ul a[aria-current=page] {
  color: var(--flohe-text);
  border-bottom-color: var(--flohe-primary)
}

.fl-tabs [role=tabpanel] {
  padding: var(--flohe-icon-size) var(--flohe-space-1)
}

.fl-accordion {
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-space-control);
  overflow: hidden
}

.fl-accordion details+details {
  border-top: var(--flohe-line) solid var(--flohe-border)
}

.fl-accordion summary {
  cursor: pointer;
  padding: var(--flohe-space-4);
  font-weight: 550;
  font-size: var(--flohe-radius)
}

.fl-accordion details>div {
  padding: 0 var(--flohe-space-4) var(--flohe-space-4);
  color: var(--flohe-muted);
  font-size: var(--flohe-text-small)
}

.fl-disclosure {
  position: relative;
  display: inline-block
}

.fl-menu {
  position: absolute;
  top: calc(100% + var(--flohe-radius-sm));
  left: 0;
  width: var(--flohe-menu-width);
  max-width: calc(100vw - var(--flohe-space-16));
  padding: var(--flohe-space-half);
  background: var(--flohe-surface);
  border: var(--flohe-line) solid var(--flohe-control-border);
  border-radius: var(--flohe-space-3);
  box-shadow: var(--flohe-shadow);
  z-index: 5
}

.fl-menu button,.fl-menu a {
  display: flex;
  align-items: center;
  gap: var(--flohe-space-3);
  width: 100%;
  padding: var(--flohe-space-button) var(--flohe-space-3);
  border: 0;
  border-radius: var(--flohe-space-half);
  color: var(--flohe-text);
  background: transparent;
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-size: var(--flohe-text-small);
  cursor: pointer
}

.fl-menu :is(button,a):hover {
  background: var(--flohe-raised)
}

.fl-menu hr {
  border: 0;
  border-top: var(--flohe-line) solid var(--flohe-border);
  margin: var(--flohe-space-marker)
}

.fl-tooltip-wrap {
  position: relative;
  display: inline-flex
}

.fl-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + var(--flohe-radius-sm));
  left: 0;
  max-width: var(--flohe-tooltip-max);
  width: max-content;
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-space-caption);
  background: var(--flohe-raised);
  color: var(--flohe-text);
  padding: var(--flohe-radius-sm) var(--flohe-space-button);
  font-size: var(--flohe-space-3);
  z-index: 6
}

.fl-tooltip-wrap:hover .fl-tooltip,.fl-tooltip-wrap:focus-within .fl-tooltip {
  display: block
}

.fl-tooltip-wrap[data-dismissed] .fl-tooltip {
  display: none
}

.fl-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--flohe-space-label);
  flex-wrap: wrap;
  font-size: var(--flohe-text-small)
}

.fl-breadcrumb span[aria-hidden] {
  color: var(--flohe-muted)
}

.fl-breadcrumb a {
  color: var(--flohe-muted)
}

.fl-steps {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: var(--flohe-space-4);
  margin: 0;
  font-size: var(--flohe-space-3);
  counter-reset: steps
}

.fl-steps li {
  display: flex;
  align-items: center;
  gap: var(--flohe-radius-sm);
  color: var(--flohe-muted);
  counter-increment: steps
}

.fl-steps li:before {
  content: counter(steps);
  display: grid;
  place-items: center;
  width: var(--flohe-step-size);
  height: var(--flohe-step-size);
  border: var(--flohe-line) solid var(--flohe-control-border);
  border-radius: 50%
}

.fl-steps [aria-current=step] {
  color: var(--flohe-text)
}

.fl-steps [aria-current=step]:before {
  background: var(--flohe-primary);
  color: var(--flohe-on-primary);
  border-color: var(--flohe-primary)
}

.fl-table-wrap {
  overflow: auto;
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-space-3)
}

.fl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--flohe-text-small);
  text-align: left;
  white-space: nowrap
}

.fl-table caption {
  text-align: left;
  padding: var(--flohe-space-4);
  font-weight: 600
}

.fl-table th {
  background: var(--flohe-raised);
  font-size: var(--flohe-space-button);
  font-weight: 600;
  color: var(--flohe-muted)
}

.fl-table th,.fl-table td {
  padding: var(--flohe-text-small) var(--flohe-space-4);
  border-bottom: var(--flohe-line) solid var(--flohe-border)
}

.fl-table tr:last-child td {
  border-bottom: 0
}

.fl-table tbody tr:hover {
  background: var(--flohe-raised)
}

.fl-table th button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: var(--flohe-space-1) 0;
  cursor: pointer
}

.fl-pagination {
  display: flex;
  align-items: center;
  gap: var(--flohe-radius-sm);
  flex-wrap: wrap
}

.fl-pagination [aria-current=page] {
  background: var(--flohe-primary);
  color: var(--flohe-on-primary)
}

.fl-dialog {
  background: var(--flohe-surface);
  color: var(--flohe-text);
  border: var(--flohe-line) solid var(--flohe-border);
  border-radius: var(--flohe-icon-size);
  padding: 0;
  width: min(var(--flohe-dialog-max),calc(100% - var(--flohe-space-8)));
  max-height: calc(100dvh - var(--flohe-space-8));
  box-shadow: var(--flohe-shadow)
}

.fl-dialog::backdrop {
  background: var(--flohe-overlay);
  backdrop-filter: blur(var(--flohe-space-1))
}

.fl-dialog-head,.fl-dialog-body,.fl-dialog-foot {
  padding: var(--flohe-radius-lg)
}

.fl-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flohe-icon-size);
  border-bottom: var(--flohe-line) solid var(--flohe-border)
}

.fl-dialog-head h2 {
  font-size: var(--flohe-icon-size);
  margin: 0
}

.fl-dialog-body p {
  color: var(--flohe-muted);
  font-size: var(--flohe-radius)
}

.fl-dialog-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--flohe-space-control);
  border-top: var(--flohe-line) solid var(--flohe-border)
}

.fl-dialog.drawer {
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: var(--flohe-icon-size) 0 0 var(--flohe-icon-size);
  width: min(var(--flohe-drawer-max),calc(100% - var(--flohe-icon-size)))
}

.fl-toast-region {
  position: fixed;
  bottom: var(--flohe-icon-size);
  right: var(--flohe-icon-size);
  z-index: 20;
  width: min(var(--flohe-toast-max),calc(100% - var(--flohe-space-10)));
  display: grid;
  gap: var(--flohe-space-control)
}

.fl-toast {
  padding: var(--flohe-radius) var(--flohe-radius) var(--flohe-radius) var(--flohe-icon-small);
  display: flex;
  align-items: center;
  gap: var(--flohe-space-control);
  background: var(--flohe-raised);
  border: var(--flohe-line) solid var(--flohe-control-border);
  border-radius: var(--flohe-space-3);
  box-shadow: var(--flohe-shadow);
  font-size: var(--flohe-text-small)
}

.fl-spinner {
  display: inline-block;
  width: var(--flohe-icon-small);
  height: var(--flohe-icon-small);
  border: var(--flohe-line-strong) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fl-spin var(--flohe-spin-duration) linear infinite;
  flex: none
}

@keyframes fl-spin {

to {
  transform: rotate(360deg)
}
}

.fl-skeleton {
  height: var(--flohe-radius);
  border-radius: var(--flohe-space-half);
  background: var(--flohe-raised);
  animation: fl-pulse var(--flohe-pulse-duration) ease-in-out infinite
}

.fl-skeleton.block {
  height: var(--flohe-skeleton-block)
}

.fl-skeleton.short {
  width: 65%
}

@keyframes fl-pulse {

50% {
  opacity: .45
}
}

.fl-empty {
  text-align: center;
  padding: var(--flohe-chip-control) var(--flohe-space-4);
  border: var(--flohe-line) dashed var(--flohe-control-border);
  border-radius: var(--flohe-space-3)
}

.fl-empty>.fl-icon {
  width: var(--flohe-space-8);
  height: var(--flohe-space-8);
  color: var(--flohe-muted)
}

.fl-empty h3 {
  margin: var(--flohe-space-3) 0 var(--flohe-space-half)
}

.fl-empty p {
  font-size: var(--flohe-text-small);
  color: var(--flohe-muted)
}

progress.fl-meter {
  width: 100%;
  height: var(--flohe-radius-sm);
  border: 0;
  border-radius: var(--flohe-radius-pill);
  overflow: hidden;
  background: var(--flohe-border);
  accent-color: var(--flohe-primary)
}

progress.fl-meter::-webkit-progress-bar {
  background: var(--flohe-border)
}

progress.fl-meter::-webkit-progress-value {
  background: var(--flohe-gradient)
}

progress.fl-meter::-moz-progress-bar {
  background: var(--flohe-gradient)
}

.fl-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--flohe-control-compact);
  height: var(--flohe-control-compact);
  border-radius: 50%;
  background: var(--flohe-raised);
  border: var(--flohe-line) solid var(--flohe-border);
  font-size: var(--flohe-space-button);
  font-weight: 600;
  flex: none
}

.fl-divider {
  border: 0;
  border-top: var(--flohe-line) solid var(--flohe-border);
  margin: var(--flohe-radius-sm) 0
}

.fl-kbd {
  font: var(--flohe-space-button) var(--flohe-font);
  border: var(--flohe-line) solid var(--flohe-control-border);
  border-bottom-width: var(--flohe-line-strong);
  border-radius: var(--flohe-space-1);
  padding: var(--flohe-line-strong) var(--flohe-space-marker);
  color: var(--flohe-muted)
}

@media(prefers-reduced-motion:reduce) {

.fl-spinner,.fl-skeleton {
  animation: none
}
}

@media(forced-colors:active) {

.fl-switch input:checked {
  background: Highlight
}

.fl-switch input:before {
  background: CanvasText
}

.fl-segmented input:checked+span {
  outline: var(--flohe-line-strong) solid Highlight
}

.fl-skeleton {
  border: var(--flohe-line) solid CanvasText
}
}


/* FLOHE APPLICATION COMPOSITIONS
   The kit supplies controls. These compose them into the project's queue,
   report, discussion, diagnostics and settings surfaces; no legacy CSS loads. */
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.35; }
p { margin: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.fl-button:hover { text-decoration: none; }
.fl-frame { display: flex; min-height: 100vh; }
.fl-rail { width: var(--flohe-rail-width); flex: none; position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: var(--flohe-space-1); padding: var(--flohe-space-4); background: var(--flohe-surface); border-right: var(--flohe-line) solid var(--flohe-border); }
.fl-brand { display: inline-flex; align-items: center; padding: var(--flohe-space-2); }
.fl-brand img { display: block; width: var(--flohe-logo-width); max-width: 100%; height: auto; }
.fl-rail > a { display: flex; align-items: center; gap: var(--flohe-space-3); min-height: var(--flohe-control-height); padding: var(--flohe-space-2) var(--flohe-space-3); border-radius: var(--flohe-radius-sm); color: var(--flohe-muted); }
.fl-rail > a:hover { background: var(--flohe-raised); text-decoration: none; color: var(--flohe-text); }
.fl-rail > a[aria-current=page] { background: var(--flohe-raised); color: var(--flohe-info); box-shadow: inset var(--flohe-focus-width) 0 var(--flohe-primary); }
.fl-count { margin-left: auto; padding: 0 var(--flohe-space-2); border-radius: var(--flohe-radius-pill); background: var(--flohe-bg); font-size: var(--flohe-text-small); }
.fl-count.attn { color: var(--flohe-warning); }
.fl-rail-group, .fl-eyebrow { color: var(--flohe-muted); font-size: var(--flohe-text-tiny); text-transform: uppercase; letter-spacing: .06em; }
.fl-rail-group { padding: var(--flohe-space-4) var(--flohe-space-3) var(--flohe-space-1); }
.fl-spacer { flex: 1; }
.fl-rail-user { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flohe-space-2); padding-top: var(--flohe-space-4); margin-top: var(--flohe-space-3); border-top: var(--flohe-line) solid var(--flohe-border); }
.fl-rail-project { display: grid; gap: var(--flohe-space-2); padding: var(--flohe-space-3) var(--flohe-space-2) var(--flohe-space-4); }
.fl-rail-project strong { font-size: var(--flohe-icon-small); }
/* A tester's one project, in a box the size of the picker's select: the same height, padding, border and line, so
   the rail below it starts where it would with a choice to make. line-height normal because browsers draw a select
   with it whatever the page says, and a line more above and below because Chromium draws one inside a select's
   padding; with the body's 1.6 and the bare padding this box was 2-3px off the select it stands in for. */
.fl-rail-project .fl-rail-project-fixed { display: flex; align-items: center; min-height: var(--flohe-control-height); padding: calc(var(--flohe-space-3) + var(--flohe-line)) var(--flohe-radius); border: var(--flohe-line) solid var(--flohe-control-border); border-radius: var(--flohe-radius-sm); background: var(--flohe-bg); font-size: inherit; line-height: normal; overflow-wrap: anywhere; }
.fl-pane { min-width: 0; flex: 1; }
.fl-topbar { position: sticky; top: 0; z-index: var(--flohe-layer-header); display: flex; flex-wrap: wrap; align-items: center; gap: var(--flohe-space-4); padding: var(--flohe-space-6) var(--flohe-space-8); background: var(--flohe-surface); border-bottom: var(--flohe-line) solid var(--flohe-border); }
.fl-topbar > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.fl-topbar h1 { font-size: var(--flohe-text-title); margin-top: var(--flohe-space-1); }
.fl-pane-body { padding: var(--flohe-space-8); }
.fl-pane-body > * + *, .fl-stack-6 > * + * { margin-top: var(--flohe-space-6); }
.fl-pane-body h2 { font-size: var(--flohe-icon-size); }
.fl-pane-body h3 { font-size: var(--flohe-icon-small); }
.fl-card.fl-panel { padding: 0; overflow: hidden; min-width: 0; }
.fl-card-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flohe-space-3); padding: var(--flohe-space-6); border-bottom: var(--flohe-line) solid var(--flohe-border); }
.fl-card-h h3 { font-size: var(--flohe-icon-small); }
.fl-card-b { padding: var(--flohe-space-6); }
.fl-card-b > * + * { margin-top: var(--flohe-space-4); }
.fl-card-b.fl-flush { padding: 0; }
.fl-card-note { padding: var(--flohe-space-4) var(--flohe-space-6); border-bottom: var(--flohe-line) solid var(--flohe-border); color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-card-b.fl-flush > .fl-table-wrap { border: 0; border-radius: 0; }
.fl-table-wrap { position: relative; }
.fl-table { white-space: normal; }
.fl-table tbody th { font-size: inherit; font-weight: 500; color: inherit; background: transparent; text-transform: none; letter-spacing: normal; }
.fl-table tbody tr:last-child th { border-bottom: 0; }
.fl-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-row-actions { white-space: nowrap; }
.fl-row-actions > * { display: inline-flex; margin-right: var(--flohe-space-2); }
.fl-small { font-size: var(--flohe-text-small); }
.fl-key { font: var(--flohe-text-small) var(--flohe-mono); color: var(--flohe-info); }
.fl-cell-2 { display: grid; gap: var(--flohe-space-1); padding: var(--flohe-space-1) 0; }
.fl-sub { color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--flohe-column-min)), 1fr)); gap: var(--flohe-space-4); margin-bottom: var(--flohe-space-6); }
.fl-tile { display: flex; flex-direction: column; gap: var(--flohe-space-3); min-width: 0; }
.fl-tile-k { display: flex; align-items: center; gap: var(--flohe-space-2); color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-tile-v { font-size: var(--flohe-text-metric); font-weight: 500; line-height: 1.2; }
.fl-tile-f { font-size: var(--flohe-text-small); color: var(--flohe-muted); }
.fl-is-attn { border-color: var(--flohe-warning); }
.attn { color: var(--flohe-warning); }
.muted { color: var(--flohe-muted); }
.fl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flohe-space-3); margin-bottom: var(--flohe-space-6); }
.fl-input-icon { position: relative; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.fl-input-icon > .fl-icon { position: absolute; left: var(--flohe-space-3); pointer-events: none; color: var(--flohe-muted); }
.fl-input-icon > .fl-input { padding-left: var(--flohe-input-icon-inset); }
a.fl-chip { min-height: var(--flohe-control-compact); padding: var(--flohe-space-1) var(--flohe-space-3); color: var(--flohe-muted); }
a.fl-chip:hover { text-decoration: none; border-color: var(--flohe-control-border); }
a.fl-chip[aria-current=true] { color: var(--flohe-info); border-color: var(--flohe-primary); }
.fl-chip.fl-clear { border-style: dashed; }
.fl-n { font: var(--flohe-text-small) var(--flohe-mono); }
.fl-field { display: grid; gap: var(--flohe-space-2); }
.fl-field > .fl-label { margin-bottom: 0; }
.fl-field .fl-hint { margin: 0; }
.fl-choice { align-items: flex-start; }
.fl-choice input { margin: var(--flohe-space-1) 0 0; }
.fl-choice .fl-hint { display: block; margin: var(--flohe-space-1) 0 0; }
.fl-choice + .fl-choice { margin-top: var(--flohe-space-2); }
.fl-fieldset > legend { color: var(--flohe-text); }
.fl-error { display: flex; align-items: flex-start; gap: var(--flohe-space-2); font-size: var(--flohe-text-small); }
.fl-req { color: var(--flohe-error); }
.fl-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--flohe-space-3); }
.fl-badge { align-items: center; gap: var(--flohe-space-2); line-height: 1.4; color: var(--flohe-muted); }
.fl-badge.success { color: var(--flohe-success); }
.fl-dot { display: inline-block; width: var(--flohe-dot-size); height: var(--flohe-dot-size); border-radius: 50%; flex: none; background: currentColor; }
.fl-alert-body { min-width: 0; }
.fl-alert-body > * + * { margin-top: var(--flohe-space-2); }
.fl-alert > .fl-icon { color: var(--flohe-info); }
.fl-alert.success > .fl-icon { color: var(--flohe-success); }
.fl-alert.warning > .fl-icon { color: var(--flohe-warning); }
.fl-alert.danger > .fl-icon { color: var(--flohe-error); }
.fl-detail { display: grid; grid-template-columns: minmax(0, 1fr) var(--flohe-detail-width); }
.fl-detail-main { padding: var(--flohe-space-6); min-width: 0; display: grid; align-content: start; gap: var(--flohe-space-6); }
.fl-detail-aside { min-width: 0; padding: var(--flohe-space-6); border-left: var(--flohe-line) solid var(--flohe-border); background: var(--flohe-raised); }
.fl-block > h4, .fl-aside-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flohe-space-2); color: var(--flohe-muted); font-size: var(--flohe-text-small); margin-bottom: var(--flohe-space-3); }
.fl-block-body > * + * { margin-top: var(--flohe-space-4); }
.fl-block-body.fl-flush { padding: 0; overflow: hidden; }
.fl-rep-head { padding-bottom: var(--flohe-space-6); border-bottom: var(--flohe-line) solid var(--flohe-border); }
.fl-rep-title, .fl-rep-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flohe-space-3); }
.fl-rep-meta { margin-top: var(--flohe-space-3); color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-sep { color: var(--flohe-control-border); }
.fl-props { margin: 0; display: grid; gap: var(--flohe-space-2); }
.fl-props dt { color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-props dd { margin: 0 0 var(--flohe-space-3); overflow-wrap: anywhere; }
.fl-props dd > .fl-muted { display: block; }
.fl-aside-h { margin-top: var(--flohe-space-6); padding-top: var(--flohe-space-4); border-top: var(--flohe-line) solid var(--flohe-border); }
.fl-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--flohe-space-3); }
.fl-metric { background: var(--flohe-raised); padding: var(--flohe-space-4); min-width: 0; }
.fl-k { display: block; color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-v { display: block; font-size: var(--flohe-icon-small); font-weight: 600; margin-top: var(--flohe-space-1); }
.fl-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Keep the working agreement beside the conversation; background stays in its own column. */
.fl-report-workspace { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--flohe-space-4); align-items: start; }
/* The report's history and details: a button until opened, then the width the column used to take all the time. */
.fl-aside[open] { width: var(--flohe-detail-width); }
.fl-aside > summary { list-style: none; }
.fl-aside > summary::-webkit-details-marker { display: none; }
.fl-aside[open] > summary { margin-bottom: var(--flohe-space-4); }
.fl-header-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flohe-space-2); max-width: var(--flohe-detail-width); }
.fl-report-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--flohe-space-4); align-items: start; }
.fl-report-workspace > *, .fl-report-work > * { min-width: 0; }
.fl-report-work .fl-card-b, .fl-report-workspace aside .fl-card-b { overflow-wrap: anywhere; }
/* A report reads at the queue's density: body text a step down from the page default, card titles at body size,
   and tighter padding, so three columns of conversation, proposal and background fit without scrolling past
   white space. Both report pages - the refined one and the earlier workflow's. */
.fl-report-workspace, .fl-detail { font-size: var(--flohe-text-body); }
.fl-report-workspace .fl-card-h, .fl-report-workspace .fl-card-b:not(.fl-flush) { padding: var(--flohe-space-4); }
.fl-report-workspace .fl-card-h h3, .fl-detail .fl-card-h h3 { font-size: var(--flohe-text-body); font-weight: 600; }
.fl-report-workspace .fl-block-body { padding: var(--flohe-space-4); }
.fl-report-workspace .fl-card-note { padding: var(--flohe-space-3) var(--flohe-space-4); }
.fl-report-workspace .fl-msg { padding: var(--flohe-space-3) 0; }
.fl-detail-main, .fl-detail-aside { padding: var(--flohe-space-4); }
.fl-detail-main { gap: var(--flohe-space-4); }
/* A fill panel: no taller than the screen below the top bar, its body scrolling, its footer staying put. */
.fl-card.fl-fill { display: flex; flex-direction: column; max-height: calc(100dvh - var(--flohe-topbar) - var(--flohe-space-8) - var(--flohe-space-4)); }
.fl-fill > .fl-card-h, .fl-fill > .fl-card-note { flex: none; }
.fl-fill > .fl-card-b { flex: 1 1 auto; min-height: var(--flohe-space-16); overflow-y: auto; overscroll-behavior: contain; }
/* The footer scrolls itself rather than being cut off when it outgrows the panel - text zoomed, a short screen, a
   long list of attached files - so nothing in it is ever out of reach. */
.fl-fill > .fl-card-f { flex: none; max-height: 60dvh; overflow-y: auto; }
/* A panel clips what is drawn outside it, so a focus ring inside a scrolling area is drawn inside its edge. */
.fl-fill > .fl-card-b:focus-visible, .fl-chat .fl-chat-messages:focus-visible { outline-offset: calc(-1 * var(--flohe-focus-width)); }
/* A gap, not margins: a gap skips what is not drawn - an empty notice area, a closed dialog - where a margin on the
   element after it still left the space. */
.fl-card-f { display: flex; flex-direction: column; gap: var(--flohe-space-3); padding: var(--flohe-space-4); border-top: var(--flohe-line) solid var(--flohe-border); }
.fl-card-f > :empty, .fl-feedback:not(:has(*)) { display: none; }
/* An empty send status takes no room, but stays in the page rather than hidden, so the words it gets are announced. */
.fl-card-f [data-send-status]:empty { position: absolute; }
/* The conversation is always that tall, so the composer sits at the bottom of the screen; its log does the scrolling. */
.fl-card.fl-fill.fl-chat { height: calc(100dvh - var(--flohe-topbar) - var(--flohe-space-8) - var(--flohe-space-4)); min-height: var(--flohe-chat-height); }
.fl-chat > .fl-card-b { display: flex; flex-direction: column; overflow: hidden; }
.fl-chat .fl-chat-messages { flex: 1 1 auto; min-height: 0; max-height: none; padding: var(--flohe-space-4); }
/* Side by side, the summary is as tall as the conversation and its footer as tall as the composer's, so the two
   scrolling areas start and end on the same lines. The message box grows to fill its footer; a footer that outgrows
   that height - files attached, a notice - shortens only its own panel's scrolling area, and only while it lasts. */
.fl-report-work .fl-card.fl-fill { height: calc(100dvh - var(--flohe-topbar) - var(--flohe-space-8) - var(--flohe-space-4)); min-height: var(--flohe-chat-height); }
.fl-report-work .fl-fill > .fl-card-f { min-height: var(--flohe-panel-foot); }
.fl-chat > .fl-card-f > form[data-conversation], .fl-chat .fl-field:has(> .fl-composer), .fl-chat .fl-composer { display: flex; flex-direction: column; flex: 1 1 auto; }
.fl-chat .fl-composer > .fl-input { flex: 1 1 auto; }
.fl-chat-messages { max-height: var(--flohe-chat-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--flohe-space-2); }
.fl-dropzone { padding: var(--flohe-space-4); border: var(--flohe-line) dashed var(--flohe-border); border-radius: var(--flohe-radius); }
.fl-dropzone[data-dragging=true] { border-color: var(--flohe-focus); background: var(--flohe-raised); }
.fl-dropzone[aria-busy=true] { opacity: .7; }
/* The conversation's composer: one box holding the words, the files going with them and a row of small buttons.
   The box takes the focus ring and the drop highlight, so it reads as one control. */
.fl-composer { border: var(--flohe-line) solid var(--flohe-control-border); border-radius: var(--flohe-radius-sm); background: var(--flohe-bg); }
.fl-composer:focus-within { outline: var(--flohe-focus-width) solid var(--flohe-focus); outline-offset: var(--flohe-line); }
form[data-dragging=true] .fl-composer { border-color: var(--flohe-focus); background: var(--flohe-raised); }
form[aria-busy=true] .fl-composer { opacity: .7; }
.fl-composer > .fl-input { display: block; width: 100%; min-height: var(--flohe-control-large); padding: var(--flohe-space-3) var(--flohe-space-3) var(--flohe-space-1); border: 0; background: transparent; color: var(--flohe-text); font: inherit; resize: vertical; }
.fl-composer > .fl-input:focus-visible { outline: none; }
.fl-composer-files { display: flex; flex-wrap: wrap; gap: var(--flohe-space-1); margin: 0; padding: 0 var(--flohe-space-3); color: var(--flohe-muted); font-size: var(--flohe-text-small); }
/* What the next message is sent as, when a button put the composer in its mode. */
.fl-composer-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--flohe-space-2); padding: var(--flohe-space-1) var(--flohe-space-1) var(--flohe-space-1) var(--flohe-space-3); border-left: var(--flohe-focus-width) solid var(--flohe-primary); border-radius: var(--flohe-radius-sm); background: var(--flohe-raised); font-size: var(--flohe-text-small); }
.fl-composer-mode[hidden] { display: none; }
/* A closed box's paperclip reads as closed too: its file input is disabled, so the label does nothing. */
.fl-composer-file:disabled + label { opacity: .45; pointer-events: none; }
/* Collapsed while empty, never display: none - a live region that is not rendered when its words arrive is not read. */
.fl-composer-files:empty { padding: 0; }
.fl-composer-files > .fl-chip { max-width: 100%; color: var(--flohe-text); }
.fl-composer-files > .fl-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-composer-bar { position: relative; display: flex; align-items: center; gap: var(--flohe-space-1); padding: var(--flohe-space-1); }
.fl-composer-bar > .fl-button.icon-only { width: var(--flohe-control-compact); padding: 0; }
.fl-composer-keys { margin-left: auto; min-width: 0; text-align: right; }
.fl-composer-keys[hidden] { display: none; }
.fl-composer-keys[hidden] + .fl-button { margin-left: auto; }
/* Once the script runs, the file input stays in the tab order and is named by its paperclip label; only the native
   control is hidden, because the chips now say what is attached. Without the script the native control shows it. */
.fl-composer[data-ready=true] .fl-composer-file { position: absolute; min-height: 0; padding: 0; border: 0; width: var(--flohe-line); height: var(--flohe-line); opacity: 0; overflow: hidden; }
.fl-composer[data-ready=true] .fl-composer-file:focus-visible + label { outline: var(--flohe-focus-width) solid var(--flohe-focus); }
/* The paperclip of a closed composer (ADR 0020) does nothing, so it must not look as if it does. */
.fl-composer-file:disabled + label { opacity: .5; pointer-events: none; }
.fl-output { margin: 0; padding: var(--flohe-space-4); border: var(--flohe-line) solid var(--flohe-border); border-radius: var(--flohe-radius-sm); background: var(--flohe-bg); color: var(--flohe-text); overflow: auto; font: var(--flohe-text-small)/1.6 var(--flohe-mono); }
.fl-brief { font: var(--flohe-text-small)/1.6 var(--flohe-mono); white-space: pre; overflow-x: auto; }
.fl-fold { border: var(--flohe-line) solid var(--flohe-border); border-radius: var(--flohe-radius-sm); background: var(--flohe-surface); }
.fl-fold + .fl-fold { margin-top: var(--flohe-space-3); }
.fl-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flohe-space-2); padding: var(--flohe-space-4); cursor: pointer; list-style: none; }
.fl-fold > summary::-webkit-details-marker { display: none; }
.fl-fold > summary:hover { background: var(--flohe-raised); }
.fl-fold[open] > summary > .fl-icon { transform: rotate(90deg); }
.fl-fold-b { padding: 0 var(--flohe-space-4) var(--flohe-space-4); }
.fl-fold-b > * + * { margin-top: var(--flohe-space-3); }
.fl-note-aside { margin-left: auto; color: var(--flohe-muted); font-size: var(--flohe-text-small); }
.fl-msg { display: flex; gap: var(--flohe-space-3); padding: var(--flohe-space-4) 0; border-bottom: var(--flohe-line) solid var(--flohe-border); }
.fl-msg:first-child { padding-top: 0; }
.fl-msg:last-child { border-bottom: 0; padding-bottom: 0; }
.fl-msg-b { min-width: 0; flex: 1; }
.fl-msg-w { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flohe-space-3); margin-bottom: var(--flohe-space-1); }
.fl-msg-w time { font-size: var(--flohe-text-small); color: var(--flohe-muted); }
/* A reply being written: three dots that rise in turn, or fade in turn when motion is reduced (below). */
.fl-typing { display: inline-flex; align-items: center; gap: var(--flohe-space-1); min-height: var(--flohe-space-6); }
.fl-typing span { width: var(--flohe-space-2); height: var(--flohe-space-2); border-radius: var(--flohe-radius-pill); background: var(--flohe-muted); animation: fl-typing var(--flohe-typing-duration) ease-in-out infinite; }
.fl-typing span:nth-child(2) { animation-delay: var(--flohe-typing-step); }
.fl-typing span:nth-child(3) { animation-delay: calc(var(--flohe-typing-step) * 2); }
@keyframes fl-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(calc(var(--flohe-space-1) * -1)); } }
/* Reduced motion: nothing moves, but the dots still fade in turn - still dots read as nothing happening, which is
   what a tester with Windows' animation effects off saw. A slow change of opacity is not motion. */
@keyframes fl-typing-fade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-typing span { animation-name: fl-typing-fade; } }
.fl-timeline { margin: 0; padding: 0; list-style: none; }
.fl-timeline li { padding: 0 0 var(--flohe-space-4) var(--flohe-space-4); border-left: var(--flohe-line-strong) solid var(--flohe-control-border); }
.fl-timeline li.now { border-left-color: var(--flohe-primary); }
.fl-timeline li.danger { border-left-color: var(--flohe-error); }
.fl-timeline li.success { border-left-color: var(--flohe-success); }
.fl-timeline li:last-child { padding-bottom: 0; }
.fl-when { color: var(--flohe-muted); font-size: var(--flohe-text-tiny); }
.fl-what { overflow-wrap: anywhere; font-size: var(--flohe-text-small); }
.fl-content-steps { margin: 0; padding-left: var(--flohe-space-6); }
.fl-content-steps li + li { margin-top: var(--flohe-space-3); }
.fl-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--flohe-column-min)), 1fr)); gap: var(--flohe-space-4); }
.fl-shots figure { margin: 0; }
.fl-shots img { display: block; width: 100%; height: var(--flohe-attachment-height); object-fit: cover; border: var(--flohe-line) solid var(--flohe-border); border-radius: var(--flohe-radius-sm); }
.fl-shots figcaption { font-size: var(--flohe-text-small); color: var(--flohe-muted); overflow-wrap: anywhere; }
.fl-person { display: flex; align-items: center; gap: var(--flohe-space-3); }
.fl-livedot { display: inline-flex; align-items: center; gap: var(--flohe-space-2); color: var(--flohe-success); font-size: var(--flohe-text-small); }
.fl-livedot.off { color: var(--flohe-error); }
.fl-skip { position: fixed; left: var(--flohe-space-4); top: var(--flohe-space-4); transform: translateY(-200%); z-index: 100; padding: var(--flohe-space-3); background: var(--flohe-surface); border: var(--flohe-line) solid var(--flohe-control-border); border-radius: var(--flohe-radius-sm); }
.fl-skip:focus { transform: none; }
/* CSS custom properties cannot be used in media-query conditions. */
@media (max-width: 1200px) {
  .fl-report-workspace { grid-template-columns: minmax(0, 1fr); }
  .fl-aside[open] { width: auto; }
}
@media (max-width: 760px) {
  .fl-report-work { grid-template-columns: minmax(0, 1fr); }
  /* Stacked on a phone, a summary scrolling inside a page that scrolls is one scroll too many. */
  .fl-report-work .fl-card.fl-fill:not(.fl-chat) { height: auto; min-height: 0; max-height: none; }
  .fl-fill:not(.fl-chat) > .fl-card-b { overflow-y: visible; }
  .fl-report-work .fl-fill > .fl-card-f { min-height: 0; }
}
@media (max-width: 960px) {
  .fl-frame { flex-direction: column; }
  .fl-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: var(--flohe-line) solid var(--flohe-border); }
  .fl-rail-project { flex: 1; min-width: var(--flohe-column-min); }
  .fl-spacer, .fl-rail-group { display: none; }
  .fl-rail-user { border: 0; padding: 0; margin: 0; }
  .fl-detail { grid-template-columns: minmax(0, 1fr); }
  .fl-detail-aside { border-left: 0; border-top: var(--flohe-line) solid var(--flohe-border); }
}
@media (max-width: 600px) {
  .fl-pane-body, .fl-topbar { padding: var(--flohe-space-4); }
  .fl-card-h, .fl-card-b, .fl-detail-main, .fl-detail-aside { padding: var(--flohe-space-4); }
  .fl-metrics { grid-template-columns: minmax(0, 1fr); }
  .fl-actions > .fl-button { max-width: 100%; }
}

.fl-icon.lg { width: var(--flohe-space-6); height: var(--flohe-space-6); }
.fl-empty h4 { margin: var(--flohe-space-3) 0 var(--flohe-space-half); font-size: var(--flohe-icon-small); }